2026年5月20日

WordPressのbody_class()を使ったページ別スタイリング

テーマ・デザイン

はじめに

body_class() はWordPressが自動的にbodyタグにクラスを付与する関数です。ページの種類・投稿ID・カテゴリ・テンプレートなどに応じたクラスが出力され、ページ別・条件別にCSSを適用できます。

症状・原因

トップページだけ背景色を変えたい
カテゴリごとにアクセントカラーを変えたい
特定の固定ページだけレイアウトを変えたい
カスタムクラスをbodyに追加したい

解決手順

ステップ1：body_class()の基本と出力クラス

// テンプレートの <body> タグに追加する
<body <?php body_class(); ?>>

WordPressが自動出力するクラス例：

| クラス | 条件 |

|-------|------|

| home | フロントページ（最新投稿） |

| front-page | フロントページ（固定ページ） |

| single | 投稿個別ページ |

| single-post | 投稿タイプが「post」 |

| single-{slug} | 投稿スラッグ |

| page | 固定ページ |

| page-id-{ID} | 固定ページID |

| page-template-{template} | ページテンプレート名 |

| category-{slug} | カテゴリアーカイブ |

| tag-{slug} | タグアーカイブ |

| logged-in | ログイン済みユーザー |

| admin-bar | 管理バー表示時 |

ステップ2：カスタムクラスを追加する

// functions.php
add_filter('body_class', function(array $classes): array {

    // トップページにカスタムクラスを追加
    if (is_front_page()) {
        $classes[] = 'is-top-page';
    }

    // カテゴリ別にテーマカラークラスを追加
    if (is_single()) {
        $cats = get_the_category();
        if ($cats) {
            $classes[] = 'theme-' . sanitize_html_class($cats[0]->slug);
        }
    }

    // ログインユーザーにクラスを追加
    if (is_user_logged_in()) {
        $classes[] = 'is-member';
    }

    // 不要なクラスを除去（軽量化）
    $classes = array_diff($classes, ['no-js']);

    return $classes;
});

ステップ3：body_class()を使ったCSS

/* トップページ専用スタイル */
body.home .site-header,
body.front-page .site-header {
    background: transparent;
    position: absolute;
    width: 100%;
}

/* カテゴリ別アクセントカラー */
body.category-news    { --color-accent: #2271b1; }
body.category-tips    { --color-accent: #00a32a; }
body.category-event   { --color-accent: #d63638; }

/* ページテンプレート別レイアウト */
body.page-template-full-width .site-main {
    max-width: 100%;
    padding: 0;
}

/* ログイン時のスタイル調整 */
body.logged-in .members-only {
    display: block;
}

/* 固定ページID別 */
body.page-id-42 .hero {
    background-image: url('/images/about-hero.jpg');
}

ステップ4：post_class()も同様に活用する

post_class() は個別の投稿要素にクラスを付与します。

// テンプレート内
<article <?php post_class('card'); ?>>
    <!-- 自動クラス: post, post-{ID}, type-post, status-publish, format-standard など -->
</article>

// カスタムクラスをpost_classに追加
add_filter('post_class', function(array $classes, array $css_class, int $post_id): array {
    if (get_post_meta($post_id, '_is_featured', true)) {
        $classes[] = 'is-featured';
    }
    return $classes;
}, 10, 3);

注意事項

body_class() のクラスは公開情報です。内部IDや機密情報を含むクラスを追加しないでください
page-id-{ID} クラスはIDが変わると壊れます。ページテンプレートやスラッグベースのクラスを使う方が堅牢です
除去した no-js クラスはJavaScript未対応ブラウザ向けのフォールバックCSS用です。JS対応状況に応じてクラスを切り替える場合はタグで行うことが多いです

まとめ

> を設定すれば、body.single-post・body.category-{slug}・body.page-id-{ID} などのクラスが自動付与されます。body_class フィルターでカスタムクラスを追加し、CSSでページ・カテゴリ・テンプレートごとに異なるデザインを適用できます。

Post Views: 14