こんにちは、福岡ホームページ制作シンス株式会社のWordPressが好きなちゃんけいです。
人生初のブログは高校生の時にデコログというサービスで、CAPSULEのアルバムmore more moreのパッケージを再現していました。懐かしい…懐かしすぎる…
そんなことはさておき、今回はWordPressでホームページを作っていると必ず出てくるページネーションの仕組みとコードを紹介します。
それではどうぞ！
ページネーションとは
上記の画像にある「1 2 3 次の10件」の部分をページネーションと呼んでいます、ページングとも呼ぶみたいですがどちらもほぼ同じ意味です。
WordPressでは記事一覧ページなどで、次の記事やもっと古い（または新しい）記事を表示する際に使います。
ブログがあるホームページでは必ずと言っていいほど見ることができます。
ページネーションを理解しよう
WordPressでページネーションを実装するには大きく分けて2つの方法があります。
- プラグインを使う
- 自分でPHPを書く
プラグインはとても簡単なので今回は紹介しません。
自分でPHPを書いて実装する方法を紹介します。
これが完成形
完成形のコードがこちら
functions.phpにページネーション用の関数を定義します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | function pagenation($pages = '', $range = 2){ $showitems = ($range * 1)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == ''){ global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages){ $pages = 1; } } if(1 != $pages){ // 画像を使う時用に、テーマのパスを取得 $img_pass = get_template_directory_uri(); echo "<div class=\"m-pagenation\">"; // 「1/2」表示 現在のページ数 / 総ページ数 // echo "<div class=\"m-pagenation__result\">". $paged."/". $pages."</div>"; // 「前へ」を表示 // if($paged > 1) echo "<div class=\"m-pagenation__prev\"><a href='".get_pagenum_link($paged - 1)."'>前へ</a></div>"; // ページ番号を出力 echo "<ol class=\"m-pagenation__body\">\n"; for ($i=1; $i <= $pages; $i++){ if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){ echo ($paged == $i)? "<li class=\"-current\">".$i."</li>": // 現在のページの数字はリンク無し "<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>"; } } // [...] 表示 // if(($paged + 4 ) < $pages){ // echo "<li class=\"notNumbering\">...</li>"; // echo "<li><a href='".get_pagenum_link($pages)."'>".$pages."</a></li>"; // } echo "</ol>\n"; // 「次へ」を表示 // if($paged < $pages) echo "<div class=\"m-pagenation__next\"><a href='".get_pagenum_link($paged + 1)."'>次へ</a></div>"; echo "</div>\n"; } } |
ページネーションを出したい箇所にこちらを記述。
1 2 3 4 | <?php if( function_exists('pagenation') ){ // 関数が定義されていたらtrueになる pagenation(); }?> |
以上の2つのコードで完成です、簡単ですね！
コメントアウトの箇所をみていただくとわかるように、ほぼどんな実装にも対応できるのでは？？という状態にしてあります。
必要のないものは削除してつかってください。
実際に案件でも使っているのですが、このコードを大きく変えることはほとんどありません。
ページネーションの中身を理解しよう
分解して解説していきます。 まずは冒頭の部分。
1 2 3 4 5 6 7 8 9 10 11 | function pagenation($pages = '', $range = 2){ $showitems = ($range * 1)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == ''){ global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages){ $pages = 1; } } |
引数には、$pagesと$rangeを書いています。
その直後にはグローバル変数で$pagedを取得しており、それぞれの変数の役割は以下のようになります。
- $pages：総ページ数
- $range：ページネーションを表示する数を設定する数値
- $showitems：ページネーションを表示する数を設定する数値
- $paged：現在のページ番号
そしてif文の分岐では、$pages( 総ページ数 )が空の場合にグローバル変数$wp_queryのmax_num_pagesを取得して代入します。
$wp_queryの説明を今回は割愛しますが、リファレンスで確認しておくと理解がより深まります。
$rangeと$showitemsを変えることで、「1 2 3」の表示を「1 2 3 4 5」と言ったように表示する数を変更できます。
$pagesと$pagedを使い、ページネーションのリンクを出力します。
本題のページネーションのリンクを生成する箇所の説明です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | if(1 != $pages){ $img_pass = get_template_directory_uri(); echo "<div class=\"m-pagenation\">"; // 「1/2」表示 現在のページ数 / 総ページ数 // echo "<div class=\"m-pagenation__result\">". $paged."/". $pages."</div>"; // 「前へ」を表示 // if($paged > 1) echo "<div class=\"m-pagenation__prev\"><a href='".get_pagenum_link($paged - 1)."'>前へ</a></div>"; // ページ番号を出力 echo "<ol class=\"m-pagenation__body\">\n"; for ($i=1; $i <= $pages; $i++){ if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){ echo ($paged == $i)? "<li class=\"current\">".$i."</li>": // 現在のページの数字はリンク無し "<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>"; } } // [...] 表示 // if(($paged + 4 ) < $pages){ // echo "<li class=\"notNumbering\">...</li>"; // echo "<li><a href='".get_pagenum_link($pages)."'>".$pages."</a></li>"; // } echo "</ol>\n"; // 「次へ」を表示 // if($paged < $pages) echo "<div class=\"m-pagenation__next\"><a href='".get_pagenum_link($paged + 1)."'>次へ</a></div>"; echo "</div>\n"; } |
get_pagenum_link()にページ番号を入れることで、その番号の一覧ページのリンクを取得できます。
$paged( 現在のページ番号 )と$pages( 総ページ数 )の値を使って、各ページのリンクとページ番号をHTMLと共に出力すれば完成です。
まとめ
思ったよりも簡単ですね！
WordPressの関数を先に用意しておけば、制作の時に困ることがなくなって効率化に繋がります。
私自身元になるコードを4年前？に知ってから地道に使いやすいようにカスタマイズしていった結果この形になりました。
自分なりにカスタマイズして使ってみてください。
こちらの記事を参考にさせていただきました。ありがとうございました！
get_pagenum_link：WordPress私的マニュアル
福岡市の中小企業様向けのホームページ制作を得意としております。
