【WordPress】取得カテゴリーによって色を変更する方法

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

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

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

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

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

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

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

【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>

以上になります。

他の人が読んでいる記事

コメント (0)
うぇぶとまと|雑食系エンジニア
うぇぶとまと|雑食系エンジニア

飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦する雑食系エンジニア。