WordPressをスタイルシートでカスタマイズする時に、body_class関数を使用すると、bodyタグにテンプレートごとにことなるクラス名を付与することができる。シングルサイトとマルチサイトで挙動を比較する。
WordPressテンプレートタグ：body_class()
body_classはWordPressが準備しているテンプレートタグ（関数）のこと。bodyタグ内にclass属性を付与することができる。付与される属性値はテンプレートを識別して選択されるが、任意のクラスを付与することもできる。
使い方
<body <?php body_class( $class ); ?>>
以下のソースコードが吐き出される。id=2の固定ページをHOMEに設定している場合の例。
<body class="home page-template-default page page-id-2">
出力されるクラス名は、テンプレートの種類で決まる。シングルサイトとマルチサイトで違いはない。
| メインブログ | home blog |
|---|---|
| フロントページ | home page page-id-ページID |
| 投稿ページ | single single-post postid-ページID |
| 固定ページ | page page-id-ページID page-template page-template-テンプレート名 page-parent（親ページ） page-child（子ページ） parent-pageid-parent-ID（子ページ） |
| カテゴリー | archive category category-カテゴリーのスラッグ |
| タグ | archive tag tag-タグのスラッグ |
| 日別 | archive date |
| 著者 | archive author author-ユーザー名 |
また、見慣れないクラス名も確認できた。
| logged-in | ログイン情報がある時に表示される。 |
|---|---|
| admin-bar | ダッシュボード＞ユーザー＞プロフィール＞ツールバーをONにすると表示される。 |
| customize-support | テーマのカスタマイズ機能のために追加されるclass。テーマをカスタマイズすることができる adminユーザがページを表示するときにだけ、body要素に追加される。 |
マルチサイトで子サイトをクラス名で識別したい
マルチサイトの子サイトを識別するためのクラス名は付与されないようだ。したがって、コードを書いて対応する。
function add_multisite_class( $classes ) {
global $current_blog, $current_site;
if ( is_multisite() ) {
if ( is_main_site() ) {
$classes[] = 'main-site';
} else {
if ( is_subdomain_install() ) {
$slug = substr( $current_blog->domain, 0, strpos( $current_blog->domain, '.' ) );
} else {
$slug = trim( $current_blog->path, '/' );
}
$classes[] = 'site-' . $slug;
}
}
return $classes;
}
add_filter( 'body_class', 'add_multisite_class' );
body_classに”site-hoge”を出力できるようになる。
任意のクラス名を追加する
追加したいクラス名をbody_class()に引数として渡すと、クラス名として追加できる。
body_class( 'class-name' );
testというクラス名を渡したいのであれば、
body_class( 'test' );
と記述することでクラス名を追加できる。
<body class="home page-template-default page page-id-2 test">
半角スペースで区切ってあげることで複数のクラスを追加することもできる。
また独自のクラス名も追加できるが省略。