ワードプレスでbodyタグに任意のクラスを足す方法(PHPコーディング)

ワードプレスでbodyタグに任意のクラスを足す方法のPHPコードをご紹介します。

ワードプレスのbodyタグのクラス

ワードプレスのbodyタグには、様々なページの種類によって自動でクラスが追加されます。

home →　トップページに付与されます

single　、　postid-投稿ID　→　単一投稿表示に付与されます

archive 、category 、category-カテゴリーID　→　カテゴリーページに付与されます

archive 、tag 、tag-タグID　→　タグページに付与されます

page 、 page-id-固定ページID　→　固定ページに付与されます

logged-in　→　ログイン中にページを表示すると付与されます。

bodyクラスに独自のクラスを付与する

このbodyクラスに独自のクラスを付与することもできますのでそのコードを見ていきましょう。

※このコードはテーマのFunctions.phpや作成中のプラグイン等にコピペ頂くと動作します。

function add_my_body_classes($classes) {

    if( is_paged() ) { //固定ページの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_tag() ) { //タグページの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_category() ) { //カテゴリーページの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_day() ) { //日別アーカイブの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_month() ) { //月別アーカイブの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_year() ) { //年次アーカイブの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_author() ) { //著者ページの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_tax('任意のタグのスラグ') ) { //任意のタグの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_category('任意のカテゴリーのスラグ') ) { //任意のカテゴリーの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_single() ) ) { //投稿ページの場合
        $classes[] = '任意のクラス名';
    }
    
    if( is_mobile() ) { //モバイルで表示されている場合
        $classes[] = '任意のクラス名';
    }
    
    
    return array_unique($classes);
};
add_filter('body_class','add_my_body_classes');

上記コードでは
・固定ページの場合
・タグページの場合
・カテゴリーページの場合
・日別アーカイブの場合
・月別アーカイブの場合
・年次アーカイブの場合
・著者ページの場合
・任意のタグの場合
・任意のカテゴリーの場合
・投稿ページの場合
・モバイルで表示されている場合
に任意のクラスを足すコードを示しています。

add_filter(‘body_class’,　でワードプレスがbodyタグにクラスを付与する処理に割り込んでいます。

$classes[]　でbodyタグに追加されるクラス群に任意のクラスを追加して、最後にreturnで返してそのクラスも含めて出力させます。

bodyのクラスを全部消すには？

ちなみに上記コードで空っぽの配列を返すとbodyタグのクラス付与を全部消してしまう事も可能です。

function add_my_body_classes($classes) {
    return array();
};
add_filter('body_class','add_my_body_classes');

参考になりましたら幸いです。

WordPress ワードプレスのテーマやプラグインの作成カスタマイズ、修正のご依頼ご相談はワードプレスドクターまでお気軽にお送りください