【WP】bodyタグには「body_class();」を記述しよう

2021/2/18

2021/10/5

1741 views

「body_class();」記述

bodyタグに<?php body_class(); ?>を記述する

ワードプレスのオリジナルテーマを作成始めたら、まずはhtmlやbodyなどの大枠の要素を記述していくと思います。
そのときに必ずbodyタグに「 <?php body_class(); ?>」を記述するようにしましょう。
以下は記述例です。

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

記述するとどうなるの?

記述した場合、bodyタグに下記のようなclassが自動で付与されて表示されます。

<body class="home page-template page-template-index page-template-index-php page page-id-6 logged-in admin-bar no-customize-support">

それぞれ、どの固定ページや投稿、どのテンプレートファイル、どのユーザーがログインしているかなどを判別してclass名を返してくれています。
これを使うことにより、CSSで分岐条件セレクタとして使えることができます。
たとえば、トップページのフォントサイズだけ変えたい場合は以下のように指定することができます。

CSS

body.home {
    font-size: 120%;
}

まとめ

テンプレートタグだけで、bodyにさまざまなクラスを自動で付与してくれることで、多様な条件分岐で活用できます。
WordPressでサイト構築するひとつのメリットですね。

この記事へのコメント

  • まだ書き込みはありません

コメントを残す



このサイトの表示速度はどうですか?

当サイトはレンタルサーバーにConoHa WING(コノハウイング)を使っていますよ。

ページの先頭に戻る