👩‍💻

WordPressのプラグインColorful Categoriesの使い方

2022/10/16に公開

PHP

WordPress

tech

WordPressのプラグインColorful Categoriesの使い方

どういったプラグインなの？

WordPressのbolg記事のカテゴリー表示に色をCSSで記載する際、
お客さんで自由に色を設定したい…
今後、カテゴリーが増えるためお客さんで色の増やしたい…
カラフルなデザインなのにカテゴリーだけシンプルは微妙…など
そんな時に使えるのがColorful Categoriesです！

〜下記の参考記事をご覧いただくとカラフルなデザインを使用する際に便利です！！〜

・WordPressのカテゴリに色分け機能を追加できる「Colorful Categories」

・wordpressカテゴリ別にカラフル色をつける「Colorful Categories」

しかし、今回参考のwebサイトにはカテゴリーの項目に対してリンクをつける方法の記載がなかったので
今回、実装しちゃいました( ´ ▽ ` )ドヤ！！

実装したコード

sample.php

    <ul class="topics__teams">
        <li class="topics__team topics__areaTime">
            <?php the_time('Y/m/d') ?>
        </li> //←ここ日にち
        <li class="topics__team topics__areaType">
            <?php $cat = get_the_category();//カテゴリーの取得
                $getCatURL = get_category_link( $cat[0] ); //URLの取得
                $catName = $cat[0]->cat_name;//カテゴリー名の取得
                $color = ColorfulCategories::getColorForTerm($cat[0]->term_id, true);//ColorfulCategories::getColorForTermと同時にタームIDの取得 
            ?>
            <a style="background-color:<?php echo esc_attr($color); ?>" href="<?php echo $getCatURL; ?>">
                <?php echo $catName; ?>
            </a>
        </li>
    </ul>

ポイントは

今回のポイントは**the_category();でもカテゴリーとリンクの取得ができて便利だけど、Colorful Categoriesを導入する際はそんな簡単にはいかないということ。
この実装が効率的かはともかく、遠回りだけど…

get_the_category();（カテゴリー）を取得してからget_category_linkで格納したら、あとはカテゴリー名の取得、Colorful Categoriesの取得に対してタームIDの取得する。
$cat[0]の”[0]”の配列は忘れないように忘れると上手く作動しません(T ^ T)
aタグのstyle=”background-color:<?php echo esc_attr($color); ?>”のesc_attrをお忘れなく！！
alt、value、title などの HTML 要素（特にフォーム値）をエスケープする場合は必ず入ります。
esc attr関数の詳しい内容は関数リファレンス/esc attr

まとめ

管理画面から自由自在に色が選べるのは非常に楽ですし、Colorful Categories是非この機会に使ってみて下さい！！

WordPressのプラグインColorful Categoriesの使い方

どういったプラグインなの？

実装したコード

ポイントは

まとめ

Discussion