WordPress 現在の投稿に隣接している前後の投稿を表示する方法

WordPress 現在の投稿に隣接している前後の投稿を表示する方法

WordPress で現在の投稿に隣接している前後の投稿を表示する方法を紹介します。
例えば、投稿の最後に隣接する前後の投稿を表示させたい時に便利な方法です。

前後の投稿を表示する方法

前後の投稿を表示するには 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; ?>

前後の投稿が表示されない場合は、グローバル $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 現在の投稿に隣接している前後の投稿を表示する方法を紹介しました。

スポンサーリンク

私が続けて読みたい関連記事

私が続けて読みたい関連記事