WordPressカスタムボディクラスを追加する

Paolo

6 years ago

WordPressでBodyにクラスを追加する

多くの場合、自動生成されたクラスだけでは不十分なため、カスタムクラスを追加する必要があります。

カスタムクラスを追加するには、WordPressのフィルターを使用します：

body_class

以下に、最もよくリクエストされる例のスニペットをご紹介します。

ただし、まず初心者の方にBodyクラスについてもう少し説明するための簡単な概要をお伝えします。

WordPressのカスタムBodyクラスは、WordPressの開発者であれば遅かれ早かれ対処する必要があるものです。

ほとんどの場合、必要なのは数行のコードだけなので、プラグインを使用するのは大げさすぎます。

では、WordPressのカスタムBodyクラスを追加するにはどうすればよいのでしょうか？

WordPressには body_class 関数と body_class フィルター（フック）があります。

body_class 関数はテーマ内で使用され、WordPressが自動生成したクラスをウェブサイトのbodyタグに追加します。

テーマの header.php ファイルへの追加方法は次のとおりです：

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

アクセスされたページに応じて、WordPressは特定のクラスを出力します。

1) デフォルトの「Hello World」投稿のボディクラスは以下のとおりです：

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2) サンプルページのボディクラスは以下のとおりです：

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3) カテゴリアーカイブページのボディクラスは以下のとおりです：

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4) 著者アーカイブページのボディクラスは以下のとおりです：

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

5) ホームページのボディクラス（ホームページが設定されている場合）

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

上記の5つの例は、管理者ユーザーがログインしている状態で、ほとんどのデフォルトテーマに共通するものです。

ログアウトしている場合、クラスは若干異なります。

HTMLのクラスは、CSSを使ってウェブページをスタイリングするために使用されます。

以下のスニペットをfunctions.phpファイルにコピーすると、ウェブサイトのマークアップに新しいカスタムボディクラスが追加されます。

ここでは body_class フィルターを使用します。

WordPressカスタムボディクラスの追加

function my_custom_body_class($classes) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class');

これにより、ウェブサイトのすべてのページのbodyタグに新しいクラス「my-class」が追加されます。

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

2つ以上のクラスを追加したい場合は？

2つ以上のWordPressカスタムボディクラスの追加

function my_custom_body_classes($classes) {<br />
// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
$classes[] = 'my-class-2';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom classes via body_class filter<br />
add_filter('body_class','my_custom_body_classes');

結果は次のようになります：

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

CSSでカスタムスタイルを適用したい特定のページにのみボディクラスを追加したい場合は？

特定のページへのWordPressカスタムボディクラスの追加

これはいくつかの方法で実現できます：

1) ページIDを使ってカスタムボディクラスを追加する

function my_custom_body_class_id($classes) {<br />
// add 'my-class' only to page with ID 1.<br />
if ( is_page( '1' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_id');

IDが2のページにはカスタムクラスが追加され、他のすべてのページには追加されません。

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar my-class customize-support">

2) ページスラッグを使用してカスタムボディクラスを追加する

function my_custom_body_class_slug($classes) {<br />
// add 'my-class' only to page with slug contact-form.<br />
if ( is_page( 'contact-form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_slug');

これにより、スラッグが contact-form のページにカスタムクラス「my-class」が追加され、他のすべてのページにはカスタムクラスが追加されません。

3) ページタイトルを使用してカスタムボディクラスを追加する

function my_custom_body_class_title($classes) {<br />
// add 'my-class' only to page with title Contact Form.<br />
if ( is_page( 'Contact Form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_title');

これにより、タイトルが Contact Form のページにカスタムクラス「my-class」が追加され、他のすべてのページにはカスタムクラスが追加されません。

4) ページテンプレートを使用してカスタムボディクラスを追加する

function my_custom_body_class_template($classes) {<br />
// add 'my-class' only to pages using my custom template.<br />
if ( is_page_template( 'my-custom-page-template' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_template');

これにより、テンプレート my-custom-page-template を使用しているページにカスタムクラス「my-class」が追加されます。他のすべてのページにはカスタムクラスが追加されません。

カテゴリーまたはタグページにも、IDまたはカテゴリー／タグのスラッグを使用してカスタムクラスを追加できます。

カテゴリーまたはタグアーカイブにWordPressのカスタムボディクラスを追加する

1) カテゴリー

function my_custom_body_class_category($classes) {<br />
// add 'my-class' only to the my-category archive.<br />
if ( is_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_category');

2) タグ

function my_custom_body_class_tag($classes) {<br />
// add 'my-class' only to the my-tag archive.<br />
if ( is_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_tag');

これにより、カテゴリー my-category およびタグ my-tag のアーカイブページにのみカスタムボディクラスが追加されます。

カテゴリー my-category に属するすべての投稿、またはタグ my-tag が付いたすべての投稿の個別ページにも、カスタムボディクラスを追加できます。

in_catgeory および has_tag 関数を使用します。

1) カテゴリー（アーカイブページと個別ページの両方）

function my_custom_body_class_in_category($classes) {<br />
// add 'my-class' to the my-category archive and single posts of the category.<br />
if ( in_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_in_category');

2) タグ（アーカイブページと個別ページの両方）

function my_custom_body_class_has_tag($classes) {<br />
// add 'my-class' to the my-tag archive and single posts with that tag.<br />
if ( has_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_has_tag');

これら最後の2つの例では、アーカイブページと個別ページの両方にカスタムクラスが追加されます。

各投稿にカテゴリー名をWordPressカスタムボディクラスとして追加する

カテゴリーのニックネームをカスタムボディクラスとして各投稿に追加したい場合は、次のスニペットが必要です。

function my_custom_body_class_category_in_single($classes) {<br />
     if (is_single() || is_category()) {<br />
       global $post;<br />
       foreach((get_the_category($post->ID)) as $category) {<br />
         $classes[] = $category->category_nicename;<br />
       }<br />
     }<br />
     return $classes;<br />
   }<br />
add_filter('body_class','my_custom_body_class_category_in_single');

たとえば、カテゴリー「Travel」の投稿を閲覧している場合、上記のスニペットはボディクラス Travel を追加するため、カテゴリーごとに投稿のスタイルを変えることができます。

モバイルデバイスからアクセスした際にWordPressのカスタムボディクラスを追加する

これは以下を使用することで簡単に実現できます： wp_is_mobile 関数。

function my_custom_body_class_mobile( $classes ) {<br />
    if ( wp_is_mobile() ) {<br />
        $classes[] = 'mobile';<br />
    }<br />
    return $classes;<br />
}<br />
add_filter( 'body_class', 'my_custom_body_class_mobile' );

カスタムボディクラスは、プラグインによって作成された1つまたはすべてのページに追加することもできます（プラグインによって異なります）。

GeoDirectory

GeoDirectory は独自のカスタムボディクラスを追加します。たとえば、すべての GeoDirectory ページにはボディクラス geodir-page が付与されます。

高度な検索アドオンやカスタム投稿タイプアドオンがインストールされている場合、以下のクラスが追加されます： geodir_advance_search と geodir_custom_posts それぞれ追加されます。

GD ホームページの例：

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

リスト一覧ページ（カスタム投稿タイプまたはカテゴリーアーカイブ）では、カスタム投稿タイプごとに異なるクラスが付与されます。

たとえば Places では、以下のクラスが付与されます： post-type-archive-gd_place.

リスト詳細ページでも、使用されているカスタム投稿タイプごとに異なるクラスが付与されます。たとえば Places では以下のクラスが付与されます： single-gd_place.

ただし、他のカスタムボディクラスが必要になる場面もあります。いくつか例を挙げてみましょう：

1) ロケーションページにカスタムボディクラスを追加する

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_location_custom_body_class');</p>
<p>function gd_location_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('location')) {<br />
$classes[] = 'gd-location';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

同じ条件タグ

geodir_is_page()

は任意の GD ページにも使用できます。たとえばプレビューページの場合：

2) リストプレビューページにカスタムボディクラスを追加する

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_preview_custom_body_class');</p>
<p>function gd_preview_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('preview')) {<br />
$classes[] = 'gd-preview';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

3) 追加するカスタムボディクラスを異なる価格プランの詳細ページに

 // add extra custom class via body_class filter<br />
add_filter('body_class','gd_price_custom_body_class');<br />
function gd_price_custom_body_class($classes) {<br />
global $post;<br />
if ( $post->package_id == 1) {<br />
$classes[] = 'price-1';<br />
}<br />
elseif ( $post->package_id == 2) {<br />
$classes[] = 'price-2';<br />
}<br />
else {}<br />
// return the modified $classes array<br />
return $classes;<br />
}

4) 追加するカスタムボディクラスを検索された異なるCPTの検索ページに

add_filter('body_class','gd_search_cpt_custom_body_class');</p>
<p>function gd_search_cpt_custom_body_class($classes) {<br />
if (isset($_GET['stype']) == 'gd_place') {<br />
$classes[] = 'search_gd_place';<br />
}<br />
return $classes;<br />
}

WooCommerce

1) すべてのWooCommerceページにカスタムボディクラスを追加する

function my_custom_body_class_woo($classes) {<br />
// add 'my-class' to all woocom pages.<br />
if ( is_woocommerce() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo');

2) ショップページのみにカスタムボディクラスを追加する

function my_custom_body_class_woo_shop($classes) {<br />
// add 'my-class' only to the shop page.<br />
if ( is_shop() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_shop');

3) 商品カテゴリーページにカスタムボディクラスを追加する

function my_custom_body_class_woo_cat($classes) {<br />
// add 'my-class' only to the product category archives.<br />
if ( is_product_category() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat');

4) 特定の商品カテゴリーページにカスタムボディクラスを追加する

function my_custom_body_class_woo_cat_a($classes) {<br />
// add 'my-class' only to a specific product category archive.<br />
if ( is_product_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) 商品ページにカスタムボディクラスを追加する

function my_custom_body_class_woo_prod($classes) {<br />
// add 'my-class' to product pages.<br />
if ( is_product() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod');

6) 特定の商品ページにカスタムボディクラスを追加する

function my_custom_body_class_woo_prod_a($classes) {<br />
// add 'my-class' only to the my-product single page.<br />
if ( is_product( 'my-product' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod_a');

他にもWooCommerceの条件タグは数多くあります。例えば

タグアーカイブ用のis_product_tag()
ショッピングカートページ用のis_cart()
チェックアウトページ用のis_checkout()
顧客アカウントページ用のis_account_page()

すべてはこちらでご確認いただけます： https://docs.woothemes.com/document/conditional-tags/

他のプラグインで生成されたページへのWordPressカスタムボディクラスの追加

条件タグを提供するプラグインであれば、同様の操作が可能です。

例えば、bbPressの条件タグはこちらで確認できます：https://codex.bbpress.org/bbpress-conditional-tags/

例を見てみますか？

1) すべての bbPress ページにカスタムボディタグを追加するには、以下が必要です：

function my_custom_body_class_bbpress($classes) {<br />
// add 'my-class' only to bbpress page.<br />
if ( is_bbpress() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_bbpress');

BuddyPress の条件タグや、優れたプラグインのほとんどにも条件タグが用意されています。

ボディクラスの削除

フィルターで追加できるだけでなく、削除することもできます：

function remove_body_class( $classes ) {</p>
<p>foreach ( $classes as $key =&amp;amp;gt; $value ) {<br />
if ( $value == 'my-class' ) unset( $classes[ $key ] );<br />
}</p>
<p>return $classes;</p>
<p>}<br />
add_filter( 'body_class', 'remove_body_class' );

WordPress サイトでボディクラスの追加・削除にお困りですか？下のコメント欄に具体的な例をリクエストしていただければ、できる限り回答します！