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」の投稿の中でタグがある場合のみ表示する方法 を実装できました!
WordPressのカスタムフィールドを使って投稿の優先順位を設定する方法
2月 6, 2025カスタムフィールドとWP_Queryを活用した投稿分類
1月 28, 2025カスタム投稿タイプの投稿を「特定の条件」で並び替えて表示する方法
1月 16, 2025