ウェブログ

body_classにページスラッグ名を含ませたりオリジナルのclassを追加



WordPressは共通のヘッダーをテンプレートファイルとして利用することにより、全ページのヘッダーを共通で管理できるメリットがあります。

しかし全ページ共通がゆえに、各ページに細かい設定をする場合、「固定ページなら◯◯を表示」「カテゴリーページなら◯◯を表示」などの条件分岐を行い表示を分ける必要があります。

ページの構築方法の一つとして、各ページの独自のレイアウトを実現するためにbodyタグに独自のidやclassを付与することで、ページ全体のデザインを制御できます。
WordPressのテンプレートタグにbody_classというものがあり、bodyタグに独自のclassを追加することができます。

例えば、トップページの場合はトップページを表す「home」、ログイン中は「logged-in」といったように、状況に応じてクラスを追加してくれます。

固定ページや投稿等のページの場合でも独自のclassを吐き出してくれるのですが、id名がベースだったりしてイマイチ使い勝手がよくありません。

そこで、slug名に使われている名称をbody_classに含めることで、例えばサービス概要ページ(スラッグ名”service”)はbodyタグにserviceを含ませられ、わざわざ条件分岐を作らなくてもCSSでのデザインやレイアウト制御が簡単になります。

前置きが長くなりましたが、bodyタグのclass名に反映するためのカスタマイズをご紹介します。

サンプルコード

以下をfunctions.phpの任意の場所へ書きます。バックアップは忘れずにとっておいてください。

固定ページはスラッグ名、投稿とカテゴリー一覧ページはカテゴリー名を含ませる

固定ページの場合は先ほどの例のように、スラッグ名をbodyタグのclass名に含ませられます。
万が一日本語スラッグを採用している場合は文字化けするためご注意ください。(class名として利用しないため運用には問題ないと思いますが)


スラッグ名が「sample-page」の固定ページ例です。上は今回のカスタマイズコードを入れた場合にスラッグ名が入っているのがわかると思います。
下は普通のbody_class。スラッグ名は入っていません。

投稿、カテゴリー一覧の場合はその投稿のカテゴリースラッグを表示しますので、カテゴリー毎の制御が可能になります。

モバイル用の専用classを吐き出す


モバイル端末で閲覧しているときに、”mobile”というclass名を吐き出すようにしています。
これにより、モバイル端末の場合のみ適用したいCSSを簡単に適用することができます。
モバイル端末にはスマホ、タブレットが含まれます。

自分で独自に設定したいクラス名を含めることも可能

例ではコメントアウトしていますが、含めたい任意のクラス名をbody_classテンプレートタグに含めることが可能です。
サンプルコードの下記の部分のコメントアウトを取り、「任意のクラス名」というところを書き換えて下さい。


例として、「something_class」というクラス名を追加してみました。無事に追加されているのがわかります。

body_classタグを含めることをお忘れなく!

当たり前ですが、テンプレートファイル側はbody_classテンプレートタグが含まれている必要があります。
ちなみにWordPress4.9.1時点でのデフォルトテーマのtwentyseventeenには最初から設定されています。

オリジナルテーマ開発の場合やクライアントワークで各ページ毎の背景画像が変わる・・・なんてときに使いやすいかと思います。
ご参考になれば幸いです。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり