夜中にいじってます。WordPressを。
どうも、@OZPA です。

記事の終わりにサムネイル付きで関連記事を表示するブログパーツ「LinkWithin」を導入したのが今月頭。
別に取り立てて不満も無かったのですが、ごりゅご.comの2記事を見てムラムラと
「同じようなカスタマイズやってみたい」
との思いが燃え上がって参りまして、先日ようやっと関連記事の表示を実装いたしました。

先に「Auto Post Thumnail」を有効化しよう

僕が指を咥えて眺めて咥えて眺めてやっぱり咥えていたのが@goryugo さんとこの以下の2記事。

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

関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.com

WordPressのプラグインを二つ使用して、先に挙げたブログパーツの「LinkWithin」風に関連記事を表示させるというカスタマイズ方法。
あの人とぼけてるくせにこういう技術すげえあるんだよ！

で、一度「Auto Post Thumbnail」を有効化せずに「YARPP」のカスタマイズをやってみたところ、これが全くうまくいかない。

まぁ考えてみればあったり前の話で、@goryugo さんの記事ではサムネイルを呼び出すタグが表記されているのに、それが設定されてないんですから…言うなればかやくを入れる前にカップラーメンにお湯を注いでしまったような…そんな感じ…たぶん全然違うけど…

php、cssなど

さて、LinkWithin風の関連記事表記にするのには@goryugo さんの記事に書いてあるphpとcssをほとんど丸ぱくりしたのですが、若干うまくいかなかったので少々カスタマイズ。

php

[php]
<?php if(have_posts()):?>
<p class="xxs">関連記事をお読みあそばしなさいませ:</p>
<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;
line-height:1.5em;
}

.related-entry img{
padding:2px;
border: #ccc 1px solid;
width:100px;
height:100px;
}

.related{
margin-top:20px;
}

[/css]

また、関連記事の表示位置を変更したかったので、表示させたいところに
[php]
<?php related_posts(); ?>
[/php]
を表記しました。

で、できたのがこちら。うん、ばっちり！

LinkWithinでも別に良かったんですが、やはり性的間違えた静的リンクをはき出してくれるこちらの方がSEO的に軍配が上がります。
やってみたい方はそんなに難しくございませんのでレッツトライ！

SNS