WordPress:記事一覧ページで記事別にカテゴリーを表示&背景色を変える方法

ウオトミズ(UOTOMIZU)の中の人

WordPressの記事一覧のページにて、記事が属するカテゴリーを記事別に表示させて、カテゴリーによって背景色を変える方法。

完成イメージ

完成イメージは以下の通り。記事が属するカテゴリーを表示させて、カテゴリー別に背景色を変えている。

カテゴリー別の記事リスト

 

実際のコード

任意のファイル(例:category-test.php)に、以下のようにコードを書く。

WordPressの条件分岐を使う。

例えば<?php if(in_category(creation)):?>の場合、creationというスラッグを持つカテゴリーの場合は、<p class="cat cat-creation">サイト制作</p>を出力する、else ifで必要な数だけそれぞれの場合を記述していく。この時にそれぞれのカテゴリーにクラスを付与しておく。

カテゴリーのスラッグの代わりにカテゴリーのIDでも指定できる。

最後に、elseでどのカテゴリーにも属さない場合出力するコードを最後に書く。

あとは、適当にスタイルを適用する。

style.scss


.thumbnail {
/**     省略    **/
.cat {
display: inline-block;
background: $maincolor;
color: #fff;
font-size: 1.0rem;
position: absolute;
top: 0;
padding: 0 10px;
z-index: 2;
}
.cat-creation {
background: $subcolor;
}
.cat-management {
background: $accentcolor;
}
.cat-security {
background: $maincolor;
}
.cat-other {
background: $black;
}
/**   省略   **/
}

 

あとは、こんな感じに表示されるはず。

カテゴリー別の記事リスト

 

おわりに

WordPressの条件分岐を覚えると複雑なカスタマイズが可能になる。

 

.