吉祥寺ランチ、自家焙煎コーヒー、デジタル機器などなど、何事も体験すると面白い!

WordPress で前後の記事へのリンクにサムネイル画像を表示させてみました

2014.09.23

13750 Views

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

20140923-04

 

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

20140923-01

 

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

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

 

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

 

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

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 を調整した結果がこんな感じです。

20140923-02

 

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

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

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

 

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

20140923-05

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

スポンサーリンク

同じカテゴリーの記事

コメント

fp32   follow us in feedly

当ブログの WordPress 運営サーバー

楽天市場