WordPressでbodyに異なるclassを付与する

WordPress

<script>” title=”<script>

<script>

固定ページでページを作成した時、bodyにページのスラッグを用いたclassを付与したいときありますよね。

例えばcompanyというスラッグなら class=”company” が、serviceというスラッグなら class=”service” が。

今回はスラッグを用いたclassを付与する方法を紹介します。

【スラッグ付与の下準備】body_class();

bodyにスラッグを付与するために、bodyにbody_class();を追加します。

body_class();とは、WordPress 2.8 以降から使えるようになったテンプレートタグで、各ページの種類によって自動で class を割り当ててくれるとても便利な機能です。

使い方はまずbodyタグを下記のように書き換えます。

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

するとHTML側にはデフォルトで下記のように出力されます。（idはページのidが付与されます。）

<body class="page-template-default page page-id-48 logged-in">

スラッグを用いたclassを付与する

body_class();をbodyに付与するだけでは、任意のスラッグをつけることはできません。

functions.phpに下記を追加する必要があります。

function pagename_class($classes = '') {
         if (is_page()) {
             $page = get_page(get_the_ID());
             $classes[] = $page->post_name;
         }
	return $classes;
}

add_filter('body_class','pagename_class');

するとbodyにスラッグのclassが追加されます。

<body class="page-template-default page page-id-48 logged-in company">

親ページのスラッグを用いてclassを付与する

親子関係にあるページの子ページに、.親スラッグ名-childという形で付与する方法です。

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

すると子ページには末尾に「-child」がつく形でclassが付与されるようになります。

<body class="page-template-default page page-id-169 page-child parent-pageid-48 logged-in page-global page-company-child">