Проблема AJAX числовой пагинации в дочерней теме TwentyFifteen

Я хочу создать числовую пагинацию с помощью AJAX. И нашел код на веб-сайте. Он работает идеально с первого клика, но со второго клика – нет.
Если я кликаю на пагинации на странице 4, все работает прекрасно (И не загружает страницу, из-за ajax)

example.com/page/4/

но после первого клика, если я нажимаю на ссылку пятой страницы в пагинации, вся страница загружается (не так, как ожидалось в ajax) и переходит на пустую страницу, а URL:

example.com/wp-admin/admin-ajax.php/page/3/

php код для функции темы TwentyFifteen Child из файла function.php

if ( !function_exists( 'custom_style_script_enqueue' ) ) :

    function custom_style_script_enqueue() {
        global $wp_query;

        wp_enqueue_style( 'custom-stylesheet', get_theme_file_uri( 'css/custom-style.css' ), array( '' ), filemtime( get_theme_file_path( 'css/custom-style.css' ) ), 'all' );
        if ( ! wp_script_is( 'jquery', 'enqueued' ) ) {
            wp_enqueue_script( 'jquery' );
        }
        wp_register_script( 'custom-ajax-jscript', get_theme_file_uri( 'js/custom-ajax-jscript.js' ), array( 'jquery' ), filemtime( get_theme_file_path( 'js/custom-ajax-jscript.js' ) ), false );
        wp_localize_script( 'custom-ajax-jscript', 'ajaxpaginationobject', array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            'query_vars' => json_encode( $wp_query->query )
        ) );
        wp_enqueue_script( 'custom-ajax-jscript' );
    }
    add_action( 'wp_enqueue_scripts', 'custom_style_script_enqueue' );

endif;

if ( !function_exists( 'my_ajax_custom_pagination' ) ) :

    function my_ajax_custom_pagination() {
        $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );
        $query_vars['post_type'] = 'post';
        $query_vars['paged'] = $_POST['page'];
        $query_vars['post_status'] = 'publish';
        $query_vars['posts_per_page'] = 3;

        $posts = new WP_Query( $query_vars );
        $GLOBALS['wp_query'] = $posts;

        add_filter( 'editor_max_image_size', 'my_image_size_override' );

        if ( ! $posts->have_posts() ) {
            get_template_part( 'content', 'none' );
        } else {
            while( $posts->have_posts() ) {
                $posts->the_post();
                get_template_part( 'content', get_post_format() );
            }
        }
        wp_reset_postdata();
        remove_filter( 'editor_max_image_size', 'my_image_size_override' );

        the_posts_pagination( array(
            'prev_text' => __( 'Предыдущая страница', 'twentyfifteen' ),
            'next_text' => __( 'Следующая страница', 'twentyfifteen' ),
            'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Страница', 'twentyfifteen' ) . '</span>',
        ) );

        die();

        function my_image_size_override() {
            return array( 825, 510 );
        }
    }

    add_action( 'wp_ajax_ajax_paginaton', 'my_ajax_custom_pagination' );
    add_action( 'wp_ajax_nopriv_ajax_paginaton', 'my_ajax_custom_pagination' );

endif;

А JS файл custom-ajax-jscript.js

jQuery(document).ready(function($){
    function find_page_number( element ) {
        element.find('span').remove();
        return parseInt( element.html() );
    }

    // $( ".nav-links a" ).click( function(e) {
    // $(document).on( 'click', '.nav-links a', function(e) {
    $( "nav.navigation" ).on( "click", ".nav-links a", function(e) {
        e.preventDefault();

        page = find_page_number( $(this).clone() );

        $.ajax({
            url: ajaxpaginationobject.ajax_url,
            // type: 'POST', // Я использую 'method' вместо 'type', потому что моя версия jquery НЕ МЕНЬШЕ 1.9.0
            method: 'POST',
            data: {
                action: 'ajax_paginaton',
                query_vars: ajaxpaginationobject.query_vars,
                page: page
            },
            beforeSend: function() {
                $('#main').find( 'article' ).remove();
                $('#main nav').remove();
                $(document).scrollTop();
                $('#main').append( '<div class="page-content" id="loader">Загрузка новых постов...</div>' );
            },
            success: function( html ) {
                $('#main #loader').remove();
                $('#main').append( html );
            }
        });
    });
});

Почему второй клик не работает и включает какую-то дополнительную часть (/wp-admin/admin-ajax.php/) посреди ссылки страницы?

Пожалуйста, помогите решить эту проблему.

Вы проверяли в консоли JS, что ajax вернул ожидаемые данные[‘html’]?

URL, который вы показываете после второй попытки клика по странице, имеет /admin-ajax.php/ внутри. Это не должно происходить. Это хороший индикатор, что передача ajax или возвращаемый вывод/запрос в какой-то момент сломаны.

Было бы полезно, если бы вы также показали соответствующие HTML части. Без этого мы не можем проверить, является ли page = find_page_number( $(this).clone() ); корректной и лучшей практикой.

По-моему, $GLOBALS['wp_query'] = $posts; также может быть проблемной частью.
Почему вам нужно напрямую изменять глобальные переменные? Насколько я знаю, это не общепринятая/лучшая практика.

Я рекомендую это хорошо детализированное объяснение типов WP Query и их правильное использование для всех, кто не 110% знаком с системой запросов WP.

(P.S.: вам удалось решить эту проблему несколько месяцев назад? Возможно, ответить на свой собственный вопрос или сделать обновление было бы полезно для других, если вы решили эту проблему. Удачи!)