WordPressのバージョン2.8から追加されたbody_classというテンプレートタグはheader.phpにあるbody要素にいろいろなクラス名を自動で付与してくれます。
また、body要素にクラス名を付与するときには任意のクラス名を追加したり、追加した任意のクラス名を複数追加することもできるので、スタイルするCSSを振り分けたいなどの場合に便利です。
- body_classの基本的な使い方
- 任意のクラス名を追加する場合
- フィルターでクラスを付与する追加方法
上記の3つのパターンを理解することで、どのようにCSSでスタイルを振り分けられるかまでを理解したいと思います。
body_classを追加する基本的な使い方
WordPressのbody_classをbodyに追加する基本的な使い方は、header.phpにあるbody開始タグに「body_class()」をPHPコードにして挿し込む形で使います。
<body <?php body_class(); ?>>
body開始タグの中のbody_class()が「class=”クラス名”」になる部分です。
そして<body <?php body_class(); ?>>で出力したbody要素はHTMLでbodyタグに<body class=”クラス名”>とclass属性を指定するのと、ほぼ同じ結果になります。
HTMLでbodyにクラス属性を「original」と指定した場合
body_classで出力した場合
ほぼ同じ結果というのは上記画像で理解できるかと思いますが、body_classの場合は自動で何種類かのclass名が追加されています。
これはbody_classが自動で出力するクラス名です。そしてこの出力するクラス名はWordPressのページによって追加されるクラス名が違います。
たとえばページがフロントページで最新の投稿で設定してるならhomeやblogを追加、投稿ページならsingleやsinglepost、single-id(id)などのクラス名が追加されます。body_classで自動追加されるページごとのクラス名の追加により、CSSを割り振りたい場合に使いやすくなるのです。
ページによって追加されるクラスはWordPressのcodexで確認ができます。
body_classをbody要素に追加するパターン
ここまではWordPressのbody_classの基本的な使い方として、<body <?php body_class(); ?>>でパラメータを使わずにclass名が出力されるパターンだけを説明しました。
次はbody_class()のパラメータを使用してbody要素に追加するパターンを説明します。
<body <?php body_class( $class ); ?>>
パラメータはbody_class()のカッコの中で指定します。またパラメータはbody要素にbody_classが自動で追加するクラス名と一緒に、任意のクラス名も付与したい場合に文字列または配列を使用して指定ができます。
body_classで任意のクラス名を指定する使い方は大きく分けて3つのパターンの使い方ができます。一つずつ説明します。
bodyに任意のクラスを追加
まずはWordPressのbody_classを使用して任意のクラスを追加したい場合の基本的な使い方を土台として理解してみてください。
パターン1ですね。
<body <?php body_class( ’class-name’ ); ?>>
任意のクラス名を追加したい場合は、上記のコードのようにbody_class()のパラメータに任意で出力したいクラス名を文字列で指定します。
任意のクラス名を指定したHTMLの出力結果は以下のbody要素になります。
パラメータで指定した任意クラスの「class-name」以外に、body_classが自動で付与するクラス名も含まれます。
body_classで任意のクラス名を追加したのが一つなので、使い方の基本としては理解しやすかと思います。これをパターン1としbody_classを理解する土台にしてください。
bodyに複数のクラスを追加
次はパターン2です。body_classでbodyに複数のクラスを追加する場合です。
WordPressのbody_classが自動で付与する複数のクラスとは別に、任意のクラスを追加する場合です。
<body <?php body_class('class1 class2 class3'); ?>>
任意のクラスを複数指定する時はbody_classのパラメータでクラス名を半角スペースで区切って指定します。
そうするとbody_classを記述したbody要素の出力は、body_classが自動付与したクラス名と共に複数の任意classも追加できます。
これがパターン2でした。
body_classをフィルターで追加
WordPressでbody_classを追加するパターン3です。body_classにフックする関数を作成して、body要素に任意のクラス名を追加します。
add_filter( 'body_class', 'my_class' );
function my_class( $classes ) {
$classes[] = 'class-name';
return $classes;
}
上記のコードをWordPressのfunctions.phpに記述します。記述してトップページのbody要素に出力されるのは以下のような結果になります。
フィルターでbody_classを使用しているというだけで出力結果は同じです。
フィルターでbody_classを追加する場合はadd_filterを使用しています。
add_filter( $tag, $function_to_add, $priority, $accepted_args );
使用するときは、$tagと$function_to_addは必須です。
- $tag フックの名前を指定します。
- $function_to_add フックしたタイミングで実行したい関数を指定します。
今回の場合はmy_classという関数をbody_classに紐付けて、my_classの内容にはbody_classで出力する任意クラス名をセットします。
これによりbody_classが実行されるタイミングで自分が用意した関数が実行できます。つまりbody_classの実行されるタイミングでパラメータの任意クラス名を出力するという感じです。
フィルターを使用したbody_classの追加で「複数の任意クラスを追加」することもできます。
add_filter( 'body_class', 'my_class' );
function my_class( $classes ) {
$classes[] = 'class1 class2 class3';
return $classes;
}
body_class()のパラメータに複数の任意クラス指定したときと同じように、任意クラス名を半角スペースで区切って関数の内容としてセットします。
追加したbody_classでページごとにCSSを指定する
WordPressのbody_classで追加したクラスを使用してCSSをページごとに振り分けて指定し適用してみようと思います。
テーマによって優先度の高いスタイルが定義されている場合もあるので、使用中のテーマごとに正しくCSSセレクタを記述する必要があります。
ページといっても種類が多いので、今回は「トップページのみ」と「投稿ページのみ」を例としてbody_classの理解が深まるようになればと思います。
トップページのみ
たとえば、body_classで出力したclassでトップページのみのヘッダー背景色を他のページとは違うカラーにするという単純なスタイル変更です。
body_classはWordPressのホームの場合は「home」というクラス名を出力してくれます。このhomeというクラス名を指定することで、ホームだけに適用したいCSSを個別に記述することができるのです。
トップページのヘッダーをイエロー
トップページ以外のヘッダーには適用されない
ホームだけ適用できるので、他のページのカテゴリーやタグ、投稿ページなどのヘッダーは全体で適用しているCSSの記述が適用されています。
投稿ページのみ
次はbody_classで取得した投稿ページのみのclassを使用して、特定の投稿ページのみに適用するCSSを記述して個別にスタイルを変更します。
たとえば、投稿ページのidが1747のページにはboy_classで「post-1747」がbodyのclass属性で追加されています。このクラス名を使用してpost-1747の投稿ページのみに画像をCSSで指定し表示します。
投稿ページのidが1747の投稿のみ画像適用
1747の投稿以外は画像が適用されない
投稿ページの特定ページのみに限定しているので、それ以外の投稿ページにはCSSが適用されず記述したCSSは振り分けられます。
