0%

Programmingプログラミングナレッジ

Posted:2020.02.15

WordPressでmax_num_pagesとget_query_varを使ってページネーションを実装する

WordPress案件でのサイト制作においては、ほぼ必須と言える要件としてページネーションの実装があります。よく使うUIなので、いつもコードを使いまわすことが多いので、メモとして残しておきたいと思います。今回紹介するページネーションはプラグインを使わず、直接コードを書いて実装する形になるのですが、カスタマイズしやすいので気に入っています。

 

ページネーションの仕様についてですが、今回は次のような挙動をする一般的なページネーションになります。

・「先頭ページ」「前のページ」「次のページ」「最終ページ」「現在のページから3つの目次」の最大で7つのリンクが表示される
・1ページ目では「先頭ページ」「前のページ」のリンクは非表示に
・最終ページでは「最終ページ」「次のページ」のリンクは非表示に
・2ページ目以降が存在しない場合はページネーション自体も非表示に
・目次の部分の表示リンク数は変数で調整できる

 

それでは実際のコードを見ていきたいと思います。まず、ページネーションを作成する上で必要となる情報があります。それは「合計ページ数」と「現在のページ順」になります。この2つの情報がないとページネーションは実装できません。

【PHP】

<?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 != 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; $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ページ目が存在するかを判断します。存在する場合にはページネーション自体を出力するようにします。

 

次の条件分岐では先頭ページかどうかを判断します。先頭ページでない場合のみ「先頭ページ」「前のページ」を出力します。そして、真ん中には現在のページからの目次を表示させます。事前に表示リンク数を変数に入れておき、その数だけfor文で繰り返していきます。最大ページになる直前で数を調整しないと、存在しないページ順が表示されてしまうので注意します。最後の条件分岐では最終ページかどうかを判断します。最終ページでない場合のみ「最終ページ」「次のページ」を出力します。

 

実際に出力される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でページネーションを実装する場合には是非試してみてください。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】