WordPressで前後の記事のナビゲーションをアイキャッチ画像付きで表示させるサンプルコード

WordPressで前後の記事のナビゲーションを表示させるためのサンプルコードをご紹介いたします。ナビゲーションでは、前後の記事の「タイトル」と「アイキャッチ画像」を表示させます。

WordPressで前後の記事のナビゲーションをアイキャッチ画像付きで表示させるサンプルコード

サンプルコードは以下の通りです。以下のコードをsingle.phpなどの記事を表示するテーマファイルに貼り付けます。

事前に、アイキャッチが設定されていない場合に表示するための「noimage.png」という画像をimagesフォルダにアップしておきましょう。

<div class="post-nav-wrapper">
 <?php
 $previous_post = get_previous_post();
 if (!empty( $previous_post )): 
 $prev_thumb = get_the_post_thumbnail($previous_post->ID, 'thumbnail' );
 ?>
 <div class="prev-post">
 <div class="postnav-inner">
 <div class="post-thumb">
 <a href="<?php echo get_permalink( $previous_post->ID ); ?>">
 <?php
 if($prev_thumb){ echo $prev_thumb; }
 else { echo '<img src="'.get_template_directory_uri().'/images/noimage.png" class="noimage">'; }
 ?>
 </a>
 </div><!-- .post-thumb -->
 <div class="post-title">
 <a href="<?php echo get_permalink( $previous_post->ID ); ?>"><?php echo $previous_post->post_title; ?></a>
 </div><!-- .post-title -->
 </div><!-- .postnav-inner -->
 </div><!-- .prev-post -->
 <?php endif; ?>
 <?php
 $next_post = get_next_post();
 if (!empty( $next_post )): 
 $next_thumb = get_the_post_thumbnail($next_post->ID, 'thumbnail' );
 ?>
 <div class="next-post">
 <div class="postnav-inner">
 <div class="post-title">
 <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a>
 </div><!-- .post-title -->
 <div class="post-thumb">
 <a href="<?php echo get_permalink( $next_post->ID ); ?>">
 <?php
 if($next_thumb){ echo $next_thumb; }
 else { echo '<img src="'.get_template_directory_uri().'/images/noimage.png" class="noimage">'; }
 ?>
 </a>
 </div><!-- .post-thumb -->
 </div><!-- .postnav-inner -->
 </div><!-- .next-post -->
 <?php endif; ?>
</div><!-- .post-nav-wrapper -->

アイキャッチ画像が設定されている場合はアイキャッチ画像が、設定されていない場合はnoimage.pngが表示されます。

画像のサイズを変えたい場合は、「get_the_post_thumbnail」関数の引数”thumbnail”を”medium”や”large”等に変更してください。

あとは、CSSで見た目を整えます。

あとがき

ほぼコピペで使用できますので、記事下などにナビゲーションを設置しようとお考えの方は、ぜひ参考にしていただければと思います。