【WordPress】ページネーションをAjaxで非同期読み込みにする方法

<div id="ajax-post-list">
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
  'post_type' => 'post',
  'paged' => $paged,
  'posts_per_page' => 5,
);
$query = new WP_Query($args);

if ($query->have_posts()) :
  while ($query->have_posts()) : $query->the_post();
    echo '<article><h2>' . get_the_title() . '</h2></article>';
  endwhile;

  echo '<div class="pagination">';
  echo paginate_links(array(
    'total' => $query->max_num_pages,
    'current' => $paged,
    'format' => '?paged=%#%',
    'prev_text' => '« 前へ',
    'next_text' => '次へ »',
  ));
  echo '</div>';
endif;
wp_reset_postdata();
?>
</div>

jQuery(document).ready(function ($) {
  $(document).on('click', '.pagination a', function (e) {
    e.preventDefault();
    const link = $(this).attr('href');

    $('#ajax-post-list').append('<div class="loading">読み込み中...</div>');

    $.ajax({
      url: link,
      type: 'GET',
      success: function (res) {
        const newPosts = $(res).find('#ajax-post-list').html();
        $('#ajax-post-list').html(newPosts);
      },
    });
  });
});

function enqueue_ajax_pagination_scripts() {
  wp_enqueue_script('ajax-pagination', get_stylesheet_directory_uri() . '/js/ajax-pagination.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_pagination_scripts');