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

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

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

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

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

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

単純に現在のページのスラッグを用いたclassを付与する方法で、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;
}

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

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

上で紹介した現在のページのスラッグを用いたclassを付与しつつ、さらに直上のスラッグを用いたclassを付与する方法で、単純に直上のスラッグを追加するだけだと異なるページなのに同じclass名が付与されるということになってしまうので、ここでは.スラッグ名-childのように末尾に「-child」がつく形でclassが付与されるようにしてみます。
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;
}

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

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

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

こちらも現在のページのスラッグを用いたclassに加えてさらにclassを付与する方法で、先ほどは直上でしたがこちらは最上のスラッグを用いたclassを付与するというものです。
また、最上のスラッグを用いたclassについては同じく.スラッグ名-childのような形でclassが付与されるようにしてみます。
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;
}

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


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

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

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