body_classで最上位親ページのスラッグを追加する

WordPress関数のbody_class()の使い所がいまいち判らなかったのですが、少しだけ判ってきたので備忘録代わりに投稿します。

body_class()の使い所

Codexには、テーマの作者がより効果的にCSSで装飾できるようにするとあります。

テーマの作者がより効果的に CSS で装飾できるようにする body 要素用の新テンプレートタグ body_class が加わりました。この関数は、HTML の body 要素(通常 header.php にある)に異なる class 属性を付与し、さらに任意の class を追加することもできます。

codex

WordPressはheader.phpを用いて全ページのヘッダーを共通で管理できるのですが、全てのページで共通なのでページ毎にスタイルを変えたい時には条件分岐を行い表示する必要があります。そんな時に使用するのがbody_classで、bodyタグに独自のクラスを追加することができます。

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

現在表示中のページに合わせてクラス名が自動で付加されのですが、

トップページなら
<body class=”home blog ・・・” >


固定ページや投稿ページにはIDが付加されて
<body class=”page “page page-id-ID page-parent・・・” >(親ページの場合)
となります。

固定ページや投稿ページはIDで扱いが悪いので、固定ページで子や孫のページのときに親のスラッグ名を用いたクラスを付与する方法を紹介します。

body_classに固定ページのスラッグを追加する

先程のようにbodyにbody_class()を記述してある状態で、functions.phpに下記コードを追加していくのですが、順番に説明します。

固定ページかを判断する

固定ページを表示しているかどうかを判断します。特定のスラッグを指定したい場合は、is_page()にIDやスラッグを指定します。

	if ( is_page() ) {
		//固定ページ内の処理を記述
	}

最上位親ページのスラッグを取得する

if ( $post->ancestors ) {} で、グローバル変数$postに先祖のIDの配列ancestorsがあるかを判断します。

次に$post->ancestors[ count( $post->ancestors ) – 1 ]で、最上位のIDを取得し、

get_post()で、投稿 ID で指定した投稿のレコードをデータベースから取得し、

$root_post->post_nameでスラッグを取得します。

以上をまとめて関数化すると以下のコードとなります

function add_classes_in_body_class( $classes = '' ) {
	if ( is_page() ) {
		global $post;
		if ( $post->ancestors ) {
			$root      = $post->ancestors[ count( $post->ancestors ) - 1 ];
			$root_post = get_post( $root );
			$classes[] = esc_attr( $root_post->post_name );
		}
		$classes[] = esc_attr( $post->post_name );
	}
	return $classes;
}

先ほど作成した関数内で取得したスラッグをbody_classフィルターで付与すれば完成です。

add_filter( 'body_class', 'add_classes_in_body_class' );

以上のコードで最上位親ページのスラッグを取得できます。