その他

2022.07.20

【WordPress】子タームだけ出力する方法

WordPressでサイトを作成していてターム一覧を表示する時、表示する場所によっては親子関係にある子タームだけを表示させたいと思うこともあると思います。
今回はそんな時に役立つ、子タームだけ表示させる方法をご紹介します!

基本のタームについて

タームとは

まずタームとは何かというと、WordPressの投稿を分類するために標準で用意された「カテゴリ」や「タグ」とは別にオリジナルで作成することができるものを「カスタム分類(カスタムタクソノミー、通称タクソノミー)」と呼びます。
そして、そのタクソノミーの中の項目のことを「ターム」と呼びます。

タームの表示方法

基本のタームの表示方法はこちらの記事で詳しくご紹介しているため、今回は細かい説明は省略させていただきます。

[card url=”https://note.spiqa.design/wp/wordpress-term/#get_terms%E3%81%A7WP%E3%82%B3%E3%82%A2%E3%81%AE%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E3%83%BB%E3%82%BF%E3%82%B0%E4%B8%80%E8%A6%A7%E3%82%82%E8%A1%A8%E7%A4%BA%E3%81%A7%E3%81%8D%E3%82%8B”]

表示するための記述

<ul>
    <?php
    $terms = get_terms('post_tag'); // タクソノミーの指定
    foreach ($terms as $term) {
        echo '<li><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
    }
    ?>
</ul>

タームの取得方法

よく使われるターム の取得方法は次のようになります。

ターム名$term->name
タームID$term->term_id
タームスラッグ$term->slug
タームの説明$term->description
タームの投稿数$term->count

タームのアーカイブリンクを取得する場合は次のようになります。
単体で記述する場合はtax_slugの部分にはタクソノミーを指定します。
表示方法でご紹介したように別でタクソノミーを指定して呼び出すことも可能です。

//単体で記述する場合
get_term_link($term->slug, "tax_slug"); // タクソノミーの指定

//別の場所で指定して呼び出す場合
$terms = get_terms('tax_slug');  // タクソノミーの指定
foreach ($terms as $term) {
echo '<li><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
}

子タームだけを表示する方法

ではいよいよ本題の子タームだけを表示する方法です。
今回は先ほどタームの表示方法でご紹介した例に追記をしていきたいと思います。

下記のようにif($term->parent)でタームに子タームがあった場合のif分岐を作成します。

<ul>
	<?php
		$terms = get_terms('post_tag'); // タクソノミーの指定
		foreach ( $terms as $term ){
		if($term->parent)
			echo '<li><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
		};
	?>
</ul>

このように指定をすることで子タームだけを表示することができます。
指定する位置を変えることで子タームの場合だけコンテンツを表示させることも可能です!

まとめ

親子のタームを使いこなすことができれば場所によって表示を変えることができるため、表現の幅が広がります!
ぜひご活用ください!

WordPressの関連記事はこちら

[card url=”https://note.spiqa.design/wp/book06/”]

[card url=”https://note.spiqa.design/wp/wp-parent-child/”]

[card url=”https://note.spiqa.design/wp/wordpress-term2/”]

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2024.02.02

    Webデザインにおけるアニメーションについて考えてみた〜目的編〜

    その他

おすすめ記事

  • 2021.02.11

    【勝手にWEBサイトレビュー #09】遊び心溢れるカナダのクリエイティブ制作会社のWebサイト

    その他

  • 2022.07.12

    【Web担当者必見!】Web制作でよく使う便利なサイト5選

    その他

  • html_svgファイルとは

    2021.01.13

    【HTML】SVGファイルとは

    その他

TAG

×