GenesisサイトにBody Classを追加する方法

Genesisフレームワークを使っていると、『Body Class』というフレーズをよく見かけると思います。

名前の通りbodyタグに書かれたクラスのことなんですが、このBody Class、同じグループ同士の見た目を統一したり、そのグループ専用のスクリプトを呼び出したりと、Genesisサイトを効率よくカスタマイズできるようになります。

管理画面から特定の投稿にBody Classを追加
functions.phpからbody classを追加

管理画面から特定の投稿にBody Classを追加

まずは管理画面からBody Classを追加してみましょう。

Body ClassもPost Classと同じように、それぞれの投稿の編集画面からオリジナルのクラスを追加することができます。

投稿の編集画面の『Layout Settings』というパネルの中に、『Custom Body Class』という入力フォームがあるので、この中に追加したいクラス名を書き込みます。

ここでは試しにcustom-classというクラス名を入力してみます。

設定を保存すると、<body>タグにcustom-classというクラスが追加されました。

functions.phpからbody classを追加

今度はfunctions.phpファイルから特定のページにBody Classを追加してみましょう。

1 全てのページにBody Classを追加

全てのページにBody Classを追加するには、functions.phpに以下のコードを追加します。

// 全てのページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

    $classes[] = 'custom-class';
    return $classes;

}

※ 追加するBody Classのクラス名はお好みで変更して下さい。

2 特定のスラッグを持つ固定ページにBody Classを追加

特定のスラッグを持つ固定ページBody Classを追加するには、上と同じようにfunctions.phpに以下のコードを追加します。

// sample-pageというスラッグを持つ固定ページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
    if ( is_page( 'sample-page' ) ) 
        $classes[] = 'custom-class';
        return $classes;
}

※ スラッグは、下の画像のような固定ページ編集画面で設定できる『パーマリンク』の一部となる文字列です。

3 特定のIDを持つ固定ページにBody Classを追加

特定のIDを持つページにBody Classを追加する場合は、以下のようなコードになります。これもfunctions.phpに追加して下さい。

参考）
投稿やカテゴリのIDを管理画面から確認する方法

// IDが1の固定ページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
    if ( is_page( '1' ) )
        $classes[] = 'custom-class';
        return $classes;
}

4 特定のカテゴリに属するページにBody Classを追加（スラッグ）

次は特定のカテゴリに属するページにBody Classを追加する方法です。

指定したカテゴリスラッグを含むページ全てが対象になるので、特定のカテゴリだけ見た目を変更する場合にとても便利です。

// sample-categoryというカテゴリスラッグを持つページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

    if ( is_category( 'sample-category' ) )
        $classes[] = 'custom-class';
        return $classes;

}

5 特定のカテゴリに属するページにBody Classを追加（ID）

こちらも特定のカテゴリに属するページにBody Classを追加しますが、ここではカテゴリIDで指定します。

// カテゴリIDが1のページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

    if ( is_category( '1' ) )
        $classes[] = 'custom-class';
        return $classes;
}

6 特定のタグに属するページにBody Classを追加（スラッグ）

④で書いた『特定のカテゴリに属するページにBody Classを追加（スラッグ）』のタグ版です。

こちらもfunctions.phpに追加して下さい。

// sample-tagというタグスラッグを持つページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
    if ( is_tag( 'sample-tag' ) )
        $classes[] = 'custom-class';
        return $classes;

}

7 特定のタグに属するページにBody Classを追加（ID）

最後は特定のタグIDを持つページにBody Classを追加する方法です。

以下のコードを追加すると、<body>タグにcustom-classというクラスが追加されます。

// タグIDが1のページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

    if ( is_tag( '1' ) )
        $classes[] = 'custom-class';
        return $classes;

}