関連記事を表示させるプラグイン【Yet Another Related Posts Plugin】の設定方法

今回は関連記事を表示させるプラグイン【Yet Another Related Posts Plugin】通称「YARPP」の特徴や設定方法等を紹介していきます。

関連記事をブログ内で設置する事で内部リンクになり訪問者の方が他のページも読む可能性が高くなります。つまりPV（ページビュー）をアップさせるのに欠かせない存在の１つです。

別にこの「YARPP」以外にも関連記事を表示させるプラグインはありますが、個人的にはこの「YARPP」が一番関連性の精度が高いと思っております。設定方法にちょっと難しい部分もありますので詳しく図解で紹介していきますが、結構大変な作業です。

YARPPの特徴、インストールと有効化
YARPPの設定方法
1. 表示設定ウェブサイト
手動で関連記事のタグを埋め込む
関連記事の位置調整

YARPPの特徴、インストールと有効化

このプラグイン【Yet Another Related Posts Plugin】通称「YARPP」の特徴としては「タイトル」「記事の内容」「カテゴリー」「タグ」から関連性の高い順番に点数を付けて点数の高い順番に表示させてくれます。もちろん表示件数、サムネイル表示等も自分で設定する事が可能です。

プラグインを利用しないで関連記事を表示させるカスタマイズというのもありますが、この場合はおそらく「同じカテゴリー内」もしくは「同じタグで関連付ける」という関連記事になると思います。というかその方法しか私のレベルでは思いつきません。

という訳なのでカテゴリーを飛び越えてブログ全体から関連記事を表示させるのであればプラグインを利用するのが便利だと思っています。

一応プラグイン無しでの関連記事を表示させる方法も書いておいたのでプラグインを利用したくない場合にはどうぞ。

という訳で早速解説です。まずはプラグインのインストール。普通のプラグインのインストールと同じですのでこの部分は省略します。

プラグインの追加で「Yet Another Related Posts Plugin」を検索して有効化しておきます。

YARPPの設定方法

有効化までできたらWordPressの管理画面から設定⇒YARPPと進みます。

まずは「フィルター設定」という項目がありますが、関連記事として表示したくないカテゴリーやタグがある場合にだけチェックを入れます。普通は特にチェックは必要ないと思います。

次に下にスクロールして「関連スコア設定」に移ります。前述したようにこのプラグインは「タイトル」「内容」「カテゴリー」「タグ」から関連性のある記事に点数（スコア）をつけて、スコアの高い物を関連記事として表示させます。

デフォルトで「表示する最低関連スコア」というのが「2」となっていると思いますが、これは関連度が2点以上のスコアの物だけを表示します。

つまり簡単にいうとこの「表示する最低関連スコア」を高く設定してしまうと表示できる関連記事がないという事態もありますので、最初は無難に「１」で設定しておくのがおすすめです。

その他「タイトル」「内容」「カテゴリー」「タグ」は「検討する」を選択しておくと無難です。

ここで「タイトル」と「内容」の部分で「検討する」が選択できないという場合には別記事で解説してますのでそちらを試してみて下さい。

表示設定ウェブサイト

次の項目で表示設定ができます。「Automatically display related content from YARPP Basic on:」と書かれていますね、つまりチェックした項目の記事「投稿ページ」「固定ページ」等に自動的に関連記事を表示しますか？という事です。私の場合は全てのチェックを外してこのようにしてます。

このチェックを全部外すと関連記事は表示されません。関連記事を表示させたい部分に自分でタグを埋め込む必要があります。面倒な方は「投稿」部分にチェックをしておくと個別ページでのみ関連記事が自動的に表示されますし、「固定」にもチェックを入れると「固定ページ」にも関連記事が表示されます。

私が全てのチェックを外しているのは自分で好きな位置に関連記事を表示したいからです。「single.php」にこのコードを埋め込んで埋め込んだ場所に関連記事を表示させています。

<?php related_posts(); ?>

簡単ですよね。埋め込む位置はあとからまた説明しますが、何故自動ではなく手動で埋め込んでいるか？というと、私のブログの場合は記事下にAdSense広告や自作したSNSボタンを設置しております。この並びの順番を自分で決めたかったからという理由です。

さて、続きです。「表示させる件数」を入力して「リスト表示（画像無し）」もしくは「サムネイル表示（画像有り）」を選択します。

今回は「リスト表示（画像無し）」の場合の解説をしますが、サムネイル表示も表示したいと言う場合には別記事で解説しますのでこちらへ移動をお願いします。
⇒YARPPでサムネイル画像を表示させる設定方法

