WordPressでサイドバーのアーカイブをカスタマイズする
前回の続き。
せっかくカテゴリをカスタマイズしたので、アーカイブもそれに合わせてデザイン変更。
こんな感じ。

問題は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は文字列操作系の関数に一貫性がなくって、
使いづらく感じるのは俺だけだろうか?
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント