【WordPress】プラグインなしで関連記事を実装する方法を解説

2024年03月07日 2024年08月31日

今回はプラグインなしで関連記事を実装する方法をご紹介します。

この記事は以下のようなお悩みを解決できます。

・関連記事がどんな記事なのかよくわからない
・プラグインを使わないで関連記事を実装する方法を知りたい

目次[閉じる]

1. 関連記事とは？
2. 関連記事を表示する仕組み
3. 関連記事の実装方法
- 方法1 WP_Queryで実装する方法
- 方法2 get_postsで実装する方法
4. まとめ

関連記事は投稿記事と同じジャンルの記事のことで、ページの下部に表示されてることが多いです。

例えばAmazonで本を買うために商品ページを見ていたとします。商品ページの下の方に「この商品に関連する商品」が表示されており同じ著者やジャンルの本が表示されます。これが関連記事です。

このサイトでも投稿記事と同じカテゴリーの記事を関連記事として表示しています。

関連記事はユーザーに多くの記事を読んでもらえる可能性が高くなるので、WEBサイトの滞在時間を長くしたり、PV数(閲覧数)の増加が期待できます。

AmazonのようなECサイトの場合、ユーザーが関連商品を見て回ることで他の商品にも興味を持ち一緒に購入してもらえる可能性があるので売上のアップも期待できます。

2. 関連記事を表示する仕組み

関連記事を表示させる仕組みは「メインクエリ」「サブクエリ」について知っていたほうが理解しやすいと思うのでまずこれについて簡単に説明します。

WordPressでは投稿ページを表示する際にデータベースから必要な情報を取得するためのクエリを「メインクエリ」といい、WordPressのページが読み込まれる時に自動的に実行されます。「クエリ」とはデータベースに処理をリクエストすることです。

投稿データは、「メインクエリ」で取得したデータをwhileでループをさせることによって表示させます。

<?php 　
if(have_posts()):
 while(have_posts()): the_post();　
?>
       <!--出力したい内容を記述-->
<?php　
 endwhile;  
endif;
?>

複雑な条件やランダムな順序にしたりなど特定の条件で投稿情報を取得しようとする場合「サブクエリ」を使う必要があります。「メインクエリ」以外のクエリを「サブクエリ」と呼びます。

「サブクエリ」を使用するにはWP_Queryとget_postsを使用する方法があります。次にWP_Queryとget_postsを使用して関連記事を実装する方法をご紹介します。

3. 関連記事の実装方法

方法1 WP_Queryで実装する方法

WP_QueryはWordPressで投稿データの情報を取得することができるクラスです。条件を指定することで投稿データを絞り込むことができます。

例として現在閲覧している記事と同じカテゴリーの関連記事を６件表示し、順番をランダムになるようにします。

<?php

$cats = get_the_category();           //カテゴリー取得する
$cat_id = $cats[0]->cat_ID;           //カテゴリーIDを取得する
         
$args = array(
 'post_type' => 'post',               //投稿タイプを指定
 'posts_per_page' => 6,               //投稿データを何件表示するかを指定
 'post__not_in' => array($post->ID),　//特定の投稿データを除外する　
 'cat' => $cat_id,                    //カテゴリーのIDを指定
 'orderby' => 'rand',                 //並び替えの基準を指定する　 
);
 
$the_query = new WP_Query($args); 　  //インスタンスを生成
　　
if($the_query->have_posts()): 
 while($the_query->have_posts()): $the_query->the_post(); 
?>
 <a href="<?php the_permalink(); ?>">
  <div class="related-post-content"> 
   <div class="related-post-tuhumbnail">
    <figure>
     <?php the_post_thumbnail(); ?>
    </figure>
   </div>
   <div class="related-post-title">
    <h3><?php the_title(); ?></h3>
   </div>
  </div>                
 </a>
 <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>   <!--セットした情報をもとにもどす-->
<?php else: ?>
  <p>関連記事は見つかりませんでした</p>
