【WordPress】いい感じにページネーションを出力する

WordPress 関数 paginate_links() を使って、一覧ページやいろんなところで使いまわせるページネーションコンポーネントを作ります。

ページネーション出力コード

pagination.php

ページネーションの出力部分をコンポーネントに分割しておきましょう。ページネーションファイルpagination.phpを作成します（名前はなんでもいいです）。

<?php

  // 共有引数を設定
  $args['prev_text'] = '&lt;';
  $args['next_text'] = '&gt;';
  $args['mid_size']  = 1;
  $args['type']      = 'array';

  $pagination = paginate_links($args);
?>
<?php if ($pagination): ?>
  <ul class="pagination">
    <?php foreach ($pagination as $page): ?>
      <li class="pagination__item">
        <?php echo $page; ?>
      </li>
    <?php endforeach ?>
  </ul>
<?php endif ?>

上記の共通の引数をコンポーネント側にあらかじめ設定しておきます。次へ前へのテキスト、現ページの左右の数値（数値以上のものは「…」で省略される）は大体サイト内で統一されると思うので、コンポーネント内でまとめて設定しておきます。

（ちゃんと見てませんが、そもそもpaginate_links()のデフォルト値書き換えは filter などが用意されているならそちらを使った方が良いのかも）

typeをarrayにすることで出力 HTML をそこそこコントロールできるので柔軟に作り変えることができます。クラス名などは任意で設定しなおしてください。

これで準備ができたので、あとはページネーションを表示したいところで呼び出すだけです。

呼び出し側

先程の pagination.php を呼び出して使います。

<?php get_template_part('pagination'); ?>

他のオプションを追加する場合

呼び出し側からpaginate_links()へ渡すオプションを追加したいときは、get_template_part()の第三引数に渡します。

例：after_page_numberオプションを追加

<?php 
  $pagination_args = [
    'after_page_number' => '番',
  ];
  get_template_part('pagination', null, $pagination_args); 
?>

get_template_part() の引数の使い方についてはこちらを参照

基本的にページネーションはどのページでも似たような感じになると思うので特に引数を追加することは無いと思いますが、固定ページのフロントページでは引数を追加する必要があったりするので、追加できるようにしています。

スタイル（SCSS）

sass（scss）でいい感じのデザインにしたものも置いておきます。sass といっても変数と{}のネストくらいなので、css 環境の場合は直してみてください。

$paginationMainColor: #f0f1f2;

.pagination {
  display: flex;
  justify-content: center;
}

.pagination__item {
  a {
    transition: 0.3s;

    &:hover {
      background: $paginationMainColor;
      transition: 0.3s;
    }
  }

  // override
 // paginate_links() により生成されるタグの上書き
  .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;

    @media #{$sp} {
      width: 40px;
      height: 40px;
    }
    @media #{$pc} {
      width: 50px;
      height: 50px;
      margin: 0 10px;
      font-size: 18px;
    }

    &.current {
      background: $paginationMainColor;
    }

    &.dots {
      @media #{$sp} {
        width: auto;
      }
    }

    &.prev,
    &.next {
      @media #{$sp} {
        border: 1px solid $paginationMainColor;
      }
    }
  }
}

表示がおかしいとき

paginate_links()は基本的にはグローバル変数$wp_queryの値を元にして表示するページネーションの数などを決定しています。

paginate_links() 一部コード抜粋

    $total   = isset( $wp_query->max_num_pages ) ? $wp_query->max_num_pages : 1;
    $current = get_query_var( 'paged' ) ? (int) get_query_var( 'paged' ) : 1;

ページャーの合計数、現在位置両方とも$wp_queryの値を元にしています。

そのため、記事表示ループ後に$wp_queryをいじるようなことをしたり、query_posts()でクエリを書き換えたり、グローバル変数に影響を与えると出力している記事に対してページネーションがおかしくなる可能性があります。

何かおかしいなと思った時は、関数を呼び出す前に、$wp_queryの中身を確認してみると良いかもしれません。