WordPressの投稿ページに前後の記事へのサムネイル付きリンクを設置する方法

WORDPRESS

2019.04.22

2019.04.24

WordPressの投稿ページに前後の記事へのサムネイル付きリンクを設置する方法

今回はWordPressの投稿ページに、前後の記事へのリンクを設置する方法を紹介します。ただテキストリンクを置くだけでも良いのですが、それでは味気無いので、今回は前後の記事のサムネイルも表示させます。ただし、各記事にアイキャッチが設定されていることが前提になります。(アイキャッチが無い場合はソースの中で条件分岐が必要になります。)

これだけでサイトも回遊しやすくなるはずですし、離脱率も下がるのではないでしょうか。コピペできるソースを書いておくので、ご興味があれば一度試してみてください。

設置方法

single.php

single.phpの任意の場所に下記のように記述します。

<?php
$previous_post = get_previous_post();
if (!empty( $previous_post )): 
	$prev_thum = get_the_post_thumbnail($previous_post->ID, array(100,100) );
?>
	<div class="prev-next-wrap">
		<a href="<?php echo get_permalink( $previous_post->ID ); ?>">
  		<div class="prev-post">
	  		<div class="post-thum">
	  			<?php if($prev_thum){ echo $prev_thum; } ?>
			</div>
			<div class="post-info">
				<?php echo $previous_post->post_title; ?>
			</div>
		</div>
		</a>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): 
	$next_thum = get_the_post_thumbnail($next_post->ID, array(100,100) );
?>
		<a href="<?php echo get_permalink( $next_post->ID ); ?>">
  		<div class="next-post">
			<div class="post-info">
				<?php echo $next_post->post_title; ?>
			</div>
	  		<div class="post-thum">
	  			<?php if($next_thum){ echo $next_thum; } ?>
			</div>
		</div>
		</a>
	</div><!--/prev-next-wrap-->
<?php endif; ?>

CSS

基本的なCSSは次の通りです。レスポンシブ対応等、見た目も含めて適宜カスタマイズしてください。

.prev-next-wrap{
	display: flex;
}
.prev-next-wrap a{
	display: block;
	width: 50%;
}
.prev-next-wrap a .prev-post{
	display: flex;
	align-items: center;
	border: #ddd solid 1px;
}
.prev-next-wrap a .next-post{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-top: #ddd solid 1px;
	border-right: #ddd solid 1px;
	border-bottom: #ddd solid 1px;
}
.prev-next-wrap a .post-info{
	font-size: 14px;
	line-height: 1.5em;
	padding: 0 15px;
}
.prev-next-wrap a .post-thum{
	line-height: 0;
}
.prev-next-wrap a .post-thum img{
    max-width: 100px;
}