【WordPressメモ】関連記事を表示してくれるプラグイン「YARPP」の表示をカスタマイズしてみた

WordPressサイトで人気のプラグイン、「YARPP（Yet Another Related Posts Plugin）」の表示をもう少しバランス良く表示させたかったので、カスタマイズしました。

修正したのは主に下記２つ。

• タイトルの文字数を45文字に
• ４つの関連記事をバランス良く配置

元々は、こんな感じで左に寄っていて、表示される文字数も15字程度しか表示されない状態。

それを、こんな感じに変更しました。

以下、備忘録として修正内容と方法をメモ。

WordPressプラグイン「Yet Another Related Posts Plugin」のカスタマイズ手順

こちらの記事を元にカスタマイズさせていただきました。（ソースコードもありがたく使わせていただきました。）

1. YARPPのプラグインをまだ使っていない人はインストール・有効化
2. WordPressの管理画面で、[プラグイン] > [Yet Another Related Posts Plugin] > [設定] をクリック
3. 一度に表示する関連記事数をお好みで指定（関連記事に表示できる数を調整できます。元記事の方は８記事にされていますが、私は４記事にしました。）
4. [リスト] [サムネイル] [カスタム]のうち、[カスタム] を選択（私の元々の設定は、サムネイルにしていました。）
5. WordPressダッシュボードの [外観] > [テーマの編集] > yarpp-template-thumbnail.php というPHPファイルを選択

yarpp-template-thumbnail.phpのソースコードを変更

yarpp-template-thumbnail.phpのソースコードをすべて削除して、こちらの記事から拝借したソースコードを貼り付けました。

私の場合、下記を好みで変更させていただきました。

• 見出しをh4からh3に変更
• 見出しの文言を「おすすめ関連記事」から「この記事を読んだ人は、こんな記事も読んでいます」に変更
• タイトルの表示文字数を30文字から45文字に変更

<?php if(have_posts()):?><h3>この記事を読んだ人は、こんな記事も読んでいます</h3> <div class="related-post">  <?php while(have_posts()) : the_post(); ?> <?php if(has_post_thumbnail()):?> <div class="related-entry"><div class="related-thumb"> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <?php the_post_thumbnail("thumbnail"); ?> </a>  </div><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">  <?php  if(mb_strlen($post->post_title, 'UTF-8')>45){$title= mb_substr($post->post_title, 0, 45, 'UTF-8');echo $title.'…'; }else{ echo $post->post_title; }  ?>  </a></div>  <?php endif; ?>  <?php endwhile; ?>  </div> <?php else: ?><?php endif; ?>

[ファイルを更新]を押して、次に移ります。

style.cssを編集

私はXeory Baseというテーマをカスタマイズして使っています。なので、子テーマ内にあるstyle.cssに下記のコードを追加。

元の記事のソースコード通りにするとフォントサイズが少し大きかったので、1.3remから1remに変更しました。

.related-post{ width:100%; overflow:hidden; margin-top:5px; font-size:0;}.related-entry { vertical-align: top; display:inline-block; width:33.33%; font-size: 12px; font-size: 1rem; line-height: 1.4; margin-bottom: 12px; padding: 0 0.5%;}.related-entry img{ border: #ccc 1px solid; padding:2%; width:100%;}@media screen and (min-width: 30em) {.related-entry { width:25%; font-size: 12px; font-size: 1rem; line-height: 1.4;}}

変更後、綺麗に表示されるようになりました。

さいごに反省点メモ

綺麗に表示されるようになって喜んだと同時に、反省点がひとつ。

ブログの件名が長くなりがちだということに気付かされました。45文字表示しても足りないものがあったり。

Googleの検索結果上では、PC上では日本語・全角で32文字・スマホでは20文字を超えると「…」という表記になってしまうため、大事なメッセージは前半に入れ込んだ方が良さそうです。

記事の数を変えるなど、バランスを整える場合は、こちらの参照元の記事をご確認ください。

この記事に関連したおすすめ書籍

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

石川栄和, 大串 肇, 星野邦敏

インプレス

販売価格 ￥1,706(中古: ￥ 1,298)

Amazonで詳細を見る

SEOに強い Webライティング 売れる書き方の成功法則64

ふくだ たみこ

ソーテック社

販売価格 ￥2,138(中古: ￥ 1,800)

Amazonで詳細を見る