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で見た目を整えます。
あとがき
ほぼコピペで使用できますので、記事下などにナビゲーションを設置しようとお考えの方は、ぜひ参考にしていただければと思います。