現在表示中の記事内に、同じカテゴリーの関連記事一覧を表示したいという場合がよくありますよね。
特に記事下などに関連記事を表示しておけば、回遊率が向上しPVアップにつながります。
そこで今回の記事では、個別記事ページ内に同カテゴリーの関連記事一覧を表示する方法を紹介します！
コピペ用のコード一式と、コードの詳しい解説をしていきますので、ぜひ参考にしてみてください。
【コピペ用】個別記事ページに同カテゴリーの関連記事一覧を表示する実装コード
まずはコピペしてすぐに使えるコード一式を紹介します。
single.php内で関連記事を表示したい場所に、以下のコードをコピペしてください。
<?php
$post_id = get_the_ID(); // 投稿のIDを取得
$categories = get_the_category($post_id); // 投稿のカテゴリーを取得
$cat_ids = []; // カテゴリーIDを格納するための空の配列を用意
foreach ($categories as $category) :
array_push($cat_ids, $category->term_id); // 用意した空配列にカテゴリーIDを格納
endforeach;
$args = [
'post_type' => 'post', // 投稿タイプを指定
'posts_per_page' => '3', // 表示する記事数を指定
'category__in' => $cat_ids, // カテゴリーIDを指定
'post__not_in' => [$post_id] // 現在の投稿を除外
];
$related_cats_query = new WP_Query($args);
?>
<div class="related-posts">
<?php if ($related_cats_query->have_posts()) : ?>
<ul>
<?php while ($related_cats_query->have_posts()) : $related_cats_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<p>関連記事はありません。</p>
<?php
endif;
wp_reset_postdata(); ?>
</div>こちらのコードで同カテゴリーに属する記事一覧を表示することができます！
次でコードの解説をしていきますので、コードを理解したい方は読み進めてください。
【解説】個別記事ページに同カテゴリーの関連記事一覧を表示する実装コードの解説
ここからは、以下の順番で実装コードの解説をしていきます。
- 現在の投稿のカテゴリーIDを取得する
- 現在の投稿と同カテゴリーの記事データを取得する
- 記事一覧を出力する
手順1. 現在の投稿のカテゴリーIDを取得する
まずは、現在表示中の記事のカテゴリーを取得していきます。
下準備として、現在表示中の記事IDを取得する必要があるので、以下のコードを記述します。
$post_id = get_the_ID(); // 記事IDを取得これで記事のIDを取得することができました。
この記事IDを使って、表示中の記事に属するカテゴリーを全て取得します。
$categories = get_the_category($post_id); // カテゴリーを取得これで$categoriesの中には表示中の記事に属するカテゴリーのデータが格納されました。
次に、取得したカテゴリーデータの中から、カテゴリーのIDのみを取り出します。
まずカテゴリーIDを格納するための空の配列を用意しておきます。
$cat_ids = []; // カテゴリーIDを格納するための空の配列を用意先程取得した$categoriesに対してforeachで各カテゴリーのIDを抜き出し、空配列$cat_idsに追加していきます。
foreach ($categories as $category) :
array_push($cat_ids, $category->term_id); // 用意した空配列にカテゴリーIDを格納
endforeach;array_push関数は、指定した配列の最後に値を追加する関数です。
// 公式
array_push($配列名, $追加したい値);
// 使用例
array_push($cat_ids, $category->term_id);この関数を使用することで、先ほど用意した空の配列$cat_idsに、各カテゴリーのIDを追加することができます。
これでカテゴリーIDを取得できたので、次で記事データを取得していきます。
手順2. 現在の投稿と同カテゴリーの記事データを取得する
記事一覧の表示には、WP_Queryを使用します。
引数$argsに条件を指定することで、様々な記事データを取得することができます。
ここでは手順1で取得したカテゴリーIDを使って、同カテゴリーに属する記事一覧を取得していきます。
$args = [
'post_type' => 'post', // 投稿タイプを指定
'posts_per_page' => '3', // 表示する記事数を指定
'category__in' => $cat_ids, // カテゴリーIDを指定
'post__not_in' => [$post_id] // 現在の投稿を除外
];
$related_cats_query = new WP_Query($args);'category__in'の部分に、カテゴリーIDの配列$cat_idsを指定します。
こうすることで、同カテゴリーの記事のみを取得することができます。
さらに、'post__not_in'に現在の投稿のIDを指定することで、現在表示中の記事は一覧から除外します。
'posts_per_page'には、表示したい記事数を指定できるので、ここの数値は好きなようにしてください。
これで現在の投稿を除いた、同カテゴリーに属する最新3記事を取得することができました。
手順3. 記事一覧を出力する
記事一覧データが用意できたので、ここからは記事一覧を表示していきます。
記事一覧のデータは$related_cats_queryに入っているので、while文でループさせて表示します。
<div class="related-posts">
<?php if ($related_cats_query->have_posts()) : ?>
<ul>
<?php while ($related_cats_query->have_posts()) : $related_cats_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<p>関連記事はありません。</p>
<?php
endif;
wp_reset_postdata(); ?>
</div>この記述をすることで、同カテゴリーの記事一覧を表示することができます。
ここではリンク付きのタイトルを表示するというシンプルな構成にしていますが、この部分は各自カスタマイズしてください。
もし同カテゴリーの関連記事が1つもない場合には、「関連記事はありません。」という文字が表示されるようにしています。
以上でコードの解説は終わりです！
【まとめ】WordPressで個別記事ページに同カテゴリーの関連記事一覧を表示する方法
個別記事ページ内に同カテゴリーの関連記事一覧を表示する方法を紹介しました。
記事本文下などに配置しておくと、記事を読み終わった後にクリックしてくれることが多いので、特に効果的ですね。
記事内に関連記事を表示したい場合は、ぜひこの方法を参考にしてみてください。
コメント