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.'"':''; ?>>