WordPress関連記事をプラグインなしで自作する・おすすめプラグインまとめ

本記事ではWordPressで関連記事を表示する方法として、プラグイン無しで自作する方法とプラグインを使って表示する方法、それぞれ解説します。

関連記事を表示することで読者の滞在時間を延ばしたり、サイト内のリンクを増やしたりすることができます。ブログだけでなくECサイトでも、今閲覧している記事や商品に関連する記事（ECサイトの場合は商品）を表示するのは、サイトの回遊率をあげる有効な手段です。

また過去の記事へのアクセスも期待できることからSEO的にも有効と言われています。WordPressで関連記事を自作する方法とプラグインを使って実装する方法のそれぞれのメリットとデメリット、実際の手順を紹介します。

プラグイン無し、自作で関連記事を表示する

手っ取り早く簡単に関連記事を表示させたいならプラグインを利用するのがおすすめですが、アップデートがわずらわしかったり自作スクリプトとの競合などが心配な場合は手動で設定します。個人的にはアップデートが面倒なので、テンプレートを編集しています。

ここからは自作の関連記事を表示する手順を解説していきます。

投稿記事ページにプラグイン無しで関連記事を表示するにはテンプレートファイル（single.php）を編集します。

関連記事を表示するロジックとして同じカテゴリに属する記事または同じタグがつけられている記事を関連記事としてピックアップしていきます。

同じカテゴリから関連記事を表示する

今見ている記事と同じカテゴリーに含まれている記事をランダムに6件表示する場合のソースです。

<?php
$categ = get_the_category($post->ID);
$catID = array();
foreach($categ as $cat){
	array_push($catID, $cat -> cat_ID);
}
$args = array(
	'post__not_in' => array($post->ID),
	'category__in' => $catID,
	'posts_per_page' => 6,
	'orderby' => 'rand'
);
$the_query = new WP_Query($args);
if($the_query -> have_posts()) :?>
<div class="relatedposts">
<?php while($the_query -> have_posts()) : $the_query -> the_post();
?>
	<div class="cell">
		<a href="<?php the_permalink(); ?>">
			<?php if(has_post_thumbnail()): the_post_thumbnail('thumbnail');
				else: ?>
					<img src="<?php echo get_template_directory_uri(); ?>/images/noimage.jpg" alt="<?php the_title(); ?>">
				<?php endif; ?>
				</a>
				<div class="post-title">
					<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
				</div>
		</a>
	</div>
<?php endwhile; ?>
</div>
<?php endif; wp_reset_postdata(); ?>

'post__not_in' => array($post->ID) で現在表示している記事を除く

get_the_category()で現在の記事の持っているカテゴリIDを取得して'category__in' => $catIDでカテゴリを指定

'posts_per_page' => 6　表示件数を指定

そのほかアイキャッチが登録されていればアイキャッチのサムネイル画像を表示し登録していなければあらかじめ用意した画像（ここではnoimage.jpg）を表示するようにしています。

htmlやcssはお好みでどうぞ。

タグで関連記事を表示する

今表示している記事と同じタグが設定されているものを関連記事として表示する場合は以下のようになります。

<?php
//記事の投稿タグを取得する
$tags = wp_get_post_tags($post->ID);
if($tags):
//$tagIDに現在のIDを代入
$tagID = array();
foreach($tags as $tag){
	array_push($tagID, $tag -> term_id);
}
$args = array(
	'tag__in' => $tagID,
	'post__not_in' => array($post->ID),
	'posts_per_page' => 6,
	'ignore_sticky_posts'=>1,
	'orderby'=>'rand',
);
$my_query = new WP_Query($args);
if($my_query-> have_posts()):
?>
<div class="related-tags">
	<?php while($my_query->have_posts()): $my_query->the_post(); ?>
		<div class="cell">
		<a href="<?php the_permalink(); ?>">
			<?php if(has_post_thumbnail()): the_post_thumbnail('thumbnail');
				else: ?>
					<img src="<?php echo get_template_directory_uri(); ?>/assets/images/noimage.png" alt="<?php the_title(); ?>">
				<?php endif; ?>
				</a>
				<div class="post-title">
					<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
				</div>
		</a>
	</div>
	<?php endwhile; ?>
</div>
	<?php endif;?>
<?php endif;
	 wp_reset_postdata(); ?>

基本的にはカテゴリの場合とあまり変わらないと思います。

'ignore_sticky_posts'=>1　先頭固定表示の投稿を無視します（デフォルトはfalse）

バージョン3.1よりcaller_get_postsが非推奨になりました。その代わりに「ignore_sticky_posts」を使います。

プラグインで関連記事を表示する

プラグインを利用すればもっと簡単に導入でき、細かい設定も可能ですね。表示方法や条件を選択でき、例えばカテゴリーやタグ、投稿日時で関連記事を絞り込んだり、サムネイルやタイトルの表示形式を変更したりすることができます。

プラグインを使う場合のデメリットは、プラグインが多くなるとサイトの速度が低下したり、不具合が発生したりする可能性があることです。また、プラグインによっては更新されなかったり、互換性がなかったりすることもあります。そのため、プラグインを導入する際は評価やレビュー、最終更新日などを確認することが重要です。

• Yet Another Related Posts Plugin
• Related Posts for WordPress

関連記事表示のおすすめプラグインその1：Yet Another Related Posts Plugin (YARPP)

https://ja.wordpress.org/plugins/yet-another-related-posts-plugin/

Yet Another Related Posts Plugin (YARPP)は一時公開が終了してダウンロードもできなくなっていたようなのですが、今はダウンロード可能です。プラグインの場合、このような突然開発が終了してしまうという懸念はどうしてもありますね。

