【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」を使用します。

ややこしいですね…!

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

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

×