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上に反映されますか?