以前【WordPress】リンク付きカテゴリー名を表示させるには？という記事にてリンク付きカテゴリー名を表示させる方法をご紹介しましたが、この場合はCSSでデザインするとしても全てのカテゴリー名が同じHTMLで出力されてしまうのでカテゴリーごとにデザインを変えることができません。
そこで今回はカテゴリーごとに色分けしたリンク付きカテゴリー名を表示させたい場合はどのようにしたらよいのかご紹介したいと思います！
スラッグを利用して設定する
カテゴリーごとに色分けしたリンク付きカテゴリー名を表示させるには、スラッグを利用することで実現できます。流れとしては、
1. functions.phpにコードを記述
2. カテゴリー名を表示したいところに1.で記述したものを呼び出すコードを記述
という風になっています。
早速、例として以下のようなコードをfunctions.phpに記述しました。
2 | function categories_waku() { |
3 | $cats = get_the_category(); |
4 | foreach($cats as $cat){ |
5 | echo '<a href="'.get_category_link($cat->term_id).'" '; |
6 | echo 'class="waku-'.esc_attr($cat->slug).'">'; |
7 | echo esc_html($cat->name); |
そのうえで、カテゴリー名を表示したいところに以下のコードを記述します。
1 | <?php categories_waku(); ?> |
上のようにPHPを記述することで、以下のようにHTMLが出力されます。
1 | <a href="カテゴリーページのURL" class="waku-カテゴリー名">WordPress</a> |
解説としては、functions.phpに記述するPHPコードの2行目にある
function categories_waku() {
はカテゴリー名を表示させたいところに記述する
<?php categories_waku() ?>
と対応しているので、もしワードを変えたい時は両方のワードを同じものに変更する必要があります。
そして出力されたHTMLのaタグにあるクラス名はPHPコードの6行目にある
echo ‘class=”waku-‘.esc_attr($cat->slug).'”>’;
が表示されているので、aタグのクラス名を変更したい時は上のPHPコードを変更することで変更することができます。
まとめ
以上がカテゴリーごとに色分けしたリンク付きカテゴリー名を表示させる方法になります！上の見本コードを元に、ご自身に合わせたHTMLを出力できるように設定して実装してみましょう！
