WordPress:body_class()に独自のclassを追加する方法+代替で独自のidやclassのみをbodyに指定する方法

WordPress:body_class()に独自のclassを追加する方法+代替で独自のidやclassのみをbodyに指定する方法

body_class()body要素に使用するWordPressのテンプレートタグで、これを使うことで表示されるページによって様々なクラスがbody要素に付加されて非常に便利なのですが、たまに「このclassもほしい」というときがあるので、そういった際に使えるbody_class()に独自のクラスを追加する方法です。
また、いっそのことbody_class()を使用せずに、その代替としてbody要素に完全に独自のidやclassのみを指定するという方法も備忘録を兼ねて併せて紹介します。

WordPress:body_class()に独自のclassを追加する方法+代替で独自のidやclassのみをbodyに指定する方法 目次

  1. body_class()の使い方
  2. body_class()に独自のclassを追加する #1
  3. body_class()に独自のclassを追加する #2
  4. body_class()の代替で、独自のidやclassのみをbodyに指定する方法

1. body_class()の使い方

Twenty Fourteenなどデフォルトテーマのheader.phpを見ると確認できますが、body_class()の基本的な使い方は下記のように記述するだけで使用できます。

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

上記を記述して各ページのソースを確認するとbody要素に様々なclassが付加されているのが確認できます。
幾つか例を出すとフロントページには「home」、アーカイブには「archive」、固定ページには「page page-id-{ID}」みたいな感じでclassが付加され、例に出した固定ページのようにそのページのIDなどもclassで出力してくれたりします。

body_class()の詳細については以下でそれぞれ確認することができ、どんなときにどのようなclassが付加されるかなども下記ページで一覧化されています。

目次へ

2. body_class()に独自のclassを追加する #1

先述したようにbody_class()を使うことで様々なclassを付加してはくれますが、「このclassもあればいいのに」ということがあります。
そんなときは下記のように記述をすることで出力されるclassに独自のclassを追加することができます。

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

上記のように記述するだけで、通常出力されるクラスに追加でハイライトでで表示している「class-name」というclassも付加されるようになります。

実際にどのように追加されるのかをTwenty Fourteenの場合で確認すると、まず単純にbody_class()を記述した場合のトップページのbodyには以下のようなクラスが記述されています。

<body class="home blog masthead-fixed list-view grid">

これが先ほどの方法で記述をした際は下記のように変更され、追加したいclassとして記述した「class-name」が追加されているのが確認できます。

<body class="home blog class-name masthead-fixed list-view grid class-name">

また、ひとつではなく複数追加したいという場合は、下記のように半角スペースで区切ってあげることで複数のクラスを追加することができます。

<body <?php body_class('class-name01 class-name02 class-name03'); ?>>

目次へ

3. body_class()に独自のclassを追加する #2

先ほどの方法はbody要素が記述してあるテンプレートに記述するものでしたがfunctions.phpを使用して追加することもでき、その場合は下記のように記述をします。

functions.php

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

また、テンプレートに記述したときと同様、functions.phpを使って実装する場合でも半角スペースで区切ってあげれば複数のclassを追加することができます。

functions.php

add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
  $classes[] = 'class-name01 class-name02 class-name03';
  return $classes;
}

目次へ

4. body_class()の代替で、独自のidやclassのみをbodyに指定する方法

body_class()は様々なclassを手軽に付加させることができて非常に便利なタグだとは思いますが、「2. body_class()に独自のclassを追加する #1」でも書いたように「このclassもあればいいのに」ということが結構あったり、正直個人的にはちょっとclassが付加されすぎる感があります...。
あとは、ベースとなるHTMLやCSSなどを別の人が作成した場合などにbody要素にclassではなくidが使われていたり、classが使われていたとしても独自で追加するものが多数あったりする場合もあるので、先述した理由なども含めてそのような場合は以下のようにbody_class()の代替として条件分岐で完全に独自のidやclassを指定しています。

独自でidを指定する

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

独自でclassを指定する

<?php
  if ( is_front_page() ) {
    $my_body_class = 'home';
  } else if ( is_single() ) {
    $my_body_class = 'single '.$post->post_name.'';
  } else if ( is_page() ) {
    $my_body_class = 'page '.$post->post_name.'';
  } else if ( is_category() ) {
    $category = get_the_category();
    $my_body_class = 'category category_'.$category[0]->category_nicename.'';
  }
?>
<body<?php echo ( $my_body_class ) ? ' class="'.$my_body_class.'"' : ''; ?>>

それぞれ見たまんまですが、テンプレートによって独自のidやclassをbody要素に付加するもので、is_front_page()のようにただ単純に指定するだけでなく、is_single()is_category()で記述しているようにすればページ名やカテゴリー名をIDやクラスに使用することもできます。

この方法はもともと自分がまだPHPやWordPressのことを全く分かっていない頃に僕が師と仰ぐ方から教えてもらったものをベースにしたものですが、以下のように「かちびと.net」さんでもbody_class()の代替案として紹介されていたりもして非常に便利なので、普段からbody要素にidやclass指定するのを多用している方は覚えておいて損はないと思います。

目次へ

Close the search window,
please press close button or esc key.