目次
body_class()とは？
body_class() は、HTML の <body> タグに自動的にクラス属性を付加してくれる WordPress のテンプレートタグです。これにより、ページの種類、ユーザーの状態、投稿情報などをCSSやJavaScriptで簡単に判別・操作できるようになります。
テーマ開発においては、ページごとのレイアウトやスタイルを柔軟に切り替えるために欠かせない関数です。
body_class()の基本の使い方
以下のように、<body> タグに直接埋め込んで使用します。
<body <?php body_class(); ?>>出力されるのは class="〜" という形式で、WordPress が自動で適切なクラス名を付けてくれます。
body_class()の引数の指定
body_class( string|array $class = '' )| 引数 | 型 | 内容 |
|---|---|---|
$class | 文字列または配列 | 手動で追加したいクラス名（任意） |
例えば以下のように指定すると、custom-class というクラスが追加されます。
<body <?php body_class('custom-class'); ?>>body_class()の出力されるクラスの例
WordPress はページの状態に応じて以下のようなクラスを自動で追加します。
ページタイプに関するクラス
| クラス名 | 条件 |
|---|---|
home | フロントページ（投稿一覧） |
blog | 投稿ページがフロントでないときのトップ |
archive | カテゴリやタグなどのアーカイブ |
search | 検索結果ページ |
single | 投稿詳細ページ |
page | 固定ページ |
404 | 404エラーページ |
投稿に関するクラス
| クラス名 | 条件 |
|---|---|
postid-123 | 投稿IDが123 |
category-foo | カテゴリ「foo」付き |
tag-bar | タグ「bar」付き |
author-john | 投稿者が john |
テンプレートに関するクラス
| クラス名 | 条件 |
|---|---|
page-template-default | デフォルトテンプレート使用中 |
page-template-about | page-about.php 使用中 |
ユーザー状態に関するクラス
| クラス名 | 条件 |
|---|---|
logged-in | ユーザーがログインしている |
logged-out | ログインしていない（手動で追加必要） |
カスタムクラスを追加する方法
1. 引数で直接追加
<body <?php body_class(['custom-layout', 'dark-theme']); ?>>2. フィルターフックを使う
以下のように functions.php に記述すれば、ログイン状態でクラスを切り替えられます。
add_filter('body_class', function($classes){
if ( is_user_logged_in() ) {
$classes[] = 'logged-in-user';
} else {
$classes[] = 'guest-user';
}
return $classes;
});get_body_class()との違い
body_class() は出力専用の関数であり、echoされるのに対し、get_body_class() はクラスの配列のみを返します。
以下のように使うと、処理の中で独自にクラスの配列を扱うことができます。
$classes = get_body_class();
print_r($classes);body_class()の実用例
1. 曜日によってスタイルを変える
add_filter('body_class', function($classes){
$weekday = strtolower(date('D')); // mon, tue, etc.
$classes[] = 'day-' . $weekday;
return $classes;
});2. 投稿タイプごとに色を変更
body.single-post {
background-color: #fff;
}
body.single-product {
background-color: #f0f0f0;
}3. JavaScriptでページごとの挙動を切り替え
if (document.body.classList.contains('single-post')) {
// 投稿ページ限定の処理
}よくある誤解と注意点
body_class()はclass="..."全体を出力するわけではなく、class属性の中身のみを出力します。<body>タグ内に入れ忘れるとクラスが効かないため、テーマ作成時は<body <?php body_class(); ?>>を忘れないこと。- カスタム投稿タイプや固定ページテンプレートなどを使っている場合、それに応じたクラスが追加されます。
body_class()の出力例
body_class() を以下のように使った場合：
<body <?php body_class(); ?>>投稿ID 123 の「news」カテゴリ、「WordPress」タグ付きの投稿ページでログイン中ユーザーがアクセスした場合：
<body class="single single-post postid-123 category-news tag-wordpress logged-in">body_class()のまとめ
| 特徴 | 内容 |
|---|---|
| 自動付与 | 投稿タイプ・カテゴリ・タグ・著者・テンプレート・状態など |
| カスタマイズ | 引数やフィルターフックで自由にクラス追加可能 |
| 活用例 | CSS切り替え・JavaScript発火・表示条件の制御 |
| 補助関数 | get_body_class() でクラス配列を取得可能 |
おすすめ活用法
- ページレイアウトの自動切り替え
- ログイン状態で表示を変える
- 投稿ごとのバリエーション制御
- JSやGAの条件付き発火処理
body_class() は、テーマをより動的・柔軟にするための重要な仕組みです。
CSSやJSと連携させることで、UXや表示速度にも大きく影響するため、積極的に活用してみてください。
