2025年8月4日 / 最終更新日時 : 2025年8月4日 shimizuya WordPress

# WordPressのbody_class()解説

# WordPressのbody_class() 完全解説

## 目次

1. [body_class()とは](#bodyclass-とは)

2. [基本的な使い方](#基本的な使い方)

3. [出力される主なクラス](#出力される主なクラス)

4. [カスタムクラスの追加](#カスタムクラスの追加)

5. [実践的な使用例](#実践的な使用例)

6. [注意事項](#注意事項)

7. [トラブルシューティング](#トラブルシューティング)

## body_class() とは

`body_class()`は、WordPressが提供する重要なテンプレート関数の一つです。この関数は、HTMLの`<body>`タグに**自動的にCSSクラスを追加**してくれます。

### なぜ重要なのか？

– ページの種類に応じて**自動的に適切なクラス**が付与される

– CSSで**ページごとに異なるスタイル**を適用できる

– JavaScriptで**特定のページでのみ動作**するコードを書ける

– WordPressの**標準的な実装方法**

## 基本的な使い方

### ステップ1: テーマファイルで基本実装

`header.php`または`index.php`の`<body>`タグに追加します：

“`php

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

    <meta charset=”<?php bloginfo(‘charset’); ?>”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    <?php wp_head(); ?>

</head>

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

    <!– サイトの内容 –>

“`

### ステップ2: 実際の出力を確認

ブラウザで表示されるHTMLの例：

“`html

<!– トップページの場合 –>

<body class=”home blog logged-in admin-bar no-customize-support”>

<!– 投稿ページの場合 –>

<body class=”single single-post postid-123 single-format-standard logged-in admin-bar”>

<!– 固定ページの場合 –>

<body class=”page page-id-456 page-template-default logged-in admin-bar”>

“`

## 出力される主なクラス

### ページタイプ別クラス

| ページタイプ | 追加されるクラス | 説明 |

|————|—————–|——|

| トップページ | `home` | フロントページ |

| ブログ投稿一覧 | `blog` | 投稿の一覧ページ |

| 個別投稿 | `single`, `single-post` | 投稿の詳細ページ |

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

| カテゴリーページ | `category`, `category-{スラッグ}` | カテゴリー別一覧 |

| 検索結果 | `search`, `search-results` | 検索結果ページ |

| 404エラー | `error404` | 404エラーページ |

### ユーザー状態別クラス

“`php

// ログイン状態

logged-in          // ログイン済み

logged-out         // 未ログイン

// 管理者権限

admin-bar          // 管理バーが表示されている

no-admin-bar       // 管理バーが非表示

// テーマサポート

customize-support  // カスタマイザーがサポートされている

no-customize-support // カスタマイザーが無効

“`

## カスタムクラスの追加

### 方法1: 直接指定

“`php

<body <?php body_class(‘my-custom-class another-class’); ?>>

“`

出力例：

“`html

<body class=”home blog my-custom-class another-class logged-in admin-bar”>

“`

### 方法2: 配列で指定

“`php

<?php

$custom_classes = array(‘custom-layout’, ‘special-page’);

?>

<body <?php body_class($custom_classes); ?>>

“`

### 方法3: フィルターフックを使用（推奨）

`functions.php`に追加：

“`php

/**

 * body_classにカスタムクラスを追加

 */

function add_custom_body_classes($classes) {

    // 全ページに追加

    $classes[] = ‘my-theme-class’;

    // 条件分岐での追加

    if (is_front_page()) {

        $classes[] = ‘front-page-custom’;

    }

    if (is_single()) {

        global $post;

        $classes[] = ‘post-‘ . $post->post_name; // スラッグを追加

    }

    // モバイル判定（例）

    if (wp_is_mobile()) {

        $classes[] = ‘mobile-device’;

    } else {

        $classes[] = ‘desktop-device’;

    }

    return $classes;

}

add_filter(‘body_class’, ‘add_custom_body_classes’);

“`

## 実践的な使用例

### CSS での活用例

“`css

/* トップページのみのスタイル */

.home .hero-section {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    height: 100vh;

}

/* 投稿ページのみのスタイル */

.single-post .content {

    max-width: 800px;

    margin: 0 auto;

}

/* ログイン状態での表示調整 */

.logged-in .site-header {

    margin-top: 32px; /* 管理バーの高さ分 */

}

/* カテゴリー別のスタイル */

.category-technology .post-title {

    color: #2196F3;

}

.category-design .post-title {

    color: #E91E63;

}

/* モバイル専用スタイル */

.mobile-device .navigation {

    display: none;

}

.mobile-device .mobile-menu {

    display: block;

}

“`

### JavaScript での活用例

“`javascript

// ページタイプに応じた処理

document.addEventListener(‘DOMContentLoaded’, function() {

    const body = document.body;

    // トップページでのみスライダーを初期化

    if (body.classList.contains(‘home’)) {

        initializeSlider();

    }

    // 投稿ページでのみ目次を生成

    if (body.classList.contains(‘single-post’)) {

        generateTableOfContents();

    }

    // ログイン状態の場合の処理

    if (body.classList.contains(‘logged-in’)) {

        adjustLayoutForAdminBar();

    }

});

function initializeSlider() {

    // スライダーの初期化コード

    console.log(‘スライダーを初期化しました’);

}

function generateTableOfContents() {

    // 目次生成コード

    console.log(‘目次を生成しました’);

}

function adjustLayoutForAdminBar() {

    // 管理バー用のレイアウト調整

    console.log(‘管理バー用にレイアウトを調整しました’);

}

“`

## 注意事項

### ⚠️ 重要な注意点

1. **必ず`<body>`タグ内で使用**

   “`php

   <!– ❌ 間違い –>

   <html <?php body_class(); ?>>

   <!– ✅ 正解 –>

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

   “`

2. **エスケープは不要**

   – `body_class()`は内部で適切にエスケープ処理されています

   – 独自でエスケープする必要はありません

3. **PHPタグの位置**

   “`php

   <!– ✅ 正解 –>

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

   <!– ❌ 間違い（スペースが入る） –>

   <body class=”<?php body_class(); ?>”>

   “`

4. **クラス名の命名規則**

   “`php

   // ✅ 推奨

   $classes[] = ‘my-custom-class’;

   $classes[] = ‘header-fixed’;

   // ❌ 避けるべき

   $classes[] = ‘myCustomClass’;  // キャメルケース

   $classes[] = ‘my_custom_class’; // アンダースコア

   “`

### 🔍 デバッグ方法

#### コマンドライン（WP-CLI）での確認

“`bash

# WordPressの状態確認

wp core version

wp theme list

wp plugin list –status=active

# 特定のページのbody_classを確認（カスタムスクリプトが必要）

wp eval “

global \$wp_query;

\$wp_query->is_home = true;

\$classes = get_body_class();

echo implode(‘ ‘, \$classes);

“

“`

#### ブラウザでの確認方法

“`javascript

// 開発者ツールのコンソールで実行

console.log(‘Body classes:’, document.body.className);

// 特定のクラスの存在確認

console.log(‘Is home page:’, document.body.classList.contains(‘home’));

console.log(‘Is logged in:’, document.body.classList.contains(‘logged-in’));

“`

#### PHPでのデバッグ

“`php

// functions.phpまたはテンプレートファイルに一時的に追加

function debug_body_classes($classes) {

    error_log(‘Body classes: ‘ . implode(‘, ‘, $classes));

    return $classes;

}

add_filter(‘body_class’, ‘debug_body_classes’);

// または直接出力

if (WP_DEBUG) {

    $classes = get_body_class();

    echo ‘<!– Body classes: ‘ . implode(‘, ‘, $classes) . ‘ –>’;

}

“`

## トラブルシューティング

### よくある問題と解決方法

#### 1. クラスが追加されない

**症状**: カスタムクラスが出力されない

**原因と解決**:

“`php

// ❌ 間違い：戻り値を返していない

function add_custom_classes($classes) {

    $classes[] = ‘custom-class’;

    // return文がない

}

// ✅ 正解：必ずreturnする

function add_custom_classes($classes) {

    $classes[] = ‘custom-class’;

    return $classes; // これが必要

}

add_filter(‘body_class’, ‘add_custom_classes’);

“`

#### 2. 重複するクラス

**症状**: 同じクラスが複数回出力される

**解決方法**:

“`php

function add_unique_classes($classes) {

    $new_classes = array(‘custom-class’, ‘another-class’);

    // array_uniqueで重複を除去

    $classes = array_merge($classes, $new_classes);

    return array_unique($classes);

}

add_filter(‘body_class’, ‘add_unique_classes’);

“`

#### 3. 条件分岐が効かない

**症状**: `is_home()`などの条件が期待通りに動作しない

**解決方法**:

“`php

function conditional_body_classes($classes) {

    // wp_head実行後に確実に判定

    if (is_admin()) {

        return $classes; // 管理画面では何もしない

    }

    // より確実な条件分岐

    global $wp_query;

    if ($wp_query->is_home() && $wp_query->is_front_page()) {

        $classes[] = ‘true-homepage’;

    } elseif ($wp_query->is_home()) {

        $classes[] = ‘blog-homepage’;

    }

    return $classes;

}

add_filter(‘body_class’, ‘conditional_body_classes’);

“`

### パフォーマンス最適化

“`php

/**

 * パフォーマンスを考慮したbody_class追加

 */

function optimized_body_classes($classes) {

    // 重い処理はキャッシュを活用

    $cache_key = ‘body_class_’ . get_the_ID();

    $cached_classes = wp_cache_get($cache_key);

    if ($cached_classes === false) {

        $new_classes = array();

        // 重い処理をここに

        if (is_single()) {

            $post_meta = get_post_meta(get_the_ID(), ‘custom_layout’, true);

            if ($post_meta) {

                $new_classes[] = ‘layout-‘ . $post_meta;

            }

        }

        wp_cache_set($cache_key, $new_classes, ”, 3600); // 1時間キャッシュ

        $cached_classes = $new_classes;

    }

    return array_merge($classes, $cached_classes);

}

add_filter(‘body_class’, ‘optimized_body_classes’);

“`

これで`body_class()`の完全な解説が完成しました！初学者の方でも段階的に理解できるよう、基本から応用まで幅広くカバーしています。

カテゴリー
WordPress
※Web開発

前の記事

PHPでメール送信するための環境構築ガイドNew!!
2025年8月3日