カテゴリー単位で異なるアイコンを表示したい
そんな風にご希望を頂いた案件がありました。
やったことのないカスタマイズなので調べてみると、一番に目に留まったのがプラグインを使用する方法でした。
ですが、個人的に「プラグインは少なければ少ない方が良い」と考えていますので、functions.phpでカスタマイズする方法が無いかと調べてみることにしました。
1時間ぐらいかかったでしょうかね？
最終的に【cat_ID】とCSSを組み合わせる方法に行きつきました。
以下にその方法をご紹介します。
カテゴリーIDを利用してカテゴリー単位でデザインを変える。
私の担当した案件では、投稿ページにあるliタグで囲まれたカテゴリーに個別のアイコンを表示させたいわけですから、カテゴリーを囲むliタグにそのカテゴリー固有のスタイルを付与してやり、CSSでアイコンを表示してやればOKでした。
そこで、スタイル名の部分にその投稿のカテゴリーIDを用いることで、個別のスタイル名を自動的に付加することにしました。
以下がその投稿のカテゴリーIDを取得して、個別のスタイル名を設定するコードです。
投稿ページのカテゴリーを表示している部分に直接書き込みました。
<?php
$cat = get_the_category();
$cat = $cat[0];
?>
<li class="cat_<?php echo $cat->cat_ID; ?>"><?php the_category(' '); ?></li>個別に解説していきます。
<?php
$cat = get_the_category();
$cat = $cat[0];
?>まず、上記のコードは「この投稿のカテゴリー情報を取得します」という意味です。
<?php the_category(' '); ?>上記は「この投稿のカテゴリーを取得します」という意味です。
この部分で、カテゴリー名を表示しています。
<?php echo $cat->cat_ID; ?>上記のコードは「最初に取得した情報の中からカテゴリーIDを表示します」という意味です。
例えば、カテゴリーIDが10のカテゴリーであれば、この部分に10と表示されます。
カテゴリーIDは重複することがありませんので、今回のコードの様に【cat_カテゴリーID】としておけば、重複の無い個別のスタイル名をliタグに付与することができるわけです。
cat_10
cat_20
cat_30 と言った感じです。
この【cat_】の部分はお好きに決めてください。
無くても良いですが、他のスタイル名と被ってはいけませんので、私は【cat_】と付けました。
これで、カテゴリー毎にliタグに個別のスタイル名を設定することができました。
あとは、CSSでご希望のデザインを定義すればOKです。
カテゴリーID以外でも問題はありません。
今回はカテゴリーIDを取得してスタイル名に利用しましたが、別にカテゴリー名でなくてもOKです。
カテゴリー情報には色々なモノがありますから、お好きな情報を用いることができます。
<?php echo $cat->cat_ID; ?>上記コードの【cat_ID】の部分を差し替えることで、色々な情報を取得することができます。
その一部を以下に列挙します。
- cat_ID（カテゴリーID）
- cat_name（カテゴリー名）
- category_nicename（カテゴリースラッグ名）
参考にしてください。
まとめ
WordPressのカテゴリーIDを利用してカテゴリー単位でアイコンやデザインを変える方法をご紹介しました。
今回の様なカスタマイズが簡単に行えるところも「やるな～WordPress！」などと個人的に感心してしまいます。コピペだけで簡単に実装可能ですからね！
今回のカスタマイズ内容が役立つのであれば、ぜひ参考にしてください。
CSSで特定の画像だけを中央揃えにする方法
【WordPress】カスタム投稿のアーカイブページを作成する方法
コメントを残す