WordPressで関連記事をサムネイルありで表示する方法(YARPP)

この記事は約4分で読めます。

  • LINEで送る

WordPressに関連記事表示

WordPressで記事の下にサムネイルありの関連記事を表示する方法です。
関連記事を表示することで、ページビュー向上にも役立ちます。

Yet Another Related Posts Plugin(以下、YARPP)を使用します。
関連記事表示には、いくつかプラグインがありますが、
日本語に対応しており、なおかつ使いやすくカスタマイズ性が高いのでYARPPを使っています。

今回は、YARPPのインストールと各設定について解説します。
カスタマイズは、以下で詳しく説明していますので興味のある方はご覧ください。

YARPPのサムネイル表示を独自カスタマイズする

YARPPを導入して記事下に関連記事を表示する

yarpp

それでは、早速「YARPP」を導入して、関連記事を表示します。

インストール

yarpp

「プラグイン > 新規追加」から「Yet Another Related Posts Plugin」を検索します。
直接ダウンロードは以下のページから可能です。
WordPress › Yet Another Related Posts Plugin (YARPP) « WordPress Plugins

yarpp

yarpp

「YARPP」を今すぐインストールし、インストール完了後にプラグインを有効化します。
これで、「YARPP」のインストールは完了です。

YARPPの設定

それでは、次に関連記事の表示をします。
使っているテンプレートによっては、PHPに1行追加しないとうまく表示されない場合があります。
賢威6.1では、追加する必要があるのでそっちの方法を中心に説明します。

yarpp設定

yarpp設定

WordPress管理画面から「設定 > YARPP」を開きます。
上部の「表示オプション」を開き、表示する項目全てにチェックを入れてください。
これで、YARPPの設定項目が表示されます。

フィルター設定

yarpp設定

フィルター設定では、関連記事から省くカテゴリなどを選択できます。
限定公開記事などがあれば、省いておくことで関連記事には表示されません。

関連スコア表示

yarpp設定

関連スコア設定では、関連性スコアをある程度制御できます。
「表示する最低関連スコア」で、どこまで関連している記事を表示するかを決めます。
この関連スコアは、その下の4つの項目により自動的に算出されます。

「表示する最低関連スコア」が高いと、記事数が少ない時は関連記事なしになってしまうので、
最初の頃は、「2」などに設定して関連性が薄い記事でも表示されるようにしましょう。
(関連スコアが高い順に表示できるので、ずっと「2」のままでも構いませんが…)

「タイトル」、「内容」、「カテゴリ」、「タグ」の4項目があり、
それぞれプルダウンで「検討する」「検討しない」などのスコア付けを決定できます。
これにより、プラグイン内部で自動的に関連記事を選別してくれます。

これは、ブログごとでスコアが変わってきますので、
いろいろ試して、どのような優先順位で関連記事を表示するか考えて設定してください。

表示設定 ウェブサイト用

yarpp設定

ウェブサイト用の表示設定である程度のデザインが決定できます。

まず、「自動表示」のチェックは基本的に外してください。
ここにチェックが入っていると、プラグインが自動的に判別して関連記事を表示します。
しかし、テンプレートによっては表示位置がおかしくなります。(賢威はおかしくなる)
そこで、手動で表示位置を設定するためにこのチェックは外しましょう。

次に、「一度に表示する関連記事数」はその名の通りです。何記事まで表示するのかを決めます。

「リスト」「サムネイル」「カスタム」で表示のデザインを決めます。
「カスタム」はPHPを作成して、独自カスタマイズする方法ですので以下の記事でご覧ください。

YARPPのサムネイル表示を独自カスタマイズする

yarpp設定

リスト表示の場合はこのように表示されます。
ちなみに、タイトルの後ろに表示されている(14.8)などの数字は関連スコアです。
これは、ログインしている場合だけに表示されます。(一般訪問者はタイトルのみです)

「関連記事表示を囲むタグ」や「各関連記事を囲むタグ」を変更することで、
表示するタグを変更できますので、いろいろ試してみてください。
リスト表示を数値ではなく、「・」にしたい場合は「<ol>」を「<ul>」に変更します。

WordPressに関連記事表示

サムネイル表示の場合はこのように表示されます。
この時のサムネイルは、各記事のアイキャッチ画像が表示されます。
アイキャッチ画像が設定されていないと、全てデフォルト画像が表示されます。

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

yarpp設定

この設定は、RSS等のフィードに関連記事を表示する/しないの設定です。
RSSなどでの配信に力を入れている方はチェックを入れてもよいかもしれません。

YARPPの表示

YARPPの設定が完了したので、表示しましょう。
表示方法はPHPに以下のコードを1行追加します。
追加位置は、表示したいPHPです。(single.phpなど)

<?php related_posts(); ?>

賢威の場合は、「外観 > テーマ編集」から「single.php」を開きます。
その中で、「<!–comment–>」の上に追加しましょう。

他の位置に追加しても問題ないので、追加して表示を確認してください。

関連記事がない場合もチェック

yarpp設定

見落としがちなのが、関連記事がない場合の表示チェックです。
この方法は簡単で、「関連スコア設定 > 表示する関連スコア」を「200」など高い数値に設定すれば
関連記事がないという判定になりますので、それで保存して関連記事がない場合の表示をチェックしてください。

さらに、YARPPサムネイルを独自カスタマイズしたい場合はこちらをどうぞ。
YARPPのサムネイル表示を独自カスタマイズする

  • LINEで送る

コメントを残す

このページの先頭へ