WordPressプラグインの「YARPP」で関連記事を「LinkWithin」風にカスタマイズし表示してみた

たか（@TakasLife）です。
今まで、記事下にzenbackと言うサービスを使って「関連記事」を表示していました。ただ、いつからかサムネイルがうまく表示されなくなり代わりになる物はないかと探していた時に「YARPP」というWordPressのプラグインを使って表示でき、更にSEO的にも良いということを目にしたので早速導入してみました。

「Auto Post Thumnail」を先に有効化が必要
YARPPのテンプレート作成
1. php
2. CSS
まとめ

「Auto Post Thumnail」を先に有効化が必要

今回参考にさせていただいた記事はこちら。

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

WordPressプラグイン「YARPP」と「Auto Post Thumbnail」を使用して関連記事を表示するのにようやく成功した | OZPAの表4
「Auto Post Thumnail」 …

先ずは、@goryugoさんの記事を参考に「Auto Post Thumbnail」と言うWordPressプラグインを有効化します。

その後「Yet Another Related Posts Plugin（YARPP）」ダウンロードし、@goryugoさんの記事を参考に自作テンプレートを使用する設定して下さい。

YARPPのテンプレート作成

LinkWithin風に表示するためにはphpとCSSファイルを作成します。
ちなみに私は、@OZPAさんのコードをほぼコピペさせてもらいました。それでもちょっとうまく表示されなかったので少しいじってます。

php

[php]

こちらの記事もオススメです

CSS

[css]
/* LinkWithin風 */
.related-post{
height:100%;
}
.related-post{
width:600px;
overflow:hidden;
margin-top:5px;
}
.related-entry {
vertical-align: top;
float: left;
width:104px;
font-size: 13px;
min-height: 215px;
margin: 0;<br />
padding-right: 20px;
height: 260px;
}
.related-entry img{
padding:2px;
border: #ccc 1px solid;
width:100px;
}
.related-entry-thumbnail {
width: 100px;
height: 100px;
padding-bottom: 10px;
}
.xxs {
margin:50px 0 4px;
font-size:20px;
color: #333
}
[/css]

私の場合、アイキャッチが横長で縦方向にが短いものとかもありこんな感じに表示がずれてしまっていました。

そのために「related-entry-thumbnail 」と言うクラスでサムネイルを囲って調整してみました。

後は、関連記事を表示したい場所に
[php]

[/php]
を記入します。

まとめ

zenbackやLinkWithinもとても良いサービスなのですがJavascriptで関連記事を表示させています。YARPPを使えばHTMLソースを吐き出してくれるのでSEO的にも有効みたいです。正直、よく分かってませんw。ただ同じような見た目であれば、少しでも何かプラスになれば良いなぁと思い設置してみました。