2018-11-02

WordPress記事一覧ページ(アーカイブ)のカテゴリー名の背景カラーをカテゴリーごとに変える方法

Minimal WPの「Minimaga」テーマのトップページの新着一覧や、
記事一覧ページ(アーカイブ)に表示されるカテゴリー名の背景カラーを、
カテゴリーごとに変えたい!という時のカスタマイズ方法を解説します。

WordPress記事一覧ページ(アーカイブ)のカテゴリー名の背景カラーをカテゴリーごとに変える方法

テーマ「Minimaga」はカテゴリー名を自動取得するコードが最初から入ってます。
以下のようなコード。

<?php 
$cat = get_the_category();
$cat = $cat[0];
?>
<div class="item-cat-name <?php echo $cat->category_nicename; ?>"><?php the_category(' / '); ?></div>

なので、CSSでカテゴリーネームごとに背景カラーを指定すればOK。
自分で付けたカテゴリーのスラッグがカテゴリーネームです。

/* カテゴリーカラー */
.nagoya { background-color: #FFFEE4; }
.life,.food,.kitchen-goods,.minimalism { background-color: #F6DEDE; }
.coffee { background-color: #ABD8A7; }
.web,.wordpress { background-color: #FFEFD3; }
.photo { background-color: #88B04B; }
.music { background-color: #996731; }

みたいな感じで背景カラーをそれぞれに指定。お好きなカラーで。

以上です!

*カスタマイズは必ずバックアップを取った上で慎重に自己責任で!

おすすめWordPressテーマ10選
by