WordPressでサイドバーのアーカイブをカスタマイズする

前回の続き。

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

こんな感じ。

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

[code lang=”php”]
// 月別アーカイブ一覧
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();
?>

<?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’);
[/code]

スタイルシートは前回作成したものに適用するクラスを追加しただけ。
※ハイライトは変更した箇所
[code lang=”css” highlight=”3,9,15,35,51,57″]
.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;
}
[/code]