[WordPress] 関連記事プラグイン YARPP にサムネイル画像を表示させてみた。

今さらですが、記事の一番下にあるいわゆる「関連記事」表示のプラグイン Yet Another Related Posts Plugin（YARPP） にサムネイル画像を表示できるようにカスタマイズしてみました。

いわゆるこんな感じのやつですね ↓

これまで、関連記事表示には Zenback 使ってみたり、この YARPP を使ってみたりいろいろしてたんですが、それぞれ良いところがあるものの、肝心の「関連記事の精度」という意味では、YARPP が（細かく設定できるので）優秀のような気がしています。
表示したくないカテゴリとか選べますしね。

ただ、YARPP はデフォルトのままだと文字だけで寂しいので、画像を表示させてみました。

参考にさせていただいたのはこちら！(｀_´)ゞ

みなさんすごいなぁ｡:ﾟ(;´∩`;)ﾟ:｡
ありがとうございます！

ということで、手順は 3つ。（人によっては4つ）

① FTPクライアントで YARPP のファイルをダウンロードし、自分のテーマフォルダにコピー
② コピーした YARPP を自分好みに書き換える
③ css に自分好みの形になるように記述を加える
④ WordPressのアイキャッチ画像の設定をしてない人は各記事のアイキャッチの設定

それではひとつひとつ。

① FTPクライアントで YARPP のファイルをダウンロードし、自分のテーマフォルダにコピー

まず、FTPクライアントで YARPP のファイルをダウンロードします。

場所は、
wp-content/plunins/yet-another-related-posts-plugin/yarpp-templates

ファイル名は、
yarrp-template-thumnail.php

ちなみに私は FTPクライアントは最近これを使っています。

ForkLift 2.5.3（￥1,700）
カテゴリ: 仕事効率化, ユーティリティ
販売元: BinaryNights – BinaryNights LLC（サイズ: 8.2 MB）

上記のファイルをダウンロードしたら、次に自分の使っているテーマフォルダにコピーします。

コピーする場所は、
wp-content/themes/現在使用しているテーマ

ちなみに、ForkLift の場合だったらそのままスライドしてコピーできますね。

② コピーした YARPP を自分好みに書き換える

先ほどコピーした、yarrp-template-thumnail.php を自分好みに書き換えます。

私は先人たちに習って、このように書き換えました。

<?php /*
Example template for use with post thumbnails
Requires a theme which supports post thumbnails
Author: mitcho (Michael Yoshitaka Erlewine)
*/ ?>
<h2 style="margin-top: 3.0em;"><?php if(have_posts()):?>
     <span style="color: #ff9900;">関連してるオススメ記事</span></h2>
     <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 endif; ?>
     <?php endwhile; ?>
     </div>
<?php else: ?>
<!-- 関連してる記事がないときのリンク？-->
<?php endif; ?>

③ css に自分好みの記述を加える

画像を自分好みに表示させるために、CSS に少し手を加えます。

弄った場所は、WordPressの管理画面から、テーマ編集の style.css

ここの一番下に、先人に習って下記の記述を付け加えました。

/* 関連記事画像表示 */
.related-post{
     height:100%;
}
.related-post{
     width:100%;
     overflow:hidden;
     margin-top:5px;
}
.related-entry {
    vertical-align: top;
    float: left;
    width:100px;
    font-size: 12px;
    min-height: 215px;
    margin: 0;
    padding-right: 20px;
    }

 .related-entry img{
      padding:2px;
      border: #ccc 1px solid;
      width:100px;
}

ポイントは途中の

.related-post{
width:100%;

のところですね。

これで、レスポンシブデザインでもはみ出して端が切れずにきとんと表示されるようになりました。