このサイトでは、Nobuoさん制作のWordPressテーマ「マテリアル」を使用していますが、本文の最下部に「前の記事」「次の記事」へのページめくりの機能がなかったので、またまた勝手ながら実装してみました。
今回参考にさせていただいた記事はこちら。
http://shufulife.com/prev-next/
運営されているのは主婦の方なんですね。テーマまで自作されてスゴイな！
とても見た目が良くて、サムネイルも付いているし、完成形が駅のホームにある表示板（←前の駅 次の駅→）みたいな感じで気に入ったので使わせてもらいました！
single.phpへソースコードを挿入
まず前提として、こちらのfunction.phpへの追記が必要です。
FacebookページいいねやTwitterフォロワーが倍増！バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】
これは、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 comments_template(); ?> <div class="space"></div>
のコメント欄の下に挿入です。
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 #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;
}
/*-- ここまで --*/
これで作業完了です。
実際の表示を確認してみる
投稿ページの本文最後、コメント欄と関連記事の間にこのようなサムネイル付きのページめくりリンクが表示されます。
いい感じ！ビューティフル～
そして、最後のページ来ると・・
ここは終点ですよ～的な感じでトップページへのリンクが表示されます。
マテリアルは視覚的にとてもフラットで、画像の使い方もメリハリが付けられるので、ただ単にテキストと矢印だけではつまらないなーと思ってチョイスしてみました。
ちゅんこさんのサイトは自作テーマのようですが、有名なStingerとかでも使えるみたいですから、サムネイル付きのページ送り機能を追加してみたい方は試してみてください！