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

2012/05/07 2014/11/16

Number333 2012 05 07 3 07 12

先日、＠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-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; ?>

</p> <h2>関連記事</h2> <p>の部分は好きに変えて大丈夫です。

編集できたら「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」はこんな感じで関連記事が表示されています。

Number333 2012 05 07 3 05 43

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

Number333 2012 05 07 3 07 12

じゃーん！！

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

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

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

更新情報はLINE@で！

ここまでお読みいだきありがとうございます！更新情報や限定コンテンツはLINE@でお届けしていますので、右のボタンから登録をお願いします！あなたのスマホに記事を直接お届け。

CATEGORY - カスタマイズ

total

share!

シェアしてくれるとめっちゃよろこびます。

TOP

TOP

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

「YARPP」を使う理由

下準備

カスタマイズ

CSS

プレビュー