WordPress には、前後記事へのリンクを表示するテンプレートタグ(next_post_link、previous_post_link)がありますが、サムネイルを含めることはできません。前後の記事情報(投稿ID)を取得してカスタマイズすれば何とかなるはず、と思っていたのですが……、何とかなりました。

サムネイル機能を使ってない場合のサンプルコード

<ul>
<?php
$prevpost = get_adjacent_post(true, '', true);
$nextpost = get_adjacent_post(true, '', false);
 
if ( $prevpost ) {
    echo '<li class="prev"><a href="' . get_permalink($prevpost->ID) . '"><img src="/img/' . $prevpost->ID . '.jpg" width="150" height="150" alt="" /><br />' . esc_attr($prevpost->post_title) . '</a></li>';
}
else {
    echo '<li class="next nopost">前の記事はありません</li>';
}
 
if ( $nextpost ) {
    echo '<li class="next"><a href="' . get_permalink($nextpost->ID) . '"><img src="/img/' . $nextpost->ID . '.jpg" width="150" height="150" alt="" /><br />' . esc_attr($nextpost->post_title) . '</a></li>';
}
else {
    echo '<li class="next nopost">次の記事はありません</li>';
}
?>
</ul>
  • 3、4行目:前後の記事情報を取得。引数(1, '2', 3)
    1. true → 同一カテゴリー限定、false → カテゴリー限定なし
    2. 1 がfalse の場合、除外するカテゴリID
    3. true → 前(prev)の投稿、false → 次(next)の投稿
  • 6、11行目:記事があれば
  • 7、12行目:前後の記事へのリンクをサムネ付きで表示
  • 8、13行目:記事がなければ
  • 9、14行目:ありませんと表示

僕は今のところ、Wordpress のサムネイル機能を使わずに、投稿IDで画像を管理しています。なので、上記コードでは img タグを直書きしていますが、サムネ機能を使っている方は <img /> の部分を、 get_the_post_thumbnail( $nextpost->ID, 'thumbnail' ) などに置き換えればOKです。

ただし、すべての投稿に必ずサムネイルを登録していない場合は(記事はあってもサムネイル無し)さらに分岐が必要です。

サムネイル機能を使っている場合の例

注意)このコードは未検証です。サンプルコードだということをご了承ください。

Codexを参考 : has post thumbnail , get the post thumbnail

if ( $prevpost ) {
    echo '<li class="prev"><a href="' . get_permalink($prevpost->ID) . '">';
 
    if( has_post_thumbnail($nextpost->ID) ) {
        echo get_the_post_thumbnail( $nextpost->ID, 'thumbnail' ) . '</a></li>';
    } else {
        echo '<img src="' . get_bloginfo('template_url') . '/images/no-thumb.png" width="150" height="150" alt="" /></a></li>';
    }
}
 
else {
    echo '<li class="prev nopost">前の記事はありません</li>';
}
  • 前の投稿があるか確認
    1. 前の投稿あり:その投稿がサムネイルを持っているか確認し
      1. 持っていれば、サムネイル付きリンクを表示
      2. 無ければ代替画像で表示
    2. 前の投稿なし:「ありません」と表示

なお、投稿日情報が必要な場合は下記のコードで表示できます。
※左側の引数で表示方法を調節できます。

mysql2date( 'Y/m/d', $prevpost->post_date )

腑に落ちない点、疑問点

get_adjacent_post で前後の記事情報を取得していますが、この戻り値には、投稿の中身(本文)や抜粋など、the_post() と同等の内容になっています。つまり、シングルページを開くごとに、常に3ページ分の情報を抱えていることになるのです。(たぶん)

ただ、Wordpress のテンプレートタグ(next_post_link、previous_post_link)も、内部で get_adjacent_post を行っているように見えました。そうすると、気にする必要ないのかな、とも思います。
※このクエリ数は関係ないんですかね?

あるページのデータベースクエリ数を比較
  • 前後記事へのリンクなし:21
  • next_post_link、previous_post_link を利用:25
  • この記事のコードを利用:25

また、hedaer では link rel='prev'link rel='next' のタグが挿入されますが、これも get_adjacent_post を行っているようなのです。

そうすると、どこかに前後の記事の情報が隠れているの?
改めて get_adjacent_post を使わなくても、その情報を取り出せないの?

という疑問が沸いてくるのですが、どう解決したらいいか分からない…。う~む、そのうちフォーラムで質問してみよ。

止めるかもしれませんが一応サンプルです。↓ CSSの調整が中途半端なので、ガタガタに表示されているかもしれません。