【WordPress】「paginate links」を使ってページネーションを実装する

2023年3月23日2024年4月26日

WordPressでページネーションを実装したい！！！

というわけで今回はWordPressでページネーションを実装する方法をお話します。

ページネーションの実装方法

ここではページネーションの実装方法を3つ紹介し、その中でカスタマイズ性の高い
「paginate links」を使用してのページネーション実装について説明します。
ページネーションの実装方法は大きく3つ。

・プラグイン「WP-PageNavi」の使用
・WordPress関数「the posts pagination」を使用する
・WordPress関数「paginate links」を使用する

プラグイン「WP-PageNavi」の使用

プラグイン「WP-PageNavi」は、ページネーションを自動で生成してくれるもので、2023年3月時点で60万ダウンロードを超えている人気にあるプラグインです。
詳しい使い方はこちらのサイト「『WP-PageNavi』の使い方まとめ」をご参考ください。

私は使用したことがないので説明できません（笑）

WordPress関数「the posts pagination」を使用する

WordPress関数である「the posts pagination」を使用することでページネーションが実装できます。
簡単に実装できますが、渡せるパラメータも少ないため、ややカスタマイズしにくい点があります。
詳しくはこちらのサイト「WordPressのthe_posts_paginationでページネーションを表示する」をご覧ください。

私は使用したことがないので・・・以下略。

WordPress関数「paginate links」を使用する

WordPress関数である「paginate links」を使用してページネーションが実装できます。
こちらは渡せるパラメータが多い分、ややこしく見えますがその分応用が利き、デザインに忠実に
ページネーションを実装することができるようになります。

次からはこの「paginate links」の使い方について説明していきます。

「paginate links」の使い方

今回紹介するのは下画像のようなページネーションです。

ではまず、サクッとコードを添付してから説明していきます。

　　　　<?php
            $big = 999999999; // need an unlikely integer
            $paged = max(get_query_var('paged',1),1);
            $args = array(
                'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                'total' => $wp_query->max_num_pages /*全ページ数 */ ,
                'current' =>  $paged/*現在のページ数*/,
                'show_all' => FALSE,
                'end_size' => 1,
                'mid_size' => 2,
                'prev_next' => FALSE,
                'type' => 'array',
            );
            $navs = paginate_links($args);
        ?>
        <?php if($navs) : ?>
            <div class="pager">
                <ul class="pagination">
                    <?php if($paged > 1) : ?>
                        <li class="pre">
                            <?php previous_posts_link('<span>' . "«" . '</span>')?>
                        </li>
                    <?php endif; ?>
                    <?php
                        $i = 1;
                        foreach($navs as $nav) :
                    ?>    
                        <li class="<?php if($paged == $i):?>active<?php endif;?>">
                            <?php echo '<span>' . $nav . '</span>'; ?>
                        </li>
                    <?php $i++; endforeach; ?>  
                    <?php if($paged < $wp_query->max_num_pages) : ?>  
                        <li class="next">
                            <?php next_posts_link('<span>' . "»" . '</span>')?>
                        </li>
                    <?php endif; ?>  
                </ul>
            </div>
        <?php endif; ?>

う～ん。長いし何やってるか分かりづらいな～～。

これはメインクエリの投稿記事のページネーションになります。

というわけで上から順番に見ていきましょう。

コード解説

 $big = 999999999; // need an unlikely integer
 $paged = max(get_query_var('paged'),1);

まずこの2行。
$big = 999999999;　は有りそうもない整数を$bigに代入します。
これは、後ほどURLを生成するときに使います。この整数はどこから来たかというと
関数リファレンス/paginate links　の使用例にあるのでよく分からず使ってる方も多いと思います。
私もその一人でした。

そして$pagedにはmax関数を使用して最大値を取得し、代入しています。
では何の最大値を取得しようとしているか、それがget_query_var(‘paged’)で取得できる「現在のページ」です。
ただ、1ページ目に関してはget_query_var(‘paged’)では0が取得されてしまいます。
0が取得されてしまうとpaginate_linksの挙動がおかしくなるので、整数の1を追加してます。

 $args = array(
                'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                'total' => $wp_query->max_num_pages /*全ページ数 */ ,
                'current' =>  $paged/*現在のページ数*/,
                'show_all' => FALSE,
                'end_size' => 1,
                'mid_size' => 2,
                'prev_next' => FALSE,
                'type' => 'array',
            );
　$navs = paginate_links($args);

ここでは$argsに配列でページネーションの情報を入れていきます。
オプションは上記以外にもいっぱいあるので必要に応じてお使いください。詳細はこちら⇒関数リファレンス/paginate links　

‘base’
ベースのURLを生成します。get_pagenum_link()で与えられた数字を元にページ番号のリンクを返します。
ここではget_pagenum_link($big)とすることで、「http://○○○○/?paged=9999999999/」というリンクを出力します。
そして、str_replace関数を使用することで$bigに該当する箇所を’%#%’で置き換える、という処理をしています。
先程、$bigに有り得ない整数を代入したのはこの置き換えの際に、URLに被らないようにするためです。

‘total’
全体のページ数です。max_num_pagesという関数で取得できます。
メインクエリなら$wp_queryから,サブクエリの場合はそのときにクエリ情報に代入した変数から取得します。
（※サブループのときのコードは後述）

‘current’
現在のページ数です。max関数とget_query_varを使って取得した$pagedを指定しています。

‘show_all’
trueの場合、すべてのページ番号を表示します。基本はfalseにすると思います。初期値もFALSEです。
falseにした場合、次の’endsize’と’mid_size’に値を入力します。

‘endsize’
ページ番号のリスト両端（最初と最後）にいくつの数字を表示するかです。

‘mid_size’
現在のページの両側にいくつの数字を表示するか（現在のページは含まない）です。

