WordPressで特定ページのbodyタグに任意のクラス名を追加する方法｜functions.php

とあるWebサイトでトップページの改修をしていた時、クライアントに確認してもらうために本番の固定ページに仮で改修後のページをアップしたのですが一部崩れが発生しました。

確認したところ、改修前のCSSでbodyタグに付与されている.homeに対してスタイルがふられており、今回テストアップで利用した固定ページにはこのクラスが付与されていないことが原因でした。

ちなみにこの.homeはWordPressのテンプレートタグである「body_class()」によって出力されています。

最終的には改修後のページはトップページとして公開されるため.homeは付与されるので問題ないのですが、テストアップで確認してもらうときに困るので調べたところ、次の方法があったので備忘がてら記事にしておきます✍️

WordPressで特定ページのbodyタグに任意のクラス名を追加したい時は、functions.phpに記述すればOK

下記コードをfunctions.phpに記述します。

if (is_page('2442'))の条件部分と、$classes[] =の後のクラス名は適宜変更してください。

function page_specific_body_class($classes = '') {
    if (is_page('2442')) { // 特定のclassを追加したいページを指定
        $classes[] = 'home'; // 追加したいclass
    }
    return $classes;
}
add_filter('body_class', 'page_specific_body_class');

ひとこと

たまにこういったことがあり困っていたのですが、functions.phpでできたのね〜〜〜
CSSの方を直すのは結構手間だったりするので、これからはこの方法を利用しよう。