WordPressでbodyにクラスを追加する方法

MARKLEAPS

2021.10.01

bodyにbody_classを使用すると、ページごとに異なるclassを追加でき、
ページごとにスタイルを変えることができます。

header.php のbody開始タグを以下の通りに書き変えます。

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

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

※デフォルトテンプレートにははじめからbody_classが記述されています。
　オリジナルテンプレートを作成する際に記述しておくと便利です。

【出力例】
・トップページ

<body class="home blog">

1	<body class="home blog">

・記事詳細ページ

<body class="post-template-default single single-post postid-3842 single-format-standard">

1	<body class="post-template-default single single-post postid-3842 single-format-standard">

・固定ページ

<body class="page-template-default page page-id-2">

1	<body class="page-template-default page page-id-2">

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

1	<body <?php body_class('class01'); ?>>

【出力例】

<body class="home blog class01">

1	<body class="home blog class01">

複数のclass名を追加する場合は、class名を半角スペースで区切って指定します。

<body <?php body_class('class01 class02'); ?>>

1	<body <?php body_class('class01 class02'); ?>>

【出力例】

<body class="home blog class01 class02">

1	<body class="home blog class01 class02">

WordPress

よく読まれている関連記事