body_classにカテゴリー名を追加してCSSセレクタを使い倒す

おちです。雑食サイトに統一感を持たせようと日々腐心しております。

WordPressでカテゴリごとの見た目を変えるには色々方法が用意されてますね。
でもcategoryIDをみてIF文で条件分岐するにはちょっと大げさ…という場合はCSSセレクタを使うのもオススメです。

body_class()にカテゴリ名を追加する

body_class()はCSSセレクタに渡すクラス名を増やしてくれる便利なテンプレートタグですが、意外とかゆいところに手が届きません。カテゴリ名が出てくれれば捗るのになー。

…と思いきや、任意のクラス名を入れれば簡単に増やせると書いてあるので拡張します。

【header.php】
<?php $catSlug='';
if(is_single()) {
$catCache = get_the_category();
$catSlug .= $category[0]->slug;
}?>
<body <?php body_class($catSlug); ?>>

参考：Function Reference/body class – Codex

ちなみに追記するだけで増やせる件、日本語版Codexには載ってないので最初ちょっとはまりました。横着しないで英語版見に行かないとダメですね。

まぁ、とにかくそうするとbodyタグのクラスにカテゴリスラッグが入るのでCSSで拾えば簡単に切り替えられます。

body_classとCSSセレクタでブログの見た目を切り替える

ただし、セレクタのネストが深くなるとブラウザ側のレンダリングが遅くなるので注意。うまく上書きされないときは !important に頼らず記述の順序やカスケードを見直しましょう。

bodyではなく変えたい要素にbody_class()振るとまた使い勝手が変わります。

それではまた！