<?php endif; ?>

3行目：$cats = get_the_category();

「get_the_category」は現在閲覧している記事のカテゴリー情報を取得します。

4行目：$cat_id = $cats[0]->cat_ID;

現在閲覧している記事のカテゴリーIDを取得しています。$catsの後ろに「[0]」をつけるのを忘れないでください。

6-12行目:$args = array(~);

取得する記事の条件を指定する。

7行目: ‘post_type’ => ‘post’

「post_type」は記事の投稿タイプを指定しています。ここでは「post」（投稿ページ）を指定しています。

8行目:’posts_per_page’ => 6

「posts_per_page」は記事を何件表示するかを指定しています。ここでは6件表示させます。

9行目:’post_ _not_in’ => array($post->ID)

「post_ _not_in」は投稿データから除外する投稿データを指定します。$post->IDは現在閲覧している記事のIDを指定し、この記事を関連記事として表示しないようにしています。

10行目：’cat’ => $cat_id

｢cat｣は取得する記事のカテゴリーIDを指定します。4行目で取得した$cat_idを指定し、現在閲覧している記事と同じカテゴリーの記事に絞り込みます。

11行目: orderby’ => ‘rand’

「orderby」は投稿データの並び替えの基準を指定します。ここでは「rand」を指定しているので記事がランダムに表示されます。

パラメーター	説明
‘post_type’	投稿タイプを指定する(初期値は’post’) ‘post’：投稿ページ、 ‘page’：固定ページ、 ‘revision’：リビジョン(投稿・固定ページなどの変更履歴)、 ‘attachment’：添付ファイル、 ‘nav_menu_item’：ナビゲーションメニューの項目、 ‘any’：すべての投稿タイプ(投稿、固定ページ、カスタム投稿タイプなど)、　カスタム投稿タイプ
‘posts_per_page’	取得する記事の件数を指定する(-1を指定すると全件を取得する)
‘post__not_in’	除外する記事のIDを指定する
‘cat’	カテゴリーIDを指定する
‘orderby’	並び替えの基準を指定する(初期値：’date’) ‘author’：著者で並び替える、 ‘ID’：投稿IDで並べ替える、 ‘title’：タイトルで並べ替える、 ‘name’：投稿名で並べ替える、 ‘type’：投稿タイプで並べ替える、 ‘date’：投稿日時で並べ替える、 ‘modified’：更新日時で並べ替える、 ‘rand’：ランダムに並べ替える

14行目:$the_query = new WP_Query($args); 　

「WP_Query」はクラスであるため、使用するには「new　クラス名」でインスタンスを生成します。引数に$argsを指定し投稿データを絞り込みます。

16-35行目：if($the_query->have_posts()): ~endif;

「have_posts」はWP_Queryに投稿データがあるかどうかを確かめる関数です。また、「$the_query->」が前についていますが、これはWP_Queryで指定した条件を満たす投稿データがある場合は処理を実行し、ない場合は「関連記事は見つかりませんでした」と表示します。

17-31行目：while($the_query->have_posts()): $the_query->the_post():~endwhile;

WP_Queryで指定した投稿データがある限り処理を続けます。「the_post」はWP_Queryから順にデータを取り出していく関数で、グローバル変数$postに投稿データを格納し次の投稿データへ進みます。

19行目:the_permalink();

「the_permalink」はWordPressのループ内で使用される関数で記事のパーマリンクを取得しています。

23行目：the_post_thumbnail();

「the_post_thumbnail」はWordPressのループ内で使用される関数で記事のサムネイル画像を取得します。

27行目：the_title();

「the_title」はWordPressのループ内で使用される関数で記事のタイトルを取得します。

32行目：wp_reset_postdata();

投稿データを取得し終えたら、セットした情報を元にもどすために「wp_reset_postdata」を記述します。

参考：WP_Query – Class | Developer.WordPress.org　

方法2 get_postsで実装する方法

