ajax загрузить больше вместо пагинации

Вопрос или проблема

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
global $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;

$pagination = array(
    'base'               => add_query_arg( 'paged', '%#%' ),
    'format'             => '',
    'total'              => $wp_query->max_num_pages,
    'current'            => $current,
    'show_all'           => false,
    'type'               => 'list',
    'prev_next'          => true,
    'prev_text'          => '<i class="far fa-arrow-alt-circle-left"></i> ' . __( 'Предыдущий', 'attire' ),
    'next_text'          => __( 'Следующий', 'attire' ) . ' <i class="far fa-arrow-alt-circle-right"></i>',
    'screen_reader_text' => '',
);

if ( $wp_rewrite->using_permalinks() && ! is_search() ) {
    $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
}

if ( ! empty( $wp_query->query_vars['s'] ) ) {
    $pagination['add_args'] = array( 's' => get_query_var( 's' ) );
}
?>
<div class="text-center">
    <?php
    echo str_replace( '<ul class=\'page-numbers\'>',
        '<ul class="pagination pagination-centered page-numbers">',
        get_the_posts_pagination( $pagination ) );
    ?>
</div>

.

Ответ или решение

Вопрос, который вы подняли, касается изменения пагинации с традиционных страниц на AJAX-загрузку контента или на стиль с кнопками "Предыдущая" и "Следующая". Эти подходы не только улучшат пользовательский интерфейс, но и повысят удобство взаимодействия с вашим сайтом, что, безусловно, окажет положительное влияние на его посещаемость и удержание пользователей.

Введение в AJAX и его преимущества

AJAX (Asynchronous JavaScript and XML) позволяет загружать данные с сервера без необходимости перезагрузки всей страницы. Это не только ускоряет время реакции, но и создает плавный и современный опыт для пользователей. Плюсы использования AJAX включают:

1. Улучшенная Совсемта: Пользователь не отвлекается от текущего контента.
2. Скорость: Загрузка происходит быстрее благодаря только обновлению необходимого контента.
3. Экономия Трафика: Загружается только необходимая информация, что уменьшает расход данных.

Реализация AJAX "Загрузить еще"

Чтобы интегрировать AJAX-загрузку контента, вам нужно выполнить несколько шагов:

1. Подготовка кода PHP

Вместо стандартной пагинации, используйте JavaScript для загрузки следующего набора постов. Вам нужно создать обработчик для AJAX-запроса.

add_action('wp_ajax_load_more', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more', 'load_more_posts');

function load_more_posts() {
    $paged = $_POST['page'] + 1; // Получаем следующий номер страницы
    $args = array(
        'post_type' => 'post',
        'paged' => $paged,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            get_template_part('template-parts/content', get_post_format());
        }
    }
    die(); // Завершить выполнение скрипта
}

2. Подключение JavaScript

Теперь необходимо составить JavaScript код для отправки AJAX-запроса:

jQuery(function($){
    let page = 1;
    $(document).on('click', '#load-more', function(e){
        e.preventDefault();
        page++;

        $.ajax({
            url: ajaxurl, // URL для AJAX-запроса
            type: 'POST',
            data: {
                action: 'load_more',
                page: page
            },
            success: function(data) {
                if(data) {
                    $('#post-container').append(data); // Добавляем данные в контейнер
                } else {
                    $('#load-more').hide(); // Скрываем кнопку если посты окончились
                }
            }
        });
    });
});

3. Добавление кнопки "Загрузить еще"

В вашем HTML-коде добавьте кнопку, по нажатию на которую будет происходить загрузка новых постов:

<div id="post-container">
    <!-- Здесь будет выводиться контент постов -->
</div>
<button id="load-more">Загрузить еще</button>

Реализация стиля "Предыдущая и следующая"

Если же вам предпочтительнее использовать кнопку "Предыдущая" и "Следующая", вполне возможно адаптировать его для AJAX-метода:

<div class="text-center">
    <button id="prev-posts" data-paged="<?php echo ($current > 1) ? $current - 1 : 1; ?>">
        Предыдущая
    </button>
    <button id="next-posts" data-paged="<?php echo ($current < $wp_query->max_num_pages) ? $current + 1 : $wp_query->max_num_pages; ?>">
        Следующая
    </button>
</div>

В вашем JavaScript необходимо будет добавить обработчики для этих кнопок и реализовать логику аналогично описанному выше.

Заключение

Использование AJAX для загрузки контента или создание навигации с кнопками значительно улучшит пользовательский опыт на вашем сайте. Оба подхода обеспечивают более динамичное взаимодействие с пользователями и могут быть легко адаптированы под ваши нужды. С оптимизацией производительности и улучшением UX такие изменения могут стать решающим фактором для увеличения вовлеченности и количества посещений.