[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管理画面から「投稿 → カテゴリ」を選択してください。

Wordpress管理画面のカテゴリメニュー

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

IDを知りたいカテゴリを選択

すると、ブラウザのアドレスバーに表示されるURLのパラメーターに「&tag_ID=[カテゴリ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セレクタは利用できないようです。

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

まとめ

こんな感じで、ボディークラスにカテゴリ情報を付加することで、カテゴリごとに違ったCSSを適用させることができます。

ただ、「カテゴリIDを付加する方法」ではIDを調べる必要がありますし、「カテゴリスラッグを付加する方法ではスラッグ」を半角英数字で設定する必要があるなど、一長一短な部分はあります。

個人的には、「カテゴリIDを付加する方法」の方が、スラッグの内容を気にする必要もなく、コピペ一発で済むのでおすすめかなと思います。

というわけで「カテゴリごとに違ったCSSを適用したい」なんて場合は、結構簡単に実装できるかと思います。

Simplicityテーマを利用している場合は、v2.2.8以降は、このカスタマイズが施してあるので、カスタマイズ不要です。というかカスタマイズすると、関数名が重複してエラーが出ると思います。