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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

Before

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

After

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

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

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

  1. YARPPのプラグインをまだ使っていない人はインストール・有効化
  2. WordPressの管理画面で、[プラグイン] > [Yet Another Related Posts Plugin] > [設定] をクリック
  3. 一度に表示する関連記事数をお好みで指定(関連記事に表示できる数を調整できます。元記事の方は8記事にされていますが、私は4記事にしました。)
  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 /* タイトルの表示制限45文字 */ 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に変更しました。


/*画面幅30em未満*/
.related-post{
    width:100%;
    overflow:hidden;
    margin-top:5px;
    font-size:0;
}
.related-entry {
    vertical-align: top;
    display:inline-block;
    width:33.33%;/*3列表示*/
    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%;
}
/*画面幅30em以上*/
@media screen and (min-width: 30em) {
.related-entry {
    width:25%;/*4列表示*/
    font-size: 12px;
    font-size: 1rem;
    line-height: 1.4;
}
}


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

さいごに反省点メモ

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

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

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

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

 

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



SEOに強い Webライティング 売れる書き方の成功法則64
ふくだ たみこ
ソーテック社
販売価格 ¥2,138(中古: ¥ 1,800)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

このブログを書いている人

コメントを残す

*

CAPTCHA