Как постраничную навигацию WordPress перевести на Ajax?

Перевод постраничной навигации WordPress на Ajax может позволить улучшить пользовательский опыт и увеличить производительность вашего сайта. Вместо перезагрузки страницы при каждом переключении между страницами, Ajax позволяет загружать данные асинхронно, без перезагрузки всей страницы.

Вот шаги, которые помогут вам перевести постраничную навигацию WordPress на Ajax:

1. Подключение jQuery: Убедитесь, что ваш сайт подключает jQuery, так как Ajax в WordPress работает на основе этой библиотеки JavaScript. Если ваша тема уже использует jQuery, этот шаг можно пропустить.

2. Создание функции Ajax: Создайте функцию Ajax в файле functions.php вашей активной темы или в файле плагина. Например, вы можете использовать следующий код:

function load_more_posts() {
    $paged = $_POST['page'];
    
    $query = new WP_Query( array(
        'post_type' => 'post',
        'paged' => $paged
    ) );
    
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            // Вывод контента поста
        }
    }
    
    wp_reset_postdata();
    wp_die();
}
add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );

В этом примере функция load_more_posts() получает текущую страницу пагинации через Ajax, выполняет цикл WP_Query для получения постов этой страницы и выводит их контент.

3. Создание шаблона Ajax: Создайте файл шаблона с названием ajax.php, который будет содержать код, отрисовывающий вашу постраничную навигацию. Например, вы можете использовать следующий код:

if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        // Вывод контента поста
    }
}

the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => __( '« Назад', 'textdomain' ),
    'next_text' => __( 'Вперед »', 'textdomain' ),
) );

wp_die();

4. Настройка Ajax-вызова: Разместите следующий код в файле вашего шаблона, в котором отображается ваша постраничная навигация:

<script>
    var ajaxUrl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
    var page = 2;

    jQuery(function($) {
        $('.pagination a').on('click', function(e) {
            e.preventDefault();

            var url = $(this).attr('href');
            $('.pagination').html('<div class="loading">Загрузка...</div>');

            $.ajax({
                url: ajaxUrl,
                type: 'post',
                data: {
                    page: page,
                    action: 'load_more_posts'
                },
                success: function(response) {
                    $('.pagination').remove();

                    $('.ajax-container').append(response);
                    page++;
                }
            });
        });
    });
</script>

В этом примере кода будет выполняться Ajax-вызов при нажатии на ссылку пагинации. Затем данные будут отправляться на сервер, к admin-ajax.php, с указанием текущей страницы и действия load_more_posts. После успешного выполнения запроса, полученный HTML-код будет добавлен к контейнеру .ajax-container, а номер страницы будет увеличиваться.

5. Обновление ссылок пагинации: Обновите ссылки в вашей постраничной навигации с помощью следующего кода:

<?php
global $wp_query;

$big = 999999999;

$paginate_links = paginate_links( array(
    'base'      => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format'    => '?paged=%#%',
    'prev_text' => '« Назад',
    'next_text' => 'Вперед »',
    'current'   => max( 1, get_query_var( 'paged' ) ),
    'total'     => $wp_query->max_num_pages,
    'before_page_number' => '<span class="screen-reader-text">' . __( 'Страница', 'textdomain' ) . ' </span>',
    'mid_size'  => 2,
) );

echo str_replace( 'href', 'data-href', $paginate_links );
?>

В этом примере кода мы заменяем href на data-href в ссылках пагинации. Это позволит нам изменить поведение ссылок с помощью JavaScript.

После завершения всех этих шагов, ваша постраничная навигация будет выполняться с использованием Ajax без перезагрузки всей страницы.