関連記事を表示したい時って関連記事表示プラグイン｢YARPP｣を入れてる人って多いんじゃないかと思います。
でもYARPPだとサムネイルが出なくて味気ない感じでさみしいなぁと思ってる方も多いはず。

そう感じる人が多いのか、｢LinkWithin｣を導入してるのをよく見かけます。

この両者のいいところを組み合わせることが出来ればベストだ！ということで、YARPPをベースにしつつ見た目をLinkWithinのようにしてみました。

こういった利用の仕方を考慮してかYARPPには基本となるテンプレートが用意されています。

テンプレートがある場所は、
/wp-content/plugins/yet-another-related-posts-plugin/yarpp-templates/

この「yarpp-templates」ディレクトリ内に幾つかのテンプレートがあるので、その中から「yarpp-template-thumbnail.php」をローカルにまず保存します。

エディタで開いてみると分かるんですが、初期状態ではサムネだけがリスト表記されるようになっているので、僕は記事タイトルやdivを追加して以下のように変更。

<div id="relatedpost">
<h3>関連エントリー</h3>
<?php if (have_posts()):?>
<ol class="clrfix">
	<?php while (have_posts()) : the_post(); ?>
		<?php if (has_post_thumbnail()):?>
		<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a></li>
		<?php endif; ?>
	<?php endwhile; ?>
</ol>
<?php else: ?>
<p>関連エントリーはありません。</p>
<?php endif; ?>
</div>

ローカルで編集したこのテンプレートを、現在適応されているテーマフォルダにアップします。

テーマフォルダにアップすると、「YARPP」の設定画面で先ほどアップしたテンプレートが選択できるようになっているはずです。

「テンプレートを使って表示」にチェックを入れ、テンプレートファイルを先ほどの「yarpp-template-thumbnail.php」を選べばOK。

これでHTML自体はエントリーに書き出されるようになります。

あとはCSSで見た目を調整しましょう。僕は以下のように調整しました。
使っているテーマにもよるかと思いますが、僕の場合、サムネが150pxで書きだされて大きかったのでcssで100pxに調整しました。

/* YARPP挿入部分 */
div#relatedpost { margin-bottom:20px; padding:15px; background:#EDEDED; border:1px dotted #dfdfdf; }
div#relatedpost h3 { margin:0px 0px 15px 0px; padding:0px; line-height:1; }
div#relatedpost ol { margin:0px; padding:0px; list-style:none; list-style-image:none; }
div#relatedpost ol li { width:100px; margin:0px 10px 0px 0px; display:inline;  display:-moz-inline-box; display:inline-block; /display:inline; /zoom: 1; vertical-align:top; line-height:1.4;  }
div#relatedpost ol li img { display:block; margin-bottom:10px; width:100px; height:100px; }
div#relatedpost p { margin:0; padding:0; }

ここまで出来ればサムネ付きで関連記事が表示できてるはずです。
素直にLinkWithinを使うのもいいと思いますが、YARPPベースだと表示する関連記事の閾値が自分好みに細かく調整できるのでエントリーが増えた場合を考えるとこちらがベターだと思ってこっちにしました。