WordPressインデックスページに「次のページ」のみに移動する「次ページネーション」を作成するカスタマイズ方法

WordPressの一覧ページにページネーションがあります。

当サイトで言えばこんなやつ。

寝ログのページネーション

このページネーションを使っていて結構思うのが「ほとんど次のページへ進む機能しか使っていないな」ということです。

そりゃもちろん、その他の機能も利用するけど、僕の場合で言えば「次のページ」機能の利用が8~9割のような。

なので、「もう少しスマホでも押しやすい『次のページ』ボタンがあってもいいのかな」ということで、「次のページへの移動専用」のページネーションボタンを作成するカスタマイズ方法を考えてみました。

最終的に、でき上がりはこんな感じになります。

次のページページネーション(PC)

スマホだとこんな感じ。

次のページページメーション(スマホ)

通常のページネーションと組み合わせて使う形になります。

スポンサーリンク
レクタングル(大)広告

主な手順

「次のページへのページネーション」を作成する主な手順は以下になります。

  1. テンプレートファイルにPHPコードを書く
  2. style.cssに見た目を整えるCSSを書く

特に動作の詳細を気にしないのであれば、コピペ2回で実装出来るカスタマイズになっています。

テンプレートファイルにPHPコードを書く

まずは、テンプレートファイルの「ページネーションが記載されている部分」の上部に以下のコードを貼り付けます。

一般的なテーマであれば、「ページネーションコード」はindex.phpなどにあると思います。

style.cssに見た目を整えるCSSを書く

あとは、以下のスタイルシートをstyle.cssにコピペします。

CSSは、好みに合わせて変更してください。

動作確認

カスタマイズを終えてインデックスページの1ページ目を表示すると以下のように表示されます。

次のページページネーション(PC)

2ページ目でも、もちろん「次のページ」は表示されます。

次のページページネーション(2ページ目)

で、最終ページになると、当然次のページは無いので「次のページ」は表示されなくなるという簡単な仕様です。

次のページページネーション(最終ページ)

まとめ

こんな感じで、「次のページのみに移動できる押しやすいページネーションボタン」を作成することができました。

現在使用しているページネーションだけで十分事足りている場合は不要ですが、「次のページにスムーズに誘導したい」なんて場合は、良いのかもしれません。

通常のページネーションと併せて利用することで、「次ページネーション」の機能不足も補えるかと思います。