026
body要素に自動でクラスを割り振る
Library
WordPressにはbody要素に自動でクラスを割り当てる関数、body_class()が用意されています。ページの種類に応じてクラスが自動的に変わるので、スタイルを割り当てたり、JavaScriptによる判別が容易になったりするメリットがあります。
| 用例 |
|
|---|---|
| 関連 | |
| Codex |
Body要素に自動的にクラスを割り当てる
Bodyクラスに自動的にクラスを割り当てるには次のようにします。
<body <?php body_class(); ?>>この関数はclass=””を含めて出力します。この実行結果は、たとえば次のようになります。
フロントページでの出力例
<body class="home blog logged-in admin-bar no-customize-support">個別ページでの出力例
<body class="post-template-default single single-post postid-140 single-format-standard logged-in admin-bar no-customize-support">カテゴリーアーカイブでの出力例
<body class="archive category category-6 logged-in admin-bar no-customize-support">覚えておくと便利なクラス名
出力されるクラスはCodexにまとまっていますが、どのようなクラスがあるかをいちいち覚える必要はありません。適宜クラスを確認し、スタイルを適用し分けるなどすればよいでしょう。
ただ、「だいたいこのくらいの単位でクラス名が割り振られる」ということを頭に入れておくとCSS設計には便利ですので、一部を紹介しておきます。
| フロントページ（最新の投稿を設定している場合） | home blog |
|---|---|
| フロントページ（固定ページとして設定している場合） | home page page-id-{ID} |
| 個別ページ（投稿の場合） | single single-post postid-{ID} |
| 個別ページ（カスタム投稿の場合） | single single-{post_type} postid-{ID} |
| カテゴリーアーカイブページ | archive category category-{slug} |
| タグアーカイブページ | archive tag tag-{slug} |
| タクソノミーアーカイブページ | archive tax-{taxonomy_name} |
| 検索結果ページ（検索がヒットした場合） | search search-results |
| 検索結果ページ（検索がヒットしなかった場合） | search search-no-results |
| 404ページ | error404 |
Comment