カスタム投稿のタクソノミーで設定したタームをsingle.phpのbody_classに追加表示する方法

【比較】新着記事の表示オプションの違い
初心者

single.phpのbodyにタームのクラス属性を表示したい。
body_classにタクソノミーのタームスラッグを追加するカスタマイズを教えてほしい..

そんな人向けの記事です。

body_classテンプレートタグを使っているテーマの場合、bodyにページ属性が出力されますよね?。ただしWordPressの標準仕様でsingle.phpにタクソノミーのターム名は表示されません。

この記事ではsingle.phpのbody_classにカスタム投稿のタームスラッグを表示する方法を紹介します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【body_class】single.phpのbodyにタームスラッグを表示する方法

single.php上のbody_classにターム情報を含めるには以下のコードをテーマのfunctions.phpに追加しましょう。

サンプルコード

add_filter( 'body_class', 'add_taxonomy_class' );
function add_taxonomy_class( $classes ){
    if( is_singular() ) {
        global $post;
        $taxonomy_terms = get_the_terms($post->ID, 'genre'); // タクソノミーを指定
        if ( $taxonomy_terms ) {
            foreach ( $taxonomy_terms as $taxonomy_term ) {
            $classes[] = 'term-'. $taxonomy_term->slug;
            }
        }
    }
    return $classes;
}

サンプルコードの「タクソノミーを指定」の部分に表示したいタクソノミースラッグを記述しましょう。

タクソノミーが「test」の場合は次のように記述します。

add_filter( 'body_class', 'add_taxonomy_class' );
function add_taxonomy_class( $classes ){
    if( is_singular() ) {
        global $post;
        $taxonomy_terms = get_the_terms($post->ID, 'test'); // タクソノミーを指定
        if ( $taxonomy_terms ) {
            foreach ( $taxonomy_terms as $taxonomy_term ) {
            $classes[] = 'term-'. $taxonomy_term->slug;
            }
        }
    }
    return $classes;
}

サンプルのコードを使うとbody_wrapにterm-タームスラッグ名の形式でクラス属性が追加されます。「term-**」の部分はサンプルコードの8行目で決めています。任意の文字列に変更可能です。

かんた

サンプルコードを使うと、下記の表のようにタームスラッグがsingle.phpに表示されるようになります↓

「ジャンル」タクソノミーのターム

ターム名スラッグbody_classへの出力
スキンケアskincareterm-skincare
メイクアップmakeupterm-makeup
美白whiteterm-white
body_classに出力されるコード

【基礎知識】ターム?タクソノミー?って何だっけ?

タームやタクソノミーって、ちょっと紛らわしいですよね?

かんた

そんな人向けに用語の確認です。

タクソノミーは「区分」

タクソノミーってなんだ?

まずはタクソノミーです。英語で書くとtaxonomy。

上の図は標準投稿にタクソノミーを4つ追加した画面です。通常は投稿のメニューにカテゴリーとタグのみ表示されますが、「ジャンル」「試供品」「ブランド」「価格」と表示されています。

この部分がタクソノミーです。

タクソノミーをカスタム投稿で使うのが一般的だと思います。標準投稿に置き換えるとカテゴリーやタグのような位置づけだと理解すれば間違いではありません

タクソノミーの追加方法

タクソノミーは2つの方法で追加・編集できます。

タクソノミーの追加方法

  1. functions.phpにコードを追加
  2. CPT UIなどのプラグインで追加

コードをfunctions.phpに追加する方法は簡単です。自作テーマの場合は不要なプラグインを追加する必要もなくなるのでテーマに直接コードを追加するのがおすすめです。

かんた

アップデートがある有料テーマをベースにしてる場合などはプラグインを使った方が運用が楽です。無理にコードにこだわる必要はありません。

タクソノミースラッグってどれ?

初心者

タクソノミースラッグを確認したい。
CPT UIプラグインはどこで確認できるの?

かんた

タクソノミーを追加CPT UIタクソノミースラッグを確認する方法を紹介します。

操作内容

CPT UI」→「タクソノミーの追加と編集」の順にクリック。

タクソノミースラッグが確認できます。

タクソノミースラッグ

まとめ

single.phpにタームスラッグを表示する方法を紹介しました。sigle.phpにタームスラッグが追加されると、特定のタームに属する記事ページだけに適用させるCSSコードが書けて結構便利です!

ぜひWordPressのカスタマイズにチャレンジしてみてください!

よかったらシェアしてね!
  • URLをコピーしました!
目次