次にget_postsで関連記事を実装する方法をご紹介します。WP_Query同様、条件を指定し取得する投稿データを絞り込むことができます。

WP_Queryのときと同じ条件で現在閲覧している記事と同じカテゴリーの関連記事を６件表示し、順番をランダムになるようにします。

<?php 
$cat = get_the_category();            //カテゴリーを取得する
$cat_id = $cat[0]->cat_ID;            //カテゴリーのIDを取得する
         
$args = array(
 'post_type' => 'post',               //投稿タイプを指定
 'numberposts' => 6,                  //投稿データを何件表示するかを指定
 'category' => $cat_id,               //カテゴリーのIDを指定
 'exclude' => array($post->id),       //除外する投稿データのIDを指定
 'orderby' => 'rand',                 //並び替えの基準を指定する　 
);  
    
$posts = get_posts($args);

if($posts):  
 foreach($posts as $post): 
  setup_postdata($post);              //投稿データをセットする
 ?>   
  <a href="<?php the_permalink(); ?>">
   <div class="related-post-content">
    <div class="related-post-thumbnail">
     <figure>
      <?php the_post_thumbnail(); ?>
     </figure>
    </div>
    <div class="related-post-title">
     <h3><?php the_title(); ?></h3>
    </div>
   </div>
  </a>       
 <?php endforeach; ?>
  <?php wp_reset_postdata(); ?>　　    <!--取得した投稿データをリセットする-->
<?php else: ?>
 <p>関連記事は見つかりませんでした</p>
<?php endif; ?>

2行目：$cat = get_the_category();

「get_the_category」は現在閲覧している記事のカテゴリー情報を取得します。

3行目：$cat_id = $cats[0]->cat_ID;

現在閲覧している記事のカテゴリーIDを取得しています。$catsの後ろに「[0]」をつけるのを忘れないでください。

5-11行目：$args = array(~);

取得する記事の条件を指定する。

6行目：’post_type’ => ‘post’

「post_type」は投稿データの投稿タイプを指定しています。ここでは「post」（投稿ページ）を指定しています。

7行目：’numberposts’ => 6

「numberposts」は記事を何件表示するかを指定しています。ここでは6件表示させます。

8行目：’category’ => $cat_id

｢category｣は取得する記事のカテゴリーIDを指定します。4行目で取得した「$cat_id」を指定し、現在閲覧している記事と同じカテゴリーの記事に絞り込みます。

9行目：’exclude’ => array($post->id)

「exclude」は投稿データから除外する投稿データを指定します。$post->IDは現在閲覧している記事のIDを指定しています。現在閲覧している記事を関連記事として表示しないようにしています。

10行目：’orderby’ => ‘rand’

「orderby」は投稿データの並び替えの基準を指定します。ここでは「rand」を指定しているので記事がランダムに表示されます。

パラメーター	説明
‘post_type’	投稿タイプを指定する (初期値は’post’) ‘post’：投稿ページ、 ‘page’：固定ページ、 ‘revision’：リビジョン(投稿・固定ページなどの変更履歴)、 ‘attachment’：添付ファイル、 ‘nav_menu_item’：ナビゲーションメニューの項目、 ‘any’：すべての投稿タイプ（投稿、固定ページ、カスタム投稿タイプなど）,　カスタム投稿タイプ
‘numberposts’	取得する記事の件数を指定する (初期値は５)
‘category’	カテゴリーのIDを指定する (初期値は０)
‘exclude’	除外する記事のIDを指定する (初期値はarray())
‘orderby’	並び替えの基準を指定する(初期値：’date’) ‘author’：著者で並び替える、 ‘ID’：投稿IDで並べ替える、 ‘title’：タイトルで並べ替える、 ‘name’：投稿名で並べ替える、 ‘type’：投稿タイプで並べ替える、 ‘date’：投稿日時で並べ替える、 ‘modified’：更新日時で並べ替える、 ‘rand’：ランダムに並べ替える