WordPressのテンプレートタグである、body_class(); を使用するとbody要素に様々なクラスを追加することができます。

Contents

  1. body_class(); の使い方
  2. 独自のクラスを追加する
  3. 独自のclassやidを指定する方法

body_class(); の使い方

body_class(); の基本的な使い方は下記のように記述します。

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

header.php内のbody要素を上記の様に変更して、各ページのソースを見てみると、トップページには「home」、アーカイブページには「archive」というように、様々なクラスが追加されているのが確認できます。

独自のクラスを追加する

「home」や「archive」のように自動で出力されるクラスとは別に、独自のクラスを追加したい場合、下記のようにすれば任意のクラスを追加することが可能です。

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

トップページを見てみると「home」とは別に「class-name」が追加されていると思います。

また、複数のクラス名を追加したい場合は、半角スペースで区切ってあげれば何個でも追加することができます。

<body <?php body_class('class-a class-b class-c'); ?>

function.phpを使って追加

function.phpを使用してクラスを追加する場合は、function.phpに下記のように記述します。

add_filter( 'body_class', 'my_class_names' );

function my_class_names( $classes ) {
	$classes[] = 'class-name';
	return $classes;
}

独自のclassやidを指定する方法

body_class(); を使用すれば、簡単にクラスを追加することが可能です。ただ、元となるHTMLに独自のclassやidが使われている場合などは、条件分岐を使って独自のclassやidを指定する方法もあります。

idを指定する

<?php 
$body_id ="";

	if ( is_single() || is_page() ) {
		$body_id = ' id="'.$post->post_name.'" ';
	} else if ( is_category() ) {
		$category = get_the_category(); 
		$body_id = ' id="category_'.$category[0]->category_nicename.'" ';
	}
?>

<body <?php echo $body_id; ?>>

classを指定する

<?php if( is_front_page() ) {
 $original_body_class = 'top-page'; // front-pageに指定するクラス
} else if( is_single() ){
 $original_body_class = 'single-page'; // singleページに指定するクラス
}
?>

<body class="<?php echo $original_body_class; ?>">