【WordPress】現在記事のカテゴリーとカテゴリーリストを紐付けてリスト項目を強調する

うーんよくわからんタイトルになっちゃたかなぁ。

今回、サイドバーのカテゴリーリスト周りを見なおしまして、記事ページに設定されているカテゴリーとサイドバーのカテゴリーリストのリスト項目を紐付け、該当するリスト項目を強調表示するというカスタマイズを行いました。その備忘録です。

WordPressのカテゴリーリストを吐き出す関数にwp_list_categories();というのがあります。ここで吐き出されるタグはだいたい以下のような感じです。

<li class="cat-item cat-item-4"><a href="hoge.com/category4">カテゴリー4</a></li>
<li class="cat-item cat-item-17"><a href="hoge.com/category17">カテゴリー17</a></li>
<li class="cat-item cat-item-12"><a href="hoge.com/category12">カテゴリー12</a></li>
<li class="cat-item cat-item-1"><a href="hoge.com/category1">カテゴリー4</a></li>
<li class="cat-item cat-item-14"><a href="hoge.com/category14">カテゴリー14</a></li>

こうして吐き出されたタグは、カテゴリーページにアクセスすると、それと紐付いて、リストタグのclassにcurrent-cat属性が動的に付与されるようになっています。

この付与された属性を使えば、現在見ているページがどのカテゴリーに属しているのかひと目でわかるように、見た目を変えることができます。

記事ページにアクセスした場合、デフォルトでは記事ページに設定されたカテゴリーと、wp_list_categories();によって吐き出されたリストタグは紐付かないため、current-cat属性は付与されません。
ですから、当然のようにカテゴリーリストの見た目も変わりません。

うーん、どうにかカテゴリーリストの見た目を記事ページでも変えたい。
LIGのカテゴリーリストみたいな感じにしたいw

ということで、無理やりfunctions.phpを使って記事ページでもcurrent-cat属性を付与させてみました。

function sgr_show_current_cat_on_single($output) {
	global $post;
	if(is_single()) {
		$categories = wp_get_post_categories($post->ID);
		foreach($categories as $catid) {
		$cat = get_category($catid);
			if(preg_match('#cat-item-' . $cat->cat_ID . '#', $output)) {
				$output = str_replace('cat-item-'.$cat->cat_ID, 'cat-item-'.$cat->cat_ID . ' current-cat', $output);
			}
		}
	}
	return $output;
}
add_filter('wp_list_categories', 'sgr_show_current_cat_on_single');

これで、記事ページでもカテゴリーが紐付いて、リストタグにcurrent-catが付与されます。

あとは予め、カテゴリーリストの見た目をCSSで変えておけばOK。

こちらは、上のものを実装した後の記事ページです。
記事が属するカテゴリーは「Hacks」なので、カテゴリーリストの「Hacks」が強調表示されていますよね。

意味のない(まったく意味がないわけじゃないけど)カスタマイズだと言われるかもしれませんが、せっかくWordPressがデフォルトで吐き出すclass属性なので有効活用しておかないともったいない!
ってことで、需要があるかどうかはわかりませんが、WordPressのテンプレートデザインにおける一助になれば幸いですw