WordPress カテゴリー名を色分けする
【更新情報】2017年6月7日文言等を追記・修正しました。
前回記事で、アイキャッチ画像の上にカテゴリ名を表示させましたが、
今回は、カテゴリ毎にラベルを色分けする方法をご紹介します。
※前回記事：【WordPress アイキャッチ画像の上にカテゴリ名を表示】
カテゴリー毎に色分けする方法
前回の記事（WordPress アイキャッチ画像の上にカテゴリ名を表示）では、カテゴリー名のp要素に”eyecatchlabel”というクラス名をつけ、
CSSでスタイル指定していました。
これだと、それぞれのカテゴリーがすべて同じ色になってしまいます。
そこで、クラス名にカテゴリーのスラッグ名を指定し、それぞれのスラッグ名のクラスに対して、CSSで色を指定をしてやればカテゴリー毎に色分けすることができます。
※スラッグ名とは、カテゴリーページを開いた時のURLに使われる文字列のことです。
スラッグ名は、WordPress管理画面の[投稿]⇒[カテゴリー]で設定・確認することができます。（以下参照）
スラッグ名の取得方法
具体的にコード上で、スラッグ名を取得するには、get_the_category()関数を使います。
以下のコードをクラス名を指定する箇所にコピペしてください。
|
1 |
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?> |
カテゴリー名を取得するときは、$cat->cat_nameでしたが、
スラッグ名の時は、$cat->slugとなります。
スラッグ名毎にCSSで色を指定
さて、クラス名にスラッグ名を指定できたら、
スラッグ名ごとに付けたい色をCSSで指定してやれば完成です。
最後に
以上、アイキャッチ画像上のカテゴリ名を色分けする方法を紹介しました。
参考になれば幸いです。
スポンサーリンク
飲食店用WordPress無料テーマ「InomaRestaurantBasic」
飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。
ブログ用WordPress無料テーマ「chameleon(カメレオン)」
WordPressテーマ（chameleon）は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。 初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください！
士業用WordPress無料テーマ「InomaExpertBasic」
士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。
