[WordPress]ページのスラッグを自動的にBody要素のクラスとして追加する方法

Body要素に各ページのスラッグを追加するメリットについて

WordPressでカスタマイズする際に、各投稿や各固定ページでそれぞれ異なった処理をしたいことがよくあります。そのような場合、Body要素に各ページのスラッグを追加することで容易に処理することが可能になります。つまりBody要素にページのスラッグを自動的に追加することには次のようなメリットがあります。

ページごとにスタイルを変更することができる

ページごとに異なるスタイルを適用することができます。例えば、トップページと個別の記事ページで背景色を変更したい場合、Body要素にスラッグのクラスを追加しておけば、それぞれのページで異なるスタイルを適用することができます。

ページのスラッグを使用したスタイルシートの書き方が簡単

Body要素にスラッグのクラスを追加することで、ページのスラッグを使用したスタイルシートの書き方が簡単になります。例えば、記事のスラッグが「hello-world」の場合、CSSでは次のように記述することができます。

body.post-hello-world {
    background-color: #cccccc;
}

スラッグを利用したページごとのJavaScript処理が容易

Body要素にスラッグのクラスを追加することで、JavaScriptでもページのスラッグを利用した処理が容易になります。例えば、記事のスラッグが「hello-world」の場合、JavaScriptでは次のように記述することができます。

$(function() {
    if ($('body').hasClass('post-hello-world')) {
        // 記事のスラッグが「hello-world」の場合の処理
    }
});

Body要素にスラッグのクラスを追加する方法

テーマのfunctions.phpファイルを開き以下のコードを追加します。間違ったコードを挿入するとエラーになりページが表示されなく場合があるので、エラーが表示された場合は元に戻せる環境を用意してからコードを挿入してください。

// スラッグをbody要素のクラスに追加する
function add_slug_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
        $classes[] = $post->post_type . '-' . $post->post_name;
    }
    return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

これにより、Body要素に記事や固定ページのスラッグが追加されるようになります。

Body要素に追加されるクラスのルール

例えば、投稿のスラッグが「hello-world」の場合、Body要素には「post-hello-world」というクラスが追加されます。
固定ページの場合は「page-（固定ページのスラッグ）」というクラスが追加されます。
カスタム投稿の場合は「（カスタム投稿名）-（固定ページのスラッグ）」というクラスが追加されます。
このクラスを使用することで、自動的に特定のページや記事に対してスタイルを適用することができます。