前回の続き。

せっかくカテゴリをカスタマイズしたので、アーカイブもそれに合わせてデザイン変更。

こんな感じ。

問題はWordPressでアーカイブを取得する関数wp_get_archives。
こいつはほぼHTMLの形で出力されてしまうため、恐ろしくカスタマイズしづらい。
しょうがないので文字列解析で分解して、書式を書き直すための関数と
それを出力するためのショートコードを作成した。

	// 月別アーカイブ一覧
	function echo_list_archives() {
		// 年別アーカイブ取得
		$archives_year = wp_get_archives('type=yearly&show_post_count=0&format="option"&echo=0');

		// 年毎に分割
		$archives_year_array = split("\n", $archives_year);
		foreach ($archives_year_array as $archive_year_tag) {
			// 要素ごとに分解
			preg_match("/(<a.*?>)(\d{4})(<.*?>)/", $archive_year_tag, $elements);
			$archives_year_map[$elements[2]] = $archive_year_tag;
		}
		
		// 月別アーカイブ取得
		$archives_month = wp_get_archives('type=monthly&show_post_count=1&format="option"&echo=0');
		
		// 月毎に分割
		$archives_month_array = explode("\n", $archives_month);
		
		// Buffer output
		ob_start();
		?>
		
		<div class="widget sidebar-widget widget_archive">
			<ul>
		
		<?php
		$before_year = "";
		foreach ($archives_month_array as $archive_month_tag) {
			
			if ($archive_month_tag == "") {
				// 最後に空白のゴミが入るのでスキップ
				break;
			}
			
			// 要素毎に分解
			preg_match_all("/<.*?>/", $archive_month_tag, $tags);
			preg_match("/(\d{4})年/", $archive_month_tag, $year);
			preg_match("/(\d+)月/",   $archive_month_tag, $month);
			preg_match("/\((\d+)\)/", $archive_month_tag, $count);
			
			// 年が変わったら年を出力
			if ($year[1] != $before_year) {
				printf("<h6>%s</h6>\n", $archives_year_map[$year[1]]);
				$before_year = $year[1];
			}
			printf("<li>%s%02d月<span class='month_count'>%d</span></a></li>\n", $tags[0][0], $month[1], $count[1]);
		}
		?>
		
			</ul>
		</div>
		
		<?php
		// clear buffer
		$output = ob_get_clean();
		return $output;

	}
	
	// 月別アーカイブ一覧を表示するショートコードを作成
	add_shortcode('list_archives', 'echo_list_archives');

スタイルシートは前回作成したものに適用するクラスを追加しただけ。
※ハイライトは変更した箇所

.widget_popular ul,
.widget_categories ul,
.widget_archive ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.widget_categories ul li,
.widget_archive ul li {
	display: inline-block;
	margin: 0 .2em 0 0;
	padding: 0;
}
.widget_categories ul li a,
.widget_archive ul li a {
	position: relative;
	display: inline-block;
	max-width: 150px;
	height: 29px;
	line-height: 28px;
	padding: 0 4.2em 0 .6em;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: #333;
	font-size: 9px;
	text-decoration: none;
	-webkit-transition: .2s;
	transition: .2s;
}
.widget_categories li .cat_count,
.widget_archive li .month_count {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 2;
	width: 28px;
	height: 18px;
	line-height: 18px;
	background-color: #eee;
	border-radius: 100%;
	color: #333;
	text-align: center;
	-webkit-transition: .2s;
	transition: .2s;
}
.widget_categories ul li a:hover,
.widget_archive ul li a:hover {
	background-color: #337ab7;
	border: 1px solid #337ab7;
	color: #fff;
}
.widget_categories ul li a:hover .cat_count,
.widget_archive ul li a:hover .month_count {
	background-color: #fff;
	color: #337ab7;
}

ちょっとムリヤリ感はあるけど、満足の結果。
それにしてもphpは文字列操作系の関数に一貫性がなくって、
使いづらく感じるのは俺だけだろうか？

Tweet