すでに私のブログはサムネイル（コンテンツを紹介する縮小画像）だらけです。

• 「最近の投稿」にサムネイル画像を表示させるWordPressプラグイン「Newpost Catch」で「過去の投稿一覧」作成
• 「人気ページランキング」にもサムネイル画像を自動表示させてサムネイルだらけ
• 画像付きRSSブログパーツ「忍者レコメンド」をヘッダーに使ってみました

 

にもかかわらず、各記事の末尾にある「前後の記事へのリンク」にサムネイル画像がないのが寂しく感じていました。

 

そこで、いつものように検索して探してみたところ、さすが WordPress、いっぱい記事がありました。

今回は、その中から、こちらを参考にしてみました。

• 【WordPress】前の記事・次の記事リンクにサムネイルをつける

 

私が使っている WordPress テーマは有料の「BlogPress」です。

• WordPress のテーマ「BlogPress (TCD010)」を採用してみました

 

そこで「テーマの編集」で以下のテンプレートに手を加えました。

BlogPress: 単一記事の投稿 (single.php)

 

この中で「前後の記事へのリンク」はシンプルなコードで

<?php if ($options['show_next_post']) : ?>
<div id="previous_next_post" class="clearfix">
<p id="previous_post"><?php previous_post_link('%link') ?></p>
<p id="next_post"><?php next_post_link('%link') ?></p>
</div>
<?php endif; ?>

となっていました。

 

これを

<?php if ($options['show_next_post']) : ?>
<div id="previous_next_post" class="clearfix">
<p id="previous_post">
<?php $prevPost = get_previous_post();
$prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(80,80) );
previous_post_link('%link', $prevThumbnail.'%title');?></p>
<p id="next_post">
<?php $nextPost = get_next_post();
$nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(80,80) );
next_post_link('%link', $nextThumbnail.'%title');?></p>
</div>
<?php endif; ?>

としてみました。

 

そして適当に CSS を調整した結果がこんな感じです。

 

ついでに以下のページで「前後に記事がない場合」の対応もしておきました。

• 【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】 | 今村だけがよくわかるブログ

以下の「if文」を加えました。

 if ( !$nextPost ) { //次の記事が存在しないとき
 echo '<p class="nopost"><a href="' . network_site_url('/') . '">トップページに戻る</a></p>';
 }

 

とりあえず「トップページに戻る」へのリンクにしておきました。

まあ、一貫性のあるブログっぽくなってきたのではないでしょうか。