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

検索

MENU

サンプルコード集

Webの基礎知識

coming soon…

  • コンテンツ制作中
PAGE TOP