関連記事をYARPPを用いて表示してみよう


これまで関連記事の表示方法についていろいろ迷っていました。

最初はSimilar postsというplug-inを用いて表示していたんですが、ちょっと味気ないんですよね。

そして最近は、Jetpackの一部機能を使って表示する方法も発見したのですが、ちょっとカスタマイズできる項目が少ないんですよねぇ。
非常に簡単にできるのでなかなか有用なんですが、もうちょっといじりたいと思うと意外と不便で。

そんなわけでいろいろ探していたところ、見つけたのがこの

Yet Another Related Posts plugin(YARPP)

というプラグインです。

というわけで、今回はこのYARPPを紹介していきましょう。

YARPPとは

基本的にはワードプレスのプラグインの一つですね。

で、これの良いところは

関連記事のタイトルだけでなく、アイキャッチ画像も一緒に表示できる

ってところなんです。

これをやっているブログとかって結構見かけませんか?
どうやってやっているのかと思ったら、これを使っていたんですねー。

もちろんそれだけでなく、他にも結構カスタマイズできるようなんです。

インストールから

通常通りのWordPressのpluginのインストールから行います。

新規プラグインの検索で”YARPP”とか”yet another”など入れると出てくると思います。

YARRP1-1

 

あとは普通にインストールをクリック。

インストールが完了すると

YARRP1-2

こんな画面が出てきます。
質問に答えたい方はyesの方を、そうでない方はNoを選択しましょう。

以上でインストールは完了です。

YARPPの設定です

自分がインストールしたバージョンは、現時点で最新版となる4.2.2です。

設定画面はメニューの“設定”>”YARPP”で開けます。

設定画面はこんな感じです。

YARRP1-3

 

 

1. フィルタ設定

これは表示したくない関連記事などをこれによって設定できます。
表示したくないカテゴリーやタグを選択すると、それに属する記事のタイトルは表示されなくなります。

また古い記事やパスワードで制限している記事なども表示されなくすることができます。

YARRP1-4

2. 関連スコア設定

このなかで重要なところは

表示する最低関連スコア

という項目です。

YARRP1-5

この数字が大きければ大きいほど、関連性が高い記事しか表示されなくなります。
精度を上げたい場合は、数字を大きくすればよいということになりますね。
最高値がいくつかはよく分かりません(^^;

ただ

あまり数値を上げると、関連記事が表示されなくなる

という問題が発生します。
ですので、記事数があまりないうちは、このスコアは少し低めにしておいた方がよいかもしれません。

その下の項目は、関連スコアを計算する項目を設定できます。
どの項目を重視するかなども設定できます。

3. 表示設定 (ウェブサイト用)

YARRP1-6

まずはどんなページに関連記事を表示するかを選択します。

そして、一度に表示する記事数と表示形式を選択します。
ここで

サムネイル

というのを選ぶと、念願の

アイキャッチ画像とともにタイトルが表示される

ようになります。

 

関連記事表示を囲むタグ

ってのは、関連記事が表示される前につくタイトルのようなものです。

デフォルトでは”Related posts:”って表示されますが、日本語での文章に変更することができます。

その他、各関連記事ごとのタグや、抜粋を付けるか、表示する関連記事の順番などを決めることができます。

4. 表示設定 (RSS/Atom フィード用)

これは、フィードでも関連記事を表示するかを設定できます。

YARRP1-7

以上が設定できる項目となります。

実際に表示してみました

物は試しということで、実際に自分のブログで表示してみました。
すると

YARRP1-8

ちゃんと4つの関連記事がアイキャッチ画像とともに表示されました!

ちなみにこれは

関連記事表示を囲むタグ

の項目を ”Related posts”から”合わせて読みたい関連記事”に変更しています。

どうですか、なかなか良いでしょ?

でもちょっと気になる点が。

そうです、タイトルが途中で切れてしまっているんですよね。

タイトルが途中で切れてしまう問題を解決する方法

ちゃんとそれを解決する方法が用意されているんですね。

その方法とは、まずインストール済みプラグインのページへ行き、YARPPの中の“編集”を選択します。

そして、右にたくさんあるプラグインファイルの中から

yet-another-related-posts-plugin/includes/styles_thumbnails.css.php

を選択します。

YARRP1-10

 

結構下の方なんですが、だいたいこの辺りにあるはずです。

で、これを開くと

YARRP1-11

こんな風に内容が表示されますが、2箇所変更が必要です。

1つめは

表示領域を拡大する

ということです。

そのためには

$height_with_text   = $height + 50

となっているところの、数字の”50″の部分を120~150前後に変更します。
数字は自分のブログのタイトルの文字数に応じて決めてくださいね。
大きいほど表示される領域が広くなります。

2つめは

表示される文字の制限を取る

ということです。

そのためには

max-height: 2.8em;

この記述を、思い切って削除しちゃってください。

以上の変更が終わったら、“ファイルを更新”をクリックすれば完了です。

変更が完了すると

以上のように2箇所を変更してから確認してみると

YARRP1-12

 

ちゃんとタイトル文字が切れずに表示されるようになりました!!

枠の縦の長さも変わっていることが確認できますよね。
これは先ほどの数字の部分を”50″→”150″としています。

これだったら、120ぐらいでも十分そうですよね。

以上、YARPPを使って関連記事を表示する方法でした。

 

その後YARPPについていろいろ見ていたところ、どうもPro版というのもあるようで

無料で利用できる?
しかも広告を掲載してお金が稼げる?

なんてことが書かれています。

こちらに関しては、まだ不明な点が多いので、いろいろ調べてみて面白そうなことがあればあらためて書いていきますね。

本日もありがとうございました。

 


→ この記事がお役に立てば、ブログランキングかSNSで応援クリックしていただけるととっても嬉しいです(^^)/

人気ブログランキングへ

コメントを残す

CAPTCHA


サブコンテンツ

スポンサー-楽天-

このページの先頭へ