WordPress

2021.08.17

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

ややこしいですね…!

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

関連記事

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.07.27

    【簡単】WordPressのバージョンの自動更新を停止する方法

    WordPress

おすすめ記事

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!