WordPressでタグがある場合のみ表示する方法

WordPressでカスタム投稿タイプの特定のカテゴリーの投稿を取得し、タグがある場合のみ表示 する方法について解説します。

実装の背景

通常、single_tag_title() を使用すると、タグアーカイブページでは機能しますが、
投稿一覧ページでは正しく動作しません。そのため、個別の投稿のタグを取得し、
タグがある場合のみ表示する 方法を実装する必要があります。

get_the_terms() を使ってタグを取得する

get_the_terms() を使用すると、投稿のタグを適切に取得できます。
以下のコードでは、post_tag のタクソノミーからタグを取得し、タグがある場合のみタグ名を表示 します。

修正後のコード(サンプル)

<?php

get_header(); ?>

<div class="c-page-header">
    <div class="c-page-header__title-wrap">
        <h1 class="c-page-header__title" data-category="sample">サンプル</h1>
    </div>
</div>

<div class="l-contents l-contents--hasNav">
    <main class="l-main">
        <ul class="c-btn c-btn--navigation">
            <li class="c-btn__item"><a href="/sample/" class="c-btn__link"><span>ALL</span></a></li>
            <li class="c-btn__item"><a href="/sample-category/" class="c-btn__link is-current"><span>サンプルカテゴリー</span></a></li>
        </ul>

        <?php
        // カスタム投稿タイプ 'sample' の 'sample-category' カテゴリーの投稿を取得
        $args = array(
            'post_type' => 'sample',
            'posts_per_page' => 10,
            'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
            'tax_query' => array(
                array(
                    'taxonomy' => 'category',
                    'field'    => 'slug',
                    'terms'    => 'sample-category',
                ),
            ),
        );

        $sample_query = new WP_Query($args);

        if ($sample_query->have_posts()) : ?>
            <div class="post-list">
                <?php while ($sample_query->have_posts()) : $sample_query->the_post(); ?>
                    <?php
                    $post_link = get_permalink();
                    $thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail_wide') ?: '/wp-content/uploads/sample-thumbnail.jpg';

                    // カテゴリーを取得
                    $categories = get_the_category();
                    $category_name = !empty($categories) ? esc_html($categories[0]->name) : '';

                    // タグを取得
                    $tags = get_the_terms(get_the_ID(), 'post_tag');
                    $tag_names = !empty($tags) && !is_wp_error($tags) ? esc_html($tags[0]->name) : '';
                    ?>
                    
                    <a href="<?php echo esc_url($post_link); ?>" class="c-article">
                        <div class="c-article__thumbnail">
                            <figure>
                                <img src="<?php echo esc_url($thumbnail); ?>" alt="<?php the_title_attribute(); ?>" width="640" height="350" loading="lazy">
                                <?php if ($tag_names) : ?>
                                    <span class="tag"><span class="c-article__tag">タグ: <?php echo $tag_names; ?></span></span>
                                <?php endif; ?>
                            </figure>
                        </div>
                        <div class="c-article__detail">
                            <div class="c-article__category">カテゴリー: <?php echo $category_name; ?></div>
                            <h3 class="c-article__title">タイトル: <?php the_title(); ?></h3>
                        </div>
                    </a>
                <?php endwhile; ?>
            </div>

            <!-- ページネーション -->
            <div class="pagination">
                <?php
                echo paginate_links(array(
                    'total' => $sample_query->max_num_pages,
                ));
                ?>
            </div>

        <?php else : ?>
            <p><?php _e('投稿が見つかりません。', 'your-text-domain'); ?></p>
        <?php endif; ?>

        <?php wp_reset_postdata(); ?>
    </main>
</div>

<?php get_template_part('/component/sample_topicpath'); ?>
<?php get_footer(); ?>

コードの解説

single_tag_title() ではなく get_the_terms() を使用

  • get_the_terms(get_the_ID(), 'post_tag') で投稿のタグを取得
  • タグがある場合のみ <span class="tag">タグ: {タグ名}</span> を表示

!empty($tags) && !is_wp_error($tags) でタグの存在をチェック

  • タグがない投稿ではタグを表示しない

最初のタグのみを取得

  • esc_html($tags[0]->name) で最初のタグを取得
  • 複数のタグがある場合は implode() を使うとカンマ区切りで表示可能
$tag_names = !empty($tags) && !is_wp_error($tags) ? implode(', ', wp_list_pluck($tags, 'name')) : '';

動作確認

  • sample-category に属する投稿 かつ タグがある場合 → タグを表示
  • sample-category に属する投稿 だがタグなし → タグを非表示

まとめ

single_tag_title()タグアーカイブページ専用 で、一覧ページでは get_the_terms() を使うべき

get_the_terms() でタグを取得し、タグがある場合のみ表示 するコードを実装

複数タグの対応も implode() で可能

これで、カテゴリー「sample-category」の投稿の中でタグがある場合のみ表示する方法 を実装できました!