WordPress – 超便利!bodyクラスにページスラッグ(最上親も)とカテゴリスラッグを追加

WordPress
この記事は約4分で読めます。
スポンサーリンク

例えば、Webサイトにおいて、ページごとにヘッダー画像や背景を変えたいことは良くあります。そういった場合、css で class指定して任意のプロパティの値を変えることが多いですが、ページ数が多くなったりすると、そのclass指定が面倒だったり管理出来なくなってきたりします。「え~っと、なんて名前のクラスだったけな~??」って感じに陥ることもしばしば。
そこで、WordPressで一意に与えられたページスラッグやカテゴリースラッグをそのままbodyクラスにしてあげれば、css でのクラス指定もかなり楽になって利用価値が広がり、クラス名が分からなくなったり間違ったりすることも無くなるというオススメの設定です。

スポンサーリンク

bodyタグにページスラッグと最上位の親ページスラッグを含むクラスを追加する

投稿のシングルページでは postid-(id) の形で固有のクラスが与えられますが、固定ページにはページ固有のクラスがありません。
そこで、以下のコードをテーマ(子テーマ)の functions.php に追記することで、bodyクラスにページスラッグとその最上の親ページスラッグを含むクラスを追加するようになります。
最上の親ページスラッグはそのまま追加すると、その親ページとの判別が出来なくなりますので、末尾に -child を付加します。
例えば、ページスラッグが policy の固定ページの場合、bodyタグに policy という class を追加します。この policyページが companyページの子ページだった場合、 company-child という class も追加されます。

functions.php
<?php
//bodyクラスにページスラッグと最上の親ページスラッグのクラスを追加
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;
}
?>

bodyクラスにカテゴリースラッグを追加する

投稿(single)ページの場合、デフォルトで付加される一意のクラス postid-(id) でページの判別は出来ますが、逆にカテゴリーごとに cssプロパティを変更したいことがあります。
下記コードは、テーマ(子テーマ)の functions.php に追記することで、カテゴリスラッグをそのままbodyクラスに追加します。例えば、item カテゴリーの投稿ページには、 item というクラスが追加されます。

functions.php
<?php
//カテゴリスラッグクラスをbodyクラスに追加
function add_category_slug_classes_to_body_classes($classes) {
  global $post;
  if ( is_single() ) {
    foreach((get_the_category($post->ID)) as $category)
       $classes[] = $category->category_nicename;
  }
  return $classes;
}
add_filter('body_class', 'add_category_slug_classes_to_body_classes');
?>

以上、ご参考になれば幸いです。

コメント

  1. […] WordPress – 超便利!bodyクラスにページスラッグ(最上親も)とカテゴリスラッグを追加 […]

  2. […] […]

タイトルとURLをコピーしました