WordPressでmax_num_pagesとget_query_varを使ってページネーションを実装する
最終更新日: Update!!
WordPress案件でのサイト制作においては、ほぼ必須と言える要件としてページネーションの実装があります。よく使うUIなので、いつもコードを使いまわすことが多いので、メモとして残しておきたいと思います。今回紹介するページネーションはプラグインを使わず、直接コードを書いて実装する形になるのですが、カスタマイズしやすいので気に入っています。
ページネーションの仕様についてですが、今回は次のような挙動をする一般的なページネーションになります。
・「先頭ページ」「前のページ」「次のページ」「最終ページ」「現在のページから3つの目次」の最大で7つのリンクが表示される
・1ページ目では「先頭ページ」「前のページ」のリンクは非表示に
・最終ページでは「最終ページ」「次のページ」のリンクは非表示に
・2ページ目以降が存在しない場合はページネーション自体も非表示に
・目次の部分の表示リンク数は変数で調整できる
それでは実際のコードを見ていきたいと思います。まず、ページネーションを作成する上で必要となる情報があります。それは「合計ページ数」と「現在のページ順」になります。この2つの情報がないとページネーションは実装できません。
【PHP】
これでページの目次に合わせたページネーションが完成しました。ちなみにfor文で展開する最初のリンクにcurrentなど現在のページ順を示すclass名などをHTML要素に設定しておくと、現在のページ順がわかりやすくスタイリングすることができますね。WordPressでページネーションを実装する場合には是非試してみてください。
<?php global $wp_query; $pages = $wp_query->max_num_pages; $paged = get_query_var('paged'); $paged == 0 ? $paged = 1: $paged = get_query_var('paged'); $showItems = 3; if($pages != 0 && $pages != 1) { echo '<ul class="pagenation">'; if($paged != 1) { echo '<li class="first"><a href="'.get_pagenum_link(1).'">&lt;&lt;</a></li>'; echo '<li class="prev"><a href="'.get_pagenum_link($paged - 1).'">&lt;</a></li>'; } for($index = 0; $index <= $showItems - 1; $index++) { if($index == 0) { echo '<li class="current"><a href="'.get_pagenum_link($paged).'">'.$paged.'</a></li>'; } else { if($paged + $index <= $pages) { echo '<li><a href="'.get_pagenum_link($paged + $index).'">'.($paged + $index).'</a></li>'; } } } if($paged != $pages) { echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'">&gt;</a></li>'; echo '<li class="last"><a href="'.get_pagenum_link($pages).'">&gt;&gt;</a></li>'; } echo '</ul>'; } ?>ここでは合計ページ数を「$pages」現在のページ順を「$paged」と変数を定義しています。そこでまずは合計ページ数の情報を、WordPressにおいてグローバル変数として扱われる「$wp_query」から取得していきます。合計のページ数は$wp_queryの中にある「max_num_pages」という場所に格納されています。そして、現在のページ順の情報は「get_query_var()」という関数で引数に「paged」を指定することで取得できます。これでページネーション実装に必要となる2つの情報が取得できました。 現在のページ順で先頭ページの場合は0が返ってくるので、ややこしくならないよう先頭ページの場合は変数に1が入るようにしておきます。そして最初の条件分岐で、2ページ目が存在するかを判断します。存在する場合にはページネーション自体を出力するようにします。つまり、合計ページ数が1ページしか存在しない場合にはページネーション自体を表示させない形になります。 次の条件分岐では先頭ページかどうかを判断します。先頭ページでない場合のみ「先頭ページ」「前のページ」を出力します。そして、真ん中には現在のページからの目次を表示させます。事前に表示リンク数を変数に入れておき、その数だけfor文で繰り返していきます。ここでインデックス番号は0から始まるので、表示リンク数から1を引いた数を繰り返す点に注意します。最大ページになる直前で数を調整しないと、存在しないページ順が表示されてしまうので注意します。最後の条件分岐では最終ページかどうかを判断します。最終ページでない場合のみ「最終ページ」「次のページ」を出力します。 実際に出力されるHTMLは下記のようになります。(最大表示の場合)後はCSSなどでデザインに合わせて調整していきます。 【HTML】
<ul class="pagenation"> <li class="first"> <a href="先頭ページへのリンク"> << </a> </li> <li class="prev"> <a href="前のページへのリンク"> < </a> </li> <li class="current"> <a href="現在のページへのリンク"> 2 </a> </li> <li> <a href="現在のページから1ページ先へのリンク"> 3 </a> </li> <li> <a href="現在のページから2ページ先へのリンク"> 4 </a> </li> <li class="next"> <a href="次のページへのリンク"> > </a> </li> <li class="last"> <a href="最終ページへのリンク"> >> </a> </li> </ul>
これでページの目次に合わせたページネーションが完成しました。ちなみにfor文で展開する最初のリンクにcurrentなど現在のページ順を示すclass名などをHTML要素に設定しておくと、現在のページ順がわかりやすくスタイリングすることができますね。WordPressでページネーションを実装する場合には是非試してみてください。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories