汎用性のあるページネーションの仕組みを簡単に紹介(コピペして使えるよ)

こんにちは、ちゃんけいです。

今回は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=\"current\">".$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>";
    ~~
?>

前の〇〇件と同じ感じです。計算式だけ微妙に違うので注意してください。

まとめ

いかがでしたでしょうか?
基本的に私はいつもこのコードを使っています。なのでHTMLとクラス名はいつも同じものを使っています。デザインを再現できなかったことがほぼないので問題なく使えるシーンが多いと思います。

必要の無い機能はコメントアウトしておいておいたり、ol要素の外は順番を自由に変えたりできるので自分の作ったデザインに合わせてカスタマイズしてみてください。

少しでもWeb制作初心者の方のためになればと思います。それではちゃんけいでした。