WordPress カテゴリー名を色分けする

【更新情報】2017年6月7日文言等を追記・修正しました。

前回記事で、アイキャッチ画像の上にカテゴリ名を表示させましたが、
今回は、カテゴリ毎にラベルを色分けする方法をご紹介します。

※前回記事：【WordPress アイキャッチ画像の上にカテゴリ名を表示】

カテゴリー毎に色分けする方法

前回の記事（WordPress アイキャッチ画像の上にカテゴリ名を表示）では、カテゴリー名のp要素に”eyecatchlabel”というクラス名をつけ、
CSSでスタイル指定していました。
これだと、それぞれのカテゴリーがすべて同じ色になってしまいます。

そこで、クラス名にカテゴリーのスラッグ名を指定し、それぞれのスラッグ名のクラスに対して、CSSで色を指定をしてやればカテゴリー毎に色分けすることができます。

※スラッグ名とは、カテゴリーページを開いた時のURLに使われる文字列のことです。
スラッグ名は、WordPress管理画面の[投稿]⇒[カテゴリー]で設定・確認することができます。（以下参照）

スラッグ名の取得方法

具体的にコード上で、スラッグ名を取得するには、get_the_category()関数を使います。
以下のコードをクラス名を指定する箇所にコピペしてください。

カテゴリー名を取得するときは、$cat->cat_nameでしたが、
スラッグ名の時は、$cat->slugとなります。

スラッグ名毎にCSSで色を指定

さて、クラス名にスラッグ名を指定できたら、
スラッグ名ごとに付けたい色をCSSで指定してやれば完成です。

最後に

以上、アイキャッチ画像上のカテゴリ名を色分けする方法を紹介しました。
参考になれば幸いです。

スポンサーリンク