WordPressの関連記事表示プラグイン「YARPP」をiPhone・スマホ用にカスタマイズしてサムネイルを表示させるようにしてみた！

先日、＠goryugoさんの「関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.com」という記事で紹介されていた関連記事表示プラグイン｢YARPP｣を使って｢LinkWithin｣っぽくするカスタマイズ | [M] mbdbという記事を読んで感銘を受けたので、コレを応用すればiPhoneやスマホ用のサイトでもうまく関連記事を表示させられるはず！と思い自分なりに少しいじってみました！

良い感じにできたかな(*´∀｀*)照？

「YARPP」を使う理由

これまではiPhone用のページにはちょっと前に流行った「Linkwithin」というプラグインを使っていたのですが、これだとiPhoneで見た時にはみ出てしまうし、カスタマイズしにくいしってことで@goryugoさんの記事をきっかけに「YARPP」に戻すことにしたんですね。いわゆる出戻りですね。

下準備

僕はiPhoneやスマホ用のテーマを作るために「WPtouch」というプラグインを使っています。

「WPtouch」の使い方、導入に関してはこちらの記事で紹介しているので参考にしてみてください。

・超簡単にブログをiPhoneなどのスマートフォンに対応させるWordPressプラグイン『WPtouch』を導入してみました！ | Number333

また、今回関連記事のサムネイルを表示するので自動で記事のサムネイル画像を取得してくれる、「Auto Post Thumbnail」というプラグインを入れておくとすごく便利なのでこちらの記事も紹介しておきます。

・MarsEdit使用者、いやWordPress使用者必見！！勝手にアイキャッチ画像を設定してくれる超便利プラグイン「Auto Post Thumbnail 」！ | Number333

面倒かもしれませんがこの２つを入れるだけでぐっと更新が楽になるのでサクッと入れておきましょう(*´∀｀*)

カスタマイズ

基本的な導入の仕方は先程のmbdbさんの記事の内容と同じなので「テンプレート」をテーマフォルダに入れるところまでやってみてください。

・関連記事表示プラグイン｢YARPP｣を使って｢LinkWithin｣っぽくするカスタマイズ | [M] mbdb

そこまでできたら今度は先程使った「テンプレート」と同じファイル（記事の通りなら「yarpp-template-thumbnail.php」）の内容を編集しましょう。

＊ここからはパソコン用とiPhone用の２つの「yarpp-template-thumbnail.php」というファイルができるので混同しないように注意しましょう。

「yarpp-template-thumbnail.php」の内容を下記のように書き換えてください。

<?php /*
Example template for use with post thumbnails
Requires a theme which supports post thumbnails
Author: mitcho (Michael Yoshitaka Erlewine)
*/ ?>
<?php if (have_posts()):?>
<h2>関連記事</h2>
<ol>
<?php while (have_posts()) : the_post(); ?>
<?php if (has_post_thumbnail()):?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><li><?php the_post_thumbnail(); ?><?php the_title(); ?></li></a>
<?php endif; ?>
<?php endwhile; ?>
<div class="clear"></div>
</ol>
<?php else: ?>
<?php endif; ?>

編集できたら「plugins/wptouch/theme/default」にファイルをアップロードします。

あとはこれをCSSファイルで整えてあげれば完成です。

スタイルシートに下記の内容を追加しましょう。

CSS

/*** 関連記事 *********************************************************/

.related_entries ol li {
    float: left;
    font-size: 11px;
    list-style: none outside none;
    margin: 0px 0px 0px -31px;
    min-height: 66px;
    padding: 3px;
    vertical-align: top;
    width: 292px;
    border: solid 1px;
    border-bottom: none;
    background-color: #f0f2f7;
}
.related_entries ol li:hover {
    background: none repeat scroll 0 0 #F2F2F2;
}
.related_entries ol li img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    height: 60px;
    padding: 2px;
    width: 60px;
    float: left;
    margin: 0px 9px 0px 0px;
    border-radius: 12px;
}

＊「plugins/wptouch/theme/default」内のCSSファイルを編集してください。メインテーマのスタイルシートと間違えないように！

ここまでできたらほぼ完成です！

関連記事を表示させたい場所に、

<?php if(function_exists('related_posts')): ?>
<div class="related_entries">
<?php related_posts(); ?>
</div>
<?php endif; ?>

と記入すれば関連記事が表示されます！(ﾟ∀ﾟ)ﾔｯﾀｰ！

プレビュー

何もカスタマイズしていないデフォルトのままの「YARPP」はこんな感じで関連記事が表示されています。

これに今までのカスタマイズを加えると・・・

じゃーん！！

こんな感じに見やすく関連記事を表示できちゃいます！

テンプレートを編集すればテーマごとに関連記事をカスタマイズできるのでこの方法はめっちゃ便利ですありがとう＠goryugoさん！

この要領で次はパソコン用の関連記事をカスタマイズしていこうかな！