人気のあるプラグインなので復活してよかったです。

「YARPP」と検索すると設定方法の説明がたくさん出てきますのでここでは簡単に。プラグインを有効化したら、設定メニューから「YARPP」へ。関連記事 (YARPP) 設定があります。

「フィルター設定」

関連記事として表示したく無い記事がある場合はカテゴリーやタグで制限できます。必要に応じてチェックをいれます。

関連記事にかなり昔の記事を表示させたく無い。という場合にも期間の指定が可能です。

関連スコアの設定

YARPPが自動で関連記事を表示してくれる判断基準の設定。「表示する最低関連スコア」はスコアが高いほど厳密。

タイトル、内容、カテゴリー、タグは基本的に「検討する」で良いと思います。

もっとも重要視したい項目には、「検討する（重要視）」にし、関連スコアに含めたくない場合は「検討しない」にします。

表示設定ウェブサイト用

関連記事の表示を設定します。リスト形式にするか、サムネイルも一緒に表示するかなど。

関連記事のデザインはYARPP用のテンプレートファイルを作成して独自に設定することも可能です。

「<?php カスタム」ボタンをクリックすると、ツールチップが表示され、その中にある「テンプレートを移動」クリックするとテーマフォルダに「yarpp-template-」から始まるYARPPのテンプレートファイルが複数作成されます。

このテンプレートファイルをカスタマイズしても良いですし、独自のテンプレートの作成も可能です。PHPファイル名の頭に「yarpp-template-」をつけるとYARPPのテンプレートファイルとなります。

独自のYARPPテンプレートを作成するにはこちらのサイトが参考になります。

https://blog-and-destroy.com/6300

関連記事表示のおすすめプラグインその2：Related Posts for WordPress

Related Posts for WordPressはYARPPよりも新しいプラグインかなと思います。関連記事系のプラグインではYARPPと並び「WordPress Related Posts」が有名ですが長い間アップデートされていません。

「Related Posts for WordPress」が良さそうだったのでこちらを選びました。

https://ja.wordpress.org/plugins/related-posts-for-wp/

Related Posts for WordPressを有効化すると、まず記事のキャッシュが自動的に始まります。

ちょっとびっくりしますが、プログレスバーが表示されるのでそのまま完了するまで待ちます。

次に2.Linking Postsに進みます。記事同士をリンクさせるんですね？

関連していると思われるものに基づいて、投稿を相互にリンクさせることができます。心配しないでください。あなたの投稿の1つを間違えた場合、手動で編集することで簡単に修正できます。
投稿の相互リンクを開始しますか？各投稿に必要な関連投稿の量を入力し、[今すぐリンク]ボタンをクリックします。投稿を手動でリンクしますか？[リンクをスキップ]をクリックします。
[今すぐリンク]ボタンをクリックした場合、このウィンドウを閉じないでください。このプロセスが完了し、このウィザードが次のステップに進むまで待ちます。

Related Posts for WordPressの設定、説明文の日本語訳

自動的に投稿記事を相互リンクさせてくれるようです。ここで設定した以外でも手動でも設定は可能とのこと。

関連記事を表示する件数の設定もここでできます。私は6件表示させたかったので、6に変更して「Link now」をクリックしました。

先ほどと同じようにプロセスが始まりますので待ってみます。

無事完了しました。
これ以外に設定>Related Postsから設定メニューがあります。まだ日本語対応していないので設定画面は英語ですが特に難しくありません。

General 一般設定

• Enable
  チェックを入れると自動的に投稿記事を相互リンクしてくれます。
• Amount of Posts
  関連記事の表示件数
• Heading text
  関連記事のタイトル
• Excerpt length
  タイトル下に説明文が表示されます。その説明文の文字数を設定。説明を表示したくない場合は0に

Styling スタイル設定

• Display Image
  関連記事の画像を表示したい場合はチェック
• CSS
  関連記事のCSSデザインをカスタマイズできます。

Misc その他設定

• Rebuild posts linkage?
  関連記事のリンクを再構築したい場合は「Rebuild」します。
  ただ再構築すると手動で設定した関連記事もクリアされてしまうので注意。
• Remove Data on Uninstall?
  プラグインを削除する際に設定データも全て削除したい場合はチェックをいれます。
• Show love?
  チェックを入れるとPowered byの作者リンクが表示されます。このプラグインが気に入ったらチェックしましょう。

手動で関連記事を設定する

Related Posts for WordPressは手動で関連記事を追加することもできます。
投稿記事の編集画面には[Related posts]のブロックが表示され、関連記事として設定されている記事一覧が表示されます。

関連記事として設定されている記事タイトルにマウスオーバーするとEdit PostとUnlink Related Postのメニューが表示されます。

Edit Postはその記事の投稿画面へ遷移します。Unlink Related Postをクリックすると関連記事から除外できます。

新たに関連記事を追加したい場合は「Add Related Posts」をクリックすると記事一覧が表示されるのでチェックをいれて選択すると、関連記事として追加できます。※一覧で表示されるのは同じカテゴリーに属している記事だけのようです。

Related Posts for WordPressの簡単な設定方法でした。Related Posts for WordPressには有料プランも用意されていて有料プランならもっと高機能を期待できます。有料プランがあるので簡単には開発終了とはならないと思うのでちょっと安心できます。

以上、プラグインを使わないで関連記事を表示する方法と、プラグインを使って関連記事を表示する方法でした。

上記以外にも有名なテーマを利用している場合はテーマ自体に関連記事表示機能が組み込まれていたりします。

利用状況に合わせて選択するといいですね。