Как использовать AJAX в WordPress для обновления контента без перезагрузки страницы

Автор: Валерия Волкова | Опубликовано: 02.04.2026

AJAX (Asynchronous JavaScript and XML) – мощный инструмент для динамического обновления контента на сайте без полной перезагрузки страницы. В WordPress использование AJAX позволяет улучшить пользовательский опыт, сделать интерфейс более отзывчивым и интерактивным. В этой статье разберём, как правильно организовать AJAX-запросы в WordPress, рассмотрим примеры простых и полезных сценариев, а также рассмотрим популярные плагины, которые могут помочь.

Что такое AJAX и зачем он нужен в WordPress

AJAX – это технология, позволяющая отправлять запросы на сервер и получать от него данные асинхронно, без перезагрузки страницы. В WordPress это особенно полезно для:

обновления части контента (например, загрузка новых постов или товаров);
применения фильтров и сортировки без перезагрузки;
выполнения действий пользователей (лайки, голосования, отправка форм);
динамического подгрузки комментариев, чатов и т.п.

В результате сайт становится быстрее и удобнее, что положительно влияет на поведение посетителей и SEO.

Основы использования AJAX в WordPress

WordPress имеет собственный механизм обработки AJAX-запросов, который использует файл admin-ajax.php. Для корректной работы нужно соблюдать несколько правил:

Для фронтенд-запросов использовать хук wp_ajax_nopriv_{action}, где {action} — уникальный идентификатор действия.
Для авторизованных пользователей — хук wp_ajax_{action}.
Передавать параметр action в AJAX-запросе, чтобы WordPress понимал, какое действие вызвать.
Подключать JavaScript и локализовать скрипты для передачи URL AJAX и nonce.

Ниже пример минимальной реализации AJAX-функции в плагине или теме WordPress.

Пример: динамическая загрузка списка постов

1. В PHP-файле (functions.php темы или плагина) добавляем обработчик:

add_action('wp_ajax_wpwebsite_load_posts', 'wpwebsite_load_posts_callback');
add_action('wp_ajax_nopriv_wpwebsite_load_posts', 'wpwebsite_load_posts_callback');

function wpwebsite_load_posts_callback() {
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;

    $query = new WP_Query([
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => $paged,
    ]);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<h2>' . get_the_title() . '</h2>';
            echo '<div>' . get_the_excerpt() . '</div>';
        }
    } else {
        echo 'Больше постов нет';
    }
    wp_die(); // обязательно для правильного завершения AJAX-запроса
}

2. В JavaScript подключаем скрипт и локализуем параметры (в functions.php):

function wpwebsite_enqueue_scripts() {
    wp_enqueue_script('wpwebsite-ajax-script', get_template_directory_uri() . '/js/wpwebsite-ajax.js', ['jquery'], null, true);
    wp_localize_script('wpwebsite-ajax-script', 'wpwebsite_ajax', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpwebsite_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wpwebsite_enqueue_scripts');

3. В файле js/wpwebsite-ajax.js пишем:

jQuery(document).ready(function($) {
    var page = 1;
    $('#load-more').on('click', function() {
        page++;
        $.ajax({
            url: wpwebsite_ajax.ajax_url,
            method: 'POST',
            data: {
                action: 'wpwebsite_load_posts',
                page: page,
                _ajax_nonce: wpwebsite_ajax.nonce
            },
            success: function(response) {
                if (response === 'Больше постов нет') {
                    $('#load-more').hide();
                } else {
                    $('#posts-container').append(response);
                }
            },
            error: function() {
                alert('Ошибка при загрузке постов');
            }
        });
    });
});

4. В шаблоне выводим контейнер и кнопку:

<div id="posts-container">
    <!-- начальный вывод постов -->
</div>
<button id="load-more">Загрузить ещё</button>

Продвинутые техники и безопасность AJAX в WordPress

При работе с AJAX важно учитывать безопасность и производительность:

Используйте nonce для предотвращения CSRF-атак. В обработчике проверяйте их функцией check_ajax_referer('wpwebsite_nonce').
Валидация и санитизация входящих данных обязательна, чтобы избежать XSS и SQL-инъекций.
Для сложных запросов кешируйте результаты, чтобы снизить нагрузку на сервер.
Если запросы тяжелые, используйте отложенное выполнение или background processing.

Добавим проверку nonce в наш обработчик:

function wpwebsite_load_posts_callback() {
    check_ajax_referer('wpwebsite_nonce');
    // остальной код
}

Отладка и тестирование AJAX-запросов в WordPress

Для отладки AJAX очень полезны инструменты браузера (консоль, вкладка Network). Проверяйте:

правильность URL и параметров запроса;
статус ответа сервера (200 OK, 400, 500 и др.);
тело ответа и наличие ошибок PHP или JS;
корректность обработки данных в JS (например, JSON.parse).

Для логирования ошибок на сервере используйте стандартные функции error_log() или подключайте плагины для отладки, например, Query Monitor.

Выводы и рекомендации по работе с AJAX в WordPress

Использование AJAX — эффективный способ сделать сайт на WordPress более динамичным и удобным для пользователей. Главное:

Использовать встроенные хуки WordPress для обработки AJAX.
Обязательно проверять nonce и фильтровать данные.
Писать чистый и понятный код как на PHP, так и на JavaScript.
Использовать готовые плагины, если нет желания писать с нуля.

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

Использование AJAX в WordPress для обновления контента без перезагрузки страницы