body要素に独自のクラスを設定する
WordPressではbody_class()を使うことで、ページの種類に応じたclass属性をbody要素に割り当てることができます。また、パラメータにクラス名を入力することで、独自のクラスを設定することもできます。
body_class関数による出力
body要素にページの種類に応じたクラス属性や独自のクラスを設定したい場合は、HTMLのbody要素にbody_class関数を使います。具体的には次のコード例のように入力します。
//ページの種類に応じたクラス属性を出力
<body <?php body_class(); ?>>
...
</body>
//body要素に独自のクラスを設定(クラス名:myclass)
<body <?php body_class('myclass'); ?>>
...
</body>
WordPressで上記のコードを実行すると、HTMLでは次のように変換されます。(フロントページで最新の投稿を設定している場合の例)
//ページの種類に応じたクラス属性を出力
<body class="home blog">
...
</body>
//body要素に独自のクラスを設定(クラス名:myclass)
<body class="home blog myclass">
...
</body>
出力されるクラス名
body_class関数ではページの種類に応じて下記のクラス名が出力されます。
ページの種類 | 出力されるクラス名 |
---|---|
フロントページ(表示設定:最新の投稿の場合) | home blog |
フロントページ(表示設定:固定ページの場合) | home page page-id-{ID} |
投稿ページ | single single-post postid-{ID} |
固定ページ | page page-id-{ID} |
カテゴリーアーカイブ | archive category category-{slug} category-{ID} |
タグアーカイブ | archive tag tag-{slug} tag-{ID} |
タクソノミーアーカイブ | archive tax-{taxonomy_name} |
日付アーカイブ | archive date |
著者アーカイブ | archive author author-{ナイスネーム} author-{ID} |
検索結果ページ(検索結果あり) | search search-results |
検索結果ページ(検索結果なし) | search search-no-results |
404ページ | error404 |