WordPress:body_class()使用時にスラッグ名を用いたクラスや直上・最上のスラッグを用いたクラスを追加する方法

  • Posted on
  • Category : WordPress
WordPress:body_class()使用時にスラッグ名を用いたクラスや直上・最上のスラッグを用いたクラスを追加する方法

例えば、固定ページ作成時にスラッグを「foo」としたの場合は`.foo`が、スラッグを「bar」とした場合は`.bar`というように、WordPressで`body_class()`を使用した際にスラッグ名を用いたクラスも付与されるようにする方法です。また、子や孫のページのときに、親のスラッグ名を用いたクラスを付与する方法も併せて紹介します。

WordPressにはbody_class()というテンプレートタグが用意されており、これを利用することで簡単に見ているページに応じて異なるクラスがbodyに付与されるので、特にCSSでページ毎に異なる見栄えに調整する際などに便利で普段から多用しているという人も多いと思います。
今回はそのbody_class()へさらに任意でクラスを追加するカスタマイズのひとつで、ここでは固定ページのスラッグをクラスに用いて付与する形で紹介します。

以下で紹介する方法は、いずれも固定ページにクラスを付与させるというものになり、固定ページは「foo」「bar」「baz」というスラッグが指定された3ページがある想定になります。
また、それぞれの固定ページは「foo(親)」「bar(子)」「baz(孫)」のような関係になっているとします。

1. スラッグを用いたクラスを付与する

単純に現在のページのスラッグを用いたクラスを付与する方法で、bodybody_class()が記述されている状態で、functions.phpに下記を記述します。

functions.php

add_filter( 'body_class', 'add_page_slug_class_name' );
function add_page_slug_class_name( $classes ) {
	if ( is_page() ) {
		$page = get_post( get_the_ID() );
		$classes[] = $page->post_name;
	}
	return $classes;
}

上記記述後に各ページのクラスを確認してみると、スラッグを「foo」と設定した固定ページには.fooが、スラッグを「bar」と設定した固定ページには.barが、スラッグを「baz」と設定した固定ページには.bazがそれぞれ付与されているのを確認できます。

2. 直上のスラッグを用いたクラスを付与する

上で紹介した現在のページのスラッグを用いたクラスを付与しつつ、さらに直上のスラッグを用いたクラスを付与する方法で、単純に直上のスラッグを追加するだけだと異なるページなのに同じクラス名が付与されるということになってしまうので、ここでは.スラッグ名-childのように末尾に「-child」がつく形でクラスが付与されるようにしてみます。
bodybody_class()が記述されている状態で、functions.phpに下記を記述します。

functions.php

add_filter( 'body_class', 'add_page_slug_class_name' );
function add_page_slug_class_name( $classes ) {
	if ( is_page() ) {
		$page = get_post( get_the_ID() );
		$classes[] = $page->post_name;

		$parent_id = $page->post_parent;
		if ( $parent_id ) {
			$classes[] = get_post($parent_id)->post_name . '-child';
		}
	}
	return $classes;
}

上記記述後に各ページのクラスを確認してみると、まず「1. スラッグを用いたクラスを付与する」で紹介したようにそれぞれのスラッグを用いたクラスが付与され、こちらの場合はさらに子や孫ページに直上のスラッグを用いたクラスも付与されます。
今回の場合は「bar(子)」「baz(孫)」がそれにあたり、スラッグを「bar」と設定した固定ページには.barと直上の「foo」のスラッグを用いた.foo-childというクラスが、スラッグを「baz」と設定した固定ページには.bazと直上の「bar」のスラッグを用いた.bar-childというクラスがそれぞれ付与されているのを確認できます。

デフォルトのbody_class()でも子ページの場合は.page-childといったクラスがつくので、わざわざ「-child」の部分を付けなくても単純なスラッグで付与させてCSSなどで使用する場合は.foo.page-childと指定するとかでもできると思いますが、複数指定はあまりしたくない人などはこの方法がいいかもしれません。

3. 最上のスラッグを用いたクラスを付与する

こちらも現在のページのスラッグを用いたクラスに加えてさらにクラスを付与する方法で、先ほどは直上でしたがこちらは最上のスラッグを用いたクラスを付与するというものです。
また、最上のスラッグを用いたクラスについては同じく.スラッグ名-childのような形でクラスが付与されるようにしてみます。
bodybody_class()が記述されている状態で、functions.phpに下記を記述します。

functions.php

add_filter( 'body_class', 'add_page_slug_class_name' );
function add_page_slug_class_name( $classes ) {
	if ( is_page() ) {
		$page = get_post( get_the_ID() );
		$classes[] = $page->post_name;

		$parent_id = $page->post_parent;
		if ( 0 == $parent_id ) {
			$classes[] = get_post($parent_id)->post_name;
		} else {
			$progenitor_id = array_pop( get_ancestors( $page->ID, 'page', 'post_type' ) );
			$classes[] = get_post($progenitor_id)->post_name . '-child';
		}
	}
	return $classes;
}

上記記述後に各ページのクラスを確認してみると、まず「1. スラッグを用いたクラスを付与する」で紹介したようにそれぞれのスラッグを用いたクラスが付与され、さらに子や孫ページに最上のスラッグを用いたクラスも付与されます。
今回の場合は「bar(子)」「baz(孫)」がそれにあたり、どちらも最上となるのは「foo」になるので、そのスラッグを用いた.foo-childというクラスが「bar」「baz」ともに付与されているのを確認できます。

以上、WordPressのbody_class()使用時にスラッグ名を用いたクラスや直上・最上のスラッグを用いたクラスを追加する方法でした。
スラッグを数字指定とか日本語表記してるとなると別途変換するなどのカスタマイズが必要になってきたりしますが、/%postname%/にしてあって基本的に英字を用いたスラッグが指定されているのであれば、これでそれぞれの固定ページにスラッグを用いたクラスが付与されているのを確認できると思います。

ちなみに、ここで紹介したようにそれぞれ異なるクラスを付与するとかでなく全ページ共通で任意のクラスを追加したいという場合は、以下エントリーで紹介している方法で簡単に実装できます。

Back to Top

WordPress:body_class()使用時にスラッグ名を用いたクラスや直上・最上のスラッグを用いたクラスを追加する方法

WordPress:body_class()使用時にスラッグ名を用いたクラスや直上・最上のスラッグを用いたクラスを追加する方法

/ 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のアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。