閉じる

WordPressのbody_classを自在に操る！条件分岐とフィルターフックの実践テクニック

広告

WordPressのテーマ開発において、CSSの制御を柔軟にするために欠かせないのがbody_class()関数です。

この関数は、表示されているページの種類に応じて適切なクラス名を自動的に生成し、bodyタグに付与する役割を担っています。

デフォルトの状態でも多くのクラスが出力されますが、独自のクラスを追加したり、不要なクラスを削除したりすることで、より詳細なスタイリングが可能になります。

本記事では、2026年現在のベストプラクティスに基づき、フィルターフックや条件分岐を活用した実践的なカスタマイズ手法を詳しく解説します。

目次 [ close ]
  1. body_class関数の基本的な使い方
  2. フィルターフックを活用したクラスの追加
    1. 任意のクラスを全ページに追加する
    2. 特定のページのみにクラスを追加する条件分岐
  3. 投稿情報に基づいた高度なカスタマイズ
    1. カテゴリー名（スラッグ）をクラスに含める
    2. ページのスラッグをクラスとして追加する
  4. 不要なクラスを削除してHTMLをクリーンにする
  5. デバイス判定によるクラスの切り替え
  6. body_classカスタマイズ時の注意点
  7. まとめ

body_class関数の基本的な使い方

まず、WordPressテーマのheader.phpなどで、bodyタグにこの関数が記述されているか確認しましょう。

基本的には以下のように、HTMLのbodyタグ内に記述して使用します。

PHP
<body <?php body_class(); ?>>

このコードを記述することで、WordPressは自動的に「home」「archive」「single-post」といったクラスを生成します。

例えば、投稿ページを表示している場合、ブラウザ上では以下のようなHTMLが出力されます。

実行結果
<body class="post-template-default single single-post postid-123 logged-in">

このように、ページの種類やID、ログイン状態などが半角スペース区切りで自動的に付与される仕組みになっています。

フィルターフックを活用したクラスの追加

特定の条件に応じて独自のクラスを追加したい場合は、functions.phpにbody_classフィルターフックを使用します。

テンプレートファイルを直接編集せずにクラスを制御できるため、テーマのメンテナンス性が大幅に向上します。

任意のクラスを全ページに追加する

すべてのページに共通のクラスを追加したい場合の基本コードは以下の通りです。

PHP
function my_custom_body_class( $classes ) {
    // 追加したいクラス名を配列に挿入
    $classes[] = 'my-custom-layout';
    return $classes;
}
add_filter( 'body_class', 'my_custom_body_class' );

このコードを適用すると、すべてのページのbodyタグに「my-custom-layout」というクラスが追加されます。

特定のページのみにクラスを追加する条件分岐

WordPressの条件分岐タグ（Conditional Tags）を併用することで、特定のシチュエーションでのみクラスを付与できます。

例えば、特定の固定ページやカスタム投稿タイプのページのみに特別なデザインを当てたい場合に非常に便利です。

PHP
function my_conditional_body_class( $classes ) {
    // 固定ページの場合のみクラスを追加
    if ( is_page() ) {
        $classes[] = 'is-page-content';
    }
    
    // 特定のスラッグ「contact」を持つページの場合
    if ( is_page( 'contact' ) ) {
        $classes[] = 'contact-form-page';
    }

    return $classes;
}
add_filter( 'body_class', 'my_conditional_body_class' );

is_page()やis_single()などの関数を使い分けることで、狙ったページだけをピンポイントで装飾するCSSが書きやすくなります。

投稿情報に基づいた高度なカスタマイズ

さらに実践的な手法として、投稿のカテゴリー名やスラッグを自動的にクラス名として追加する方法を紹介します。

これにより、カテゴリーごとにサイトの配色を変更するといったデザインの実装が容易になります。

カテゴリー名（スラッグ）をクラスに含める

