その他

2022.07.20

【WordPress】記事に紐付いたタクソノミータームを表示する方法

今回は、WordPressの投稿記事に紐付いたタクソノミータームを表示する方法をご紹介します。

ご覧の通り、スピカノートでも表示させています!

訪問ユーザーはもちろん、ブログ管理者としてもタームが表示されているとどんな記事なのか認識しやすいので、表示しておくことをおすすめします!

記事に紐付くタクソノミーターム一覧を表示させる

以下は一般的な記事詳細に使用されるコードです。

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!--投稿日時-->
        <p><?php echo get_post_time('Y.m.d'); ?></p>
        <!--タイトル-->
        <h1><?php the_title(); ?></h1>
        <!--タクソノミーターム表示-->
        <?php
        $terms = get_the_terms($post->ID, 'news_cat');
        if ($terms) :
            foreach ($terms as $term) {
                echo '<span>' . $term->name . '</span>';
            }
        endif;
        ?>
        <!--本文->
        <?php the_content(); ?>
    <?php endwhile; ?>
<?php endif; ?>

上記コードの「タクソノミーターム表示」という箇所が記事に紐付いたカテゴリー一覧を表示するコードです。

それでは、一つ一つ解説します。

<?php
$terms = get_the_terms($post->ID, 'news_cat');
if ($terms) :
    foreach ($terms as $term) {
        echo '<span>' . $term->name . '</span>';
    }
endif;
?>

記事に紐付いたタームを表示するには、「get_the_terms」を使用します。

WordPressのカテゴリー関連のテンプレートタグはかなり多くややこしいのですが、とにかく記事に紐づくカテゴリーを取得するのは「get_the_terms」を使用すると覚えておいてください!

引数にタクソノミーのスラッグを入力します。ここでは「news_cat」 を指定しています。

紐付いたタームを全て表示するために、foreach文でループさせて一つ一つ表示させます。

リンク付きのタクソノミー一覧を表示する

ターム一覧にそれぞれアーカイブページへのリンクをつけたい場合は、「get_term_link」を使用します。

<?php
$terms = get_the_terms($post->ID, 'news_cat');
if ($terms) :
    foreach ($terms as $term) {
        echo '<a href="' . get_term_link($term) . '">' . $term->name . '</a>';
    }
endif;
?>

リンクをつけるとすぐに同じタクソノミーの記事を見ることができるので便利です!

タクソノミーを最初の1 つだけ表示させる

デザイン上、「タームをたくさん羅列させたくない!」ということもあるでしょう。

そんな時は1つだけ表示させることも可能です。

<?php
$terms = get_the_terms($post->ID, 'news_cat');
if ( $terms ) {
echo $terms[0]->name;
}
?>

foreach文でループさせず、get_the_termsで取得した最初のタームのみ表示させます。

まとめ

以上、記事に紐づくタクソノミータームを表示させる方法をご紹介しました。

記事に紐付いたタームだけでなく、全てのターム一覧を表示させてサイドバーやナビゲーションを作りたい場合は、「get_terms」を使用します。

ややこしいですね…!

以下記事で詳しく解説していますので気になりましたらぜひご覧ください!

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    その他

おすすめ記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    その他

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    その他

  • 2022.08.26

    ホームページ制作の流れ

    その他

TAG

×