YARPPのサムネイルで表示されるタイトル文字数を変更する方法

サムネイル表示の例
投稿した記事の下に関連した投稿リストを表示するWordpressの人気プラグイン「Yet Another Related Posts Plugin(YARPP)」。サイトの回遊率も上がり、ブログを開設する方にとってとても有益なプラグインではありますが、リンク表示を「サムネイル」で設定した際に、タイトルの文字が途中で切れてしまうことが多々あります。タイトルが途中で終わってしまっては、関心を持っていただけるはずのサイト訪問者に伝わらない可能性がありますから、適切に表示できるようにカスタマイズすることをおススメします。ここでは、Yet Another Related Posts Plugin(YARPP)で、タイトルがすべて表示できるようにカスタマイズする方法を紹介します。

スポンサードリンク

Yet Another Related Posts Plugin(YARPP)の初期設定での表示

YARPPで表示方法を「サムネイル」にした際の初期設定での表示では、以下のようにタイトルが切れてしまいます。私のサイトを初期設定のまま表示させた場合、以下のようになります。
YARPPの関連記事のデフォルト表示
「Wordpressの最新記事にサムネ」や「Google AdSenseの広告」「Wordpressのhead要素をきれ」では何についての記事だかわかりませんよね。この表示を解消し、タイトル部分をすべて表示させるようにします。

YARPPのカスタマイズ方法

Yet Another Related Posts Plugin(YARPP)でタイトルを表示させるためのカスタマイズは簡単です。ほんの数分。数ステップで完了することができます。

YARPPの編集画面に進む

YARPPのカスタマイズはプラグインの編集画面から行います。まずはインストール済みのプラグイン一覧ページから、Yet Another Related Posts Plugin(YARPP)の編集画面に進みます。

YARPPの編集画面に進む

CSSを編集する

編集画面では、CSSの編集を行います。いくつもあるファイルの中から、「yet-another-related-posts-plugin/includes/styles-thumbnails.css.php」を選択します。

サムネイル表示領域の高さを変える

YARPPでサムネイル表示する領域の高さを変更します。
ファイル内に以下のソースがあります。

$height_with_text = $height + 50;

この「50」の部分を大きな数字にすればするほど高さを出すことができます。
たとえば、以下のようにします。

$height_with_text = $height + 150;

150あれば大抵のタイトルをカバーできると思いますが、ご自身のサイトに合うよう、実際にプレビューしながら調整していただくのがよいと思います。120でも十分な場合もあります。

記事の文字数の制限をとる

表示領域の高さを変更したら今度はタイトルがすべて表示できるように設定を変更します。
ファイル内に以下の記述がありますので、それを丸ごととってしまうか、コメントアウトします。

max-height: 2.8em;

タイトルがすべて表示

以上のステップで、「Yet Another Related Posts Plugin(YARPP)」のサムネイル表示でタイトルがすべて表示されるようになりました。これで、潜在的に関心のある訪問者に過去の記事をしっかりレコメンドできます。サイト回遊率アップにつながりますのでぜひ導入してみてください。
YARPPでタイトルがすべて表示できるようになった

スポンサードリンク