【WordPress】カテゴリーごとに見出しのデザインを変える

投稿ページの見出しのデザインを、カテゴリーごとに変えて設定する方法です。

ページを開いたとき どのカテゴリーのページなのかすぐに分かるように、h1、h2見出しの色をカテゴリーごとに設定してみようと思います。

１つずつ設定していたが…

初めは、カテゴリーごとのデザインをこんな感じで、１記事ずつカスタムCSSに記述していましたが…。（↓）

記事数が少なければこれで問題なくても、各カテゴリーに数十記事もあると 変更するのは大変な作業になります。

これを、記事を追加するたび毎回やらなければならないことも考えれば、とても現実的な方法とはいえません。

カテゴリーごとに見出しを設定する

設定したいのはあくまで見出しだけであって、ページ全体のデザインを特に弄りたいわけではありません。

そういうわけで、サルワカさんの記事より、いちばん簡単な方法（方法３）を試させてもらいました。

①カテゴリーIDをメモ

まず管理画面のカテゴリーを開いたら、「表示オプション」で「ID」にチェックを入れておきます。

これで一覧にIDが表示されるようになるので、見出しデザインを変更したいカテゴリーのIDをここでメモっておきます。

②function.phpに記述

「テーマファイルディタ―」の「子テーマ」で、function.phpに以下のコードを記述。

//カテゴリ固有のクラスをbodyの追加
function add_category_id_classes_to_body_classes($classes) {
  global $post;
  if ( is_single() ) {
    foreach((get_the_category($post->ID)) as $category)
      $classes[] = 'categoryid-'.$category->cat_ID;
  }
  return $classes;
}
add_filter('body_class', 'add_category_id_classes_to_body_classes');

③style.cssに記述

「テーマファイルエディター」の「子テーマ」で、style.cssに任意のデザインを記述。

【例】カテゴリーID22で、h1の背景色をorange、h2の文字色をredにした場合（↓）

.categoryid-22 h1 {
background: orange;
}
.categoryid-22 h2 {
color: red;
}

これを各カテゴリーIDごとに設定すれば、見出しの色やデザインを分けることができます。