WordPressでページャーを表示する時はこれまで「WP-PageNavi」というプラグインに頼っていたのですが、そろそろコード直書きで実装してみることにしてみました。

ググればほぼ同じ内容のコードがたくさん出てきたのですが、そのコードだとエラーが出たりしてちょっと気に食わなかったので、かなりカスタマイズしてみました。

目次

関数本体のコード

まずはページャーを生成する関数をfunction.phpで定義しておきます。

以下のコードをコピペしてください。

/**
 * ページネーション出力関数
 * $pages : 全ページ数
 * $range : 左右に何ページ表示するか
 * $show_only : 1ページしかない時に表示するかどうか
 */
function pagination( $pages = 1, $range = 2, $show_only = false ) {

    $pages = (int) $pages;    //float型で渡ってくるので明示的に int型 へ
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;

    //表示テキスト
    $text_first   = "« 最初へ";
    $text_before  = "‹ 前へ";
    $text_next    = "次へ ›";
    $text_last    = "最後へ »";

    if ( $show_only && $pages === 1 ) {
        // 1ページのみで表示設定が true の時
        echo '<div class="pagination"><span class="current">1</span></div>';
        return;
    }

    if ( $pages === 1 ) return;    // 1ページのみで表示設定もない場合

    if ( 1 !== $pages ) {
        //2ページ以上の時
        echo '<div class="pagination"><span>Page ', $paged ,' of ', $pages ,'</span>';
        if ( $paged > $range + 1 ) {
            // 「最初へ」 の表示
            echo '<a href="', get_pagenum_link(1) ,'">', $text_first ,'</a>';
        }
        if ( $paged > 1 ) {
            // 「前へ」 の表示
            echo '<a href="', get_pagenum_link( $paged - 1 ) ,'">', $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">', $i ,'</span>';
                } else {
                    echo '<a href="', get_pagenum_link( $i ) ,'" class="inactive">', $i ,'</a>';
                }
            }

        }
        if ( $paged < $pages ) {
            // 「次へ」 の表示
            echo '<a href="', get_pagenum_link( $paged + 1 ) ,'">', $text_next ,'</a>';
        }
        if ( $paged + $range < $pages ) {
            // 「最後へ」 の表示
            echo '<a href="', get_pagenum_link( $pages ) ,'">', $text_last ,'</a>';
        }
        echo '</div>', "\n";
    }
}

少し長いコードではあるのですが、中身は特別難しいわけではありません。

前へ」や「次へ」などの表示するテキストは編集しやすいように冒頭部分で変数に代入してまとめてあります。

引数の説明

引数は3つ渡すことができるようにしています。

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

呼び出し側で指定が必須なのは第1引数の$pagesのみ。

ちょっぴり解説

関数内部の処理の長れを簡単に列挙しておきます。

  • 変数の準備
  • 全ページ数が 1ページの場合の処理
  • 「最初へ」 を表示するかどうかの分岐
  • 「前へ」 を表示するかどうかの分岐
  • 「番号表示のページャー」を表示するループ
  • $range以内の番号のみ表示させる
  • 「現在のページ」はHTMLソースが別なので分岐
  • 「次へ」 を表示するかどうかの分岐
  • 「最後へ」 を表示するかどうかの分岐

呼び出し側

ページャーを表示したい場所で以下のように記述。

<?php 
    if (function_exists("pagination")):
        pagination( $wp_query->max_num_pages);
    endif;
?>

だいい第1引数に渡す「全ページ数」は$wp_query->max_num_pagesで取得できます。
$additional_loopを使ってで書かれている記事がたくさんあったがエラーを吐き出していたので、$wp_queryを使っています。

全ページ数が1ページの場合もページャーを表示させる場合

<?php 
    if (function_exists("pagination")):
        pagination( $wp_query->max_num_pages, 2, true);
    endif;
?>

実際のarchive.phpのコード全体像

<?php
get_header();

if(have_posts()):
    while(have_posts()): the_post();

        /* アーカイブページでの表示内容 */

    endwhile;
endif;

wp_reset_query();

/* ページャーの表示 */
if (function_exists("pagination")):
    pagination( $wp_query->max_num_pages );
endif;
    
get_footer();

archive.phpを例にとると、全体的にはこんな感じになります。

query_posts()'paged'を指定する必要はありません。

CSSで見た目を調節

最後にスタイルを整えましょう。

以下は一例です。Flexboxを使って横並びにし、ページャーは正方形になるようにしてます。色はシンプルに白黒。
好きにカスタマイズしてお使いください。

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    position: relative;
    font-size: 13px;
}

.pagination span, .pagination a {
    display: block;
    width: auto;
    margin: 4px;
    padding: 8px;
    border: 1px solid #000;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
}

/* ページ番号 */
.pagination .pager{
    width: 32px;
}

/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current  {
    color: #fff;
    border-color: #000;
    background-color: #000;
}

/* 前へ */
.pagination a.before {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

/* Page x / y */
.pagination span.page_num {
    display: none;
}

「ページ番号 / ページ数」の表示は基本使わないと思うので display:none; にしちゃってます。
(使わないならソースコードから消したほうがいいですが)

上記CSSによって、以下のような見た目になります。

ページャーデザイン例
- Thank you for reading. -

コメント

  • yuka★ より:

    いつも参考に読ませてもらってます!
    質問なのですが、先輩にWordPressのthe_posts_pagination関数を使うといいと教わっていたのですが、こちらのコードとの違いってあるんでしょうか??

    • より:

      コメントありがとうございます!

      動作自体はthe_posts_pagination関数を使用しても変わらないと思いますが、自作の関数を使用した方がどんな処理をしてるか明確で、カスタマイズも柔軟に対応できるのではないかと思います!

コメントする