【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

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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