Оптимизация загрузки постов в блоке с помощью AJAX в WordPress

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

Зачем использовать AJAX для подгрузки постов

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

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

Однако важно реализовать AJAX-подгрузку так, чтобы поисковые системы корректно индексировали все записи. Для этого можно комбинировать AJAX с классической пагинацией или использовать специальные атрибуты и схемы разметки.

Как реализовать AJAX-подгрузку постов: пример для WPcore

Рассмотрим пример реализации AJAX-подгрузки постов в вашем шаблоне WordPress. Предположим, что у вас есть кастомный блок или страница, где нужно выводить записи по 5 штук с кнопкой «Загрузить ещё».

1. Подготовка PHP-обработчика AJAX-запроса

Сначала добавим обработчик в functions.php или в отдельный плагин. Он будет отвечать за получение следующей порции записей и возврат их в формате HTML.

add_action('wp_ajax_wpcore_load_more_posts', 'wpcore_load_more_posts_callback');
add_action('wp_ajax_nopriv_wpcore_load_more_posts', 'wpcore_load_more_posts_callback');

function wpcore_load_more_posts_callback() {
    // Получаем номер страницы из запроса
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;

    // Аргументы для WP_Query
    $args = [
        'post_type' => 'post',
        'posts_per_page' => 5,
        '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());
        }
    } else {
        // Если записей нет
        echo '<p>Больше записей нет.</p>';
    }

    wp_reset_postdata();
    wp_die(); // Завершает AJAX-запрос
}

2. Добавление скрипта для AJAX на фронтенде

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

function wpcore_enqueue_scripts() {
    wp_enqueue_script('wpcore-load-more', get_template_directory_uri() . '/js/load-more.js', ['jquery'], null, true);
    wp_localize_script('wpcore-load-more', 'wpcore_ajax', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpcore_load_more_nonce'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpcore_enqueue_scripts');

3. Пример JavaScript для загрузки постов

Создайте файл js/load-more.js в вашей теме или плагине с таким содержимым:

jQuery(document).ready(function($) {
    var page = 2; // Начинаем со второй страницы
    $('#wpcore-load-more-btn').on('click', function(e) {
        e.preventDefault();
        var button = $(this);
        button.prop('disabled', true).text('Загрузка...');

        $.ajax({
            url: wpcore_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'wpcore_load_more_posts',
                page: page,
                _ajax_nonce: wpcore_ajax.nonce
            },
            success: function(response) {
                if (response.trim() === '<p>Больше записей нет.</p>') {
                    button.text('Больше записей нет').prop('disabled', true);
                } else {
                    $('#wpcore-posts-container').append(response);
                    button.prop('disabled', false).text('Загрузить ещё');
                    page++;
                }
            },
            error: function() {
                button.prop('disabled', false).text('Ошибка, попробуйте ещё раз');
            }
        });
    });
});

4. Добавление HTML-разметки на страницу

В нужном файле шаблона выведите первые 5 постов (как обычно) и добавьте контейнер для подгрузки и кнопку:

<div id="wpcore-posts-container">
    <?php
    $args = [
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => 1
    ];
    $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());
        }
    }
    wp_reset_postdata();
    ?>
</div>
<button id="wpcore-load-more-btn">Загрузить ещё</button>

Дополнительные советы по оптимизации и SEO

Для сохранения SEO важно, чтобы поисковые системы могли индексировать все записи. Для этого можно реализовать классическую пагинацию и в дополнение к AJAX-подгрузке. Также стоит использовать разметку Schema.org для списка статей.

Если вы используете плагин Clearfy Pro от WPSHOP, он поможет настроить кэширование и оптимизацию JS, что улучшит производительность AJAX-подгрузки.

Для проектов с большими объёмами контента можно рассмотреть использование плагина ABC Pagination, который умеет гибко настраивать пагинацию и интегрируется с AJAX.

Заключение

Реализация AJAX-подгрузки постов — отличный способ улучшить удобство пользователей и ускорить работу сайта на WordPress. При правильной реализации вы получите плавную загрузку новых записей без перезагрузки страницы, сохранив при этом SEO и стабильность работы.

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