WordPress関数のbody_classは、投稿やページのbodyタグに個別のclass名を追加してくれます。個別のブログ記事、固定ページで別々のデザインに仕上げたいときに役立ちます。
body_classは多くのWordPressテーマで使われておりheader.phpのbodyタグの属性を作るために次のように呼び出されるのが一般的です。
<body <?php body_class(); ?>>
これにより、ブログ記事ごと、固定ページごとに固有のclassが作成されます。たとえば、作成されたサイトのフロントページ(トップページ)のHTMLソースを見ると、次のようなbodyタグが作成されます。
<body class="home page …略…">
この「home」がフロントページであることを示しています。これを活用すれば、トップページのみサイドバーを非表示にするようなCSSも作成できます。
「サイドバーを非表示に」というと「.sidebar {display: none;}」のようなCSSを思い付くかもしれませんが、これではすべてのページのサイドバーが消えてしまうので、「トップページのみ」という条件を付けるために「home」というフロントページ固有のclass名を利用します。
.home .sidebar {display: none;}
このようにページ固有のclass名を活用すれば、他のページに影響を与えずに特定のページのみのデザインを変更することができます。
その他、ブログ記事、固定ページ、アーカイブ、カテゴリーなどによって個別のclass名が追加されます。以下に例を紹介します。
- トップページ — home
- 特定の投稿IDの投稿やページ — page-id-70
- 親ページ — page-parent
- 子ページ — page-child
- アーカイブ — archive
- カテゴリー — category/category-news/category-2
- 個別投稿 — single/single-post
個別のページごとに生成されたclass名を活用すれば、サイトの雰囲気とはまったく異なるランディングページを混ぜたり、ヘッダーやフッターを取り除いたページを混在させることができます。WordPressテーマを自作するときもbody_class関数を使ってページごとのclass名を生成しておけば、カスタマイズ性を高めることができます。いろいろとご活用ください。