デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

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

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

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

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

カテゴリー名を色分け1

スポンサーリンク

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

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

カテゴリー名を色分け3

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

スラッグ名の取得方法

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

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

補足説明:
get_the_category()関数では、他にも色々な情報が取得できます。
以下のサイトを参考にすれば良いと思います。
WordPress公式オンラインマニュアル

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

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

最後に

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

関連記事
WordPress アイキャッチ画像の追加方法
WordPress アイキャッチ画像の上にカテゴリ名を表示

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン