WordPressで前の記事＆次の記事へのリンクをサムネイル画像付きで表示する方法

記事を読み終えた際に前の記事＆次の記事へのリンクを貼っておくと、他の記事も読んでもらえる可能性がグッと高まります。

サイトを訪れてくれたユーザーの滞在時間を延ばすことができたり回遊率をさらに高めることができたりと、前後の記事を読むことによるメリットは意外と侮れません。

ということで、今回はWordPressで前の記事や次の記事へのリンクをサムネイル画像付きで表示する方法を解説していきます。

サムネイル画像が付いていることにより、ユーザーがさらにクリックする可能性も高まってくるので、ぜひとも解説をもとに表示させてみてくださいね。

また、今回は賢威６.２を使用した場合を想定して解説していきますが、基本的に幅広い範囲のテンプレートで応用の効くものですので、参考にしていただけると幸いです。

前の記事＆次の記事へのリンクを表示しよう

当サイトでは、投稿記事の下部に以下のようなリンクを貼っています。

こちらはご覧いただいた通り、読んでいただいた記事の前後にあたる記事リンクを、サムネイル画像付きで表示させているものです。

こうしてわかりやすくリンクを表示させることにより、記事を読んだユーザーをさらに他の記事へと誘導することが可能となります。

デザインとしても非常にスタイリッシュで、個人的に気に入っているところでもありますね。

また、最新の記事と最も古い記事の下部には、以下のようにトップページのリンクが設置されています。

本来であれば前後の記事が存在しない場合、余白部分となってしまうのですが、無駄をなくすためにもトップページへ戻ることができるホームボタンを設置しました。

今回ご紹介するコードを貼り付けるだけで、上記と同様の表示方法でリンクを設置することができますので、さっそく設定に移っていきましょう。

前の記事＆次の記事リンクをサムネイル画像付きで表示する方法

それではさっそく、前の記事と次の記事のリンクをサムネイル画像付きで表示させましょう。

基本的にコードを追記するだけで済むので、簡単に設定を施すことができます。

個別投稿（single.php）にコードを追記する

まず、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『個別投稿（single.php）』を選択しましょう。

そして前の記事＆次の記事のリンクを設置したい場所に、以下のコードを追記します。

<div id="prev_next" class="clearfix">  
<?php
$prevpost = get_adjacent_post(false, '', true); //前の記事
$nextpost = get_adjacent_post(false, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<a href="' . get_permalink($prevpost->ID) . '" title="' . get_the_title($prevpost->ID) . '" id="prev" class="clearfix">
<div id="prev_title">PREV</div>
' . get_the_post_thumbnail($prevpost->ID, array(100,100)) . '
<p>' . get_the_title($prevpost->ID) . '</p></a>';
} else { //前の記事が存在しないとき
echo  '<div id="prev_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i>
</div></a></div>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<a href="' . get_permalink($nextpost->ID) . '" title="'. get_the_title($nextpost->ID) . '" id="next" class="clearfix">  
<div id="next_title">NEXT</div>
' . get_the_post_thumbnail($nextpost->ID, array(100,100)) . '
<p>'. get_the_title($nextpost->ID) . '</p></a>';
} else { //次の記事が存在しないとき
echo '<div id="next_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i>
</div></a></div>';
}
?>
<?php } ?>
</div>

『PREV』『NEXT』の部分を好きな文言に変更することができますので、実際に表示させたい言葉に変更してみても良いですね。

ちなみにアイキャッチ画像を設定していない場合には、画像は表示されない仕様となっています。

design.cssにコードを追記する

後はスタイルシートにて、見た目を整えていくだけです。

先ほどと同じく、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択し、以下のコードを追記しましょう。

/*--------------------------------
PREV NEXT
---------------------------------*/
#prev_next{
width:100%;
margin: 36px 0 24px;
padding:0;
display: table;
}
#prev_next  #prev, #prev_next  #next{
width: 50%;
padding:30px 10px 10px;
border-top:#ccc 1px solid;
border-bottom:#ccc 1px solid;
display: table-cell;
position:relative;
text-decoration:none;
}
#prev_next #prev p, #prev_next #next p{
font-size:90%;
line-height:1.5;
}
#prev_next #prev:hover, #prev_next #next:hover{
background-color: rgba(238,238,238,0.7);
}
#prev_next #prev{
border-right:#ccc 1px solid;
}
#prev_next #prev_title, #prev_next #next_title{
font-size:90%;
top:-1em;
position:absolute; 
border: 1px #ccc solid;
background:#fff; 
text-align: center;
padding:3px;
color:#666;
}
#prev_next #next_title{
right:10px;
}
#prev_next #prev img, #prev_next #next img{
margin:0 auto;
}
#prev_next #prev_no, #prev_next #next_no{
width: 50%;
height:140px;
padding:0 10px;
display: table-cell;
}
#prev_next #prev_no{
border-right:#ccc 1px solid;
}
#prev_next_home{
margin:0 auto;
background-color: #39f;
border: solid 9px #fff;
width: 100px;
height:100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
box-shadow: 0 0 0 3px #39f;
-webkit-box-shadow: 0 0 0 3px #39f;
-moz-box-shadow: 0 0 0 3px #39f;
text-align:center;	
}
#prev_next_home:hover{
background-color: rgba(0,0,255,0.7);
}
#prev_next_home i{
color:#FFF;
margin:10px auto ;
font-size:60px;
}
/*-- ここまで --*/
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*-- ここから --*/
/*--------------------------------------
768px PREV NEXT
--------------------------------------*/
#prev_next #prev, #prev_next #prev::before, #prev_next #prev::after,
#prev_next #next, #prev_next #next::before, #prev_next #next::after {	
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
#prev_next #prev_title, #prev_next #next_title{
padding:3px 10px;
}
#prev_next #next_title{
right:10px;
}
#prev_next #prev img{
float:left;
margin-right:10px
}
#prev_next #next img{
float:right;
margin-left: 10px;
}
/*-- ここまで --*/
}

上記のコードは、当サイトで表示されているものと同様の表示方法になります。

基本的にカスタマイズするとすれば、トップページに戻るためのホームボタンが主な部分となると思いますが、特に色などは簡単に変更することができるのでお好みのものにカスタマイズしてみてくださいね。