目次
Yet Another Related Posts Plugin（通称：YARPP）は便利でカスタマイズ
しやすいプラグインです。
ブログで記事が表示される時にそのブログと関連する記事を表示
してくれるプラグインです。
WordPressのテーマと相性がいい場合は簡単ですが、横並びに
表示させるにはカスタマイズが必要になります。
初心者でも、できるようようにPHPやCSSコードをコピーして
ペースト（貼付ける）場所等、分かりやすく解説します。
僕自身、皆さんが解説していましたが、何処に貼付けるのかよく
分かりませんでした。
ネーミングが長いので（通称YARPP)と言われています。
インストール方法はすでに分かっている事を前提に簡単に説明します。
インストルはダッシュボード（管理画面）→
プラグインから→新規追加→検索枠にYet Another Related Posts Plugin と
入力し→プラグインの検索をクリックと進み、表示された中から同じ名前の
ものをインストールし→有効化をします。
このようになっていれば有効化せれています。
インストールの仕方が分からない方は下記ページをご覧下さい。
https://tomio23.com/archives/3997
ダッシュボードから『設定を』クリックするとYet Another Related Posts Pluginが
YARPPと表示されます。ここをクリックします。
YARPPの設定画面になります。最初に設定画面の右上の表示オプションを
クリックします。
YARPPの設定画面を表示したら、右上の表示オプションをクリックして、
「フィルター設定」と「関連スコア設定」にチェックを入れます。
表示する項目にチェックを入れます。
関連記事に表示したくないカテゴリやタグがあればチェックを入れます。
過去〇ヶ月間の記事だけを表示するという項目については、
SEOブログのように古い記事だと情報が役に立たない可能性がある
ジャンルの場合には、設定しておいた方が良いと思います。
デフォルトでは「表示する最低関連スコア」が５になっていますが、５だと
サイト開設初期にはほとんど関連記事が表示されない可能性があります。
あくまで最低の値なので２や１で良いと思います。
タイトルや内容については検討するか、どうかを設定します。
大切なのはカテゴリやタグは検討するにします。
検討する項目を色々と調整して、自分のサイトで関連記事が上手く
表示される設定を見つけましょう。
デフォルトでは「自動表示」投稿にチェックが入っており、記事の最後に
自動的に関連記事用のタグが挿入されるようになっています。
自分で表示位置をコントロールしたい場合は、このチェックを外して、
任意の場所に以下のタグを挿入します。
一度に表示する「関連記事数」は５～１０の間で良いと思います。
僕は8にしています。
表示方法は、リスト、サムネイル、カスタムから選択します。
サムネイルは（アイキャッチ画像表示）記事で表示し
たいていの場合、縦に表示します。
横並びに表示したい場合カスタマイズが必要になる場合があります。
ヘッダーは自分の好きな文言を入れて下さい。
デフォルト画像はサムネイルを選んだ時点で，アイキャッチ画像を、
ブログを書いた時点で設定してあれば，自動でURLが表示されます。
「関連記事がない時のメッセージ」については、デフォルトでは英語で
表示されますので、「関連記事はありません」のように日本語にするか、
空白にした方が良いと思います。
表示順番は「関連スコアの高い順」出よいと思います。
僕はサムネイル表示を選び関連記事数を8にしています。
僕が選んだWordPressのテーマだと下記の様に立て表示になってしまいます。
これはアイキャッチ画像を縦や，横の画像を使用しているからだと思います。
横並びにしたい場合カスタマイズが必要になります。
YARPPをカスタマイズします。
表示設定ウエッブサイト用からカスタムをクリックしテンプレートを
移動をクリックしテンプレート追加します。
カスタムをクリックし、テンプレートファイルでテンプレートが移動をされると、
その他複数のテンプレートも表示され色々選択可能になります。
これでテンプレートが移動された事になります。
今回はテンプレートファイルから「yarpp-template-thumbnail.php」を選びます。
「表示設定」にチェックが入っている場合、投稿記事の下に自動的に関連記事の
挿入をしてくれます。
チェックは外してカスタマイズし自分で以下のコードを記述することで、
好きな場所に表示させることができます。
<?php related_posts(); ?>
コピーペースとする場所は普通「single.php」に貼付けます。
外観から→テーマ編集をクリックします。
テーマの編集画面から一番下にスクロールします。
単一記事の投稿「single.php]をクリックします。
「single.php]画面の <!–#content–> の上にスペースをつくり赤枠で囲んである
場所にペースト（貼付け）ます。
投稿記事の記事下任意の位置に表示されます。
YARPPを自分好みに表示する方法
テンプレートファイルから「yarpp-template-thumbnail.php」を選び
ファイルを更新します。
これで準備出来ました。
テンプレートのphpファイルと、CSSです。
[yarpp-template-thumbnail.php]ファイルを書き換えます。
書き換える前に必ず元の状態をコピーして元に戻せるようにメモしときましょう。
下記をコピーして貼付けます。
<?php if(have_posts()):?> <h2>おすすめの関連記事</h2> <div class="related-post"> <?php while(have_posts()) : the_post(); ?> <?php if(has_post_thumbnail()):?> <div class="related-entry"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><?php the_title(); ?></a></div> <?php endif; ?> <?php endwhile; ?> </div><?php else: ?><!-- 関連記事がない場合 --><?php endif; ?>
上記をコピーします。
「yarpp-template-thumbnail.php」を自分好みに書き換えます。
外観から→テーマ編集をクリック→テーマの編集画面を一番下にスクロール
します。
右側にyarppテンプレートが表示されています。
その中から「yarpp-template-thumbnail.php」をクリックします。
「yarpp-template-thumbnail.php」をクリックしテーマの編集画面になります。
先ほどコピーしたphpコードを、この画面で、元にあるphpを削除しペーストします。
すでに貼付けあります。
ここで少し編集したのは丸で囲んであるフォントサイズを変更しました。
四角の赤枠の中は好きな文言に書き換える事ができます。
できましたらファイルの更新をします。
cssのコードです。下記をコピーして使用可能です。
[css]
/* YARPPのカスタマイズ */.related-post{ height:100%;}.related-post{ width:100%; overflow:hidden; margin-top:5px;}.related-entry { vertical-align: top; float: left; width:100px; font-size: 12px; min-height: 300px; margin: 0; padding-right: 20px;}.related-entry img{ padding:2px; border: #ccc 1px solid; width:100px;}[/css]
CSSのコードをコピーします。
外観から→テーマ編集をクリックし「テーマの編集」画面に入り一番下まで
スクロールします。
右下にあるstyle.cssをクリックします。
赤枠の中が僕のstail.css画面の一番した、「#em_size{width:1em;display: none}」
の下にスペースを作り、このようにペースト（貼付け）ます。
貼付けたらファイルを更新します。
画像付き関連記事を使う場合には、記事にアイキャッチ画像が必要です。
PHPとSCCのソースコードは『eBook Brain』さんのコードを使用しました。
http://ebookbrain.net/yarpp-customize-on-responsivedesign/
横並びで関連記事を表示する事ができました。
サムネイルで表示してみると、変な所で切れたりする事が多いです。
特に長いタイトルを付けていたりすると変な所で切れたりします。
デフォルトの場合、枠と文字数制限をあまり多く取ってはいないようです。
長いタイトルでも表示出来るように調節します。
全て表示させたい場合は『表示スペース』と『文字数』の設定を
増やす必要があります。
管理画面→「プラグイン」→「インストール済みプラグイン」→
「Yet Another Related Posts Plugin」から「編集」をクリックします。
YARPPが右側に表示されていますので、そこから、
【yet-another-related-posts-plugin/includes/styles-thumbnails.css.php】を
探してクリック、その中のコードを修正します。
下記の画面から、この箇所を探し「$height_with_text = $height + 50;」の
ところの数値を増やします。
タイトルにWordPressのプラグイン名など英語をよく使う場合は、
タイトルが長くなりますので「１３０」前後くらいにしておくのが良いです。
下記の箇所を探し「max-height: 2.8em」の数値を増やします。
こちらも、長めのタイトルを使用している場合は９.８程度から調整してみると良さそうです。
以上のカスタマイズで、タイトルが全文表示されるようになります。
