WordPressのプラグインYARPPでサムネイル付きの関連記事を表示させる

WordPressYARPP

今こんな感じで表示させています。

僕の場合は関連記事を表示させてたことで、PV/UUが1.2→1.7ぐらいまで上がったし、関連したリンクがページ内にあることで検索エンジンにも優しい感じになると思います。

あと、やっぱりサムネイル付きのほうがいいのでいろいろ調べてやってみました。

リンク先からやり方が若干変わってます。

まずはプラグインをインストールしましょう。
Yet Another Related Posts Plugin for WordPress

インストールしたら設定からYARPPを選択
WordPress設定

関連スコアの設定はお好みで。

表示設定します。
一度に表示する数を設定してphpカスタム、yarpp-template-example.phpを選択します
YARPP設定

次にテーマ編集(プラグイン編集でなく)に移動します。
YARPPをインストールすると右側に項目ができます。
yarpp-template-example.phpを選択しましょう。

WordPressテーマ編集

この中を書き換えます
僕は画像を使ってないページが多いので、Auto Post Thumbnailを使ってもサムネイルができないページがほとんどです。
なのでごりゅご.comのソースからサムネイルがない場合の処理を付け加えました。

<?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"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><?php the_title(); ?></a></div>
<?php else: // サムネイルを持っていないとき ?>
 <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><img src="サムネが無い時の画像のURL" alt="no image" title="no image"/><?php the_title(); ?></a></div>
          <?php endif; ?>
     <?php endwhile; ?>
     </div>
<?php else: ?>
<p>no related post</p>
<?php endif; ?>

あとはCSS。
スマートフォン用と2つつくるのがめんどくさかったので横幅を310にしてますがお好みで調整してください。

.related-post{
     height:100%;
}
.related-post{
     width:310px;
     overflow:hidden;
     margin-top:5px;
}
.related-entry {
    vertical-align: top;
    float: left;
    width:100px;
    font-size: 13px;
    min-height: 235px;
    margin: 0;
    padding-right: 3px;
    line-height:1.5em;
    }
 
 .related-entry img{
      padding:2px;
      border: #ccc 1px solid;
      width:90px;
      height:90px;
}

.related{
      margin-top:20px;
}

YARPPを好きな位置に設置したい時は、YARPP設定から自動表示のチェックを外します。
YARPP自動表示