WordPress:body_classに独自のクラスを追加する方法+代替で独自のIDやクラスのみをbodyに指定する方法

  • Posted on
  • Category : WordPress
WordPress:body_classに独自のクラスを追加する方法+代替で独自のIDやクラスのみをbodyに指定する方法

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

WordPress:body_classに独自のクラスを追加する方法+代替で独自のIDやクラスのみをbodyに指定する方法 目次

  1. body_classの使い方
  2. body_classに独自のクラスを追加する 1
  3. body_classに独自のクラスを追加する 2
  4. body_classの代替で、独自のIDやクラスのみをbodyに指定する方法

1. body_classの使い方

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

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

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

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

目次へ

2. body_classに独自のクラスを追加する 1

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

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

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

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

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

これが先ほどの方法で記述をした際は以下のように変更され、追加したいクラスとして記述した「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に独自のクラスを追加する 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を使って実装する場合でも半角スペースで区切ってあげれば複数のクラスを追加することができます。

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やクラスのみをbodyに指定する方法

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

独自で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.'"' : ''; ?>>

独自でクラスを指定する

<?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やクラスをbody要素に付加するもので、is_front_page()のようにただ単純に指定するだけでなく、is_single()is_category()で記述しているようにすればページ名やカテゴリー名をIDやクラスに使用することもできます。

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

目次へ

Back to Top

WordPress:body_classに独自のクラスを追加する方法+代替で独自のIDやクラスのみをbodyに指定する方法

WordPress:body_classに独自のクラスを追加する方法+代替で独自のIDやクラスのみをbodyに指定する方法

/ WordPress

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。