WordPressで作られたサイトには、bodyタグに特徴的なクラス名が追加されています。例えば、投稿ページでは、以下のようなクラスが付与されていることが多いですね。
<body class="post-template-default single single-post postid-数字 single-format-standard logged-in">これらは、WordPressのテンプレートタグである「body_class()」によって出力されています。今回は、body_classの仕組みから基本的な使い方について解説してきます。
body_class()とは？
WordPress2.8から導入されたテンプレートタグです。こちらを利用することで、WordPressのオプションや生成されるページの種類などによって出力するクラス名を自動的に変更してくれます。
公式ページ：WordPress Developer Resources | Function| body_class
例えば、冒頭で述べたクラス名は、以下のような条件のもと表示されています。
| post-template-default | ページテンプレートの内容に応じて表示 |
| single | 個別ページ（投稿 or カスタム投稿）に表示 |
| single-post | 投稿の個別ページに表示 |
| postid-数字 | 投稿の個別ページ単位で表示（数字は投稿のID） |
| single-format-standard | サポートされている投稿フォーマットの内容に応じて表示 |
| logged-in | ログイン時に表示 |
このように様々な条件に応じてクラス名を付与してくれれば、各ページのスタイリングが非常に楽になりますね。
body_class()の使い方
それでは、body_class()を使ってみましょう。使い方は非常に簡単で、以下のようにbody開始タグの中にbody_class()を書き込むだけです。
<body <?php body_class(); ?>>これだけでbodyタグにWordPressの条件に応じたクラスが表示されるようになります。実際に様々なページをブラウザの開発者ツールで確認してみるといいですね。
ただし、場合によっては、独自のクラスを追加したり、特定の条件下でクラス名を変更したりと柔軟な操作が必要になります。以下の操作方法についても解説しますので、ぜひご覧ください。
- 基本的なクラスの追加
- 条件に応じてクラスを追加
- 既存のクラスを削除
基本的なクラスの追加
まずは、独自のクラスを追加する方法です。body_class()は、引数に入力した文字列をクラス名として出力する仕様となっているため、引数に表示したいクラス名を入れるだけで追加できます。
例えば、bodyタグに「my-body-class」と追加する場合は以下になります。
// my-body-classを追加
<body <?php body_class( 'my-body-class' ); ?>>複数のクラスを追加したい場合も同じ要領で引数にクラス名を記入するだけです。以下は「my-body-class1」と「my-body-class1」の2つを追加する例です。
// クラス名の間を半角スペースで区切るだけ
<body <?php body_class( 'my-body-class1 my-body-class2' ); ?>>
// 配列で指定してもOK
<body <?php body_class( array( 'my-body-class1', 'my-body-class2' ) ); ?>>なお、こちらの方法で追加したクラス名は、すべてのページに共通して出力されます。特定の条件の時だけこのクラス名を反映させたい場合は次に紹介する方法をオススメします。
条件に応じてクラスを追加
次に紹介するのはフィルターフックを使ってクラス名を追加する方法です。body_class()の内部で使われているget_body_class()では、クラス名を返す前にbody_classと呼ばれるフィルターが用意されています。
公式ページ：WordPress Developer Resources | Hook | body_class
このフィルターを使うことで、functions.phpからbodyクラスに変更を加えることができます。この引数（$classes）には、条件で仕分けしたクラス名が配列で格納されているため、最後のreturnを絶対に忘れないでください。
// my-body-classを追加
add_filter( 'body_class', function( $classes ){
$classes[] = 'my-body-class';
return $classes;
} );
// クラスを複数追加する場合
add_filter( 'body_class', function( $classes ){
$classes[] = 'my-body-class1';
$classes[] = 'my-body-class2';
return $classes;
} );また、以下のようにお好きな条件でクラス名を制御することも可能です。基本的な条件分岐タグを覚えておけば、様々なページで柔軟なクラス名を出力できるようになりますね。
add_filter( 'body_class', function( $classes ){
// トップページのみ独自クラス追加
if( is_front_page() ){
$classes[] = 'my-body-class';
}
return $classes;
} );より高度な条件でクラス名を操作したい場合は、こちらの方法をオススメします。
既存のクラスを削除
フィルターフックを使えば、body_class内ですでに定義されているクラス名を削除することも可能です。以下は個別ページに自動的に付与されるクラス名「single」を削除する例です。
例）個別ページに付与される「single」を削除
add_filter( 'body_class', function( $classes ){
if ( in_array( 'single', $classes, true ) ) {
unset( $classes[ array_search( 'single', $classes ) ] );
}
return $classes;
} );あまり既存のクラスを削除する機会は少ないと思いますが、著者ページで出力されるクラス「author-ユーザー名」は削除したい方が多いのではないでしょうか。ユーザー名によってクラス名が変わりますが、このようなクラスも削除できますので、ぜひ参考にしてください。
例）著者ページに表示される「author-ユーザー名」の削除
add_filter( 'body_class', function( $classes ){
$author_class = 'author-' . get_the_author_meta( 'user_login' );
if ( in_array( $author_class, $classes, true ) ) {
unset( $classes[ array_search( $author_class, $classes ) ] );
}
return $classes;
} );まとめ
今回は、WordPressのテンプレートタグbody_class()の使い方について解説しました。便利な関数ですが、必ずしも導入する必要はありません。ページ毎に固有のクラス名が出力されたほうがよりスムーズに開発を進めれる、と判断した場合に利用することをオススメします。
ちょっとだけページによって表示されるクラス名を変えたい程度であれば、以下のような方法で実現できるので、こちらもぜひお試しください。
<?php
// ベースとなるクラス名
$body_class = 'basic_class';
// トップページのみ表示するクラス名
if( is_front_page() ){
$body_class .= ' front-page';
// 個別ページのみ表示するクラス名
}elseif( is_single() ){
$body_class .= ' single';
}
?>
<body class="<?php echo $body_class; ?>">
コメント