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

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

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

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

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

Настройка AJAX-запроса в WordPress

Для работы AJAX в WordPress используется специальный хук wp_ajax_{action} для авторизованных пользователей и wp_ajax_nopriv_{action} — для всех остальных.

Рассмотрим пример, где нужно подгружать объявления по 5 штук при нажатии кнопки.

Шаг 1. Добавляем JavaScript для AJAX-запроса

В файле темы или плагина подключаем скрипт и передаём в него параметры:

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

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

jQuery(document).ready(function($) {
    var offset = 0;
    var limit = 5;

    $('#wpbono-load-more').on('click', function() {
        $.ajax({
            url: wpbono_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wpbono_load_ads',
                offset: offset,
                limit: limit,
                nonce: wpbono_ajax_obj.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#wpbono-ads-container').append(response.data.html);
                    offset += limit;
                } else {
                    alert('Больше объявлений нет');
                    $('#wpbono-load-more').hide();
                }
            },
            error: function() {
                alert('Ошибка при загрузке объявлений');
            }
        });
    });
});

Шаг 2. Обрабатываем AJAX на сервере

В functions.php добавляем обработчик:

function wpbono_ajax_load_ads() {
    check_ajax_referer('wpbono_ajax_nonce', 'nonce');

    $offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
    $limit = isset($_POST['limit']) ? intval($_POST['limit']) : 5;

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $limit,
        'offset' => $offset,
        'post_status' => 'publish',
    ];

    $query = new WP_Query($args);

    if(!$query->have_posts()) {
        wp_send_json_error();
    }

    ob_start();
    while($query->have_posts()) {
        $query->the_post();
        ?>
        <div class="wpbono-ad-item">
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <div class="wpbono-excerpt"><?php the_excerpt(); ?></div>
        </div>
        <?php
    }
    wp_reset_postdata();

    $html = ob_get_clean();
    wp_send_json_success(['html' => $html]);
}
add_action('wp_ajax_wpbono_load_ads', 'wpbono_ajax_load_ads');
add_action('wp_ajax_nopriv_wpbono_load_ads', 'wpbono_ajax_load_ads');

Как стилизовать и вставить кнопку загрузки

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

<div id="wpbono-ads-container">
    <!-- Здесь будут появляться объявления -->
</div>
<button id="wpbono-load-more" type="button">Загрузить ещё</button>

Для базовой стилизации можно добавить CSS:

.wpbono-ad-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

#wpbono-load-more {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

Использование плагинов для упрощения AJAX в WordPress

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

• Clearfy Pro — содержит оптимизации, в том числе для AJAX-запросов и кэширования;
• WPRemark — плагин для отзывов с AJAX-подгрузкой комментариев и оценок;
• WP REST API plugins — позволяют создать гибкие эндпоинты для динамического контента.

Использование этих инструментов поможет ускорить разработку и интеграцию динамического контента на сайт.

Обработка ошибок и безопасность AJAX

Обязательно используйте nonce для защиты от CSRF-атак, как в нашем примере. Проверяйте входящие данные и ограничивайте количество загружаемых элементов, чтобы избежать DDoS.

При возникновении ошибок возвращайте понятный JSON с сообщениями, чтобы клиентская часть могла корректно отреагировать.

Советы по оптимизации

• Кэшируйте результаты запросов, если данные редко меняются.
• Минимизируйте объём HTML, передаваемый в AJAX-ответе.
• Используйте пагинацию или бесконечный скролл для удобства пользователей.

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