2022/03/12

【WordPress】取得カテゴリーによって色分けする方法

WordPress

この記事では、WordPressで記事カテゴリーによって色を変える方法について解説しています。取得したカテゴリーによって色やクラスを動的に変更したい時にご活用ください。

目次【本記事の内容】 [ click ]

１.カテゴリーによって色分けする方法

カテゴリーによって色分けする方法

カテゴリーによって色分けするには、あらかじめ用意しておいたクラスにカラーを指定しておいて、クラス名には取得したカテゴリーのスラッグを付与して動的に変更することで実現可能です、具体的な手順は以下の通りです。

カテゴリーのスラッグを確認
スタイルの調整
クラスを動的に変更

それぞれ解説していきます。

①：カテゴリーのスラッグを確認

【WordPress】取得カテゴリーによって色分けする方法「①：カテゴリーのスラッグを確認」

カテゴリーのスラッグはWordPressの管理画面から投稿 > カテゴリーをクリックして確認できます。ここで表示されているスラッグをクラス名としスタイルを調整していく事になります。※日本語になっている方はアルファベットになるよう変更してください。

②：スタイルの調整

カテゴリーのスラッグをクラス名として記述しそこにカラーを当てていきます、テーマを利用している方は子テーマを用意してstyle.cssにスタイルを記述してください。先ほど確認したスラッグを使用した場合のサンプルコードは下記の通りです。

style.css

.cat a {
    color: #FFF;
}
.life a {
    background-color: red;
}
.blog a {
    background-color: blue;
}
.tool a {
    background-color: green;
}
.workout a {
    background-color: purple;
}
.seo a {
    background-color: black;
}

③：クラスを動的に変更

先ほど追加したスタイルが出力したカテゴリーに反映されるようカテゴリーのスラッグを使って動的に変更してみます、利用想定としてはcategory.phpやsingle.phpなります。サンプルコードは以下の通りです。

category.php

<?php $cat = get_the_category(); $cat = $cat[0]; {
echo '<span class="cat ' . $cat->category_nicename . '" />';
} ?>
<?php the_category(','); ?></span>

以上になります。

人気記事「WordPressブログの作り方」←全ての手順を解説＋オススメ設定

wordpress