やることはおおまかに言うと２つだけ！
「関連記事」とかECサイトであれば「関連するアイテム」などというように、記事または商品の詳細ページにて、何かしらのコンバージョンまで離脱をさせないように横軸での回遊を促すコンテンツは有効です。処理としては以下の２つです。
- 現在表示している記事の特定のタームを拾う
- 同じタームを持つ記事を表示
次のコードは、タクソノミー “product-categories” で投稿タイプ “products” を取得する想定の際の表示方法です。必要に応じてその２つを変更してください！
<?php // 現在表示されている投稿と同じタームに分類された投稿を取得
$taxonomy_slug = 'product-categories'; // タクソノミーのスラッグを指定
$post_type_slug = 'products'; // 投稿タイプのスラッグを指定
$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, // 表示件数を指定
'orderby' => 'rand', // ランダムに投稿を取得
'post__not_in' => array($post->ID), // 現在の投稿を除外
'tax_query' => array( // タクソノミーパラメーターを使用
array(
'taxonomy' => $taxonomy_slug, // タームを取得タクソノミーを指定
'field' => 'slug', // スラッグに一致するタームを返す
'terms' => $terms_slug // タームの配列を指定
)
)
);
$the_query = new WP_Query($args); if($the_query->have_posts()):
?>
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>役に立つかはわかりませんが、実際の設置例
不動産情報サイトで使用するものと仮定して、「同じエリアの物件」を指定した件数分、ランダムに表示するコードを作成したので紹介します。
- 現在表示している記事の特定のタームを拾う → ここではカスタムタクソノミーで紐づけたタグの「エリア情報」を拾う（「渋谷区」とか）
- 同じタームを持つ記事を表示 → ここでは同じエリアのタグがついた記事（「渋谷区」の物件を表示）。その際に味付けで、ランダムとか〇件まで表示、とか調整。
<?php // 現在表示されている投稿と同じタームに分類された投稿を取得する
$taxonomy_slug = 'rent_room_area'; // タクソノミーのスラッグを指定（ここでは'rent_room_area'）
$post_type_slug = 'rent_room'; // 投稿タイプのスラッグを指定（ここでは'rent_room'）
$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, // 表示件数を指定（5件に指定）
'orderby' => 'rand', // ランダムに投稿を取得
'post__not_in' => array($post->ID), // 現在の投稿を除外
'tax_query' => array( // タクソノミーパラメーターを使用
array(
'taxonomy' => $taxonomy_slug, // タームを取得タクソノミーを指定
'field' => 'slug', // スラッグに一致するタームを返す
'terms' => $terms_slug // タームの配列を指定
)
)
);
$the_query = new WP_Query($args); if($the_query->have_posts()):
?>
<!-- 同じエリアの物件表示部分START -->
<div class="popular_area_content">
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>
<!-- ループはじめ -->
<a href="<?php the_permalink() ?>">
<div>
<div>
<?php $rentroom_photo=get_field('rentroom_photos',$post->ID);
//var_dump($rentroom_photo); //を外せば、$rentroom_photoが何の値を持っているのか出力できる（動作確認用）
?>
<!--繰り返しフィールドの画像を表示-->
<?php $i = 0;
while( have_rows( 'rentroom_photos' ) ): the_row(); $i++; ?>
<?php
if( $i > 1 ) {
break;
}
$img = get_sub_field( 'rentroom_photo' );
//var_dump($img['ID']); //を外せば、$img['ID']が何の値を持っているのか出力できる（動作確認用）
?>
<?php echo wp_get_attachment_image($img['ID'],array(250, 250))
//wp_get_attachment_image()関数を使い、不揃いな画像でも縦横比を維持したまま横幅が250pxになるようにリサイズ・トリミングして出力
; ?>
<?php endwhile; ?>
</div>
<div class="top_content_rent_room_exp">
<h3><?php the_title(); ?></h3>
<p><?php echo get_favorites_button(); ?></p>
</div>
</div>
</a>
<!-- ループおわり -->
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
物件の登録では、建物の外観や室内の写真が複数登録ができる必要があるため、繰り返しフィールドでいくつでも登録できるようにするとよいです。
そこで、コード内<!–繰り返しフィールドの画像を表示–>で囲まれている処理をして、画像を表示しています。
ここでは、登録された写真のはじめの1枚しか表示しないように書いたので、もっとシンプルにも書けるかもです。
if( $i > 1 ) {
break;
}で、ループの中で”1を超えた”場合、ループを終了（break）するようにしていますので、
この”1″を変更すれば、はじめの〇枚が表示されるようにできます。
実際の例では、
記事登録に「アイキャッチ画像」を使用しないものとしていますので、ACF(Advanced Cutom Field)の「繰り返しフィールド」で、
画像を任意の数だけ登録できる仕様を考えて、そうした際の画像の表示方法をループの中で行う必要があることと、
wp_get_attachment_image()関数を使って、リスト上に表示された際に画像がそれぞれ不揃いな縦横比で登録されていても、
すべて同じサイズで出力されるように処理を加えています。
このような関連記事のリスト表示＋複数画像を登録して、出力する枚数を調整するような処理は、フリマサイトなどにも応用できるかと思います！