【WordPress】前の記事・次の記事へのサムネイル付きページめくり機能導入記

time 2015/11/27 　所要時間:約 3 分

folder WordPress

【WordPress】前の記事・次の記事へのサムネイル付きページめくり機能導入記

1 single.phpへソースコードを挿入
2 style.cssへ追記
3 実際の表示を確認してみる

このサイトでは、Nobuoさん制作のWordPressテーマ「マテリアル」を使用していますが、本文の最下部に「前の記事」「次の記事」へのページめくりの機能がなかったので、またまた勝手ながら実装してみました。

今回参考にさせていただいた記事はこちら。

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

画像のように前の記事と次の記事のナビゲーションにサムネイル画像を表示する方法のご紹介です。最新の記事と最古の記事には【ホームへ戻る】のボタンを設置しています。少しでもサイトを訪れて … more

Shufulife

運営されているのは主婦の方なんですね。テーマまで自作されてスゴイな！

とても見た目が良くて、サムネイルも付いているし、完成形が駅のホームにある表示板（←前の駅　次の駅→）みたいな感じで気に入ったので使わせてもらいました！

single.phpへソースコードを挿入

まず前提として、こちらのfunction.phpへの追記が必要です。

【WordPress】「この記事が気に入ったらいいね！しよう」を投稿ページに設置する方法 | 風の羅針盤 | Destination of winds.

このサイトでは、WordPressテーマ「マテリアル」を使用していますが、Facebookのいいねボタンや、Twitterのフォローボタンは右側のサイドバーに標準で搭載されています。

&nbsp…

風の羅針盤 | Destination of winds.

FacebookページいいねやTwitterフォロワーが倍増！バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】

FacebookページやTwitterからの流入が、ブロガーにとっても大切な流入元となっていますよね。そんなFacebookページのいいねやTwitterをフォローしてもらうためのオリジナルSNSボ

ままはっく

これは、PCからのアクセスか、スマホからのアクセスかを判断して条件分岐するためのプログラムの追記です。
但し、function.phpは一文字でも間違うとページが表示できなくなるおそれがあるので、必ずバックアップを事前にとっておいてください！！

基本的にページめくり機能は単一投稿ページにのみあれば必要十分です。トップページやカテゴリなどには標準でページャー機能が付いているので。

こちらのサイトに記載のコードをそのまま貼り付ければいいのですが、どうもマテリアルでそのまま入れてしまうと、スマホ表示でうまくサムネイルが表示できず、行がずれたりして見栄えが良くなかったので、思い切ってスマホ表示の場合はサムネイルを表示しない設定にしてあります。

<?php if (is_mobile()) :?>
<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">前の記事</div>
        <p>' . get_the_title($prevpost->ID) . '</p></a>';
 } else { //前の記事が存在しないとき
 echo '<div id="prev_no"><a href="' .home_url('/'). '" style="text-decoration:none;"><center><i class="fa fa-home">HOME</i></center></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">次の記事</div>
		<p>'. get_the_title($nextpost->ID) . '</p></a>';
 } else { //次の記事が存在しないとき
 echo '<div id="next_no"><a href="' .home_url('/'). '" style="text-decoration:none;"><center><i class="fa fa-home">HOME</i></center></a></div>';
 }
?>
<?php } ?>
</div>
<?php else: ?>
<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">前の記事</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('/'). '" style="text-decoration:none;"><div id="prev_next_home"><i class="fa fa-home">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">次の記事</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('/'). '" style="text-decoration:none;"><div id="prev_next_home"><i class="fa fa-home">HOME</i>
 </div></a></div>';
 }
?>
<?php } ?>
</div>
<?php endif; ?>

<?php if (is_mobile()) :?>

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

<p>' . get_the_title($prevpost->ID) . '</p></a>';

} else { //前の記事が存在しないとき

echo '<div id="prev_no"><a href="' .home_url('/'). '" style="text-decoration:none;"><center><i class="fa fa-home">HOME</i></center></a></div>';

}

if ( $nextpost ) { //次の記事が存在しているとき

echo '<a href="' . get_permalink($nextpost->ID) . '" title="'. get_the_title($nextpost->ID) . '" id="next" class="clearfix">

<p>'. get_the_title($nextpost->ID) . '</p></a>';

} else { //次の記事が存在しないとき

echo '<div id="next_no"><a href="' .home_url('/'). '" style="text-decoration:none;"><center><i class="fa fa-home">HOME</i></center></a></div>';

}

<?php } ?>

</div>

<?php else: ?>

<?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('/'). '" style="text-decoration:none;"><div id="prev_next_home"><i class="fa fa-home">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('/'). '" style="text-decoration:none;"><div id="prev_next_home"><i class="fa fa-home">HOME</i>

</div></a></div>';

}

<?php } ?>

</div>

<?php endif; ?>

これを、

<?php comments_template(); ?>

<div class="space"></div>

<?php comments_template(); ?>

のコメント欄の下に挿入です。

style.cssへ追記

PC及び全体表示用、スマホ用と2箇所へ追記を行います。

PC及び全体表示用

/*--------------------------------
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{
    margin:0 auto;
	float:left;
}

#prev_next #next img{
    margin:0 auto;
	float:right;
}

#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: #b2b2b2;
    border: solid 0px #fff;
    width: 100px;
    height:100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    box-shadow: 0 0 0 3px #b2b2b2;
    -webkit-box-shadow: 0 0 0 3px #b2b2b2;
    -moz-box-shadow: 0 0 0 3px #b2b2b2;
	text-align:center;
}

#prev_next_home:hover{
	background-color: #cccccc;
}

#prev_next_home i{
	color:#FFF;
	margin:10px auto ;
	font-size:16px;
	line-height: 100px;

}

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

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

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{

margin:0 auto;

float:left;

}

#prev_next #next img{

margin:0 auto;

float:right;

}

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

border: solid 0px #fff;

width: 100px;

height:100px;

-moz-border-radius: 100px;

-webkit-border-radius: 100px;

border-radius: 100px;

box-shadow: 0 0 0 3px #b2b2b2;

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

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

text-align:center;

}

#prev_next_home:hover{

background-color: #cccccc;

}

#prev_next_home i{

color:#FFF;

margin:10px auto ;

font-size:16px;

line-height: 100px;

}

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

スマホ表示用

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