WordPressは共通のヘッダーをテンプレートファイルとして利用することにより、全ページのヘッダーを共通で管理できるメリットがあります。
しかし全ページ共通がゆえに、各ページに細かい設定をする場合、「固定ページなら◯◯を表示」「カテゴリーページなら◯◯を表示」などの条件分岐を行い表示を分ける必要があります。
ページの構築方法の一つとして、各ページの独自のレイアウトを実現するためにbodyタグに独自のidやclassを付与することで、ページ全体のデザインを制御できます。
WordPressのテンプレートタグにbody_classというものがあり、bodyタグに独自のclassを追加することができます。
例えば、トップページの場合はトップページを表す「home」、ログイン中は「logged-in」といったように、状況に応じてクラスを追加してくれます。
//通常の場合のトップページbodyタグ <body> //body_classを使った場合のトップページbodyタグ <body class="home blog logged-in admin-bar no-customize-support hfeed has-header-image has-sidebar colors-light">
固定ページや投稿等のページの場合でも独自のclassを吐き出してくれるのですが、id名がベースだったりしてイマイチ使い勝手がよくありません。
そこで、slug名に使われている名称をbody_classに含めることで、例えばサービス概要ページ（スラッグ名”service”）はbodyタグにserviceを含ませられ、わざわざ条件分岐を作らなくてもCSSでのデザインやレイアウト制御が簡単になります。
前置きが長くなりましたが、bodyタグのclass名に反映するためのカスタマイズをご紹介します。
目次
サンプルコード
以下をfunctions.phpの任意の場所へ書きます。バックアップは忘れずにとっておいてください。
/*
* body_classにページスラッグ名を含ませたりオリジナルのclassを追加&タブレットとスマホの場合のクラスも追加
*/
function pagename_class($classes = '') {
if (is_page()) { //slugを追加
$page = get_page(get_the_ID());
$classes[] = $page->post_name;
} elseif (is_category() || is_single()) { //slugを追加
$category = get_the_category();
$classes[] = $category[0]->slug;
}
if (wp_is_mobile()) {
$classes[] .= 'mobile'; //mobileの場合classを追加
}
//$classes[] .= '任意のクラス名'; //その他必要なクラス名があれば追加
return $classes;
}
add_filter('body_class','pagename_class');固定ページはスラッグ名、投稿とカテゴリー一覧ページはカテゴリー名を含ませる
固定ページの場合は先ほどの例のように、スラッグ名をbodyタグのclass名に含ませられます。
万が一日本語スラッグを採用している場合は文字化けするためご注意ください。（class名として利用しないため運用には問題ないと思いますが）
スラッグ名が「sample-page」の固定ページ例です。上は今回のカスタマイズコードを入れた場合にスラッグ名が入っているのがわかると思います。
下は普通のbody_class。スラッグ名は入っていません。
投稿、カテゴリー一覧の場合はその投稿のカテゴリースラッグを表示しますので、カテゴリー毎の制御が可能になります。
モバイル用の専用classを吐き出す
モバイル端末で閲覧しているときに、”mobile”というclass名を吐き出すようにしています。
これにより、モバイル端末の場合のみ適用したいCSSを簡単に適用することができます。
モバイル端末にはスマホ、タブレットが含まれます。
自分で独自に設定したいクラス名を含めることも可能
例ではコメントアウトしていますが、含めたい任意のクラス名をbody_classテンプレートタグに含めることが可能です。
サンプルコードの下記の部分のコメントアウトを取り、「任意のクラス名」というところを書き換えて下さい。
//$classes[] .= '任意のクラス名'; //その他必要なクラス名があれば追加
例として、「something_class」というクラス名を追加してみました。無事に追加されているのがわかります。
body_classタグを含めることをお忘れなく！
当たり前ですが、テンプレートファイル側はbody_classテンプレートタグが含まれている必要があります。
ちなみにWordPress4.9.1時点でのデフォルトテーマのtwentyseventeenには最初から設定されています。
<body <?php body_class(); ?>>
オリジナルテーマ開発の場合やクライアントワークで各ページ毎の背景画像が変わる・・・なんてときに使いやすいかと思います。
ご参考になれば幸いです。
