[WordPress] wp_get_archivesをカスタマイズし年と月が対応したテーブルを作る

公開
更新日

スポンサーリンク

WordPressのwp_get_archives()を使って表示するアーカイブリストは以下の形式のものが多いと思います。

  • 2000年3月(3)
  • 2000年2月(5)
  • 2000年1月(4)

この他に年別や日別、あるいは番号付リストやセレクトリストでマーキングしたものがwp_get_archives()を使ったアーカイブリストのバリエーションになるでしょうか。

wp_get_archives()は便利な関数なのですが、指定できる形式に限りがあり、また受け取れる値がフォーマット済みの文字列のみなので、どうしてもカスタマイズ時の柔軟性に欠けます。

そこで、wp_get_archives()を利用して以下の様な年と月を表にしたアーカイブリストを作ってみましたので、その作成手順を記しておきます。作成手順は若い年が先に来る昇順ですが、リクエストがありましたので直近の年が先に来る降順も追記しました。

WordPress 年月アーカイブテーブル

この表のポイントは投稿のなかった月も表示してあること、年部分は年別アーカイブページヘのリンクが、月部分は月別アーカイブページへのリンクがあることです。初投稿が行われた年の1月から表示を開始し、最終投稿があった年の12月までが表になっています。初投稿が2011年5月なら2011年1月から、最終投稿が2012年9月なら2012年12月までが表示されるということです。順番は、WordPressでよくある直近が上に来るスタイルではなく、古いものから順に表示される昇順にしています。

昇順

コードに関しては以下の通りです。これを表示させたいところにペーストすれば上記のスタイルの表が出力されます。

<?php
  //customでリンクの前後につけるhtmlタグが指定可能に
  //afterでセパレーターを渡す after=|
  $html = wp_get_archives('type=monthly&show_post_count=1&format=custom&after=|&echo=0');
  
  //セパレーターで配列に分割
  $arr = explode("|", $html);
  
  //配列を逆転させる
  $arr = array_reverse ( $arr );
  
  //リストの初年度と最終年を取得
  //そのままだと文字列の前後に半角スペースが入っているのでtrimで詰める
  $firstyear = substr(trim(strip_tags( $arr[1] )), 0, 4);
  $lastyear = substr(trim(strip_tags( $arr[ count($arr)-1 ] )), 0, 4);
  
  $cnt = 1;
  $tbody = null;
  for( $year=$firstyear;$year<=$lastyear;$year++ ){
    $tbody .= "<tr><th><a href='".get_bloginfo('url')."/{$year}/'>{$year}年</a></th>";
    for( $month=1;$month<=12;$month++ ){
      if( !preg_match( "/年".$month."月/u", $arr[$cnt] ) ){
        $tbody .= "<td>{$month}月 (0)</td>";
      }else{
        $tbody .= "<td>".preg_replace("/\d{4}年/u", "", trim($arr[$cnt]))."</td>";
        $cnt++;
      }
    }
    $tbody .= "</tr>";
  }
  echo "<table><tbody>{$tbody}</tbody></table>";
?>

4行目のwp_get_archives()で月別リストを呼び出しています。ポイントはformat=customafter=|です。format=customとすることで、デフォルトのhtmlタグの代わりに、afterとbeforeでリストの前後に付ける文字列が指定可能になります。ここではafter=|とすることで、セパレータを指定しています。これは、後で出力された文字列を配列に分割するためです。echo=0は出力させずに文字列で結果を受け取るための引数です。

7行目でセパレータで配列に分割、10行目でその配列の順番を逆転させています。wp_get_archives()は直近のものを上に持ってくるので、時系列を昇順表示するためです。

14行目と15行目で初年度と最終年の値を得ています。初年度を$arr[1]から得ているのは、$arr[0]はnullになっているからです。(after=|を指定したことで、wp_get_archives()が出力する文字列の最後にセパレータが付いてしまい、explode()した際に、配列の最後がnullになっています。)

ここまでで準備は整ったので、年と月の2回for文を回し、表を作成します。外側のfor文が$firstyearから始まり$lastyearで終わり、“<tr><th>xxxx年</th>略</tr>”の部分を作成します。

内側のfor文は1月から12月までの部分です。$cntでカウントを取っているのは、この表では投稿のなかった月も表示するためです。22行目のif文で、投稿があったかなかったかを確認し、なかった場合は「x月(0)」という文字列を生成しています。投稿があった場合は配列の該当月から年を取って<td>で囲み、カウンタを1つ進めています。

きちんとするのなら、wp_get_archives()をfunctionファイルにコピーして、文字列化される前の値からテーブルを作った方が無駄が無くて良いのですが、今回は出力後の文字列を置き換えるやり方を選んだということで。

スタイルは以下のものを適用しています。

table th{font-size:14px;}
table th>a{color:#04F;}
table td{padding:2px 3px;color:#999;font-size:11px;}
table td>a{font-size:14px;color:#04F;}

tdに小さめのフォントサイズと薄い色を適用しておき、そのあとでaに大きめのフォントサイズとリンクカラーを適用することで、投稿のない月を目立たないようにしています。

実際に使う場合、別途tableにIDを与えるなどして、他のtableに影響が及ばないようにしてください。

降順

こちらは直近の年が先に来る降順バージョンです。

<table>
<tbody>
<?php
  //customでリンクの前後につけるhtmlタグが指定可能に
  //afterでセパレーターを渡す after=|
  $html = wp_get_archives('type=monthly&show_post_count=1&format=custom&after=|&echo=0');
  
  //セパレーターで配列に分割
  $arr = explode("|", $html);
  
  //リストの初年度と最終年を取得
  //そのままだと文字列の前後に半角スペースが入っているのでtrimで詰める
  $lastyear = substr(trim(strip_tags( $arr[0] )), 0, 4);
  $firstyear = substr(trim(strip_tags( $arr[ count($arr)-2 ] )), 0, 4);
  
  $cnt = 0;
  $tbody = null;
  for($year=$lastyear;$year>=$firstyear;$year-- ){
   $tbody .= "<tr><th><a href='".get_bloginfo('url')."/{$year}/'>{$year}年</a></th>";
   
   $tr = '';
   for( $month=12;$month>0;$month-- ){
    if( !preg_match( "/年".$month."月/u", $arr[$cnt] ) ){
     $tr = "<td>{$month}月 (0)</td>" . $tr;
    }else{
     $tr = "<td>".preg_replace("/\d{4}年/u", "", trim($arr[$cnt]))."</td>" . $tr;
     $cnt++;
    }
   }
   $tbody .= $tr . "</tr>";
  }
  echo $tbody;
?>
</tbody>
</table>

スポンサーリンク


Comment


  1. くまちゃん : 投稿日:2016年2月9日 7:37 PM

    参考にさせていただいてます。
    ちなみに、この状態で新しい年から古い年に表示されるようにするにはどうすればよいでしょうか?

  2. ななし : 投稿日:2016年7月20日 8:49 PM

    この状態で新しい年から古い年に表示されるようにするにはどうすればよいでしょうか?

  3. たぇ : 投稿日:2016年7月24日 11:39 PM

    新しい年から古い年に表示されるようにするにはどうすればよいですか?
    困ってます…

  4. 管理人 : 投稿日:2016年8月7日 11:50 PM

    長らく放置してすいません…
    新しい年から古い年に表示されるバージョンを追加しました。