マイホームWEB内覧会

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

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

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

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

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

ブログの記事に設置するので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>

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

ホームへ戻るのところには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以外のサイトの場合、今回わたしも参考にさせていただいたこちらのサイトがわかりやすくコードの紹介が載っています。

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;
}
/*-- ここまで --*/
}

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

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

まとめ

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

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

ちゅんこ

ちゅんこ

日々の生活を送る上で、「いかに手を抜くか」という不真面目なことを真面目に探求している意識低い系主婦です。東京ではない首都圏に極小ペンシルハウスを建築し、夫と娘（小1）と仲睦まじく暮らしています。好きな食べ物は舟和の芋ようかん。

関連するキーワード

4 件のコメント

  1. ありがたく使わせていただいてますm(__)m
    今更ですが……同一カテゴリ内で移動する場合は３～４行目を次の記述に変更すればいけます
    $prevpost = get_adjacent_post(true, ”, true); //前の記事
    $nextpost = get_adjacent_post(true, ”, false); //次の記事

    返信

  2. ちゅんこさん！ありがたーくコード使わせていただきました。
    同じカテゴリーで前へ次へと動かしたいんですが、どこに『true』を入れればよいのでしょうか？？？
    もう何日も悩んでます(涙)

    返信

    • 申し訳ありません。
      こちらはカテゴリ関係なく前の記事／次の記事へのリンクのコードでして。

      同カテゴリー内での前の記事／次の記事へのリンクに関しては調べたことがないのでわかりません。
      お役に立てず申し訳ございません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です