デフォルトではカテゴリーIDなどは付与されますが、スラッグ（名前）が含まれているとCSSの可読性が高まります。

PHP
function add_category_slug_to_body_class( $classes ) {
    if ( is_single() ) {
        global $post;
        foreach ( ( get_the_category( $post->ID ) ) as $category ) {
            // カテゴリースラッグを追加
            $classes[] = 'category-' . $category->category_nicename;
        }
    }
    return $classes;
}
add_filter( 'body_class', 'add_category_slug_to_body_class' );

このカスタマイズを適用すると、例えば「News」カテゴリーの投稿記事には「category-news」というクラスが付与されます。

ページのスラッグをクラスとして追加する

固定ページごとに個別のスタイルを適用したい場合、ページのスラッグをクラス名に含めると管理がスムーズです。

PHP
function add_page_slug_to_body_class( $classes ) {
    if ( is_page() ) {
        global $post;
        $classes[] = 'page-' . $post->post_name;
    }
    return $classes;
}
add_filter( 'body_class', 'add_page_slug_to_body_class' );

「about」というスラッグのページであれば、「page-about」というクラスが生成されるため、特定のページ専用のCSSを定義しやすくなります。

不要なクラスを削除してHTMLをクリーンにする

body_class()は便利な反面、プラグインなどが大量のクラスを追加し、HTMLが肥大化してしまうケースがあります。

サイトの軽量化やセキュリティの観点から、不要なクラスを削除する方法も覚えておきましょう。

PHP
function remove_extra_body_classes( $classes ) {
    // 削除したいクラス名のリスト
    $remove_classes = array(
        'tag-123',
        'custom-background'
    );

    // 配列から特定の値を削除
    $classes = array_diff( $classes, $remove_classes );
    
    return $classes;
}
add_filter( 'body_class', 'remove_extra_body_classes' );

array_diff関数を使用することで、特定のクラス名だけを除去した新しい配列を返すことができます。

デバイス判定によるクラスの切り替え

レスポンシブデザインだけでは対応が難しい場合、PHP側でデバイスを判定してクラスを付与する手法も有効です。

WordPress標準のwp_is_mobile()関数を利用すると、スマートフォンやタブレットからのアクセスを識別できます。

PHP
function add_device_body_class( $classes ) {
    if ( wp_is_mobile() ) {
        $classes[] = 'is-mobile-device';
    } else {
        $classes[] = 'is-desktop-device';
    }
    return $classes;
}
add_filter( 'body_class', 'add_device_body_class' );

この設定により、モバイル時のみ特定の要素を非表示にしたり、フォントサイズを最適化したりする調整がCSSのみで完結するようになります。

body_classカスタマイズ時の注意点

自由度の高いカスタマイズですが、いくつか注意すべきポイントがあります。

項目注意すべき内容
クラス名の重複WordPress標準のクラス名やプラグインが使用する名前と競合しないよう、独自の接頭辞（プレフィックス）を付けることを推奨します。
パフォーマンスフィルターフック内で重いデータベース処理を行うと、全ページの読み込み速度に影響を与えるため、処理は最小限に留めてください。
優先順位複数のプラグインがbody_classを操作している場合、add_filterの第3引数（優先度）を調整して、自分のコードが正しく適用されるようにします。

特に大規模なサイト制作では、意図しないクラスの削除や上書きが原因でレイアウトが崩れる可能性があるため、慎重な検証が必要です。

まとめ

body_class()のカスタマイズは、WordPressサイトのデザインの自由度を劇的に高めるテクニックです。

フィルターフックを活用することで、テンプレートファイルを汚さずにページごとのスタイル制御が可能になります。

投稿スラッグやカテゴリー、デバイス判定などを組み合わせた柔軟なクラス付与は、コーディング効率の向上にも直結します。

まずは基本的なクラスの追加から試し、ご自身のプロジェクトに最適なスタイリング基盤を構築してみてください。

URLをコピーしました！