
WordPressの一覧ページにページネーションがあります。
当サイトで言えばこんなやつ。
このページネーションを使っていて結構思うのが「ほとんど次のページへ進む機能しか使っていないな」ということです。
そりゃもちろん、その他の機能も利用するけど、僕の場合で言えば「次のページ」機能の利用が8~9割のような。
なので、「もう少しスマホでも押しやすい『次のページ』ボタンがあってもいいのかな」ということで、「次のページへの移動専用」のページネーションボタンを作成するカスタマイズ方法を考えてみました。
最終的に、でき上がりはこんな感じになります。
スマホだとこんな感じ。
通常のページネーションと組み合わせて使う形になります。
目次
主な手順

「次のページへのページネーション」を作成する主な手順は以下になります。
- テンプレートファイルにPHPコードを書く
- style.cssに見た目を整えるCSSを書く
特に動作の詳細を気にしないのであれば、コピペ2回で実装出来るカスタマイズになっています。
テンプレートファイルにPHPコードを書く
まずは、テンプレートファイルの「ページネーションが記載されている部分」の上部に以下のコードを貼り付けます。
<?php //「次のページ」ページネーション
//現在のページ番号
global $paged;
if(empty($paged)) $paged = 1;
//ページ情報の取得
global $wp_query;
//全ページ数
$pages = $wp_query->max_num_pages;
if(!$pages){
$pages = 1;
}
//ページが1ページしかない場合は出力しない
if($pages != 1) {
//次のページ番号
if ( $pages == $paged ) {
$next_page_num = $paged;
} else {
$next_page_num = $paged + 1;
}
//現在のページ番号が全ページ数よりも少ないときは「次のページ」タグを出力
if ( $paged < $pages ) {
echo '<div class="pagination-next"><a href="'.get_pagenum_link($next_page_num).'" class="pagination-next-link">次のページ</a></div>';
}
}
?>
style.cssに見た目を整えるCSSを書く
あとは、以下のスタイルシートをstyle.cssにコピペします。
/*「次のページ」ページネーション*/
.pagination-next-link {
background-color: #f9f9f9;
border: 1px solid #ccc;
color: #333;
display: block;
font-size: 1.25em;
text-decoration: none;
width: 100%;
text-align: center;
padding: 12px 0;
display: block;
}
.pagination-next-link:hover {
background-color: #f3f3f3;
transition: all 0.3s ease 0s;
}
CSSは、好みに合わせて変更してください。
動作確認
カスタマイズを終えてインデックスページの1ページ目を表示すると以下のように表示されます。
2ページ目でも、もちろん「次のページ」は表示されます。
で、最終ページになると、当然次のページは無いので「次のページ」は表示されなくなるという簡単な仕様です。
まとめ
こんな感じで、「次のページのみに移動できる押しやすいページネーションボタン」を作成することができました。
現在使用しているページネーションだけで十分事足りている場合は不要ですが、「次のページにスムーズに誘導したい」なんて場合は、良いのかもしれません。
通常のページネーションと併せて利用することで、「次ページネーション」の機能不足も補えるかと思います。
お疲れ様です。
Simplisity2で入れようと思いpager-page-links.phpに入れたところ、出力されませんでした。
どのように修正すればWEB上に反映されますか?