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の取得方法
ボディークラスに「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セレクタは利用できないようです。
なので、「スラッグを用いた方法」を利用する場合は、必ず「半角英数字と-(ハイホン)_(アンダーバー)」を用いたカテゴリのスラッグを設定する必要があります。
まとめ
こんな感じで、ボディークラスにカテゴリ情報を付加することで、カテゴリごとに違ったCSSを適用させることができます。
ただ、「カテゴリIDを付加する方法」ではIDを調べる必要がありますし、「カテゴリスラッグを付加する方法ではスラッグ」を半角英数字で設定する必要があるなど、一長一短な部分はあります。
個人的には、「カテゴリIDを付加する方法」の方が、スラッグの内容を気にする必要もなく、コピペ一発で済むのでおすすめかなと思います。
というわけで「カテゴリごとに違ったCSSを適用したい」なんて場合は、結構簡単に実装できるかと思います。
Simplicityテーマを利用している場合は、v2.2.8以降は、このカスタマイズが施してあるので、カスタマイズ不要です。というかカスタマイズすると、関数名が重複してエラーが出ると思います。