【WordPress】プラグインなしでページネーションを実装する方法カスタマイズ自由！【サンプルコード付き】

今回は、カスタムしやすいぺージネーションの作成をした方法を記事にしてみました。
ページネーションの作成は、プラグインを使用する方法もありますが
今回はプラグインは使用しない方法です。

ページネーション実装方法比較
1. wp_pagenavi() の特徴
2. paginate_links() の特徴と使いどころ
paginate_links()での実装サンプル
YouTube

ページネーション実装方法比較

実装方法は、wp_pagenavi()での実装とwp_pagenavi()での実装があります。

wp_pagenavi() の特徴

シンプルで簡単
関数を呼び出すだけでデザイン済みのページネーションが生成されるので、カスタマイズが不要な場合に最適です。
プラグイン「WP-PageNavi」が必要です。
自動的に $wp_query を利用
$wp_query を前提としているため、メインクエリで使用するのが基本です。
WP_Query を使ったカスタムクエリでは、wp_pagenavi() に $query オブジェクトを引数として渡す必要があります。
カスタマイズがやや難しい
デザインの調整にはCSSの上書きが必要で、細かなHTML構造の変更は難しい。

paginate_links() の特徴と使いどころ

柔軟なカスタマイズが可能
HTML構造を自由に変更できるので、独自のデザインを実装したい場合に最適です。
自由にクラス名やアイコンを付与でき、細かな動作調整もしやすい。
メインクエリ・カスタムクエリの両方に対応
$wp_query を利用する場合はそのままでOK。
カスタムクエリの場合は ‘total’ => $query->max_num_pages のように $query を指定する必要があります。
コードの記述量は増えるが、デザインの自由度が高い。

paginate_links()での実装サンプル

今回はは下記のようなページネーションを作成したのでそのコードを記事にしました。
よかったら、参考にしてください。

header.php archive-works.php main.cssを使用しました。

header.php

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
</head>

archive-works.php

<section> 
  <div class="pagenav-wrapper blogpage-pagenav">
    <ul class="pagenav-flex">
      <?php
        $pagination_links = paginate_links(array(
          'total' => $wp_query->max_num_pages,  // $query → $wp_query に変更
          'current' => max(1, $paged),
          'prev_text' => '&lt; Back',
          'next_text' => 'Next &gt;',
          'end_size' => 1,
          'mid_size' => 2,
          'type' => 'array',
        ));

        if ($pagination_links) {
          if ($paged > 1) {
            echo '<li class="pagenav-item duble-arrow">
              <a href="' . get_pagenum_link(1) . '">
                <span class="material-symbols-outlined">keyboard_double_arrow_left</span>
              </a>
            </li>';
          }

          foreach ($pagination_links as $link) {
            if (strpos($link, 'prev') !== false) {
              echo '<li class="pagenav-item pagenav-back active">' . $link . '</li>';
            } elseif (strpos($link, 'next') !== false) {
              echo '<li class="pagenav-item">' . $link . '</li>';
            } else {
              echo '<li class="pagenav-item">' . $link . '</li>';
            }
          }

          if ($paged < $wp_query->max_num_pages) {
            echo '<li class="pagenav-item duble-arrow duble-arrow-right">
              <a href="' . get_pagenum_link($wp_query->max_num_pages) . '">
                <span class="material-symbols-outlined">keyboard_double_arrow_right</span>
              </a>
            </li>';
          }
        }
      ?>
    </ul>
  </div>
</section>

main.css

.pagenav-wrapper {
width: min(100%, 21rem);
margin: 0 auto;
}
.pagenav-wrapper .pagenav-flex {
display: flex;
justify-content: center;
align-items: center;
}
.pagenav-item a {
color: #999999;
font-size: .8rem;
transition: 0.8s;
display: block;
}
.pagenav-item a:hover {
color: #000000;
}
.page-numbers {
margin: 0 1rem;
}
.prev.page-numbers{
margin-left: 0;
}
.next.page-numbers{
margin-right: 0;
}
.pagenav-item.duble-arrow {
width: 26px;
color: #999999;
}
.pagenav-item.duble-arrow.duble-arrow-right {
height: 24px;
}
.blogpage-pagenav .material-symbols-outlined {
font-size: 26px;
}
.material-symbols-outlined {
color: #999999;
opacity: .5;
transition: 0.8s;
}
.material-symbols-outlined:hover {
color: #000000;
}