ー スポンサード リンク ー

Yet Another Related Posts Plugin(通称:YARPP)使用方法

関連記事プラグインYARPPをカスタマイズする

Yet Another Related Posts Plugin(通称:YARPP)は便利でカスタマイズ
しやすいプラグインです。

ブログで記事が表示される時にそのブログと関連する記事を表示
してくれるプラグインです。

WordPressのテーマと相性がいい場合は簡単ですが、横並びに
表示させるにはカスタマイズが必要になります。

初心者でも、できるようようにPHPやCSSコードをコピーして
ペースト(貼付ける)場所等、分かりやすく解説します。

僕自身、皆さんが解説していましたが、何処に貼付けるのかよく
分かりませんでした。

ネーミングが長いので(通称YARPP)と言われています。


インストール方法

インストール方法はすでに分かっている事を前提に簡単に説明します。

インストルはダッシュボード(管理画面)→
プラグインから→新規追加→検索枠にYet Another Related Posts Plugin と
入力し→プラグインの検索をクリックと進み、表示された中から同じ名前の

ものをインストールし→有効化をします。
このようになっていれば有効化せれています。

YARPPのインストール

インストールの仕方が分からない方は下記ページをご覧下さい。

http://tomio23.com/archives/3997


YARPPの設定の仕方

ダッシュボードから『設定を』クリックするとYet Another Related Posts Pluginが
YARPPと表示されます。ここをクリックします。

YARPP設定

 

YARPPの設定画面になります。最初に設定画面の右上の表示オプション
クリックします。

表示オプション

YARPPの設定画面を表示したら、右上の表示オプションをクリックして、
「フィルター設定」と「関連スコア設定」にチェックを入れます。

表示する項目にチェックを入れます。


フィルター設定

関連記事に表示したくないカテゴリやタグがあればチェックを入れます。

過去〇ヶ月間の記事だけを表示するという項目については、
SEOブログのように古い記事だと情報が役に立たない可能性がある
ジャンルの場合には、設定しておいた方が良いと思います。

 

フィルター

 

関連スコア設定

デフォルトでは「表示する最低関連スコア」が5になっていますが、5だと
サイト開設初期にはほとんど関連記事が表示されない可能性があります。

あくまで最低の値なので2や1で良いと思います。

タイトルや内容については検討するか、どうかを設定します。
大切なのはカテゴリやタグは検討するにします。

検討する項目を色々と調整して、自分のサイトで関連記事が上手く
表示される設定を見つけましょう。

 

関連スコア

 

表示設定ウエッブサイト用

デフォルトでは「自動表示」投稿にチェックが入っており、記事の最後に
自動的に関連記事用のタグが挿入されるようになっています。

自分で表示位置をコントロールしたい場合は、このチェックを外して、
任意の場所に以下のタグを挿入します。

一度に表示する「関連記事数」は5~10の間で良いと思います。
僕は8にしています。

表示方法は、リスト、サムネイル、カスタムから選択します。
  • リスト表示
  • サムネイル表示
  • カスタムとあります
サムネイルは(アイキャッチ画像表示)記事で表示し
たいていの場合、縦に表示します。

横並びに表示したい場合カスタマイズが必要になる場合があります。

ヘッダーは自分の好きな文言を入れて下さい。

デフォルト画像はサムネイルを選んだ時点で,アイキャッチ画像を、
ブログを書いた時点で設定してあれば,自動でURLが表示されます。

「関連記事がない時のメッセージ」については、デフォルトでは英語で
表示されますので、「関連記事はありません」のように日本語にするか、
空白にした方が良いと思います。

表示順番は「関連スコアの高い順」出よいと思います。

僕はサムネイル表示を選び関連記事数を8にしています。

 

関連スコア表示

 

僕が選んだWordPressのテーマだと下記の様に立て表示になってしまいます。
これはアイキャッチ画像を縦や,横の画像を使用しているからだと思います。

横並びにしたい場合カスタマイズが必要になります。

 

縦表示

 

 

上手くYARPPが表示出来ない場合

YARPPをカスタマイズします。

表示設定ウエッブサイト用からカスタムをクリックしテンプレートを
移動をクリックしテンプレート追加します。

 

カスタム

 

カスタムをクリックし、テンプレートファイルでテンプレートが移動をされると、
その他複数のテンプレートも表示され色々選択可能になります。


これでテンプレートが移動された事になります。
今回はテンプレートファイルから「yarpp-template-thumbnail.php」を選びます。

 

カスタム

「表示設定」にチェックが入っている場合、投稿記事の下に自動的に関連記事の
挿入をしてくれます。


 

好きな場所に表示する場合

チェックは外してカスタマイズし自分で以下のコードを記述することで、
好きな場所に表示させることができます。

<?php related_posts(); ?>

コピーペースとする場所は普通「single.php」に貼付けます。
外観から→テーマ編集をクリックします。

外観テーマ編集

テーマの編集画面から一番下にスクロールします。

スクリーンショット 2014-05-05 10.58.56

 

単一記事の投稿「single.php]をクリックします。

 

スクリーンショット 2014-05-05 10.58.26-1

 

 

「single.php]画面の <!–#content–> の上にスペースをつくり赤枠で囲んである
場所にペースト(貼付け)ます。

投稿記事の記事下任意の位置に表示されます。

 

スクリーンショット 2014-05-05 16.54.59

 

 

 

YARPPカスタムテンプレートの作成

YARPPを自分好みに表示する方法

テンプレートファイルから「yarpp-template-thumbnail.php」を選び
ファイルを更新します。

これで準備出来ました。

 

設定するのは2つです。

テンプレートのphpファイルと、CSSです。


phpファイル

[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

 

「yarpp-template-thumbnail.php」をクリックしテーマの編集画面になります。

先ほどコピーしたphpコードを、この画面で、元にあるphpを削除しペーストします。

すでに貼付けあります。

ここで少し編集したのは丸で囲んであるフォントサイズを変更しました。

四角の赤枠の中は好きな文言に書き換える事ができます。

できましたらファイルの更新をします。

 

php

 

CSSファイル

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をクリックします。

 

CSS

 

赤枠の中が僕のstail.css画面の一番した、「#em_size{width:1em;displaynone}」
の下にスペースを作り、このようにペースト(貼付け)ます。

 

css

 

貼付けたらファイルを更新します。

 

注意

画像付き関連記事を使う場合には、記事にアイキャッチ画像が必要です。

PHPとSCCのソースコードは『eBook Brain』さんのコードを使用しました。

http://ebookbrain.net/yarpp-customize-on-responsivedesign/

 

横並びで関連記事を表示する事ができました。

 

YARPP

 

タイトルの文字数を調節する。 

サムネイルで表示してみると、変な所で切れたりする事が多いです。
特に長いタイトルを付けていたりすると変な所で切れたりします。

デフォルトの場合、枠と文字数制限をあまり多く取ってはいないようです。

長いタイトルでも表示出来るように調節します。

全て表示させたい場合は『表示スペース』と『文字数』の設定を
増やす必要があります。


 

タイトルの文字数、設定の仕方

管理画面→「プラグイン」→「インストール済みプラグイン」→
「Yet Another Related Posts Plugin」から「編集」をクリックします。


 

YARPPプラグイン

 

YARPPが右側に表示されていますので、そこから、
【yet-another-related-posts-plugin/includes/styles-thumbnails.css.php】を
探してクリック、その中のコードを修正します。


 

スクリーンショット 2014-05-06 14.28.41

 

下記の画面から、この箇所を探し「$height_with_text = $height + 50;」の
ところの数値を増やします。


タイトルにWordPressのプラグイン名など英語をよく使う場合は、
タイトルが長くなりますので「130」前後くらいにしておくのが良いです。

 

YARPP設定

 

表示タイトル文字数を増やす

下記の箇所を探し「max-height: 2.8em」の数値を増やします。

こちらも、長めのタイトルを使用している場合は9.8程度から調整してみると良さそうです。

YARPP設定文字数

 

 以上のカスタマイズで、タイトルが全文表示されるようになります。