WordPressで関連記事を簡単に表示する方法【初心者向け】

WordPressで作成したサイトに【関連記事を表示する方法】を初心者向けに解説した記事です。簡単にできるプラグインを利用する方法(2つ)と、少し知識が必要なテーマを編集する方法をそれぞれ紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

WordPress作成したサイトで、記事の下に関連記事が表示されているのを見たことはないでしょうか?

関連記事があることで、他の記事へのトラフィックアップも期待できます。

 

今回は初心者でも簡単にできる、WordPressで関連記事を表示する方法をご紹介します。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!よくブログとかでその記事に関連する記事とかを紹介しているじゃないですか〜。あれってWordPressでもできるんですか〜?

田島悠介

できるよ!WordPressだと、「プラグインを使う方法」と「テーマを編集する方法」の2つあるよ。

大石ゆかり

両方とも教えてください!!!

 

目次

WordPressで関連記事を表示させるには大きく2通りの方法があります。本記事では順番にご紹介します。

 

プラグインを利用する方法は、WordPressの初心者でも比較的導入しやすい方法ですので、おさえておいて損はないでしょう。プラグインは2つ紹介します。

もう一つのテーマを編集する方法は、CSSなどある程度Webサイト制作の知識が必要ですが、覚えてしまえばそこまで難しくはありません。アフィリエイトサイトなどで大量にページを作る場合は、こちらの方法が手間がかからないのでおすすめです。

今回は両方の方法をご紹介しますので、利用しやすいものを試してみてください。

 

 

《プラグインを利用する方法1》
Yet Another Related Posts Plugin(YARPP)

まずは1つ目のプラグインを利用する方法です。

今回紹介するのは、関連記事を表示させるプラグインの中でもよく知られている「Yet Another Related Posts Plugin」です。YARPPと略されることもあります。

簡単な設定だけで関連記事を表示させることができます。

 

プラグインの使い方がわからない場合は、WordPressのプラグインをインストールする方法の記事をご覧ください。

 

 

Yet Another Related Posts Pluginをインストールして、有効化してください。

140502TA_05

 

インストールされた状態で投稿ページを確認すると、このように関連記事が表示されるようになります。

140502TA_12

このままでも良いのですが、設定形式や表示場所の追加などのカスタマイズしたい場合は、ダッシュボードの「設定」から変更します。

 

カスタマイズの設定方法

Yet Another Related Posts Pluginがインストールされると、サイドバーの設定表示が以下のように変更されます。

この「YARPP」からさまざまな設定を変更することができます。

140502TA_06

いくつかの設定方法を紹介します。

 

フィルター設定

表示する関連記事の詳細設定を変更することができます。

表示させたくないカテゴリがある場合や、新しい記事だけを関連記事として表示させたい場合に便利です。

140502TA_07

 

関連スコア設定

記事との関連性について設定を変更することができます。

例えばタイトルだけで関連性を持たせたい場合は、「タイトル」部分を「検討する(重要視)」を選ぶことで、タイトルとの関連性を重視して記事を表示してくれます。

140502TA_09

 

表示設定 ウェブサイト用

関連記事の表示のされ方(簡単なレイアウト)を変更することができます。

デフォルトではタイトルしか表示されていませんが、更に内容を追加することもできますし、テキスト表示をサムネイルに変更することも可能です。

140502TA_10

サムネイルを選択した場合は、こののように表示されます。
140502TA_08

表示設定 RSS/Atomフィード用

フィードにも関連記事を表示することができます。

チェックを入れると「表示設定 ウェブサイト用」と同じような設定変更画面が表示されます。

140502TA_11

Yet Another Related Posts Pluginの使い方は以上です。

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

《プラグインを利用する方法2》
WordPress Related Posts

続いて、「WordPress Related Posts」というプラグインを使った関連記事の表示方法をご紹介します。

表示形式などに加え、クリック率やPVなども確認することができるので、回遊率などが気になる方にはおすすめのプラグインと言えます。

 

同じくプラグインのインストールが完了すると、投稿ページにこのように表示されます(文言は変更しています)。

140502TA_16

Yet Another Related Posts Pluginに比べて少しレイアウトが違っています。

先ほどと同じようにカスタマイズしてみましょう。

 

カスタマイズの設定方法

インストール・有効化が完了したら、詳細内容の設定変更を行ってみましょう。

設定変更はサイドバーの「設定」>「WordPress Related Posts」を選択します。

140502TA_17

インストール直後は表示する関連記事の数や、「この記事を読んだ人はこんな記事にもご興味があるかも」部分の表記変更画面が表示されます。

利用していくと、クリック数やPVが表示されるので、記事の改善にも役立てていきましょう。

 

 

WordPressのテーマを編集する方法

ここまでプラグインを使う方法を紹介しましたが、プラグインを使わなくてもWordPressのテーマを編集することで関連記事を表示できます。

編集する場合は、「外観」>「テーマ編集」を選択してください。

140502TA_18

 

CSSで表示形式を変更することができるので、ある程度サイト制作の知識がある方や、プラグイン形式にとらわれない表示にしたい場合はこちらがおすすめです。

ただし、エラーが起きて画面が真っ白になって動かない…なんてこともありますので、必ず事前にサイトのバックアップを取っておいたり、PHP・CSSの変更前内容の保存を行っておきましょう。

 

投稿ページに表示したい場合は「sigle.php」を選択し、表示したい部分に下記コードを追加します。
140502TA_19

 

追加するコード

<h3><?php the_category(‘ // ‘) ?>の最新記事</h3>
<?php
foreach((get_the_category()) as $cat) {
$catid = $cat->cat_ID ;
break ;
}
$get_posts_parm = “‘numberposts=10&category=” . $catid . “‘”;
?>
<ul>
<?php $posts = get_posts($get_posts_parm); ?>
<?php foreach($posts as $post): ?>
<li><?php the_time(‘m月d日’); ?>・・・<a href=”<?php the_permalink(); ?>”
title=”<?php the_title(); ?>”> <?php the_title(); ?></a></li>
<?php endforeach; ?>

保存すれば完成です。

コード自体は簡単ですので、サイト制作に慣れてきた方はこちらも試してみてください。

 

※コードについてわかりやすく書かれていた下記のサイトを参考にさせていただきました
プラグインを使わずカテゴリごとの最新記事を表示する方法

 

うまくできましたか?

さらにカスタマイズしたい場合は、WordPressのサイトにソーシャルボタンを追加する方法もあわせてご覧ください。

 

大石ゆかり

無事、関連記事が表示できました!

田島悠介

関連記事があるとサイト回遊率が上がるから、SEO対策としてもいいね!

大石ゆかり

はい、そうですね♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。