※ リニューアル前から存在する記事でレイアウトが崩れていたので簡単ですが、2022年8月5日に修正しました。現在もこちらのコードを使ってWPの構築をしているのでコード自体は問題ないかと思います。
今回はWordPressのホームページ制作に必須なページネーションを説明したいと思います。
それではどうぞ！
ページネーションってなに？
昔の私のWebサイトでいうと画像の部分のことになります。
記事の一覧ページでよく見るこちらのUIですが、サイトによってデザインが違ったり、挙動が違ったりします。
今回紹介するページネーションは、様々なパターンに対応できるものにしましたのでぜひ使ってみてください。
ページネーションのコードを紹介
早速ですがページネーションのコードはこちらになります。
<?php
/**
* pagenation
* ページネーション用
*/
function pagenation($pages = '', $range = 2){
$showitems = ($range * 1)+1;
global $paged;
global $maxPager;
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=\"pagenation\">";
// 「1/2」という表示
// echo "<div class=\"pagenation__result\">". $paged."/". $pages."</div>";
// 前へ、次への件数を取得するために必要な変数準備
$post_type = get_query_var( 'post_type' );
if( empty($post_type) ){ // カスタム投稿とデフォルトの投稿タイプを判別
$allPost = wp_count_posts()->publish;
}else{
$allPost = wp_count_posts($post_type)->publish;
}
// 「前へ」を表示
if( $pages - $paged == 0 ){
$prevPosts = ( $allPost - $wp_query->post_count ) / ($pages - 1);
}else{
$prevPosts = $wp_query->post_count;
}
if($paged > 1) echo "<a class=\"pagenation__prev\" href='".get_pagenum_link($paged - 1)."'>前の".$prevPosts."件</a>";
// ページの番号を表示する
echo "<ol class=\"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( $pages - $paged == 1 ){
$nextPosts = $allPost - (( $pages - 1 ) * $wp_query->post_count);
}else{
$nextPosts = $wp_query->post_count;
}
if($paged < $pages) echo "<a class=\"pagenation__next\" href='".get_pagenum_link($paged + 1)."'>次の".$nextPosts."件</a></div>";
echo "</div>\n";
}
}
?>
使い方は大きく2通り
- 「pagenation.php」など名前をつけて、functions.phpで読み込む
- functions.phpに直接書き込む
どちらでも大丈夫ですが、個人的には読み込んだ方が良いと思います。
そして、functions.phpにごにょごにょした後に以下のコードをページネーションを出したい場所に記述すればひとまずページネーションを使うことができます。
<?php
if(function_exists('pagenation')){
pagenation();
}?>
ページネーションを切り分けて解説
ではここから要点を解説したいと思います。
コードの下に説明を書きましたので参考にしてください。「~~」は省略を表しているのでお気になさらず
<?php
$showitems = ($range * 1)+1;
global $paged;
global $maxPager;
if(empty($paged)) $paged = 1;
if($pages == ''){
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages){
$pages = 1;
}
}
~~
?>
コードの冒頭の部分、ここでは現在ユーザーが開いているページ番号と総ページ数が空だった時の処理をしています。空の場合これ以降の記述がif文によって弾かれるようになっています。
$showitemsという変数は、ページネーションの表示する番号の数になるので調整したい場合はそちらに変更を加えてください。
<?php
~~
if(1 != $pages){
$img_pass = get_template_directory_uri();
echo "<div class=\"pagenation\">";
~~
?>
こちらのif文で、総ページ数が1ページじゃなければ以下を出力しますよ！となっています。
$img_passはページネーションに画像がある場合は使ってください。
<?php
~~
// 「1/2」という表示
echo "<div class=\"pagenation__result\">". $paged."/". $pages."</div>";
~~
?>
「1/2」といった、総ページ数中の現在何ページ目といった記述を表示できます。
<?php
~~
// 前へ、次への件数を取得するために必要な変数準備
$post_type = get_query_var( 'post_type' );
if( empty($post_type) ){ // カスタム投稿とデフォルトの投稿タイプを判別
$allPost = wp_count_posts()->publish;
}else{
$allPost = wp_count_posts($post_type)->publish;
}
// 前のページの記事数を計算
if( $pages - $paged == 0 ){
$prevPosts = ( $allPost - $wp_query->post_count ) / ($pages - 1);
}else{
$prevPosts = $wp_query->post_count;
}
// 「前へ」を表示
if($paged > 1) echo "<a class=\"pagenation__prev\" href='".get_pagenum_link($paged - 1)."'>前の".$prevPosts."件</a>";
~~
?>
「前の〇〇件へ」といった表示ができます。解説用にコメントを少し書き換えましたが、ちょこちょこと計算している感じです。
$prevPostsの中身を変えれば文字列でもなんでも出せるので、シンプルに「前のページへ」とかでもすぐに変更できます。
<?php
~~
// ページの番号を表示する
echo "<ol class=\"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=\"-active\">".$i."</li>":
"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>";
}
}
~~
?>
主要な部分である、番号が並ぶところを表示できます。特に説明はいらないですね。カレント表示のクラス名は自由に変更してください.
<?php
~~
// [...] 表示
if(($paged + 4 ) < $pages){
echo "<li class=\"notNumbering\">...</li>";
echo "<li><a href='".get_pagenum_link($pages)."'>".$pages."</a></li>";
}
~~
?>
ページ数が多い時はこちらを使ってみてください。
if文の条件にあるページ数よりも多くページ数が存在する時に、「… 〇」といった感じで一番最後のページを表示してくれます。便利。
<?php
~~
// 「次へ」を表示
if( $pages - $paged == 1 ){
$nextPosts = $allPost - (( $pages - 1 ) * $wp_query->post_count);
}else{
$nextPosts = $wp_query->post_count;
}
if($paged < $pages) echo "<a class=\"pagenation__next\" href='".get_pagenum_link($paged + 1)."'>次の".$nextPosts."件</a></div>";
~~
?>
前の〇〇件と同じ感じです。計算式だけ微妙に違うので注意してください。
まとめ：2022年8月5日追伸
HTMLとクラス名はいつも同じものを使っています。なので元々クラス名に合わせたHTMLやCSS(scss)を用意しておけば毎案件コピペで終わります。WordPressに以降する際も最初からコードを合わせているので特にすることはありません。
年間何十サイト作っていますが、このコードでデザインを再現できなかったことがないので問題なく使えるシーンが多いと思います。
必要の無い機能はコメントアウトしておいておいたり、ol要素の外は順番を自由に変えたりできるので自分の作ったデザインに合わせてカスタマイズしてみてください。
ただ1点だけ、固定ページ等にページネーションを追加する場合は少し工夫が必要です。
元々pagesの値が設定されていなテンプレートなので、$wp_query->max_num_pages等が取得できません。
別で記事でも書こうと思います。
少しでもWeb制作初心者の方のためになればと思います。