WordPressでbody_class()に独自のクラスを追加する方法

WordPressでbody_class()に独自のクラスを追加する方法

WordPressでbody_class()に独自のクラスを追加する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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要素に独自のクラスを追加したい時は、ぜひ参考にしてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。