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

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

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

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

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

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

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

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

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

スマホだとこんな感じ。

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

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

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

主な手順

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

  1. テンプレートファイルにPHPコードを書く
  2. 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>';
  }

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

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ページ目を表示すると以下のように表示されます。

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

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

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

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

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

まとめ

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

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

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

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

  1. 名前:電車猫 投稿日:2019/11/14(木) 22:03:11 ID:00d82c62e

    お疲れ様です。
    Simplisity2で入れようと思いpager-page-links.phpに入れたところ、出力されませんでした。
    どのように修正すればWEB上に反映されますか?

  2. アバター画像 名前:わいひら 投稿日:2019/11/15(金) 11:47:08 ID:d5229008c

    Simplicityのサポート対象外のものにもあるように、PHPでの編集は、こちら側からは確認のしようがないので、申しわけないですが分からないとしか言えないです。
    実際の編集ファイルや構造の中身を見ないと原因究明するのは難しいです。