Yarppのカスタマイズ　サムネイルの歪みをなおし、レスポンティブデザインにも対応

2013年11月24日

Yet Another Related Posts Pluginのカスタマイズ方法をめもっておきます。

エックスサーバーのお友達紹介プログラム!

Contents

1 YARPPの画像が歪む原因
2 CSSはレスポンティブデザイン対応
3 CSSはレスポンティブデザイン対応(ニューバージョン公開しました)
4 YARPPの「関連スコア設定」方法
5 YARPPで「任意の位置」に関連記事を表示する方法

YARPPの画像が歪む原因

表示設定 > サムネイル

を選ぶと、画像が歪みますよね。リサイズするさいに、横長の画像を使うと、縦横比の関係で画像が潰れます。

うーん、とても美しくない…。。

でも、画像が潰れていないブロガーさんもいますね。

こちらの記事をみたら、手っ取り早く解決できました。似てような記事が出回っていますが、こちらにある記事が大元のようですね。
関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.com

案の定、解決方法はサムネイルの隣にある「カスタム」を利用します。YARPPの最新バージョンは、カスタムを選ぶと、使用しているテーマフォルダ内にYARPPのPHPファイルが生成されます。FTPで確認すると、テーマフォルダ内にPHPファイルのコピー(生成)されていることが確認できます。デフォルトで用意されているカスタムテンプレートは、そのまま使いにくいので、このファイルをカスタマイズしていきます。

カスタマイズの手順は、

YARPPのカスタム設定で、yarpp-template-thumbnail.phpを選ぶ(いくつかテンプレートがありますけどこれかな。オリジナルで作りたい場合は、FTPでyarpp-template-なんちゃら.phpを複製して、yarpp-template-my-customize.phpなんていうファイル名を作ってもOKです。ただ、yarppの管理画面からは、中身のファイル名を参照しているようです。そこの名前を変えると、管理画面から複製ファイルと区別がつくようになります。)
テーマないにあるyarpp-template-なんちゃら.phpファイルを修正
テーマにCSSを追加

ソースコードです。貼付けておきますので、よかったらどーぞ。

<?php if(have_posts()):?>
     <h2>おすすめの関連記事</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; ?>

the_post_thumbnail(“thumbnail”);は、Wordpressのデフォルトだと、メディア設定にある150*150のサムネイルを参照します。

CSSはレスポンティブデザイン対応

次にテーマのCSSを追加。

/*　YARPPのカスタマイズ　*/
.related-post{
     width:100%;
     height:100%;
     overflow:hidden;
     margin-top:5px;
}
.related-entry {
    vertical-align: top;
    float: left;
    width:100px;
    font-size: 12px;
    min-height: 300px;
    margin: 0;
    padding-right: 20px;
}
.related-entry img{
      padding:2px;
      border: #ccc 1px solid;
      width:100px; /* メディア設定の参照した画像サイズを調整 */
}

ポイントはレスポンティブデザインに対応するためにwidth:100%;
こちらをやらないと、スマホで見るとはみでます。

それでも、綺麗に並ばない場合、高さにひっかかることが原因だったりします。長めのタイトルをつける人は、高さもあわせて変えてあげるといいかもしれないです。

min-height: 200px; → min-height: 300px;

PCとスマホで確認して終了。

参考記事：今回のカスタマイズに直接関係ないものもありますが、参考程度に読んだ記事
【WordPress】関連記事プラグインYARPPカスタマイズ（画像表示・PC/スマホ表示切り替えなど）
公式サイト
mitcho > blog > Using Templates with YARPP 3
WordPress › Support » YARPP not using the square thumbnails