2021-06-09

【WordPress】ページごとに異なるbodyタグのclassをつける方法

今回は、WordPressでページごとに異なるbodyタグのclassをつける方法について紹介していきます。

ページ単体でCSSを効かせたい時に便利です。

方法は簡単で、bodyに対して以下のコードを追加したらOKです。

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

<body <?php body_class(); ?>>のコードを書くことで、ページごとに異なるclassをbodyタグに自動で付けることが出来ます。

例えば、トップページだと以下のような文字列を表示します。

<body class="home ........">

個別投稿ページだと、以下のような文字列に。

<body class="single postid-{記事ID} ........">

固定ページだと、以下のような文字列になります。

<body class="page page-id-{記事ID} ....">

上記のように、ページごとに出力されるbodyのclassを使うことで、ページごとに個別でCSSを適応させることが出来るメリットがあります。

他にもclassの種類はあるので、もっと詳しく知りたい人は、「テンプレートタグ/body class」の記事を参考にしてみてください。

まとめ

以上が、WordPressでページごとに異なるbodyタグのclassをつける方法でした。

DOWNLOAD

ブログ用WordPressテーマを無料配布中

実務で使える構成・設計をベースにしたテーマです。
すぐにブログ運用を始めたい方はこちらからダウンロードできます。

Webサイトの集客や導線設計でお悩みではありませんか？

当社では、データ分析（GA4・検索データ）をもとに、
成果につながるWeb制作・改善をご提案しています。

課題の整理からでも大丈夫ですので、まずはお気軽にご相談ください。

Author：

Yujiro

Profile：

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。