Wordpressのカスタム投稿で作成された記事詳細に、関連するタグの記事一覧を表示したい

Question

Wordpressのカスタム投稿機能を使って、エリアごとの記事ページを作成しています。

例えば、北海道、関東、東北といった記事詳細にはそれぞれエリアごとのタグが設定されており、
そのエリアに関連する記事を画像・タイトルとともにサイドナビに一覧で表示したいと考えています。

※タグには、エリアの他に「価格(例:10,000円、30,000円)」、「ジャンル(例:和食、洋食)」といったタグも設定しています。

以下の通り、wp_get_object_terms関数を使って、タクソノミー情報を取得し、一覧表示しようとしましたが、特定のタームを絞り込むことができず、表示することができませんでした。

分かる方いらっしゃいましたら、教えていただけますと幸いです。
どうぞよろしくおねがいします。

<?php 
	$taxonomy_slug = 'areatag';
	$post_type_slug = 'area';
	// ターム情報を取得
	$post_terms = wp_get_object_terms($post->ID, $taxonomy_slug);
	if( $post_terms && !is_wp_error($post_terms)) {
		$terms_slug = array();
		foreach( $post_terms as $value ){
			$terms_slug[] = $value->slug;
		}
	}
	$args = array(
		'post_type' => $post_type_slug,
		'posts_per_page' => 5,
		'post__not_in' => array($post->ID), // 現在の投稿を除外
		'tax_query' => array(
			array(
				'taxonomy' => $taxonomy_slug,
				'field' => 'slug', // スラッグに一致するタームを返す
				'terms' => $terms_slug[2] // タームの配列を指定
			)
		)
	);
	$the_query = new WP_Query($args); if($the_query->have_posts()):
?>
<!-- 同じエリアの記事 -->
<div class="d-flex justify-content-between mb-2 mt-3 mt-md-0 bg-black pl-3 py-2">
    <p class="font-weight-bold mb-0 text-white">同じエリアの記事</p>
    <p class="h8 mb-0 pr-4 pt-1">
		<?php $terms = get_the_terms( $post->ID, $taxonomy_slug); ?>
		<?php foreach( $post_terms as $term ): ?>
				<a href="<?php echo get_term_link( $term->term_id, $taxonomy_slug ); ?>" class="text-white <?php echo $term->slug ?>">
						<?php echo 'もっと見る' ?>
				</a>
		<?php endforeach; ?>
    </p>
</div>
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>
<div class="d-flex">
    <div class="w-30">
        <a href="<?php the_permalink(); ?>" class="d-block overflow-hidden img-cropped">
            <?php if ( get_field('メイン画像') ) : ?>
            <?php echo wp_get_attachment_image( get_field('メイン画像'), 'thumbnail', false, array( 'class' => 'img-fluid' ) ); ?>
            <?php else : ?>
            <img src="/example.png" class="img-fluid" alt="No_image_available">
            <?php endif; ?>
        </a>
    </div>
    <div class="w-70">
        <p class="h9 ml-2"><a href="<?php the_permalink(); ?>" class="text-body"><?php the_title(); ?></a></p>
    </div>
</div>
<hr class="my-2" />
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

Comments

[CHERRY]

> 特定のタームを絞り込むことができず、表示することができませんでした。

「できませんでした」では、何が起きているのか状況が伝わらないので、わかりません。
「実行した結果で、なにが表示されたのか」を記載してください。

例：
- 真っ白な画面になった
- 〇〇というエラーメッセージが表示された
- □□が表示された。 (□□ は〜〜なので違う)
等

[spbob]

言葉足らずで大変申し訳ありません。

コンテンツ自体は表示されますが、サイドナビの一覧自体は表示されませんでした。

Answer 1

以下で解決することができました、スマートではないですが。。

• foreachをなくす（ページが重くなるので）

- termのスラッグを特定の文字列を条件として絞り込み、抽出
- 配列のindexを振り直す（抽出した配列が、必ずしも同じ番号とは限らないと思い、再振りしてます）

<?php 
	$post_type_slug = get_post_type($post->ID);
	$taxonomy_slug = 'areatag';
	// ターム情報を取得
	$post_terms = get_the_terms($post->ID, $taxonomy_slug);
	// 値がある場合
	if( $post_terms && !is_wp_error($post_terms)) {
		$tm_slugs = array_column( $post_terms, 'slug' );
		$tm_slug = array_values(preg_grep('/^area/', $tm_slugs));
	}
	$args = array(
		'post_type' => $post_type_slug,
		'posts_per_page' => 5,
		'post__not_in' => array($post->ID), // 現在の投稿を除外
		'tax_query' => array(
			array(
				'taxonomy' => $taxonomy_slug,
				'field' => 'slug', // スラッグに一致するタームを返す
				'terms' => $tm_slug // タームの配列を指定
			)
		)
	);
$the_query = new WP_Query($args); if($the_query->have_posts()):
$target_term_link = $tm_slug[0];
?>
<!-- 同じエリアの記事 -->
<div class="d-flex justify-content-between mb-2 mt-3 mt-md-0 bg-black pl-3 py-2">
    <p class="font-weight-bold mb-0 text-white">同じエリアの記事</p>
<p class="h8 mb-0 pr-4 pt-1">
	<a href="/areatag/<?php echo $target_term_link ?>" class="text-white">もっと見る</a>
</p>				
</div>
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>
<div class="d-flex">
    <div class="w-30">
        <a href="<?php the_permalink(); ?>" class="d-block overflow-hidden img-cropped">
            <?php if ( get_field('メイン画像') ) : ?>
            <?php echo wp_get_attachment_image( get_field('メイン画像'), 'thumbnail', false, array( 'class' => 'img-fluid' ) ); ?>
            <?php else : ?>
            <img src="/example.png" class="img-fluid" alt="No_image_available">
            <?php endif; ?>
        </a>
    </div>
    <div class="w-70">
        <p class="h9 ml-2"><a href="<?php the_permalink(); ?>" class="text-body"><?php the_title(); ?></a></p>
    </div>
</div>
<hr class="my-2" />
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>