designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. プログラミングの記事
  4. カスタム投稿の記事で設定されたカスタム分類の親タームと子タームを分けて表示させる

カスタム投稿の記事で設定されたカスタム分類の親タームと子タームを分けて表示させる

  • 2017.11.27
  • プログラミング
  • WordPress
Updated: 2021.03.09
先日クライアントワークで登場した仕様でした。今後も使いそうなので忘れないうちにメモとして残しておこうと思いました。要件としては、カスタム投稿に紐づくカスタム分類で、それに含まれる親子関係にあるタームを、親タームと子ターム両方表示させるというものです。   子タームのみなら、そのまま「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で子ターム名と一緒に親ターム名を表示する方法!

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

  • Showcase
  • Startify UI
  • Functional Gradation Generator
  • Coloooors

categories

  • WordPress(61)
  • JavaScript(49)
  • Vue.js(48)
  • CSS(46)
  • jQuery(34)
  • Nuxt.js(22)
  • Sass(21)
  • Gulp(17)
  • webpack(16)
  • PHP(14)
  • HTML(14)
  • GSAP(11)
  • React(10)
  • Vite(9)
  • Pug(9)
  • Laravel(8)
  • Cordova(8)
  • Linux(7)
  • Next.js(6)
  • Apache(5)
  • Shopify(4)
  • REST API(4)
  • Node.js(4)
  • Smarty(3)
  • Git(3)
  • JSON(3)
  • その他プログラミング(3)
  • Google Apps API(3)
  • Bootstrap(3)
  • 環境構築・システム(3)
  • TypeScript(2)
  • EJS(2)
  • RMS(2)
  • Docker(2)
  • Instagram API(2)
  • Excel VBA(2)
  • SVG(1)
  • Dart(1)
  • ECカートASP(1)
  • Markdown(1)
  • AMP(1)
  • Nginx(1)
  • XML(1)
  • shellscript(1)
  • Ruby(1)
  • MySQL(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact