WordPressのbody_class()を利用してbodyタグに便利なクラスを追加しよう
こんにちは、webエンジニアのゾノ( @ozonosho )です。
今回のブログではWordPressのbody_class()を利用してbodyタグに便利なクラスを追加する方法を紹介したいと思います。
WordPressの関数body_class()は、表示ページに合ったクラス名（投稿ページなら「single」、アーカイブ系ページなら「archive」など）をbodyタグに付与してくれる便利な関数です。そのため、だいたいどのテーマでもbodyタグにはこの関数がついています。
しかしながら、便利で汎用的に使える反面、細かいところにまでは手が届いていない側面もあります。
そんなわけで、今回はbody_class()で付与されるクラスを追加する方法と「こんなクラスを追加しておいたら便利だよ」という例をご紹介いたします。
WordPressのbody_class()を利用してbodyタグに便利なクラスを追加しよう
まずは、関数body_class()で付与されるクラスを追加するための基本的なコードを書いてみます。functions.phpに下記のコードを追加してください。
|
1 2 3 4 5 |
function my_class_names($classes) { $classes[] = '追加したいクラス名'; return $classes; } add_filter( 'body_class', 'my_class_names' ); |
これが基本形です。
「追加したいクラス名」のところに任意のクラス名称を入れてあげるとすべてのページに指定したクラスを追加できます。
すべてのページのbodyタグに同じクラスを追加しても全然意味が無いので、実際には条件分岐を入れて特定のページに特定のクラスを追加するようにして使います。
固定ページにスラッグ名をつけたクラスを付与する
個人的におすすめしたいのは、固定ページのbodyタグに「page-{スラッグ}」というクラスを付与するという使い方です。
スラッグが「about」のページなら「page-about」というクラスを追加できるのでCSSを組み立てるときにメチャ役立ちます。
|
1 2 3 4 5 6 7 8 |
function my_class_names($classes) { if(is_page()) { global $post; $classes[] = 'page-' . $post->post_name; } return $classes; } add_filter( 'body_class', 'my_class_names' ); |
標準仕様だと特定の固定ページには「page-{投稿ID}」というクラスしかつかないので、アバウトページは「page-23」、問い合わせページは「page-29」みたいになります。
このクラスをそのままCSSで使うのは（マジックナンバーを回避するというコーディングルール上）あんまり宜しくないので、この一手間を加えておくとページを指定してCSSを書くときにコードも綺麗になります。
投稿一覧ページにアーカイブページのクラスを付与する
次におすすめしたいのは、WordPressの設定画面で「投稿ページ」に設定した投稿一覧ページにたいしてアーカイブ系ページと同じ「archive」というクラスを付与するという使い方です。
任意に設定した投稿一覧ページにはなぜか「blog」というクラス名しかつかないので、他のアーカイブ系ページと同じクラスを追加しておくとCSSを組み立てるときに便利です。
|
1 2 3 4 5 6 7 |
function my_class_names($classes) { if(is_home()) { $classes[] = 'archive'; } return $classes; } add_filter( 'body_class', 'my_class_names' ); |
邪魔なクラス名を削除することもできる
body_class()で付与されるクラスは、追加するだけでなく削除することもできます。
たとえば、著者ページ（author.php）は該当ユーザーの記事一覧を表示する前提の仕様になっているのでクラス名に「archive」が付与されています。しかしながら会員制サイトなどでは著者ページをプロフィール紹介ページとして利用するなんて使い方もされるので、そういったときには「archive」を外したいケースも出てきます。
上記の例を実装したのが↓のコードです。
|
1 2 3 4 5 6 7 8 9 |
function my_class_names($classes) { if(is_author()) { foreach($classes as $key => $value) { if($value == 'archive') unset($classes[$key]); } } return $classes; } add_filter( 'body_class', 'my_class_names' ); |
「is_author()」の部分を削除したいクラスのあるページの条件に変更して、「’archive’」の部分を削除したいクラス名に変更すればどんなクラスでも削除できます。
もちろん組み合わせて追加したり削除したりできます
これまではクラスの追加・削除を１つずつのパターンで紹介しましたが、もちろん複数のクラスの追加・削除をまとめて指定できます。
僕はこの関数を結構使うのですが、「あのページにはこのクラスをつけたい」「このページからはこのクラスを外したい」なんて要望を色々叶えていったら、運営しているサイト『未来地図』では↓のようなコードになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
function my_class_names($classes) { if(is_one_column_page()) { $classes[] = 'one-column-page'; } if(is_home() || is_singular('forum')) { $classes[] = 'archive'; } if(is_author()) { $type = $_GET['type']; if($type == 'archive') { $classes[] = 'author-archive'; } else { $classes[] = 'staff-profile-page'; } } if(is_post_type_archive('tsushin_school')) { $classes[] = 'tax-area'; $classes[] = 'tax-area-tsushin_school'; } if(is_local_information_singular()) { $classes[] = 'single-local-information'; $type = $_GET['type']; if($type == 'comment') { $classes[] = 'single-local-information-type-comment'; } else { $classes[] = 'single-local-information-type-information'; } } if(bbp_is_favorites()) { foreach($classes as $key => $value) { if($value == 'single') unset($classes[$key]); } } if(is_search()) { foreach($classes as $key => $value) { if($value == 'search-no-results') { unset($classes[$key]); $classes[] = 'search-results'; } } } if(bbp_is_subscriptions()) { $classes[] = 'bbp-subscriptions-page'; } if(is_page()) { global $post; $classes[] = 'page-' . $post->post_name; } if(is_tax()) { $classes[] = 'tax-' . get_query_var('taxonomy') . '-' . get_term_archive_post_type(); } return $classes; } add_filter( 'body_class', 'my_class_names' ); |
※このまま使うとエラーになるのでご注意ください
こんなふうにページごとに条件を追加していけば複数のページのクラスを追加・削除できるので、興味ある方はぜひ色々と試してみてください(*´`)
おわりに
以上、今回の記事ではWordPressの著者ページの記事一覧にカスタム投稿タイプを含める方法を紹介させていただきました。
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
