Как успешно использовать AJAX в WordPress для объявлений и обновления контента

Автор: Наталья Новикова | Опубликовано: 11.04.2026

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

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

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

В WordPress AJAX работает через специальный файл admin-ajax.php и систему action-хуков, что позволяет безопасно обрабатывать запросы и интегрировать их с ядром и плагинами.

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

Подключение AJAX на фронтенде и бэкенде WordPress

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

function wpshab_enqueue_ajax_script() {
    wp_enqueue_script('wpshab-ajax-script', get_template_directory_uri() . '/js/wpshab-ajax.js', array('jquery'), '1.0', true);
    wp_localize_script('wpshab-ajax-script', 'wpshab_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpshab_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpshab_enqueue_ajax_script');

Так мы подключим скрипт и передадим ему необходимые данные для AJAX-запроса.

Обработка AJAX-запроса в PHP в WordPress

Далее нужно добавить обработчик на сервере, который будет отвечать на AJAX-запросы:

function wpshab_handle_load_ads() {
    check_ajax_referer('wpshab_ajax_nonce', 'nonce');

    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;

    $args = array(
        'post_type'      => 'advertisement',
        'posts_per_page' => 5,
        'paged'          => $paged
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="ad-item">' . get_the_title() . '</div>';
        }
        wp_reset_postdata();
        $response = ob_get_clean();
        wp_send_json_success(array('html' => $response));
    } else {
        wp_send_json_error(array('message' => 'Объявления не найдены.'));
    }
}
add_action('wp_ajax_wpshab_load_ads', 'wpshab_handle_load_ads');
add_action('wp_ajax_nopriv_wpshab_load_ads', 'wpshab_handle_load_ads');

Этот код регистрирует AJAX-обработчик для авторизованных и неавторизованных пользователей. Он получает номер страницы, делает WP_Query для типа записи advertisement и возвращает HTML с объявлениями.

JavaScript для отправки AJAX-запроса и обновления контента

Теперь создадим файл wpshab-ajax.js с примером отправки запроса и подгрузки новых объявлений:

jQuery(document).ready(function($) {
    var paged = 1;
    $('#load-more-ads').on('click', function(e) {
        e.preventDefault();
        paged++;

        $.ajax({
            url: wpshab_ajax_obj.ajax_url,
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'wpshab_load_ads',
                nonce: wpshab_ajax_obj.nonce,
                paged: paged
            },
            success: function(response) {
                if (response.success) {
                    $('#ads-container').append(response.data.html);
                } else {
                    alert(response.data.message);
                    $('#load-more-ads').hide();
                }
            },
            error: function() {
                alert('Ошибка при загрузке объявлений');
            }
        });
    });
});

В этом скрипте при клике на кнопку «Загрузить еще» отправляется AJAX-запрос, и новые объявления добавляются в контейнер на странице.

Интеграция с плагинами для расширения возможностей AJAX

Для удобства и расширенных возможностей можно использовать плагины, которые помогают управлять AJAX-запросами или реализовывать фильтры и пагинацию:

Ajax Load More — плагин для бесконечной прокрутки и динамической подгрузки постов через AJAX.
WP Ajax Filter — позволяет создавать фильтры для постов и таксономий с загрузкой результатов через AJAX.
Clearfy Pro (https://wpshop.ru/clearfy-pro/?utm_source=wpshab.ru&utm_medium=article&utm_campaign=kak-uspeshno-ispolzovat-ajax-v-wordpress-dlya-obyavleniy-i-obnovleniya-kontenta) — оптимизирует работу сайта, в том числе улучшая работу AJAX-запросов на фронтенде.

Использование готовых решений экономит время и упрощает разработку, но часто полезно понимать, как AJAX работает «под капотом».

Тонкости безопасности и производительности при работе с AJAX в WordPress

При создании AJAX-запросов важны следующие моменты:

Nonce — обязательный элемент безопасности, предотвращающий CSRF-атаки. Всегда проверяйте nonce в обработчиках.
Проверка прав доступа — если AJAX-запросы должны выполняться только для авторизованных пользователей, используйте соответствующие хуки и проверки.
Кэширование — если данные не меняются часто, используйте кэширование результатов, чтобы снизить нагрузку на базу данных.
Оптимизация запросов — используйте WP_Query с правильными параметрами, избегайте лишних запросов и ненужных данных.

Эти меры помогут сделать AJAX-реализацию надежной и быстрой.

Пример: динамическое обновление статусов объявлений по таймеру

Кроме загрузки новых объявлений по кнопке, AJAX позволяет обновлять статус существующих элементов без перезагрузки.

Пример функции для обновления статуса:

function wpshab_handle_update_ad_status() {
    check_ajax_referer('wpshab_ajax_nonce', 'nonce');

    $ad_id = isset($_POST['ad_id']) ? intval($_POST['ad_id']) : 0;
    $new_status = sanitize_text_field($_POST['status']);

    if (!$ad_id || empty($new_status)) {
        wp_send_json_error(array('message' => 'Неверные данные'));
    }

    $updated = wp_update_post(array(
        'ID' => $ad_id,
        'post_status' => $new_status
    ));

    if (is_wp_error($updated)) {
        wp_send_json_error(array('message' => 'Ошибка обновления статуса'));
    }

    wp_send_json_success(array('message' => 'Статус обновлен'));
}
add_action('wp_ajax_wpshab_update_ad_status', 'wpshab_handle_update_ad_status');

И JS для отправки запроса по таймеру:

setInterval(function() {
    var adId = 123; // ID объявления
    var newStatus = 'publish';

    jQuery.ajax({
        url: wpshab_ajax_obj.ajax_url,
        type: 'POST',
        data: {
            action: 'wpshab_update_ad_status',
            nonce: wpshab_ajax_obj.nonce,
            ad_id: adId,
            status: newStatus
        },
        success: function(response) {
            if(response.success) {
                console.log('Статус обновлен');
            } else {
                console.log('Ошибка: ' + response.data.message);
            }
        }
    });
}, 60000); // обновлять каждые 60 секунд

Так можно автоматически держать данные в актуальном состоянии без вмешательства пользователя.

Заключение

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

Для расширенных возможностей стоит обратить внимание на плагины с поддержкой AJAX, такие как Ajax Load More и WP Ajax Filter, а также оптимизационные инструменты вроде Clearfy Pro.

Такой подход поможет создавать удобные и быстрые сайты на WordPress с актуальным и интерактивным контентом.