[WordPress]カスタム投稿タイプアーカイブ／タクソノミーアーカイブ共通のBody Classを付与する

  • 更新日:
  • 公開日:

例えば投稿タイプ「works」のアーカイブページではbodyタグに「post-type-archive-works」が付与されるので、以下のようにCSSを書けます。

.post-type-archive-works .site-main {
    padding: 30px;
}
CSS

投稿タイプにはカスタム分類を追加することが多いので、カスタム分類アーカイブもCSSを追加する場合はセレクタに複数のクラス入れます。

.post-type-archive-works .site-main,
.tax-works_cat .site-main {
    padding: 30px;
}
CSS

一箇所ならすぐに作業が終わりますが、毎回この記述をするのは非効率に思います。こういう場合は共通のクラスをbodyタグに付与するようにします。

共通のBody Classを付与する

以下をfunctions.phpに記述します。

function works_body_class( $classes ) {
    // works投稿タイプか、worksカテゴリの場合
    if ( is_post_type_archive( 'works' ) || is_tax( 'works_cat' ) ) {
        // bodyに専用クラスを付与
        $classes[] = 'works-archive';
    }

    return $classes;
}
add_filter( 'body_class', 'works_body_class' );
PHP

こうするとCSSを簡素化できます。

.works-archive .site-main {
    padding: 30px;
}
CSS

目新しくはありませんが、１つ思いついたのでメモでした。

書いた人

Symbol Mark

Ryoichi（しつ）

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone