WordPress Tips

[WordPress] body_class()のclassを削除したり追加したりする

2020-03-27

本記事にはプロモーションが含まれています。

[WordPress] body_class()のclassを削除したり追加したりする

body_class()はWordPressのテンプレートタグで、ページのbody要素にクラスが付加されます。

付加されたclassは、テンプレート,ページの種類が確認できるので便利ですが、付加されるclassが多すぎてちょっと鬱陶しい時もあり。また独自のclassを追加したい時もあります。

独自のclassを追加したり、付加されるclassを削除したい時のための覚え書き。

テンプレートでのbody_class()、出力例

header.phpなどに記載されていることが多い

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

htmlの出力は以下のようになります

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

表示設定>ホームページの表示が「最新の投稿」の時

home blog

表示設定>ホームページの表示が「固定ページ」でホームページに選択したページの時

home page page-id-ID

表示設定>ホームページの表示が「固定ページ」で投稿ページに選択したページの時

blog [ paged paged-n ]

[paged paged-n]は2ページ目以降に表示される
nはページ番号

テンプレートタグ/body class
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/body_class

body_class()にclassを追加する

body_class()に独自のタグを追加したい時。テンプレートにて

<body <?php body_class( 'class-name' ); ?>>

htmlを確認すると、body要素に[class-name]が追加されます。

複数classを付加したい時

<?php body_class('class1 class2 class3'); ?>

フィルターフックを使って追加する場合
functions.phpに記述。

add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
	$classes[] = 'class-name';
	return $classes;
}

カスタム投稿タイプのタイプ名をbody_class()のclass名に追加する,それとページのスラッグも追加

カスタム投稿タイプの時に投稿タイプ名をbody_classに追加する。さらにページのスラッグも追加したい時に。

add_filter('body_class','add_posttype_classes');
function add_posttype_classes($classes) {
    $postype = get_query_var('post_type');
    $classes[] = $postype;
    if(!$postype ==""){
        $m_key = array_search('home', $classes);
        unset($classes[${'m_key'}]);
    }elseif ( 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;
}

参考にさせていただいたサイト:
https://www.nxworld.net/wordpress/wp-add-page-slug-body-class.html

body_class()から特定のクラスを削除する

ちょっと出力が多すぎるclassを削除したい時に

add_filter('body_class', 'remove_body_class');
function remove_body_class($wp_classes)
 {
 foreach($wp_classes as $key => $value)
 {
//.categoryを削除する
 if ($value == 'category') unset($wp_classes[$key]);
 }
 return $wp_classes;
 }

wordpressで付加されるclassでなく、特定のclassを指定する

class削除と近いですが、付加されるclassをページごとに特定のclassを設定する方法

固定ページの時はpost_name(スラッグ)をclassに付与する

<body <?php if(is_page()){body_class(esc_attr( $post->post_name ));}else{body_class();}; ?>>
<?php
  if(is_frontpage()||is_home()){
    //フロントページかトップページの時にhomeを付与
    $custom_body_class='home';
  }else if(is_page()){
    //固定ページの時、pageとページスラッグを付与
    $custom_body_class='page '.$post->post_name.'';
  }else if(is_single()){
    //シングルページの時、singleとページスラッグを付与
    $custom_body_class='single '.$post->post_name.'';
  }else if(is_category()){
    //カテゴリページの時、categoryとカテゴリスラッグを付与
    $category=get_the_category();
    $custom_body_class='category '.$category[0]->category_nicename.'';
  }
  ?>
  <body<?php echo($custom_body_class)?' class="'.$custom_body_class.'"':''; ?>>

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WordPress Tips