category_color003

WordPressの記事一覧ページでカテゴリーごとにカテゴリー名表示の背景色や文字色を変えて表示する方法を紹介します。

Category Colorでカテゴリーごとに色を設定

プラグイン”Category Color“をインストールし、有効化します。次に”投稿” > “カテゴリー”に移動し、色を設定したいカテゴリーを選択して新たに追加されたColor Pickerの項目に色を設定します。

category_color002

下記サイトを参考に配色すると全体的に統一感が出て良い感じになると思います。

Flat UI Colors

Material Design Colors | Material UI

HTMLタグのStyle属性を使用して色を反映

ループ処理の中に設定した色を取得し、HTMLに色を反映させるコードを記述します。

<?php if (have_posts()) :  ?>
<?php while (have_posts()) : the_post(); ?>
...
  <!-- カテゴリーに設定した色を取得 -->
  <?php
    $cat = get_the_category();
    $cat = $cat[0];
    $the_cat_id = $cat->cat_ID;
    if (function_exists('rl_color')) {
        $rl_cat_color = rl_color($the_cat_id);
    }
  ?>
  <!-- style属性でカテゴリーに設定した色を適用 -->
  <a href="#" class="article_category" style="background: <?php echo $rl_cat_color; ?>;">
  ...
  </a>
...
<?php endwhile; ?>
<?php endif; ?>

処理の流れとしては…

  1. get_the_category()で投稿のカテゴリー情報を取得
  2. 1で取得した情報からカテゴリーIDを取得
  3. カテゴリーIDを使用して対象のカテゴリーに設定された色を取得
  4. HTMLタグのstyle属性に取得した色を設定

となっています。

さいごに

カテゴリーごとに色分けすることで同じカテゴリーの記事が視覚的に分かりやすく表示できるようになりました。色々と使いどころはあると思うので興味のある方はぜひお試しください。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。