レンちゃんとペンタ

【プラグインなし】WordPressでページネーション(ページャー)を作る方法

【プラグインなし】WordPressでページネーション(ページャー)を作る方法

Googleの検索ページの下にある「< 前へ 1 2 3 4 5 次へ >」みたいなリンク、ページネーション(ページャー)をWordPressに設置する方法をご紹介。
カテゴリーページやタグページなど、アーカイブ系のページで役に立ちます。

当サイトには、広告が含まれているページがあります。

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

    ページネーション表示のテンプレートタグ

    WordPressでは、テンプレートタグpaginate_links()を使ってページネーションを設置する事ができます。

    // ページネーションを表示するテンプレートタグ
    <?php echo paginate_links(); ?>
    

    実装すると、このようなスタイルのページネーションが表示されます。

    // 10ページあるページネーションの例
    « 前へ 1 … 3 4 5 6 7 … 10 次へ »
    

    paginate_links()のカスタマイズ

    paginate_links()のパラメータを活用すれば、ページネーションのスタイルをカスタマイズする事ができます。
    たくさんあるパラメータのうち、ここでは重宝しそうな物を一部ご紹介。
    全てのパラメータはWordPress公式リファレンスで確認することができます。

    paginate_links()では以下のように、配列としてパラメータ設定を行うことができます。

    <?php
    $args = array(
      'show_all'=> false,
      'end_size'=>1,
      'mid_size'=> 2,
      'prev_next'=> true,
      'prev_text'=> __('&laquo; Previous'),
      'next_text'=> __('Next &raquo;'),
      'type'=> 'plain',
      'before_page_number'=> '',
      'after_page_number'=> ''
    );
    
    echo paginate_links($args);
    ?>
    
    パラメータ 目的 デフォルト値
    show_all 全てのページ番号を表示するか false
    (「…」で省略する)
    end_size ページネーションの両端に表示されるページ数 1
    mid_size 閲覧中のページの両端に表示されるページ数 2
    prev_next 前後のページへのリンクを表示させるかどうか true
    prev_text 前のページへのリンクテキスト « Previous
    (日本語では「« 前へ」)
    next_text 次のページへのリンクテキスト 次へ »
    (日本語では「» 次へ」)
    type ページネーションの出力方法 plain
    before_page_number ページ番号の前につける文言 なし
    after_page_number ページ番号の後ろにつける文言 なし

    show_allパラメータ
    trueにすると、全てのページ番号が表示されます。

    // show_all:falseの場合
    « 前へ 1 … 3 4 5 6 7 … 10 次へ »
    
    // show_all:trueの場合
    « 前へ 1 2 3 4 5 6 7 8 9 10 次へ »
    

    end_sizeパラメータ
    ページネーションの両端の数字をいくつ表示させるかを設定します。

    // end_size:1の場合(左端は1、右端は10を表示)
    « 前へ1 … 4 5 6 … 10 次へ »
    
    // end_size:2の場合(左端は1と2、右端は9と10を表示)
    « 前へ1 2 … 4 5 6 … 9 10 次へ »
    

    mid_sizeパラメータ
    前後のページ番号をいくつまで表示するか決めることができます。 以下は、10ページ中5ページ目を閲覧している状態のサンプルです。

    // mid_size:2の場合(前2ページ(3と4)、後ろ2ページ(6と7)を表示)
    « 前へ1 … 3 4 5 6 7 … 10 次へ »
    
    // mid_size:1の場合(前1ページ(4)、後ろ1ページ(6)を表示)
    « 前へ1 … 4 5 6 … 10 次へ »
    

    prev_nextパラメータ
    前後のページへのリンクを表示するかどうかを決めることができます。

    // prev_next:trueの場合
    « 前へ1 … 3 4 5 6 7 … 10 次へ »
    
    // prev_next:falseの場合
    1 … 3 4 5 6 7 … 10
    

    prev_textとnext_textパラメータ

    前後のページへのリンクテキストを決めることができます。
    prev_nextがtrueになっている必要があります。

    // prev_next:__('&laquo; Previous')
    // next_text:__('Next &raquo;')
    « 前へ1 … 4 5 6 … 10 次へ »
    
    // prev_next:__('前のページへ')
    // next_text:__('次のページへ')
    前のページへ 1 … 4 5 6 … 10 次のページへ
    

    typeパラメータ
    リンクの出力方法を次の3つから選択できます。

    ・plain:リンクのみの出力
    ・list:li要素として出力
    ・array:phpの配列として返します

    <!-- type:plainの場合 -->
    <a href="1ページ目へのリンク">1</a>
    <a href="2ページ目へのリンク">2</a>
    <a href="3ページ目へのリンク">3</a>
    
    <!-- type:listの場合 -->
    <ul>
      <li><a href="1ページ目へのリンク">1</a></li>
      <li><a href="2ページ目へのリンク">2</a></li>
      <li><a href="3ページ目へのリンク">3</a></li>
    </ul>
    

    before_page_numberとafter_page_numberパラメータ
    ページ番号の前後に文字列を足す事ができます。

    // before_page_numberもafter_page_numberも空の場合
    前のページへ 1 … 4 5 6 … 10 次のページへ
    
    // before_page_number: '<'
    // after_page_number: '>'
    前のページへ <1> … <4> <5> <6> … <10> 次のページへ
    

    まとめ

    実装がカンタンでカスタマイズも可能なページネーション。
    ぜひ使ってみてください。

    ちなみにWordPressではこのような感じで、前後のページへのリンクをつけるテンプレートタグもあります。

    前のページへ 次のページへ

    こちらもカンタンなので、サイトやページのスタイルに合わせて使い分けてもいいですね。

    1. Home
    2. 【プラグインなし】WordPressでページネーション(ページャー)を作る方法

    Related Posts