[WordPress]BODYタグのクラスにカテゴリー情報を含めて個別スタイルを設定できるようにするカスタマイズ方法

WordPressでは、ページごとに個別のCSSスタイルを適用できるようにbodyタグのclass（以下、ボディークラス）は、以下のように出力されています。

<body class="single single-post postid-30847 single-format-standard logged-in admin-bar customize-support">

例えば上記タグの場合だと、投稿IDが30847の投稿ページのみに適用するCSSを手軽に書くことができます。その他にも、「投稿ページ（single）」や、「ログインユーザーが表示しているとき（logged-in）」のみに適用するCSSが書けるように情報が含まれています。

けれど、Wordpressデフォルトの機能では、特定のカテゴリ情報は、ボディークラスには含まれていません。

なので、今回は「BODYタグのクラスにカテゴリー情報を含めるカスタマイズ」を行って、カテゴリごとに自由にCSSを設定できるようにする方法を紹介したいと思います。

カテゴリのID情報を含める

bodyタグのclassにカテゴリのID情報を含めるには、functions.php等に以下のように記入します。

//カテゴリIDクラスを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');

上記コードは、投稿ページのみに適用されるように書かれています。

functions.phpに上記のように書くことによって、ボディータグは以下のように出力されます。

<body class="single single-post postid-57 single-format-standard logged-in admin-bar categoryid-6 categoryid-3 categoryid-4 customize-support">

上記の例では「categoryid-6 categoryid-3 categoryid-4」という現在表示している投稿が属しているカテゴリの「カテゴリIDつきのクラス名」が挿入されていることが分かります。

あとは、「特定のカテゴリのみ1カラム表示」みたいな表示にしたいときは、以下のように書くことで実現することができます。

.categoryid-1 #main {
  width: auto;
}

.categoryid-1 #sidebar {
  display: none;
}

上記コードはあくまで一例です。使用しているテーマによって、割り振られているIDやclassが違うので、スタイルはテーマに合わせて書く必要があります。

カテゴリIDの取得方法

ボディークラスに「categoryid-6」のようにIDつきのクラス名を挿入した場合、利用するには、「カテゴリのID」を知る必要があります。というのも、「使用したいカテゴリのIDが何番なのか」がわからないと思ったように設定できないからです。

カテゴリのIDを知るには、Wordpress管理画面から「投稿 → カテゴリ」を選択してください。

「カテゴリ」画面のカテゴリ一覧で「IDを取得したいカテゴリ」を選択します。

すると、ブラウザのアドレスバーに表示されるURLのパラメーターに「&tag_ID=[カテゴリID]」のように番号が表示されます。

このtag_IDの値がカテゴリIDになります。

カテゴリのスラッグ情報を含める

bodyタグのclassにカテゴリのスラッグ情報を含めるには、functions.php等に以下のように記入します。

//カテゴリスラッグクラスをbodyクラスに含める
function add_category_slug_classes_to_body_classes($classes) {
  global $post;
  if ( is_single() ) {
    foreach((get_the_category($post->ID)) as $category)
       $classes[] = $category->category_nicename;
  }
  return $classes;
}
add_filter('body_class', 'add_category_slug_classes_to_body_classes');

上記コードは、投稿ページのみに適用されるように書かれています。

このように書くことで以下のようなボディータグが出力されます。

<body class="single single-post postid-92 single-format-standard logged-in admin-bar test customize-support">

上記コードは、以下のようなテストカテゴリ（スラッグ：test）に属しているため、「test」というクラス名が出力されています。

あとは、先程のように今度はスラッグクラス名をCSSセレクタとして利用してスタイルを指定します。

.test #main {
  width: auto;
}

.test #sidebar {
  display: none;
}

スラッグが日本語では使用できない模様

ただ、スラッグを利用した方法だと、スラッグが日本語だった場合は、日本語がエンコードされるのでボディータグには以下のように出力されます。

<body class="single single-post postid-92 single-format-standard logged-in admin-bar %e6%97%a5%e6%9c%ac%e8%aa%9e%e3%82%b9%e3%83%a9%e3%83%83%e3%82%b0%e3%81%ae%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa customize-support">

CSSセレクタには、日本語や、絵文字は使用できます。けれど、試してみたところ「%e6%97%a5…」のような%記号を使用したCSSセレクタは利用できないようです。

なので、「スラッグを用いた方法」を利用する場合は、必ず「半角英数字と-（ハイホン）_（アンダーバー）」を用いたカテゴリのスラッグを設定する必要があります。