WordPressでページネーション を実装する。プラグインなし。 - inokawablog

    WordPressでページネーション を実装する。プラグインなし。

    ページャー

    まずは忙しい人のために、コードだけ

    functions.php

    function pagination( $pages, $paged, $range = 3, $show_only = false ) {
        $pages = ( int ) $pages;
        $paged = $paged ?: 1;
        $text_first   = "<<";
        $text_before  = "<";
        $text_next    = ">";
        $text_last    = ">>";
        if ( $show_only && $pages === 1 ) {
            echo '<div class="pagination"><span class="current pager">1</span></div>';
            return;
        }
        if ( $pages === 1 ) return;    // 1ページのみで表示設定もない場合
        if ( 1 !== $pages ) {
            //2ページ以上の時
            echo '<div class="pagination">';
            // echo '<div class="pagination"><span class="page_num">Page ', $paged ,' of ', $pages ,'</span>';
            //現在のページ数などを表示する場合はこの上のコメントアウトを外す。
            if ( $paged > $range + 1 ) {
                // 「最初へ」 の表示
                echo '<a href="', get_pagenum_link(1) ,'" class="first">', $text_first ,'</a>';
            }
            if ( $paged > 1 ) {
                // 「前へ」 の表示
                echo '<a href="', get_pagenum_link( $paged - 1 ) ,'" class="prev">', $text_before ,'</a>';
            }
            for ( $i = 1; $i <= $pages; $i++ ) {
                if ( $i <= $paged + $range && $i >= $paged - $range ) {
                    // $paged +- $range 以内であればページ番号を出力
                    if ( $paged === $i ) {
                        echo '<span class="current pager">', $i ,'</span>';
                    } else {
                        echo '<a href="', get_pagenum_link( $i ) ,'" class="pager">', $i ,'</a>';
                    }
                }
            }
            if ( $paged < $pages ) {
                // 「次へ」 の表示
                echo '<a href="', get_pagenum_link( $paged + 1 ) ,'" class="next">', $text_next ,'</a>';
            }
            if ( $paged + $range < $pages ) {
                // 「最後へ」 の表示
                echo '<a href="', get_pagenum_link( $pages ) ,'" class="last">', $text_last ,'</a>';
            }
            echo '</div>';
        }
    }

     

    archive.php

    記事一覧を出力している中でループが終わった後に、ページャーを表示したい部分に

    if ( function_exists( 'pagination' ) ) :
        pagination( $wp_query->max_num_pages, get_query_var( 'paged' ) );
    endif;

     

    をコピペ。

    ついでにcssも

    style.css

    .pagination{
    	width: 100%;
    	display: flex;
    	flex-wrap: wrap;
    	padding: 24px;
    }
    .pagination span{
    	margin: auto;
    }
    .pagination a{
    	margin: auto;
    }

     

    はい完成。

     

    こちらのサイトを参考に作成しました。

     

    スタイルを当てるとこんな感じになります。

    スタイルを当てたpager

     

    解説

     

    引数は4つ渡せるようになっています。

    • $pages:全ページ数。(呼び出し側で$wp_query->max_num_pagesを使う)
    • $paged:現在のページ番号。(呼び出し側でget_query_var('paged')を使う)
    • $range:「現在のページ」から左右に表示させるページ数。初期値は2
    • $show_only:全ページ数が1ページしかない時にページャーを表示するかどうか。初期値はfalse

     

    $rangeと$show_onlyが少しわかりづらかったのでまとめておきます。

     

    $rangeは、2だと

    こうなります。両サイドに2つ並びます。

    1だと、

     

    こうなります。表示されない数字があると一番最初に戻る、一番最後に行くが出てきます。

    モバイルのことを考えると、デフォルトの2のままで良いと思います。

     

    $show_onlyは1ページの最大表示数が10だった時に6記事しかなかったらページャーを表示させるかどうかということです。僕はいらないと思うのでfalseにしています。何かページャーを意識して表示させる理由があるのならtrueにしましょう。

     

     

    これだけでプラグインをひつ減らすことができました。やった。