【WordPress】前の記事・次の記事にサムネイル画像を表示する

公開日： 2014/11/12

前の記事と次の記事にサムネイルを表示する

画像のように前の記事と次の記事のナビゲーションにサムネイル画像を表示する方法のご紹介です。最新の記事と最古の記事には【ホームへ戻る】のボタンを設置しています。少しでもサイトを訪れてくださった方の滞在時間を延ばすのが目的ですｗ

設置は簡単！コピペするだけ！

ブログの記事に設置するのでsingle.phpに記述します。STINGER5では＜!–ページナビ–＞以下を書き換えてください。

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>

<?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">

' . 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">

' . 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>

アイキャッチを設定していない記事には画像は表示されません。

ホームへ戻るのところにはFont Awesomeのアイコンフォントを使用しています。

コードの説明

上記のコードはHTML5用のコードです。HTML5サイトではaタグに直接idやclassを付けられるようになったり、aタグでdivを囲めるようになりました。こんな感じのコードが書けてしまうのです。

＜a href=”http://shufulife.com/” ＞＜div class=”blog”＞●●●＜/div＞＜/a＞

こうすることによりdivのなか全体どこでもクリックできるのです。

aタグの中にdivを置ける

divの中のどこでもクリックできるというのはクリックの領域が広がる、つまりスマホでのユーザビリティーが向上するんですね。

ATTENTION

しかしdivの中にさらにaタグを設置する場合にはエラーを吐き出すので注意！aタグをさらに置きたいときはJqueryを使うやり方がいいようです。

HTML5では、div要素やh要素、p要素などのブロックレベル要素をa要素で囲っていいんです。 | MJ-WAVE.COM

詳しい説明はまた次の機会に。

HTML5以外のサイトの場合、今回わたしも参考にさせていただいたこちらのサイトがわかりやすくコードの紹介が載っています。

http://www.imamura.biz/blog/cms/wordpress/tips/12351

【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】 | 今村だけがよくわかるブログ

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: #f48881;
    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 #f48881;
    -webkit-box-shadow: 0 0 0 3px #f48881;
    -moz-box-shadow: 0 0 0 3px #f48881;
	text-align:center;	
}

#prev_next_home:hover{
	background-color: rgba(244,136,129,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;
}
/*-- ここまで --*/
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

/*--------------------------------

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: #f48881;

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 #f48881;

-webkit-box-shadow: 0 0 0 3px #f48881;

-moz-box-shadow: 0 0 0 3px #f48881;

text-align:center;

}

#prev_next_home:hover{

background-color: rgba(244,136,129,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;

}

/*-- ここまで --*/

}

参考、という形にしてください(^_^;)display: table-cell;でやってるので次の記事と前の記事がないところはスキマ空きます。後でなおします（←たぶん）

PCサイズのbeforeとかafterとかついてる所はホバーでぬるぬる動くアニメーションをCSS3でつけています。

まとめ

前の記事、次の記事への誘導に限らず画像が付いている方が目を引きますし、クリックにもつながります。特にスマホ記事を見ている場合テキストをクリックするのってなんかストレス感じます。指に力が入るっていうか。

今回ご紹介したaタグでブロック要素を囲む方法はトップページやアーカイブ、サイドバーの記事一覧にも使えると思いますよ。

それではちゅんこ@shufulifeがお送りしましたー

- WordPress

: 【WordPress】ページごとに個別のCSSやJavaScript、meta descriptionなどを追加する方法

WordPressでこの投稿ページだけデザインを変えたいとか、この固定ページだけ …

: 【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方

最近はアイコンフォントを使ったサイトを多く見かけるようになりましたね。最初アイコ …

: 【WordPress】Jetpackの[パブリサイズ共有]と[共有]は自動でOGPを設定します

WordPressの搭載機能満載のJetpack。ツイッターとフェイスブックペー …

: [STINGER5カスタマイズ]引用-blockquote-の【“】をアイコンフォントに変えてみた

こんにちは、ちゅんこ@shufulifeです。STINGER5のblockquo …

: 【WordPress】プラグインなしでカスタム投稿タイプを追加する方法(STINGER5対応)

WordPressにはカスタム投稿という通常の投稿記事とは別に自分で作った投稿タ …

: 【WordPress】カスタムメニューのクラスやidを削除したり、liに任意のクラスを付けたり。

カスタムメニューにはデフォルトでは、＜div＞やらわけのわからないクラス名がごち …

: 【WordPress】超簡単にキャプチャとサイト名を一緒に表示する方法

簡単にリンク先のスクショ画像を埋め込めるプラグイン[Browser Shots] …

: 横から出てくるメニューを実装できるJQuery『Sidr』に閉じるボタンを設置する

スマホサイトのメニューを実装するのに人気のあるJQueryプラグイン『Sidr』 …

: WordPressの更新はローカルで試してから！XAMPP導入とWordPressのインストール

『WordPress 4.0 が利用可能です ! 更新してください。』あせって更 …

: Google Analytics Dashboard for WPをちょっと使いやすくする方法

Google Analyticsのアクセス解析をWordPressのダッシュボー …

【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ

ホーム

【WordPress】前の記事・次の記事にサムネイル画像を表示する

設置は簡単！コピペするだけ！

single.phpへの記述

コードの説明

cssに記述

まとめ

ご購読ありがとうございます

関連記事