「リスト表示」を選択すると下にこんな項目が出現します。

私の場合はこのように変更しております。

関連記事表示を囲むタグ:Related postsを好きなタイトルに変更する
関連記事表示を囲むタグ:「ol」と「/ol」を「ul」「/ul」に変更
関連記事がない時のメッセージ:No related posts.を「関連記事はありません」に変更

「ol」タグを「ul」タグに変更したのはolタグの場合はリストの左に数字が表示されます。こんな感じ。

関連記事A
関連記事B

このように数字が付くのが「ol」タグ。これを「ul」タグに変更するとこんな感じ。

関連記事A
関連記事B

という訳で好きな方を選択して下さい。

「抜粋を表示？」という項目については記事タイトルだけでなく記事の抜粋も一緒に表示させる事ができます。表示させる抜粋の単語数だけ設定すれば記事タイトルと抜粋文が表示されます。

あと、最後の項目に「表示設定　RSS/Atomフィード用」というのがありますが、これはRSSでも関連記事を表示されるかどうかの設定ですので必要ならばチェックを入れておきます。私は面倒なのでやってませんが、その内設定するかもしれません。

とりあえずこれで設定は完了ですので「設定を保存」しておきます。

手動で関連記事のタグを埋め込む

先ほど「表示設定ウェブサイト」の部分の設定で「Automatically display related content from YARPP Basic on:」つまり自動で関連記事を入れる？のチェックを全部外している場合には関連記事のタグを埋め込んで関連記事を表示させます。

子テーマの「single.php」を開いて次の記述を探します（TwentyTwelveを利用してます）。

<nav class="nav-single">

テーマによってちょっと違う部分もあるかと思いますが、大体記事下に「前の記事」と「次の記事」みたいなリンクがあると思います。上記のコードはそれを表示させるためのコードの最初の部分ですので、これを探してこのコードの直前に関連記事を表示させるコードを入れます。

<?php related_posts(); ?>

関連記事の位置調整

えっと最後にCSSで位置調整等をしていくんですが、実はこのプラグインを入れるとYARPPのCSSファイルも読み込まれます。つまり最初からちょっとした基本的なCSSが適応されるようになっているのです。実は他の多くのプラグインでも同じようにインストール、有効化した時点で色々なファイル（CSSとかJavaScript等）が追加されます。

ところがコレには問題があって、ブログを読み込むCSSファイルが増えるので表示速度にほんのちょっと影響します。それからCSSで変更できない部分ってのがでて来てしまいます。

そのため、対策としてはYARPPをインストール、有効化した時に追加されるCSSを読み込まないようにして自分の子テーマのCSSに全てまとめて調整できるようにしておきます。

これを可能にするのが「functions.php」です。子テーマに「functions.php」を作成しておきます。初めて子テーマに「functions.php」を追加する方は注意点があるのでこの記事を参考に追加して下さい。
⇒子テーマにfunctions.phpを追加する時の注意点

それで子テーマの「functions.php」に次の記述をします。

//yarppのCSSを読み込まない

add_action('wp_print_styles','lm_dequeue_header_styles');
function lm_dequeue_header_styles()
{
  wp_dequeue_style('yarppWidgetCss');
}

add_action('get_footer','lm_dequeue_footer_styles');
function lm_dequeue_footer_styles()
{
  wp_dequeue_style('yarppRelatedCss');
}

これで「保存」。記述ミスがあるとブログの表示が真っ白になったりします。その場合にはFTPから「functions.php」を開いて記述を削除して下さい。

これでYARPPのCSSを読み込まないようにしたので今度は子テーマのCSSにYARPPの位置調整や文字の調整をします。

子テーマCSSの記述（サムネイルではなくリスト表示の場合ね）。

/* yarppタイトル部分 */
.yarpp-related h3 { border: 0;
padding: 3px 15px;
line-height: 2;
font-size: 18px;
margin: 0;
}
/* yarpp各リストマーク部分 */
.yarpp-related li {line-height: 2em;
list-style: disc outside;
margin: 0 0 0 36px;
}
/* yarpp記事タイトルリンク部分 */
.yarpp-related li a {font-weight: bold;
}
/* yarpp関連記事全体の調整 */
.yarpp-related {margin-top: 30px;
margin-bottom : 30px;
border : 3px solid #1F5E73;}

最後の「border : 3px solid #1F5E73」という部分で全体を3pxの線で囲ってます。これでこんな感じの表示になっています。