五藤隆介(goryugo) 
最近色んなサイトでよく見かける「LinkWithin」
ものすげー簡単に、しかもかっこよく「関連記事」を表示してくれるサービスです。
とは言え、WordPressにはいくらでもイケてる関連記事表示プラグインはあるわけで。
だったらそっちで作っちゃえばいいでないの。
プラグインをカスタマイズする理由
LinkWithin、かっこいいです。しかも簡単です。
以前、私もLinkWithinを使っていたこともありました。
しかし、大抵のWordPressプラグインは、簡単で有るが故に、もうちょっと深く突っ込んでデザインやらなんやらをいじりたい場合は、かえってメンドクサイことになる場合が多いです。
そして、簡単だから、設定出来る項目は少ないです。
YARPP使えば、特定のカテゴリ、タグの記事は関連記事に表示させないとか、関連記事を選ぶ基準を「タイトル重視」「タグ重視」とか色んな設定が出来たりとか、カスタマイズの自由度は高いです。
（私の場合「お知らせ」系の記事、未分類の記事は関連記事に出さないようにして、同じカテゴリの記事を重要視する設定にしてます）
もちろん、それなりにメンドクサイことも多いのですが、ちょっとでもブログをよくするためならそのくらいは頑張るか、って思って、そのくらいは頑張ってます。
Javascriptで関連記事を表示するLinkWithinと違って、プラグインならばHTMLソースを吐き出してくれる、ってのも理由の1つです。
YARPPで関連記事のカスタムテンプレートを作る
てことで、YARPPをカスタマイズしてLinkWithin風（敢えて完全に同じにはしていない）デザインで関連記事を表示させるようにブログをいじってみました。
以下、プラグインのインストールからカスタマイズまでの流れと、php cssのソースです。
YARPPの導入
まずはプラグインのインストール。
Yet Another Related Posts Plugin for WordPress
ここからダウンロードするか、もしくはWordPress内でプラグインの追加を選んで、プラグインをインストール。
テンプレートファイルを自サイトテーマにコピー
YARPPのカスタムテンプレートを使うには、現在のテーマに「yarpp-なんたら」ってテーマファイルを入れてやらないといけない。
手軽なのはデフォルトテーマをまずコピーして持ってくること。
FTPで自分のサーバに繋いで wp-content/plunins/yet-another-related-posts-plugin/yarpp-templates から、yarrp=template-thumnail をダウンロードして
wp-content/themes/現在適用しているテーマフォルダ の中にコピーしてやる
その後、WordPressにログインして、設定＞関連記事（YARPP）の「テンプレートを使って表示」にチェックを入れる。
これで、カスタムテンプレートの準備完了。
YARPPカスタムテンプレートの作成
あとは、テンプレートを自作。
設定するのは２つ。テンプレートのphpファイルと、CSS。
phpファイル
[php]
<?php if(have_posts()):?>
<h3>こちらの記事もオススメです</h3>
<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: ?>
<!– 関連記事がないときのHTMLをここに書く–>
<?php endif; ?>
[/php]
CSSファイル
[css]
/* LinkWithin風 */
.related-post{
height:100%;
}
.related-post{
width:500px;
overflow:hidden;
margin-top:5px;
}
.related-entry {
vertical-align: top;
float: left;
width:104px;
font-size: 13px;
min-height: 215px;
margin: 0;
padding-right: 20px;
}
.related-entry img{
padding:2px;
border: #ccc 1px solid;
width:100px;
}
[/css]
これで、見た目的にもSEO的にもいい感じのLinkWithin風の関連記事の完成。
CSSとかは、あくまでもgoryugo.com用のデザインなので、細かいところは調整して頂ければと思います。
注意
画像付き関連記事を使う場合には、記事にアイキャッチ画像が必要です。
その場合、Auto Post Thumbnailというプラグインを使うと、過去記事も新しい記事も全部アイキャッチ画像を設定してくれて便利です。
