WordPress で「前の記事へ」や「次の記事へ」のリンクを設置する方法

WordPress で「前の記事へ」や「次の記事へ」のリンクを設置する方法

WordPress 現在表示している投稿に「前の記事へ(前へ、BACKなど)」や「次の記事へ(次へ、NEXTなど)」のリンクを設置する方法を紹介します。
例えば、ページの最後に隣接している前後の記事を表示したい時に便利な方法です。

  1. 表示している投稿に「前の記事へ」と「次の記事へ」を表示する方法
  2. アイキャッチ画像を表示したい場合

表示している投稿に「前の記事へ」と「次の記事へ」を表示する方法

前後の記事を表示するには get_previous_postget_next_post を使用します。
通常 WordPress の投稿は日付の逆順にソートされます。
そのため get_next_post が古い投稿、get_previous_post が新しい投稿を指しています。
前後の記事へのタイトル付きリンクを追加する場合、次のコードをテンプレートに追加してください。

<?php // 現在の投稿に隣接している前後の投稿を取得する
$prev_post = get_previous_post(); // 前の投稿を取得
$next_post = get_next_post(); // 次の投稿を取得
if( $prev_post || $next_post ): // どちらか一方があれば表示
?>
<nav class="page-nav">
<?php if( $prev_post ): // 前の投稿があれば表示 ?>
<a href="<?php echo get_permalink( $prev_post->ID ); ?>" class="prev-link">
<span>前の記事へ</span><br /><?php echo get_the_title( $prev_post->ID ); ?>
</a>
<?php endif; ?>
<?php if( $next_post ): // 次の投稿があれば表示 ?>
<a href="<?php echo get_permalink( $next_post->ID ); ?>" class="next-link">
<span>次の記事へ</span><br /><?php echo get_the_title( $next_post->ID ); ?>
</a>
<?php endif; ?>
</nav>
<?php endif; ?>

CSS の指定は各自で行ってください。
前後の投稿が表示されない場合は、グローバル $post が設定されていない場合が考えられます。
表示がうまくいかない場合は、テンプレート内でグローバル $post を正しく取得できているかを確認しましょう。

アイキャッチ画像を表示したい場合

前後の記事のアイキャッチ画像を表示したい場合は get_the_post_thumbnail に前後の投稿IDを指定します。
次のコードは、前の記事のアイキャッチ画像を取得する方法です。

<?php echo get_the_post_thumbnail( $prev_post->ID, 'full'); ?>

最初のコードにアイキャッチ画像の表示を追加した場合は次のようになります。

<?php // 現在の投稿に隣接している前後の投稿を取得する
$prev_post = get_previous_post(); // 前の投稿を取得
$next_post = get_next_post(); // 次の投稿を取得
if( $prev_post || $next_post ): // どちらか一方があれば表示
?>
<nav class="page-nav">
<?php if( $prev_post ): // 前の投稿があれば表示 ?>
<a href="<?php echo get_permalink( $prev_post->ID ); ?>" class="prev-link">
<?php if(get_the_post_thumbnail( $prev_post->ID )): // 前の投稿に画像があれば表示 ?>
<?php echo get_the_post_thumbnail( $prev_post->ID, 'full'); ?>
<?php else: // 画像がなければ代替画像を表示 ?>
<img src="no-image.jpg" alt="">
<?php endif; ?>
<span>前の記事へ</span><br /><?php echo get_the_title( $prev_post->ID ); ?>
</a>
<?php endif; ?>
<?php if( $next_post ): // 次の投稿があれば表示 ?>
<a href="<?php echo get_permalink( $next_post->ID ); ?>" class="next-link">
<?php if(get_the_post_thumbnail( $next_post->ID )): // 前の投稿に画像があれば表示 ?>
<?php echo get_the_post_thumbnail( $next_post->ID, 'full'); ?>
<?php else: // 画像がなければ代替画像を表示 ?>
<img src="no-image.jpg" alt="">
<?php endif; ?>
<span>次の記事へ</span><br /><?php echo get_the_title( $next_post->ID ); ?>
</a>
<?php endif; ?>
</nav>
<?php endif; ?>

まとめ

WordPress 現在表示している投稿に「前の記事へ」「次の記事へ」を表示する方法を紹介しました。