WordPress Logo

今日紹介する［body_class();］は、WordPress 2.8 以降から使えるようになったテンプレートタグで、各ページの種類によって自動で class を割り当ててくれるとっても便利な機能です。
オリジナルで WordPress テーマを作成しているのであれば、この body_class(); の使い方は是非ともマスターしておきましょう。

［body_class();］の基本的な使い方

基本的な使い方はとても簡単。<body> タグを使っている部分を下記のように書き換えるだけです。

<body <?php body_class(); ?>>

たったこれだけで、表示されているウェブページの種類によって class を付与してくれるようになります。便利！
WordPress にもともと梱包されているデフォルトのテーマ、［Twenty Thirteen］や［Twenty fourteen］でも使われているので見覚えがある方も多いかもしれませんね。

ちなみに、このサイトのトップページでは下記のような class が自動で付与されています。

<body class="home blog">

WordPress の管理画面にログインしている状態だと、さらに「logged-in」というクラスも追加され、以下のようになります。

<body class="home blog logged-in">

また、各投稿記事によっても独自のクラス名が追加されます。
例えば、あなたが今ご覧になっているこのページでは、下記のようなclass名が表示されているはずです。

<body class="single single-post postid-1316 single-format-standard">

このケースですと「postid-1316」の部分が、この記事のみに割り当てられたクラス名になります。

もちろん、アーカイブページや固定ページにもそれぞれに対応するクラス名が割り当てられるので、スタイルシートを使って各ページ毎に異なるデザインを適用したい場合などにかなり便利です。

参考記事：テンプレートタグ/body class – WordPress Codex 日本語版

［body_class();］で表示されるclass名

<?php body_class(); ?> では、次の値の1つ以上が body のクラス名として書き出されます。

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single postid-(id)
  • attachmentid-(id)
  • attachment-(mime-type)
  • author
  • author-(user_nicename)
  • category
  • category-(slug)
  • tag
  • tag-(slug)
  • page-parent
  • page-child parent-pageid-(id)
  • page-template page-template-(template file name)
  • search-results
  • search-no-results
  • logged-in
  • paged-(page number)
  • single-paged-(page number)
  • page-paged-(page number)
  • category-paged-(page number)
  • tag-paged-(page number)
  • date-paged-(page number)
  • author-paged-(page number)
  • search-paged-(page number)

body_class(); へ独自のクラスを追加する方法

おおむね、body_class(); が書き出すクラス名には満足していますが、特殊な処理を施す場合など、独自のクラス名を追加したいケースもあるかと思います。
そんなとき。
body_class(); に引数を指定すれば、一瞬で目的が達成されます。

<php body_class( "追加したいクラス名" ); ?>

たったこれだけ。
複数追加したい場合は、半角スペースで区切ればＯＫです。

補足

通常のウェブサイト制作であれば、body_class(); に独自のクラス名を追加したいケースはほぼ皆無だと思います。
むしろ、もし body_class(); に独自のクラス名を追加しなければならない状況に陥ったとしたら、ウェブサイトが複雑になりすぎている可能性が高いため、設計段階から見直したほうがいいかもしれません。

  • 任意のページだけ背景色を変えたい
  • 各種モバイル端末ごとに表示を変えたい

などの理由がない限りは、デフォルトのまま使用したほうがいいでしょうね。