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;
}