‘prev_next’
リストの中に「前へ」「次へ」のリンクを含むかどうかです。
今回は自作で用意しているのFALSEにしています。

‘type’
戻り値の形式を指定します。
今回はarrayで表示を完全にコントロールできるようにページ送りのリンクを配列に入れて返します。

　　　　　<?php if($navs) : ?>
            <div class="pager">
                <ul class="pagination">
                    <?php if($paged > 1) : ?>
                        <li class="pre">
                            <?php previous_posts_link('<span>' . "«" . '</span>')?>
                        </li>
                    <?php endif; ?>
                    <?php
                        $i = 1;
                        foreach($navs as $nav) :
                    ?>    
                        <li class="<?php if($paged == $i):?>active<?php endif;?>">
                            <?php echo '<span>' . $nav . '</span>'; ?>
                        </li>
                    <?php $i++; endforeach; ?>  
                    <?php if($paged < $wp_query->max_num_pages) : ?>  
                        <li class="next">
                            <?php next_posts_link('<span>' . "»" . '</span>')?>
                        </li>
                    <?php endif; ?>  
                </ul>
            </div>
        <?php endif; ?>

さあ、いよいよページネーションの実装のコードになります。

if($paged > 1) は、現在ページが1以上だったら表示するようにしています。
現在ページが1なら、新しい投稿ページ送りは表示されません。※下画像参照

previous_posts_link()は現在のクエリ内で、投稿の一つ前のセットへのリンクを表示します。

投稿クエリは日付の逆順にソートされるのが普通です。そのため通常は、next_posts_link() が古い投稿（セットの終わり方向）を指し、previous_posts_link() が新しい投稿（セットの始まり方向）を指します。

　　　　　　　　　　　<?php
                        $i = 1;
                        foreach($navs as $nav) :
                    ?>    
                        <li class="<?php if($paged == $i):?>active<?php endif;?>">
                            <?php echo '<span>' . $nav . '</span>'; ?>
                        </li>
                    <?php $i++; endforeach; ?>

続いて数字の部分です。foreachを使って$navsに代入された配列を出していくだけです。
foreachを回す前に、$iに1を代入しています。そして、ループ最後に$i++としてループするたびに
$iに1を足して行く処理を行っています。
ループ1回目⇒ $i=1, ループ2回目⇒ $i=2, ループ3回目⇒ $i=3 ･･･みたいな感じ。

この処理をすることで、現在のページを示す$pagedと$iが同じになるので
現在ページに指定のクラス名を付与することで、現在ページのCSSをあてることができます。

 　　　　　　　　　　<?php if($paged < $wp_query->max_num_pages) : ?>  
                        <li class="next">
                            <?php next_posts_link('<span>' . "»" . '</span>')?>
                        </li>

そしてnext_posts_linkで現在のクエリ内で、投稿の次のセットへのリンクを表示します。
if($paged < $the_query->max_num_pages)は、現在ページと総ページが同じ場合は表示しないようにしてます。
つまり、最終ページを表示している場合ですね。※下画像参照

サブループ時のページネーション

サブループのときは、取得するクエリ情報が変わります。
上記で説明した「wp_query」はメインクエリの情報が格納されていますので
サブループのときは自身で設定したクエリ情報格納変数から取得していきます。
こんな感じ↓

<?php 
    $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
    $args = array(
    'post_type' => 'post',
    'posts_per_page' => 12,
    'category_name' => 'news',
    'paged' => $paged,
    );
  ?>
  <?php $the_query = new WP_Query($args); ?>
  <?php if($the_query->have_posts()): ?>
    <?php while($the_query->have_posts()): $the_query->the_post(); ?>
      <li>
        <span><?php echo $cat->cat_name; ?></span>
          <?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail(); ?>
          <?php else : ?>
            <img src="<?php echo esc_url(get_theme_file_uri('images/logo.png')); ?>" alt="デフォルト画像">
          <?php endif; ?>
        <h3><?php the_title(); ?></h3>
        <p><?php the_content(); ?></p>
      </li>
    <?php endwhile; ?>
  <?php endif; ?>

//ここからページネーションの設定

<?php
  $big = 999999999; // need an unlikely integer
  $paged = max(get_query_var('paged',1),1);
  $args = array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'total' => $the_query->max_num_pages /*全ページ数 */ ,
    'current' =>  $paged/*現在のページ数*/,
    'show_all' => FALSE,
    'end_size' => 1,
    'mid_size' => 2,
    'prev_next' => FALSE,
    'type' => 'array',
  );
  $navs = paginate_links($args);
?>
<?php if($navs) : ?>
  <div class="pager">
    <ul class="pagination">
      <?php if($paged > 1) : ?>
        <li class="pre">
          <?php previous_posts_link('<span>' . "«" . '</span>'); ?>
        </li>
      <?php endif; ?>
      <?php
        $i = 1;
        foreach($navs as $nav) :
      ?>
        <li class="<?php if($paged == $i) : ?>active<?php endif;?>">
          <?php echo '<span>' . $nav . '</span>'?>
        </li>
      <?php $i++; endforeach; ?>
      <?php if($paged < $the_query->max_num_pages) : ?>
        <li class="next">
          <?php next_posts_link('<span>' . "»" . '</span>')?>
        </li>
      <?php endif; ?>  
    </ul>
  </div>
<?php endif; ?>

ポイントは、$argsに渡す情報に2点追加することです↓

<?php 
    $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
    $args = array(
    'post_type' => 'post',
    'posts_per_page' => 12,
    'category_name' => 'news',
    'paged' => $paged,
    );
  ?>

上記の赤色のところがサブクエリの場合に追記するコードです。
あとは、メインクエリで「$wp_query」のところを「$the_query」に変更すればOKです！