この記事では、WordPressに実装されているbody_class関数について解説していきます。
body_class関数で出力されるクラス名や、クラス名を追加する方法も説明していきます。
目次
body_class関数の実装例
body_class関数は、以下のようにbodyタグの中に入れて使用します。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- 省略 -->
<?php wp_footer(); ?>
</body>
</html>実際にトップページ（最新の投稿）のbody要素のクラス名は、以下のようになります。
<div class="home blog">テーマ側でレスポンシブにしている場合は、
add_theme_support( 'responsive-embeds' );以下のようなクラス名になります。
<div class="home blog wp-embed-responsive">また、ログイン中でツールバーが出ている場合は、以下のようなクラス名になります。
<div class="home blog logged-in admin-bar wp-embed-responsive customize-support">クラス名を追加する
body_class関数を使っていて、body要素にクラスを追加する方法を紹介します。
方法は2つあります。
body_class()に引数を渡す
body_class()の引数にクラス名を文字列で入れることで、追加することができます。
<div <?php body_class( 'my-class-name' ); ?>>引数を入れると、以下のように追加されます。
<div class="home blog wp-embed-responsive my-class-name">引数は配列にして、複数入れることも可能です。
<div <?php body_class( array( 'my-class-name', 'my-class-name-2' ); ?>>add_action関数を使う
条件分岐や独自の処理を行ったクラス名を追加したい場合は、add_action関数を使います。
function add_class_front_page( $classes ) {
if ( is_front_page() ) {
$classes[] = 'is-front-page';
}
return $classes;
}
add_action( 'body_class', 'add_class_front_page', 10, 1 );この例では、トップページを固定ページにしている場合、is-front-pageというクラス名が追加されるようにしています。
このように、条件分岐や処理なしでクラス名を追加したい場合はbody_class()に引数を入れ、条件分岐や処理が必要な場合は、functions.phpでadd_actionを使うのが一般的です。
ページの種類で異なるクラス名
投稿ページ、固定ページ、アーカイブページ、カテゴリーページ、タグページなど、ページによって出力されるクラス名は異なります。
トップページ（最新の投稿にした場合）
テーマの設定などで出力される内容は異なりますが、トップページ（最新の投稿にした場合）には基本的に以下のようなクラス名が出力されます。
<div class="home blog wp-embed-responsive">トップページ（固定ページにした場合）
テーマの設定などで出力される内容は異なりますが、トップページ（固定ページにした場合）には基本的に以下のようなクラス名が出力されます。
<div class="home page-template-default page page-id-{投稿ID} wp-embed-responsive">homeとpageクラスの両方がある場合、フロントページであると判断できます。
投稿ページ
テーマの設定などで出力される内容は異なりますが、投稿ページには基本的に以下のようなクラス名が出力されます。
<div class="post-template-default single single-post postid-{投稿ID} single-format-standard wp-embed-responsive">固定ページ
テーマの設定などで出力される内容は異なりますが、固定ページには基本的に以下のようなクラス名が出力されます。
<div class="page-template-default page page-id-{投稿ID} wp-embed-responsive">カテゴリーページ
テーマの設定などで出力される内容は異なりますが、カテゴリーページには基本的に以下のようなクラス名が出力されます。
<div class="archive category category-{カテゴリーID} wp-embed-responsive">タグページ
テーマの設定などで出力される内容は異なりますが、タグページには基本的に以下のようなクラス名が出力されます。
<div class="archive tag tag-categories tag-{タグID} wp-embed-responsive">