【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>

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

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

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

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

LIG

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

function sgr_show_current_cat_on_single($output) {
	global $post;
	if(is_single()) {
		$categories = wp_get_post_categories($post-&amp;amp;amp;gt;ID);
		foreach($categories as $catid) {
		$cat = get_category($catid);
			if(preg_match('#cat-item-' . $cat-&amp;amp;amp;gt;cat_ID . '#', $output)) {
				$output = str_replace('cat-item-'.$cat-&amp;amp;amp;gt;cat_ID, 'cat-item-'.$cat-&amp;amp;amp;gt;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

「WordPressカスタマイズ」新着記事

ソーシャルメディアのトータルシェア数を条件にして記事をランダム表示する方法

Avatar for ホシナ カズキ

ホシナ カズキ

チャット風の会話形式コンテンツをプラグインなしで実装する方法

Avatar for ホシナ カズキ

ホシナ カズキ

【WordPress】パーマリンクからカテゴリーベースを取り除く方法

Avatar for ホシナ カズキ

ホシナ カズキ

ディレクトリを切ってインストールしたWordPressをドメイン直下で表示させる方法

Avatar for ホシナ カズキ

ホシナ カズキ

「RSS Footer」が開発終了したならfunctions.phpで同じことやればいいじゃない

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく