関連記事プラグイン「YARPP」のサムネイル表示をカスタマイズする方法

当メシオプレス公式サイトでは、記事下に関連記事を表示させるために「YARPP」というプラグインをそのまま使用していましたが、タイトル部分を全文表示されるようにカスタマイズしてみましたので、記事に残しておきます。

何ということでしょう。タイトルが途切れているじゃないですか

当ブログで使用しているWordPressテンプレート「メシオプレス03」では、関連記事表示プラグインとして「Yet Another Related Posts Plugin（YARPP）」を使用しています。YARPPのバージョン4.0以降からデフォルトでサムネイル表示（横並び）が可能になったため、デフォルトのサムネイル表示を選択して使っています。

スマホから見る場合は縦のリスト表示のほうが良いかも知れませんが、当ブログはスマホからのアクセスは全体の3割ほどなので、個人的な見た目の好みで横並びのサムネイル表示を選択しています。

これで何も不満は感じていなかったのですが、デフォルト状態だと、下記のような感じでタイトルが途切れて表示されてしまいます。

↓　そこでカスタマイズして、タイトルを全文表示してみました。

この記事タイトルを全文表示させるカスタマイズ方法を解説しておきます。

YARPPのタイトルを全文表示させるカスタマイズ手順

●1 YARPPの編集画面に移動
WordPress管理画面→「プラグイン」→「インストール済みプラグイン」から、Yet Another Related Posts Pluginの「編集」をクリック。

●2 「css.php」で検索

キーボードの「Ctrl＋F」を押して、「css.php」で検索すると、「yet-another-related-posts-plugin/includes/styles_thumbnails.css.php」がヒットしますので、これをクリックします。プラグインのバージョンによって表示位置が異なることがあるのですが、基本的には一番下に表示されていることが多いです。

●3 タイトル表示スペースを広げる

表示されたファイル内の

$height_with_text = $height + 50;

の「50」の数字を任意の数字に変更します。当ブログの場合は「130」にしておきました。

タイトルにWordPressのプラグイン名など英語をよく使う場合は、タイトルが長くなりますので「130」くらいにしておくのが良いです。一方、タイトルに英語を使うことがない場合や、あまり長いタイトルを付けない場合は「100」くらいが丁度良いと思います。

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

下のほうにある

max-height: 2.8em;

の「2.8」の数字を増やすか、この行ごと丸ごと削除するか、コメントアウト（※）します。数字を増やす場合は、「9.8」にすると良い感じに表示されました。

※コメントアウトの記述方法

/* max-height: 2.8em; */

（前後を「/* ～ */」で囲みます。「*」の前後の半角スペースはあってもなくてもどちらでも良いです。）

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

全文表示にしたことでページビューが増えたデータを提示できれば良かったのですが、効果のほどはよくわかりません。ただし、タイトルが途切れていると見た目がカッコ悪いので、全文表示のタイトルのほうが私は好きです。

注意点としては、プラグインがバージョンアップされる度にこのカスタマイズがリセットされてしまうことです。YARPPはバージョンアップも頻繁に行われますので、毎回忘れずに再カスタマイズしてください。

私は、プラグイン一覧からYARPPの「編集」を選択→「css.php」で検索→「50」を「130（100）」に変更→「2.8」を「9.8」に変更という流れを暗記して、何も見ずに毎回カスタマイズしています。

補足1：関連記事が表示されない原因

よく、YARPPを設定したのに関連記事が表示されないケースがありますが、その場合は「関連スコア設定」を調整してください。

当ブログの場合は「表示する最低関連スコア」を最低ランクの「1」に設定しています。

関連性のある記事よりも「とにかく他の記事が表示されれば良い」という場合は、「1」にすると確実です。あるいは、タイトル、内容、カテゴリーを「検討する」「検討しない」「検討する（重要視）」などで調整しても良いです。

注意するのは「タグ」の設定です。「共有のタグをひとつ（ふたつ）以上必要する」を選択すると、

この設定が「検討する（重要視）」よりも優先されてしまいますので、共通のタグがないと「何も関連記事が表示されない」ということが起きやすいです。

補足2：YARPPが二重に表示されてしまう原因

「関連記事が記事下に2つ表示されてしまう」というご相談がありましたので、原因と対処法を解説します。

原因は表示設定ウェブサイト用の「Automatically display related content from YARPP Basic on:」の横にあるチェックボックスにチェックが入っていることが原因の場合が多いです。デフォルトで「投稿」にチェックが入っていますので、このチェックを外してください。