body_class関数を活用したWordPressテーマのCSS設計
- 2025/08/08
- BASICS
- WordPressの基礎
- 0comments
- 34views
- 約13分で読めます
- 40
前回の記事でテンプレートとfunctions.phpの整理により、保守性の高いWordPressテーマの基盤を構築しました。
今回は、bodyタグに適切なクラスを付与するWordPressのbody_class関数について学習します。この機能を理解することで、ページごとの柔軟なスタイリングが可能になり、CSS設計の幅が大きく広がります。
今回の目標
- body_class関数の基本的な使い方を理解する：WordPress標準機能の活用方法
- WordPress標準のクラス名の意味と活用方法を学ぶ：自動的に付与されるクラスの理解
- パラメーターによる独自クラスの追加方法を学ぶ：カスタマイズの基礎
- フィルターフックを使った高度なカスタマイズ手法を習得する：functions.phpでの制御方法
目次
なぜbody_classが重要なのか
HTMLとCSSでサイトを作成する際、ページごとに異なるスタイルを適用したい場合があります。従来の静的サイトでは、各ページのbodyタグに手動でクラスを記述していました。
WordPressのbody_class関数を使用することで、以下のメリットが得られます。
- ページごとの条件分岐スタイリングが可能：フロントページ、投稿ページ、固定ページなど、ページの種類に応じた自動的なクラス付与
- JavaScript での動的操作が容易：JavaScriptでページの種類を判定する際の目印として活用
- レスポンシブデザインでの詳細な制御：デバイスやページ種別を組み合わせた細かなスタイリング
- コードの可読性と保守性の向上：CSSを見ただけでどのページに適用されるスタイルかが明確
body_class関数の基本使用方法
基本記述
WordPressテーマのheader.phpで、bodyタグを以下のように記述します。
<body <?php body_class(); ?>>この1行により、WordPressが自動的にページの種類に応じたクラス名をbodyタグに付与します。
パラメーター無しでの動作確認
まずは、パラメーター無しの状態でどのようなクラスが付与されるかを確認してみましょう。CTRL+UキーでHTMLソースを確認します。
WordPress標準クラスの実例確認
実際のWebページでbody_classがどのようなクラスを付与するかを確認します。各テンプレートファイルでの出力結果を見ていきましょう。
front-page.php（フロントページ）
<body class="home wp-singular page-template-default page page-id-2 wp-theme-sample-theme">フロントページでは、homeクラスがメインの識別子となり、page系のクラスも同時に付与されます。
page-cafe-menu.php（固定ページ、スラッグ指定）
<body class="wp-singular page-template-default page page-id-73 wp-theme-sample-theme">通常の固定ページでは、page-template-defaultにより標準テンプレートの使用が示されます。
kaisha.php（Template Name使用の親ページ）
<body class="wp-singular page-template page-template-kaisha page-template-kaisha-php page page-id-9 page-parent wp-theme-sample-theme">カスタムテンプレートを使用する場合、page-template-{テンプレート名}クラスが追加され、子ページを持つ場合はpage-parentクラスも付与されます。
page.php（子ページ）
<body class="wp-singular page-template-default page page-id-16 page-child parent-pageid-9 wp-theme-sample-theme">子ページではpage-childクラスと、親ページのIDを示すparent-pageid-{ID}クラスが付与されます。
single.php（投稿ページ）
<body class="wp-singular post-template-default single single-post postid-53 single-format-standard wp-theme-sample-theme">投稿ページではsingle、single-postクラスが中心となり、投稿フォーマットを示すクラスも含まれます。
archive.php（カテゴリーアーカイブ）
<body class="archive category category-opening category-5 wp-theme-sample-theme">カテゴリーアーカイブでは、categoryとスラッグ、IDを示すクラスが付与されます。
archive.php（タグアーカイブ）
<body class="archive date wp-theme-sample-theme">日付別アーカイブでは、シンプルにdateクラスが付与されます。
single.php（カスタム投稿）
<body class="wp-singular menu_post-template-default single single-menu_post postid-63 wp-theme-sample-theme">カスタム投稿タイプでは、投稿タイプ名を含むクラス（single-menu_postなど）が付与されます。
taxonomy-tax-menu.php（カスタムタクソノミー）
<body class="archive tax-tax-menu term-hot term-23 wp-theme-sample-theme">カスタムタクソノミーでは、tax-{タクソノミー名}とタームのスラッグ、IDを示すクラスが付与されます。
WordPress標準クラス一覧表
WordPressが自動的に付与する主要なクラス名とその条件を整理します。
クラス一覧表
| クラス名 | 条件・意味 |
|---|---|
home | フロントページ（投稿一覧表示） |
blog | 投稿ページ（静的フロントページ設定時の投稿一覧ページ） |
archive | アーカイブページ全般（カテゴリ、タグ、タクソノミー、投稿者など） |
date | 日付アーカイブ（年・月・日） |
search | 検索結果ページ |
paged | 2ページ目以降（ページネーション） |
single | 投稿単一ページ（`post`またはカスタム投稿タイプ） |
page | 固定ページ |
attachment | 添付ファイルページ |
error404 | 404ページ |
category | カテゴリアーカイブ |
category-{slug} | カテゴリースラッグ |
category-{ID} | カテゴリID（数字） |
tag | タグアーカイブ |
tag-{slug} | タグスラッグ |
tag-{ID} | タグID（数字） |
tax-{taxonomy} | カスタムタクソノミーアーカイブ |
term-{slug} | カスタムタクソノミータームスラッグ |
term-{ID} | カスタムタクソノミータームID（数字） |
author | 著者アーカイブ |
author-{nicename} | 著者スラッグ（ニックネーム） |
author-id-{ID} | 著者ID（数字） |
year | 年アーカイブ（YYYY形式） |
month | 月アーカイブ（MM形式） |
day | 日アーカイブ（DD形式） |
y{YYYY} | 年（例：`y2025`） |
m{MM} | 月（例：`m08`） |
d{DD} | 日（例：`d07`） |
logged-in | ユーザーがログイン中 |
admin-bar | 管理バーが表示されている |
rtl | 言語が右から左（RTL）モード |
no-js` / `js | JavaScript無効/有効状態（JS有効時に`no-js`を`js`に置換） |
custom-background | カスタム背景が設定されている |
wp-custom-logo | カスタムロゴが設定されている |
single-{post_type} | カスタム投稿タイプの単一ページ |
type-{post_type} | 投稿タイプ識別（`post`, `page`, カスタム投稿タイプ） |
status-{status} | 投稿ステータス（`publish`, `draft`など） |
postid-{ID} | 投稿または固定ページのID |
post-name-{slug} | 投稿または固定ページのスラッグ（WP 6.5+） |
page-id-{ID} | 固定ページのID |
page-template | 固定ページでテンプレートを使用している場合 |
page-template-{template} | テンプレートファイル名に基づくクラス |
page-template-default | テンプレート未指定（`page.php`が使用されているページ） |
page-parent | 子ページを持つ親ページ |
page-child | 親ページを持つ子ページ |
page-ancestor | 祖先ページ（親のさらに上位）を持つページ |
parent-pageid-{ID} | 親ページのID（子ページの場合） |
format-{format} | 投稿フォーマット（`standard`, `video`, `gallery`など） |
single-format-{format} | 単一投稿ページの投稿フォーマット |
{post_type}-template-default | カスタム投稿タイプのテンプレート未指定 |
wp-singular | `is_singular()`が`true`のとき付与される共通クラス |
wp-theme-{stylesheet} | 現在のテーマのスタイルシート名 |
post-password-required | パスワード保護された投稿や固定ページに付与 |
no-customize-support | テーマがカスタマイザーをサポートしていない場合に付与 |
独自クラスの追加方法
WordPress標準のクラスだけでは対応が難しい場面があります。
例えば
- 特定のページだけ異なるレイアウトにしたい場合：季節限定ページやキャンペーンページなど
- デザインバリエーションを用意したい場合：同じテンプレートでも見た目を変えたいページ
- JavaScript で特定の動作を制御したい場合：特定のページでのみ動作するスライダーやアニメーション
- A/Bテストを実施したい場合：異なるデザインパターンをテストする際の識別子
このような場面で、独自のクラスをbodyタグに追加することで、柔軟な制御が可能になります。
1つのクラスを追加する方法
body_class関数にパラメーターとして文字列を渡すことで、独自のクラスを追加できます。
<body <?php body_class('custom-layout'); ?>>この場合、WordPress標準のクラスに加えてcustom-layoutクラスが追加されます。
複数のクラスを追加する方法
配列を使用することで、複数のクラスを同時に追加できます。
<body <?php body_class(['custom-layout', 'special-page', 'version-2']); ?>>または、スペース区切りの文字列でも複数クラスを指定可能です。
<body <?php body_class('custom-layout special-page version-2'); ?>>より柔軟なクラス制御の実現
パラメーター指定の限界
前述のパラメーター指定でクラスを追加する方法やテンプレート側で条件分岐する方法には、以下のような限界があります。
- テンプレートファイルの肥大化：header.phpに複雑な条件分岐処理が増えて保守性が悪化
- コードの可読性が悪化：表示ロジック（
HTML）と判定ロジック（PHP）が混在してしまう - 既存のWordPress標準クラスとの整合性：WordPress標準のクラスに加えて独自クラスを追加する際の処理が複雑になる
- 再利用性の低さ：他のテーマやプロジェクトで同じロジックを使い回しにくい
- プラグインとの連携困難：他のプラグインが
body_classフィルターで追加したクラスとの統合が困難
WordPressでは、動的で複雑な条件に対応するためにfunctions.phpでより柔軟なbodyタグのクラスを制御することができます。
フィルターフックの優位性
functions.phpでbody_classフィルターフックを使用することで、以下のメリットが得られます。
- 一元管理：すべてのクラス制御ロジックを1箇所で管理
- WordPress標準との統合：既存の標準クラスに自然に追加・削除が可能
- プラグインとの協調：他のプラグインが追加したクラスとも自動的に統合
- テンプレートの簡潔性：テンプレートファイルは表示に専念できる
- 再利用性の向上：functions.phpのコードは他のプロジェクトでも流用しやすい
基本的なクラス追加
より柔軟なクラス制御には、functions.phpでbody_classフィルターフックを使用します。
function add_custom_body_classes($classes) {
// 既存のクラスに独自のクラスを追加
$classes[] = 'my-theme';
return $classes;
}
add_filter('body_class', 'add_custom_body_classes');ページに応じた動的なクラス制御
WordPress条件判定関数を使用することで、ページの種類に応じて動的にクラスを追加できます。
function add_custom_body_classes($classes) {
// フロントページの場合
if (is_front_page()) {
$classes[] = 'is-frontpage';
}
// 投稿ページの場合
if (is_single()) {
$classes[] = 'is-single-post';
}
// カスタム投稿タイプ「menu_post」の場合
if (is_singular('menu_post')) {
$classes[] = 'is-menu-item';
}
// カスタムタクソノミー「tax-menu」の場合
if (is_tax('tax-menu')) {
$classes[] = 'is-menu-category';
}
// カテゴリーアーカイブの場合
if (is_category()) {
$classes[] = 'is-category-archive';
}
return $classes;
}
add_filter('body_class', 'add_custom_body_classes');応用：WordPress標準クラスを削除して独自クラスのみ使用
標準クラスを全削除する方法
場合によっては、WordPress標準のクラスを削除して独自のクラスのみを使用したい場合があります。
function replace_body_classes($classes) {
// 既存のクラスをすべてクリア
$classes = [];
return $classes;
}
add_filter('body_class', 'replace_body_classes');body_classフィルターフック最大のメリット
WordPressのbody_class関数は、テンプレートやコンテツに応じて実に様々なクラスを自動で追加します。その反面、使用する機会のない余分なクラスも付与され、HTMLが無駄に長くなります。
これを防ぐためにも、body_classが出力するクラスを一旦すべて削除し、必要に応じて独自のクラスを付与することが望ましいです。
条件関数を使った独自命名規則でのクラス設計
標準クラスを削除した後、独自の命名規則でクラスを設計できます。
function custom_body_classes($classes) {
// 既存のクラスをクリア
$classes = [];
// 独自の命名規則でクラスを追加
if (is_front_page()) {
$classes[] = 'layout-front';
} elseif (is_single()) {
$classes[] = 'layout-article';
} elseif (is_page()) {
$classes[] = 'layout-page';
} elseif (is_archive()) {
$classes[] = 'layout-list';
}
// カスタム投稿タイプの場合
if (is_singular('menu_post')) {
$classes[] = 'content-menu';
}
// カスタムタクソノミーの場合
if (is_tax('tax-menu')) {
$classes[] = 'archive-menu';
}
// 共通クラス
$classes[] = 'theme-custom';
return $classes;
}
add_filter('body_class', 'custom_body_classes');CSS設計でのメリット
bodyタグにクラスが付与されることにより、CSSでのページ別スタイリングが格段に容易になります。
ページ別スタイリングが容易になる理由
従来のHTMLサイトでは、各ページで異なるスタイルを適用する際に複数のCSSファイルを作成するか、長大なCSSファイルで管理する必要がありました。
body_classを使用することで、1つのCSSファイル内で以下のような記述が可能になります。
- フロントページ専用のスタイル：
.home .header { } - 投稿ページ専用のスタイル：
.single .content { } - 固定ページ専用のスタイル：
.page .sidebar { } - カテゴリーアーカイブ専用のスタイル：
.category .post-list { }
条件分岐CSSの書きやすさ
bodyクラスを活用することで、同じHTML要素に対して異なる条件下で異なるスタイルを適用できます。
/* 通常の状態 */
.main-content {
width: 70%;
}
/* フロントページでは全幅表示 */
.home .main-content {
width: 100%;
}
/* 投稿ページでは左寄せ */
.single .main-content {
float: left;
}
/* アーカイブページでは中央寄せ */
.archive .main-content {
margin: 0 auto;
}この方法により、HTMLの構造を変更することなく、CSS側だけで柔軟なレイアウト制御が実現できます。
まとめ
今回の学習で、WordPressのbody_class関数について以下の要点を習得しました。
- 基本的な使い方：
<body <?php body_class(); ?>>でWordPress標準のクラスが自動付与される - WordPress標準クラスの理解：ページの種類に応じて自動的に付与される豊富なクラス名
- パラメーターでのクラス追加：テンプレートファイルで直接独自クラスを追加する方法
- functions.phpでの動的制御：条件判定関数を使った柔軟なクラス管理
- 独自クラス設計：WordPress標準クラスを削除して独自の命名規則を適用する応用技術
body_class関数を適切に活用することで、保守性が高く柔軟なCSS設計が可能になり、WordPressテーマ開発の効率が大幅に向上します。
この投稿をシェアする
テンプレートとfunctions.phpの整理によるコード保守性の向上
BASICS テーマ開発が進むと複数のテンプレートでコードが重複し、管理ファイルも肥大化してメンテナンスが困難になります。重複コードの解消と機能別ファイル分割による整理整頓技術を学び、保守性が高く効率的で管理しやすい開発環境を構築する方法を詳しく解説していきます。
- 2025/08/09
- 0comments
- 52views
