WordPressテーマの中身を見ると、以下のようにbody要素にbody_class()というテンプレートタグが入っていることが多いと思います。
<body <?php body_class(); ?>>出力されるHTMLでは、以下のように様々なクラスが付与されています。
<body class="home blog logged-in admin-bar wp-embed-responsive enable-search-modal has-no-pagination showing-comments show-avatars footer-top-visible customize-support">※Twenty Twentyのトップページ(投稿一覧)のソースです。ソースを確認すると、投稿一覧なので”home”というクラスが追加されていたり、ログイン中なので”logged-in”というクラスが付いていることがわかります。
このように、body_class()を入れるだけで、ページによって異なるクラスを追加してくれるようになります。
ただ、自動で追加されるクラスだけでなく、独自のクラスを追加したいというケースがあるかもしれません。また、逆に既存のクラスを削除したいケースもあると思います。
そんな時のためにbody_class()に独自のクラスを追加したり、既存のクラスを削除する方法をご紹介いたします。
body_class()に独自のクラスを追加する方法
テンプレート内で直接クラスを記述する方法
以下のようにbody_class()に直接クラスを指定することで、独自のクラスを追加できます。半角スペースで区切ることで、複数のクラスを追加可能です。
<body <?php body_class('addclass1 addclass2'); ?>>HTMLを見ると、以下のようにaddclass1とaddclass2というクラスが追加されているのを確認できます。
<body class="home blog logged-in admin-bar wp-embed-responsive addclass1 addclass2 enable-search-modal has-no-pagination showing-comments show-avatars footer-top-visible customize-support">functions.phpでクラスを追加する方法
適用しているテーマのfunctions.phpに、以下のように記述することでもbody_class()に独自のクラスを追加できます。
function add_body_class( $classes ) {
$classes[] = 'addclass1 addclass2';
return $classes;
}
add_filter( 'body_class', 'add_body_class' );テンプレートに直接記述する場合と同様に、半角スペースで区切って複数のクラスを追加可能です。
body_class()からクラスを削除する方法
body_class()から自動で追加されるクラスを削除することも可能です。
functions.phpに以下を追加することで、body_class()からcategoryというクラスが削除されます。
function del_body_class($classes) {
foreach ($classes as $key => $value) {
if ($value == 'category') {
unset($classes[$key]);
}
}
return $classes;
}
add_filter('body_class', 'del_body_class');あとがき
body要素に独自のクラスを追加したい時や既存のクラスを削除したい時は、ぜひ参考にしてみてください。
なお、追加する場合も削除する場合も同じbody_classフックを使うので、同じ関数内で追加・削除を指定することも可能です。
function my_body_class($classes) {
if (is_front_page()) {
$classes[] = 'index';
}
foreach ($classes as $key => $value) {
if ($value == 'category') {
unset($classes[$key]);
}
}
return $classes;
}
add_filter('body_class', 'my_body_class');