Как добавить AJAX в WordPress без jQuery: практическое руководство

В современном веб-разработке использование AJAX позволяет создавать динамичные и отзывчивые интерфейсы без перезагрузки страницы. В экосистеме WordPress традиционно для AJAX-запросов часто применяют jQuery, так как он встроен в ядро. Однако в последние годы тенденция смещается в сторону использования чистого JavaScript (vanilla JS) для уменьшения веса страниц и увеличения производительности.

Почему стоит использовать AJAX без jQuery в WordPress

jQuery — это мощная библиотека, но она добавляет дополнительный вес и может негативно влиять на скорость загрузки сайта. Если на вашем сайте не используется jQuery, подключать её только ради AJAX неэффективно. Использование чистого JavaScript позволяет:

• Уменьшить общий вес страницы.
• Избавиться от зависимостей.
• Использовать современные стандарты и API браузеров, например Fetch API.

WordPress по-прежнему отлично поддерживает AJAX-запросы через admin-ajax.php, и мы можем использовать этот механизм без jQuery.

Настройка AJAX в WordPress: регистрация обработчика на сервере

Первое, что нужно сделать — зарегистрировать PHP-функцию-обработчик AJAX-запроса. Для этого в файле functions.php вашей темы или в плагине добавьте следующий код:

add_action('wp_ajax_wpfreecourses_handle_ajax', 'wpfreecourses_handle_ajax');
add_action('wp_ajax_nopriv_wpfreecourses_handle_ajax', 'wpfreecourses_handle_ajax');

function wpfreecourses_handle_ajax() {
    // Проверим nonce для безопасности
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpfreecourses_nonce')) {
        wp_send_json_error('Неверный nonce');
        wp_die();
    }

    // Получаем данные из запроса
    $data = isset($_POST['data']) ? sanitize_text_field($_POST['data']) : '';

    // Логика обработки
    $response = 'Вы отправили: ' . $data;

    // Возвращаем успешный ответ
    wp_send_json_success($response);
    wp_die();
}

Объяснение кода:

• wp_ajax_ и wp_ajax_nopriv_ — хуки для авторизованных и неавторизованных пользователей соответственно.
• Функция wpfreecourses_handle_ajax проверяет nonce — защиту от CSRF-атак.
• Получаем и обрабатываем данные, потом возвращаем JSON-ответ с помощью wp_send_json_success.

Подключение JavaScript с использованием Fetch API

Чтобы отправить AJAX-запрос с клиента, используем современный Fetch API. Для начала создадим JS-файл, например ajax-script.js, с таким содержимым:

document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('wpfreecourses-button');
    const result = document.getElementById('wpfreecourses-result');

    button.addEventListener('click', function() {
        const dataToSend = document.getElementById('wpfreecourses-input').value;

        fetch(wpfreecourses_ajax_object.ajax_url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            body: new URLSearchParams({
                action: 'wpfreecourses_handle_ajax',
                nonce: wpfreecourses_ajax_object.nonce,
                data: dataToSend
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                result.textContent = data.data;
            } else {
                result.textContent = 'Ошибка: ' + data.data;
            }
        })
        .catch(error => {
            result.textContent = 'Ошибка запроса: ' + error;
        });
    });
});

Здесь мы слушаем клик по кнопке, собираем данные из поля ввода и отправляем POST-запрос на сервер, передавая action, nonce и данные. После получения ответа обновляем содержимое блока с результатом.

Подключение и локализация скрипта в WordPress

Теперь нужно добавить и подключить наш скрипт с локализацией для передачи ajax_url и nonce. В functions.php добавьте:

function wpfreecourses_enqueue_scripts() {
    wp_enqueue_script('wpfreecourses-ajax-script', get_template_directory_uri() . '/js/ajax-script.js', [], null, true);

    wp_localize_script('wpfreecourses-ajax-script', 'wpfreecourses_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpfreecourses_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wpfreecourses_enqueue_scripts');

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

Создание интерфейса на странице

Для демонстрации создадим простой HTML-блок в теме или с помощью шорткода, например:

<input type="text" id="wpfreecourses-input" placeholder="Введите текст">
<button id="wpfreecourses-button">Отправить AJAX-запрос</button>
<div id="wpfreecourses-result"></div>

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

Расширение функционала: обработка ошибок и UX

В реальном проекте важно добавить обработку ошибок и индикацию загрузки. Например, можно добавить спиннер или заблокировать кнопку пока идет запрос. Это улучшит пользовательский опыт.

Примеры плагинов, которые используют AJAX без jQuery

Многие современные плагины и темы стараются использовать нативный JavaScript. Например:

• Ajax Search Lite — плагин поиска с AJAX, который может работать с минимальным использованием jQuery.
• WP AJAX Login — плагин для AJAX-логина без перезагрузки.

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

Итоговые рекомендации по работе с AJAX в WordPress без jQuery

1. Всегда проверяйте nonce в PHP для безопасности.

2. Используйте Fetch API для отправки запросов.

3. Обрабатывайте ошибки на клиенте и сервере.

4. Оптимизируйте интерфейс для лучшего UX.

5. Используйте wp_localize_script для передачи ajax_url и nonce в JS.

Такой подход позволит вам создавать легкие и быстрые AJAX-функции в WordPress без дополнительного веса от jQuery.