ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2020.09.02  最終更新日:2021.02.18

WordPress

【wordpress】body_classでbodyに自動的にクラスを付ける方法&独自のクラスを付ける方法

ページの種類によって、自動的に異なるクラスをつける方法です。

body_classの使い方

bodyタグに以下のように追記をします。

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

上記のように書くことで、bodyに各ページ毎に異なるclassが付与されます。
ページ毎に見栄えを変えるため、bodyについたクラスを使ってcssを当てることができます。

実際にどのようなclassが付与されるか

front-page.php

homeとblogというclassが付与されます。

single.php

post-template-default、single、single-post、postid-XXXX などのclassが付与されます。

page.php

page-template-default、page、page-id-X などのclassが付与されます。

404.php

error404などのclassが付与されます。

独自のclassを付与する方法

例えば、bodyに、『sample』と『test』というclassを追加でつけたい場合、下記のように書くことで、追加することができます。

<body <?php body_class('sample test'); ?>>

bodyにslug名のクラスを付与する方法

bodyにslug名のクラスを付与する方法については、コチラに書いています。
併せてご確認ください!

wordpressでbodyにslug名のクラスを付与する方法のメモ

最新記事