【WordPress】body_class()でbodyタグにクラスを追加・削除する方法|直接引数での簡易な追加方法も解説

WordPressでは、body_class()関数を使って自動的にbodyタグにクラスを付与することができますが、特定の条件に基づいてクラスを追加・削除したい場合もあります。この記事では、手軽な方法からbody_classフィルターフックを使った本格的なカスタマイズまで解説します。

この記事でわかること

  • body_class()直接引数で固定クラスを手軽に追加する方法
  • body_classフィルターで条件に応じてクラスを追加・削除する方法
スポンサーリンク

固定のクラスを手軽に追加する方法

条件分岐が不要で、常に決まったクラスを1つ追加したいだけの場合は、body_class()に直接クラス名を渡すのが最も簡単です。header.php<body>タグを呼び出している箇所で指定します。

header.php:固定クラスを直接指定
<?php body_class( 'my-extra-class' ); ?>

複数のクラスを追加したい場合は、配列で渡すこともできます。

header.php:複数の固定クラスを直接指定
<?php body_class( array( 'my-extra-class', 'another-class' ) ); ?>

条件に応じてクラスを追加する方法

「シングル投稿ページの場合だけ」のように条件に応じてクラスを追加したい場合は、body_classフィルターフックを使います。以下のコードをテーマのfunctions.phpファイルに追加します。

functions.php:条件に応じてクラスを追加
function my_custom_body_classes( $classes ) {
    if ( is_single() ) {
        $classes[] = 'single-post-view';
    }
    return $classes;
}
add_filter( 'body_class', 'my_custom_body_classes' );

このコードでは、シングル投稿ページ(is_single()がtrueの場合)にsingle-post-viewというクラスをbodyタグに追加します。この方法により、投稿ページごとに異なるスタイルを簡単に適用できます。

クラスを削除する方法

デフォルトで追加されるクラスや不要なクラスを削除したい場合は、同じくbody_classフィルターの中でarray_diff()を使います。

functions.php:不要なクラスを削除
function my_remove_body_classes( $classes ) {
    $class_to_remove = 'example-class';

    return array_diff( $classes, array( $class_to_remove ) );
}
add_filter( 'body_class', 'my_remove_body_classes' );
array_diff()は対象が存在しなくてもエラーにならない
array_diff($classes, array($class_to_remove)) は、$class_to_remove$classesに含まれていなくてもエラーにならず元の配列がそのまま返るため、事前にin_array()で存在確認をする必要はありません。

このコードでは、example-classというクラスがbodyタグに含まれている場合に、それを削除します。これにより、スタイルの競合を避けることができ、ページの見た目を整理することができます。

よくある質問(FAQ)

Qbody_classフィルターでbodyタグに独自クラスを追加するには?
Aadd_filter(‘body_class’, function($classes){ $classes[] = ‘my-custom-class’; return $classes; })をfunctions.phpに追加します。条件分岐と組み合わせて特定のページのみに適用することもできます。
QWordPressが自動出力するbodyクラス(page-id-XXX等)を削除するには?
Abody_classフィルターでarray_diff()を使って削除したいクラスを取り除きます。複数のクラスをまとめて除外したい場合は、array_filter()で条件(例:’page-id-‘で始まるかどうか)に一致するクラスを除外する処理を書きます。
Qbody_class()とpost_class()の違いは何ですか?
Abody_class()はbodyタグに付与するクラスを出力し、ページ全体の状態(固定ページ・カテゴリー等)を示します。post_class()は各投稿のコンテナdivに付与するクラスで、投稿固有の情報(カテゴリー・タグ等)を含みます。

まとめ

  • 固定クラスbody_class('クラス名')と直接引数で渡す
  • 条件付きbody_classフィルターで追加・削除する
  • 削除array_diff()だけで十分(事前のin_array確認は不要)

これにより、サイトのカスタマイズがより柔軟になり、テーマのスタイル調整が容易になります。