お問合せ
MENU

【WordPress】body_class()って何？組み込み関数を知る

コードのこと

WordPressのbody_class()って何？組み込み関数を知る

他の人のコードを見てるとよく<body>に<?php body_class(); ?>って書いてあるけどこれって何？

ちょこちょこ見るからWordPressの独自関数なんだろうけど、実際どんな動作をするんだろう？と気になったので今回は調べてみました！

WordPressのbody_class()とは？

body_class()は、WordPressが提供する組み込み関数です。この関数を使うと、現在表示されているページの種類や状態に応じて、自動的にクラスが<body>タグに追加されます。

body_class()の使い方は？

body_class()は通常header.phpファイルで使用します。以下に基本的な使い方の例を示します。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1>My WordPress Site</h1>
    </header>
    <div id="content">
        <!-- コンテンツ -->
    </div>
    <?php wp_footer(); ?>
</body>
</html>

このように、<body>タグの中に<?php body_class(); ?>と記述するだけです！

body_class()が生成するクラス

body_class()はページごとにいくつかの基本クラスを生成します。例えば、固定ページでは以下のようなクラスが追加されます。

  • page: 固定ページであることを示します。
  • page-id-32: 固定ページのID（この場合は32）。
  • page-template-default: デフォルトのテンプレートを使用している場合。

テンプレートに基づくクラス

カスタムテンプレートを使用している場合、そのテンプレートに基づくクラスも追加されます。例えば、template-about.phpというテンプレートを使用している場合は、以下のようになります。

  • page-template-custom: カスタムテンプレートであることを示します。
  • template-about: 使用されているテンプレートファイル名。

body_class()の実例

固定ページの例

例えば、page-aboutというスラッグの固定ページでは、以下のようなクラスが生成されます。

<body class="page page-id-2 page-template-default page-about">

投稿ページの例

single-postという投稿ページでは、以下のようなクラスが追加されます。

<body class="single single-post postid-10 single-format-standard">

カスタム投稿タイプの例

例えば、single-custom_post_typeの場合は以下のようになります。

<body class="single single-custom_post_type postid-15">

カスタムクラスの追加

body_classフィルターを使ってカスタムクラスを追加することもできます。以下はその例です。

function my_custom_body_classes($classes) {
    if (is_singular('post')) {//投稿ページの場合
        $classes[] = 'single-post';//single-postというクラスをつける
    }
    return $classes;
}
add_filter('body_class', 'my_custom_body_classes');

このコードを使うと、単一の投稿ページにsingle-postというクラスが追加されます。

body_class()応用編

CSSでのスタイリング

body_class()で追加されたクラスを使って、特定のページに異なるスタイルを適用できます。

.page-about .header {
    background-color: #f0f0f0;
}

JavaScriptでの利用

JavaScriptでもbody_class()で追加されたクラスを利用して、特定のページでのみ動作するスクリプトを書くことができます。

document.addEventListener('DOMContentLoaded', function() {
    if (document.body.classList.contains('page-about')) {
        // 特定のページでのみ実行するスクリプト
    }
});

body_class()に関してのまとめ

この記事のポイントをまとめます。

  • body_class()は<body>タグにつけることでテンプレートに合ったクラスが自動で付くWordPressの組み込み関数です。
  • 固定ページの場合は「page」というクラスがつきます。
  • ページのIDをもとに「page-id-2」のようなクラスがつきます。
  • テンプレートに沿ったクラスがつきます。
  • スラッグに沿ったクラスがつきます。
  • functions.phpに関数を設置することで、自由にクラス名を挿入させることが可能になります。
  • ページごとに違うクラス名がつくので、ページに則したスタイルやスクリプトを設置しやすくなる。

body_class()は、WordPressサイトをカスタマイズする上でとても便利な関数です！

ページごとのスタイルや機能を簡単に適用できるため、多くの方が利用していたのですね！
これから使っていこうと思います♪

ブログ一覧へ