スポンサーリンク

20121107-072613.jpg

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

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

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

Yet Another Related Posts Plugin for WordPress

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

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

関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.com
WordPressプラグイン「YARPP」と「Auto Post Thumbnail」を使用して関連記事を表示するのにようやく成功した | OZPAの表4
はみ出し回避!関連記事を表示できるLinkWithinやYARPPをレスポンシブWebデザインに最適化 | Web | あきらWeb

みなさんすごいなぁ。:゚(;´∩`;)゚:。
ありがとうございます!

ということで、手順は 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)App
カテゴリ: 仕事効率化, ユーティリティ
販売元: 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%;

のところですね。

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

④ WordPressのアイキャッチ画像の設定をしてない人は各記事のアイキャッチの設定

今までの ①〜③ の手順で画像が表示されている人は問題ないんですが、上記の設定で画像を表示させるには WordPress の「アイキャッチ画像」機能を使っているというのが前提になります。
私は今まで「アイキャッチ画像」を設定していなかったので、全部一遍に プラグイン を使って設定しました。

参考にさせていただいたのはこちらの記事!φ(`д´)

新しい記事も過去の記事も全部自動でアイキャッチを作成してくれるAuto Post Thumbnail | ごりゅご.com

こんなプラグインがあるんだなぁ…(・_・;

WordPress › Auto Post Thumbnail « WordPress Plugins

これをインストールし、WordPress のプラグイン設定画面からボタンをポチッと押すだけ!

超簡単!(」°ロ°)」

最後に、WordPress の設定画面から YARPP の設定を変えます。

これで無事に YARPP で画像が設定されるようになりました。

これで寂しかった記事後のエリアが、少しはいい感じの雰囲気になったかな?(^◇^;)

それではまた!

written by ノリロウ

スポンサーリンク

かつて、こんな物語もありました…

≫≫ 最新の記事一覧へ

≫ Thank you for coming to NORIROW'S REPORT!