この記事では、WordPressで作成したカテゴリーにカテゴリー名をclassにして、それを利用して色を振り分ける方法を紹介します。
カテゴリーのイメージカラーを設定した時に、記事一覧を表示する時に付ける該当カテゴリーに対しても、そのカラーを適応させたいなんて要件ってあると思います。まさにそれを解決する方法をこの記事では紹介しています。以下のようにカテゴリー名の要素に任意の色付きの何かを付ける事が可能になります。
PHPでカテゴリースラッグをclassに付与
まず初めに、投稿一覧のループなどでカテゴリーも一緒に取得表示します。
以下は投稿ループの一例です。（Bootstrap+オリジナルclassを使ってレイアウトしています。）
<div class="row">
<?php
$args = array(
'posts_per_page' => '6', //表示件数。-1なら全件表示
'post_type' => 'post', //カスタム投稿タイプの名称を入れる
'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
'orderby' => 'post_date', //日付順
'paged' => $paged,
);
$customPosts = get_posts($args);
if ($customPosts) : foreach ($customPosts as $post) : setup_postdata($post);
$terms = get_the_terms($post->ID, 'category');
foreach ($terms as $term) {
$term_slug = $term->slug;
}?>
<div class="col-md-6 pr-md-5 pl-md-5 top_card">
<a href="<?php the_permalink(); ?>">
<div class="top_card_inner mb-4">
<?php if ( has_post_thumbnail() ): ?>
<img src="<?php the_post_thumbnail_url(); ?>" loading="auto" alt="<?php the_title(); ?>のサムネイル">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="noimg">
<?php endif; ?>
<div class="top_card_text">
<p class="m-0 post_alts"><i class="far fa-calendar-alt"></i><?php echo get_the_date(); ?><span class="mr-1 ml-1"><i class="far fa-user"></i><?php the_author(); ?></span></p>
<p class="mt-1 mb-1 post_title"><?php the_title(); ?></p>
<?php
$cat = get_the_category();
$cat_name = $cat[0]->cat_name;
$cat_slug = $cat[0]->category_nicename;
?>
<p class="mt-1 mb-1 top_category <?php echo $cat_slug ?>"><?php echo $cat_name; ?></p>
</div>
</div>
</a>
</div>
<?php endforeach; wp_reset_postdata(); ?>
<?php else: ?>
<p>表示できる情報はありません。</p>
<?php endif; wp_reset_postdata(); ?>
</div>上記のコードの29行目〜34行目がカテゴリーのスラッグをclassにしてる部分です。（以下の部分）
<?php //カテゴリーを取得してカテゴリー名とスラッグ名ん取得
$cat = get_the_category();
$cat_name = $cat[0]->cat_name;
$cat_slug = $cat[0]->category_nicename;
?>
<p class="mt-1 mb-1 top_category <?php echo $cat_slug ?>"><?php echo $cat_name; ?></p>「$cat」では投稿のカテゴリーを取得しています。「$cat_name」では取得した「$cat」のカテゴリー名を取得しています。「$cat_slug」では取得した「$cat」のスラッグを取得しています。
これを「class=”<?php echo $cat_slug ?>”」でclassに入れれば「$cat_slug」で取得したスラッグ名がclass名として入ります。
Sassでカテゴリーカラーを登録しとく
先程は、HTMLにカテゴリースラッグの名前をclassに入れました。そのclassに対してスタイルを付ける事で今回の要件は達成出来ます。
カテゴリーのカラーはいつでも変更出来るようにしたいのと、色んな箇所で同じスタイルを使用すると思うので、以下のようにSassの@mixinに入れて管理するのが良いでしょう。
// カテゴリーカラー ここの色を変える事で管理
$category01: red;
$category02: blue;
$category03: orange;
$category04: brown;
$category05: rgb(69, 165, 42);
$category06: rgb(41, 225, 228);
$category07: rgb(179, 0, 255);
$category08: rgb(176, 164, 255);
// カテゴリーカラー
@mixin categoryColor() {
.category1 {
// カテゴリーカラー
&::before {
content: '│';
color: $category01;
position: relative;
left: -2.5px;
}
}
.category2 {
// カテゴリーカラー
&::before {
content: '│';
color: $category02;
position: relative;
left: -2.5px;
}
}
.category3 {
// カテゴリーカラー
&::before {
content: '│';
color: $category03;
position: relative;
left: -2.5px;
}
}
.category4 {
// カテゴリーカラー
&::before {
content: '│';
color: $category04;
position: relative;
left: -2.5px;
}
}
・
・
・
//以下省略（繰り返し）
・
・
・
}スタイルを効かせたいスタイルシートに以下の記述をすれば効きます。
@include categoryColor();@mixinについては詳しく説明している記事があるのでそちらをご覧下さい。
以上が「WordPressでカテゴリー毎に色分けをする方法（スラッグをclassにする方法）」でした。この色分け手法を使えばカテゴリー毎の振り分けなんかで分かりやすいデザインになるかと思います。
参考になれば幸いです。
