【WordPress】プラグインなしでページネーションを実装する方法｜the_posts_pagination・paginate_links・WP_Query対応

the_posts_pagination(array(
  'mid_size'  => 2,        // 現在ページの前後に出す番号の数
  'prev_text' => '« 前へ',
  'next_text' => '次へ »',
));

function custom_pagination($numpages = '', $pagerange = 2, $paged = '') {
  if (empty($paged)) {
    $paged = max(1, get_query_var('paged')); // 1ページ目は0が返るため1に
  }
  if ($numpages == '') {
    global $wp_query;
    $numpages = $wp_query->max_num_pages ? $wp_query->max_num_pages : 1;
  }

  $links = paginate_links(array(
    'base'      => get_pagenum_link(1) . '%_%',
    'format'    => 'page/%#%',
    'total'     => $numpages,
    'current'   => $paged,
    'show_all'  => false,
    'end_size'  => 1,
    'mid_size'  => $pagerange,
    'prev_next' => true,
    'prev_text' => '«',
    'next_text' => '»',
    'type'      => 'plain',
  ));

  if ($links) {
    echo '<nav class="custom-pagination">' . $links . '</nav>';
  }
}

if (function_exists('custom_pagination')) {
  custom_pagination($wp_query->max_num_pages, 2, get_query_var('paged'));
}

$paged = max(1, get_query_var('paged'));

$my_query = new WP_Query(array(
  'category_name'  => 'news',
  'posts_per_page' => 10,
  'paged'          => $paged, // ① 現在ページをクエリに渡す
));

while ($my_query->have_posts()) : $my_query->the_post();
  the_title('<h2>', '</h2>');
endwhile;
wp_reset_postdata();

echo paginate_links(array(
  'total'   => $my_query->max_num_pages, // ② このクエリの総ページ数
  'current' => $paged,
  'mid_size' => 2,
));

add_action('pre_get_posts', function ($query) {
  if (is_admin() || !$query->is_main_query()) {
    return;
  }
  // 例：newsカテゴリーの一覧だけ12件表示にする
  if ($query->is_category('news')) {
    $query->set('posts_per_page', 12);
  }
});

// 通常の一覧は 'paged'、固定ページ・静的フロントは 'page' に入る
$paged = get_query_var('paged') ? get_query_var('paged') : max(1, get_query_var('page'));

.custom-pagination {
  text-align: center;
  margin: 20px 0;
}

.custom-pagination a,
.custom-pagination span {
  margin: 0 2px;
  padding: 5px 10px;
  display: inline-block;
  border: 1px solid #ccc;
  color: #333;
}

.custom-pagination a:hover {
  background-color: #f7f7f7;
}

.custom-pagination .current {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}