この記事にはプロモーションが含まれています。

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

2024-06-10

ケケンタ

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

今回の記事では

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

をご紹介します。

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

各ページの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を書くときもスラッグを基準にできるため、ページの判別がしやすかったりします。