【WordPress】各ページのbodyタグに任意のクラス名を自動設定する

ケケンタ

こんにちは！　ケケンタです。

今回の記事では

WordPressの各ページのbodyタグに
任意のクラス名を自動設定する

をご紹介します。

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

各ページのbodyタグに任意のクラス名を自動設定するソースコード

今回ご紹介するソースコードはfunctions.phpに追加をします。
作業をする際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

早速ですが、以下が今回ご紹介するソースコードです。

以下をfunctions.phpの最後に記述

function add_slug_body_class( $classes ) {
  global $post;
  if ( isset( $post ) ) {
    // ページのスラッグをクラス名として設定
    $classes[] = $post->post_name;
  }
  return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

今回は例として、各ページのbodyタグのクラスに「そのページのスラッグ」を設定しています。

ケケンタ

上記のハイライト行の右辺「$post->post_name」のようにスラッグなどそのページ独自の情報を取得して設定するのがポイントです。

上記のソースコードを利用すればCSSを書くときもスラッグを基準にできるため、ページの判別がしやすかったりします。

まとめ

簡単ですが、以上が「WordPressの各ページのbodyタグに任意のクラス名を自動設定する方法」でした。

WordPressはカスタマイズ性が非常に高く、今回のようにいわゆるフィルターフックを利用することでより扱いやすいサイトを制作することが可能です。

ケケンタ

この記事が少しでもお役に立ったなら何よりです。

WordPress関係の記事を他にもたくさん公開しているため、ご興味のある方はぜひご覧いただけると嬉しいです。

それでは最後までご覧いただきありがとうございました。