WordPressの月別アーカイブをコンパクトに出力する

wp_get_archives() 関数だとずらっと並んでしまう月別アーカイブを、1年1行ずつコンパクトに出力する方法のメモです。便利なプラグインもあるので自力でやることでもないのですが、せっかくなので書き残しておきます。

こんな形に

<ul><?php wp_get_archives('show_post_count=1'); ?></ul>

よくある形でこのように書くと、

左図のように下にながーくなってしまうのですが、これを右図のような形に実装してみます。

• All Things Seen and Unseen » Compact Archives

先日までこのプラグインを使わせてもらっていたのですが、別目的で作った関数を使って実装できることに気づいたので、もったいないと思って自分で書くことにしました。

でも、月を英字にもできるし、シンプルでわかりやすいプラグインです。別に自力で書く必要もないので、PHP苦手だったら無理せずとも、上記のプラグイン、お勧めです。

実装

目指すHTML

こういう形のHTMLを出力するためのPHPを書きます。

<div id="ArchivesArea">
<dl>
	<dt><a href="http://sample.com/2016/" title="15件の投稿">2016</a>:</dt>
		<dd><a href="http://sample.com/2016/01/" title="2件の投稿">01</a></dd>
		<dd>02</dd>
		<dd><a href="http://sample.com/2016/03/" title="1件の投稿">03</a></dd>
		<dd>04</dd>
		<dd><a href="http://sample.com/2016/05/" title="1件の投稿">05</a></dd>
		<dd><a href="http://sample.com/2016/06/" title="2件の投稿">06</a></dd>
		<dd><a href="http://sample.com/2016/07/" title="2件の投稿">07</a></dd>
		<dd><a href="http://sample.com/2016/08/" title="3件の投稿">08</a></dd>
		<dd><a href="http://sample.com/2016/09/" title="4件の投稿">09</a></dd>
		<dd>10</dd>
		<dd>11</dd>
		<dd>12</dd>
	<dt><a href="http://sample.com/2015/" title="4件の投稿">2015</a>:</dt>
		<dd>01</dd>
		<dd>02</dd>
		<dd>03</dd>
		<dd>04</dd>
		<dd>05</dd>
		<dd>06</dd>
		<dd><a href="http://sample.com/2015/07/" title="1件の投稿">07</a></dd>
		<dd><a href="http://sample.com/2015/08/" title="1件の投稿">08</a></dd>
		<dd>09</dd>
		<dd>10</dd>
		<dd><a href="http://sample.com/2015/11/" title="1件の投稿">11</a></dd>
		<dd><a href="http://sample.com/2015/12/" title="1件の投稿">12</a></dd>
	<!-- 一番古い投稿年まで続く -->
</dl>
</div><!-- /#ArchivesArea -->

定義リストにしてみました。現在の年から一番古い投稿の年まで、年月アーカイブにリンクさせます。投稿がないところはただのテキストです。

functions.php

それではここから実際に書くコード。functions.phpでは、こちらの記事に書いたのと同じものを使います。

• WordPressの月別アーカイブを年単位で開閉させる

指定した年の投稿数、指定した年月の投稿数、それと一番古い記事の投稿年を取得する関数です。

任意のテンプレートファイル

上の関数を使って、アーカイブリストを出したい場所に以下を書きます。

<div id="ArchivesArea">
<dl>
<?php
$flg = true; //年の切替フラグ
$acv_str = ""; //出力文字列
$year = idate('Y'); //本日の年
$month = 1; //1月
$oldest_year = get_oldest_year(); //一番古い投稿日の年
while ( $year >= $oldest_year ) { //一番古い投稿年を指定年が下回るまでループ
	//年見出し出力
	if ( $flg == true ){ //年切替フラグが立っていたら
		$year_archives_num = get_year_archives_num( $year ); //指定年の投稿数を取得
		if ( $year_archives_num > 0 ) { //投稿があったらアーカイブリンクを生成
			$acv_str .= "\t".'<dt><a href="'.home_url('/').$year.'/" title="'.$year_archives_num.'件の投稿">'.$year."</a>:</dt>\n";
		} else { //指定月の投稿がなかったら文字列だけ
			$acv_str .= "\t<dt>".$year.":</dt>\n";
		}
		$flg = false; //年見出しが出現したら年切替フラグを倒しておく
	}
	//月アーカイブ出力
	if ( $flg == false ){ //年切替フラグが倒れていたら
		$month_archives_num = get_month_archives_num( $year, $month ); //指定年月の投稿数を取得
		if ( $month_archives_num > 0 ) { //指定月の投稿があったらアーカイブリンクを生成
			$acv_str .= "\t\t".'<dd><a href="'.home_url('/').$year.'/'.str_pad($month, 2, 0, STR_PAD_LEFT).'/" title="'.$month_archives_num.'件の投稿">'.str_pad($month, 2, 0, STR_PAD_LEFT)."</a></dd>\n";
		} else { //指定月の投稿がなかったら文字列だけ
			$acv_str .= "\t\t<dd>".str_pad($month, 2, 0, STR_PAD_LEFT)."</dd>\n";
		}
		$month++; //1月進む
		if ( $month > 12 ){ //13月になってしまったら
			$year--; //1年前へ
			$month = 1; //1月へ
			$flg = true; //年切替フラグを立てる
		}
	}
}
echo $acv_str; //出力
?>
</dl>
</div><!-- /#ArchivesArea -->

14, 16行が年、24, 26行が月を生成しているところです。月を数値じゃなくてJanとかにすることもやろうと思えばできますが…。もしリクエストがあるようならやりますのでコメントくださいw

CSS

#ArchivesArea dt, #ArchivesArea dd{
	float: left;
}
#ArchivesArea dt{
	clear: both;
	font-weight: bold;
}
#ArchivesArea dd{
	margin-left: 4px;
}

1年で1行になるように並べます。あとはお好みで。以上ですー！