WordPress – テンプレートタグ「body_class」を活用する

テンプレート内のbodyタグを以下のように記述すると、ページが出力されたときにそのページに関するクラスを自動的に付与してくれます。
ページごとに異なるCSSを適用したいときなどに役立ちます。

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

カッコ内に文字列を入力して任意のクラスを追加することもできます。複数追加する場合はスペースで区切ります。

<!-- 任意のクラスを追加 -->
<body <?php body_class('custom-classes'); ?>>
<!-- 任意のクラスを追加(複数) -->
<body <?php body_class('custom-classes1 custom-classes2 custom-classes3'); ?>>

使い方の例

例)ページIDが「10」の固定ページでのみaタグの文字色を赤にしたい。

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

<!-- 出力されるbodyタグのクラス -->
<body class="page-template-default page page-id-(ページID) logged-in admin-bar customize-support" cz-shortcut-listen="true">
/* CSS */
body.page-id-10 a {
  color: red;
}

そのほか、ページスラッグを追加する方法や不要なクラスを付与させない方法などありますが、別記事にて解説する予定です。

タイトルとURLをコピーしました