body_class()

Q: body_class() のクラスをカスタマイズしたい場合はどうすればいいですか？

body_class フィルターフックを使うことでクラスを追加または削除できます。 add_filter('body_class', function($classes) { $classes[] = 'my-custom-class'; return $classes;});

Q: 特定の投稿タイプでクラスを追加するには？

条件分岐タグを使って、特定の投稿タイプでクラスを追加することができます。 if (is_singular('product')) { body_class('product-page');}

Q: 子テーマで body_class() を上書きできますか？

はい、header.php を子テーマにコピーして修正することで、body_class() の使い方をカスタマイズできます。

Function

2025/3/14 Friday2025/4/1 Tuesday

body_class() は、WordPressの <body> タグに自動的にCSSクラスを付与するテンプレートタグです。

ページの種類、投稿のID、ログイン状態などに基づいたクラスが追加され、ページごとにスタイルを柔軟に適用することができます。

機能の説明

body_class() は、WordPressテーマの <body> タグ内に自動的にさまざまなクラスを付与するテンプレートタグです。

これにより、ページの種類や状況に応じたCSSスタイリングが可能になります。

例えば、トップページや投稿ページ、アーカイブページ、ユーザーのログイン状態などに応じた異なるクラスが出力されます。

シンプルなコード例

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

出力例

<body class="home logged-in admin-bar">

この例では、トップページ（home）、ユーザーがログインしている状態（logged-in）、および管理バーが表示されている（admin-bar）を示すクラスが付与されています。

使い方の解説

body_class() は、テーマの header.php 内の <body> タグに配置することで使用します。

WordPressが提供する動的なクラスを出力することで、ページの状態に応じたスタイルをCSSで適用しやすくなります。

また、body_class() は配列または文字列で独自のCSSクラスを追加することも可能です。

使用例

シンプルな使用例

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

このコードは、ページの種類に基づいたCSSクラスを自動的に <body> に付与します。これにより、特定のページでスタイリングを簡単に分けられます。

カスタムクラスを追加する例

<body <?php body_class('custom-class'); ?>>

このコードでは、custom-class という任意のクラスを追加しています。WordPressが生成するクラスに加えて、独自のスタイルを適用する場合に便利です。

配列で複数のクラスを追加する例

<?php 
$extra_classes = ['class-one', 'class-two'];
?>
<body <?php body_class($extra_classes); ?>>

この例では、class-one と class-two の2つのカスタムクラスを配列として追加しています。body_class() は配列を受け取るため、動的に複数のクラスを渡すことができます。

一緒に使うことが多い関連タグ

`post_class()`

post_class() は、投稿やページごとにクラスを付与するテンプレートタグです。body_class() が <body> タグに使われるのに対して、post_class() は各投稿の <article> タグ内で使用します。

使用例

<article <?php post_class(); ?>>

このコードでは、投稿の種類や状態に応じたCSSクラスが <article> に追加されます。例えば、カテゴリ名や投稿IDなどのクラスが付与され、CSSでのスタイリングが容易になります。

`body_class()` と `is_page()` の組み合わせ

<?php 
if (is_page('about')) {
    echo '<body class="about-page">';
} else {
    body_class();
}
?>

この例では、ページが「about」の場合に about-page クラスを手動で付与し、それ以外のページでは通常の body_class() を使用しています。

追加情報を取得したい場合

body_class() の動的なクラスにさらに情報を追加したい場合、条件分岐タグ（is_single()、is_page() など）を組み合わせることが推奨されます。

is_single() で投稿ページのクラスを追加

<?php 
if (is_single()) {
    body_class('single-post');
}
?>

このコードは、投稿ページでのみ single-post クラスを追加します。これにより、投稿ページごとに異なるスタイルを適用できます。

出力できる情報

home: トップページ
single: 単一投稿ページ
archive: アーカイブページ
logged-in: ユーザーがログイン中
admin-bar: 管理バーが表示中

想定されるトラブル

期待したクラスが出力されない

条件分岐タグが正しく機能していない、またはテンプレートファイルが適切に呼び出されていない可能性があります。

解決策

使用するテンプレートファイルが正しいことを確認し、条件分岐タグ（例: is_page()）の使い方が正しいか見直してください。

管理バーのクラスが表示されない

管理バーが無効化されている場合、admin-bar クラスが出力されません。

解決策

管理バーが表示される設定かどうかを確認してください。

add_filter('show_admin_bar', '__return_true');

Q&A

`body_class()` のクラスをカスタマイズしたい場合はどうすればいいですか？

body_class フィルターフックを使うことでクラスを追加または削除できます。

add_filter('body_class', function($classes) {
    $classes[] = 'my-custom-class';
    return $classes;
});

特定の投稿タイプでクラスを追加するには？

条件分岐タグを使って、特定の投稿タイプでクラスを追加することができます。

if (is_singular('product')) {
    body_class('product-page');
}

子テーマで `body_class()` を上書きできますか？

はい、header.php を子テーマにコピーして修正することで、body_class() の使い方をカスタマイズできます。

まとめ

body_class() は、WordPressテーマにおいてページごとのスタイルを柔軟に適用するための便利なテンプレートタグです。

post_class() や条件分岐タグと組み合わせることで、特定のページや投稿に応じたスタイルを簡単に実装できます。

CSSと組み合わせて使うことで、WordPressサイトのデザインと機能性を大幅に向上させることができます。