カスタム投稿の記事で設定されたカスタム分類の親タームと子タームを分けて表示させる
最終更新日: Update!!
先日クライアントワークで登場した仕様でした。今後も使いそうなので忘れないうちにメモとして残しておこうと思いました。要件としては、カスタム投稿に紐づくカスタム分類で、それに含まれる親子関係にあるタームを、親タームと子ターム両方表示させるというものです。
子タームのみなら、そのまま「get_the_terms」で投稿記事のタクソノミーを取得することでechoで出力表示できるのですが、親タームも合わせてとなるとなかなか曲者でした、、
コードの前にまずは「get_the_terms」で取得できる配列を見ていきます。配列なのでechoではなくprint_rで出力します。下記では趣味のカテゴリーというカスタム分類を例にしています。親タームにはスポーツ、子タームには野球という内容です。
<?php $term_output = get_the_terms($post->ID, 'hobby-cat'); print_r($term_output); ?> // 出力結果 Array ( [0] => WP_Term Object ( [term_id] => 10 [name] => スポーツ [slug] => sports [term_group] => 0 [term_taxonomy_id] => 27 [taxonomy] => hobby-cat [description] => [parent] => 0 [count] => 2 [filter] => raw ) [1] => WP_Term Object ( [term_id] => 51 [name] => 野球 [slug] => baseball [term_group] => 0 [term_taxonomy_id] => 51 [taxonomy] => hobby-cat [description] => [parent] => 10 [count] => 1 [filter] => raw ) )タームの情報が配列として、1番目に親ターム、2番目に子タームという順番に取得できています。そして、親タームと子タームを出力するコードを見ていきます。
親タームと子タームを個別に取得して出力する
取得している配列は、親ターム→子タームの順に並んでいるので「array_pop」で配列最後の子タームの情報を、「array_shift」で配列最初の親タームの情報を取得して出力しています。条件分岐では親タームの情報と子タームの情報が同じ、つまり配列の中身が一つしかない場合には親タームのみ表示されるようにしています。<?php echo ('<span>') ; $term_child = array_pop(get_the_terms($post->ID, 'hobby-cat')); $term_child_name =$term_child->name; $term_parent = array_shift(get_the_terms($post->ID, 'hobby-cat')); $term_parent_name = $term_parent->name; if($term_child === $term_parent) { echo esc_html($term_child_name); } else { echo esc_html($term_parent_name); echo (' / '); echo esc_html($term_child_name); } echo ('</span>'); ?> // 出力結果 <span>スポーツ / 野球</span>上記の例では親タームが子タームより作成されるのが早かったためにterm_idが若い順番となっています。そのため、配列の順序でどちらが親タームかが確認できましたが、子タームの方がterm_idが若い番号というケースもあります。そのような場合ですと上記の形では正しく判別できないため、もう少し詳しく確認させる必要があります。
<?php $term_first = array_shift(get_the_terms($post->ID, 'news_cat')); $term_first_name = $term_first->name; $term_first_parent = $term_first->parent; $term_last = array_pop(get_the_terms($post->ID, 'news_cat')); $term_last_name = $term_last->name; $term_last_parent = $term_last->parent; if($term_first === $term_last) { echo esc_html($term_first_name); } else { if($term_first_parent === 0) { echo esc_html($term_first_name); echo (' / '); echo esc_html($term_last_name); } else { echo esc_html($term_last_name); echo (' / '); echo esc_html($term_first_name); } } ?> // 出力結果 <span>スポーツ / 野球</span>このように順番がわからないとタームの親子関係も正しく確認することができません、そのため、タームのオブジェクトに含まれているparentのキーの値を確認し、親タームを持っているかを判断し、子タームと合わせて出力されるようにしておきます。
タームのリストとして並べて出力する
タームの親子関係も関係なく全て並列に表示させる場合は「get_the_term_list」を使うと全てのタームが表示できます。引数にはタクソノミーのスラッグ以降に、’出力の直前に表示させる文字’、’区切り文字’、’出力の直後に表示させる文字’と指定することが可能です。<?php $all_terms = get_the_term_list( $post->id, 'hobby-cat', '<span>', ' / ', '</span>'); echo ($all_terms); ?> // 出力結果 <span>スポーツ / 野球</span>もし表示されたタームの並びを変更したい場合はfunctions.phpで下記のように指定する必要があります。「wp_list_sort」でタームの並びを指定できます。 【functions.php】
function term_order( $categories ) { $sorted_terms = wp_list_sort( $categories, 'term_id', 'ASC' ); return $sorted_terms; } add_filter( 'get_the_terms', 'term_order' );(参考) 【コピぺOK】taxonomy.phpで子ターム名と一緒に親ターム名を表示する方法!
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories