Как создать динамические поля в формах WordPress с помощью AJAX

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

Почему использовать AJAX для динамических полей в WordPress

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

Использование AJAX в WordPress имеет свои особенности, связанные с безопасностью, nonce-проверками и правильным подключением скриптов. Рассмотрим весь процесс пошагово.

Подготовка формы с динамическими полями

Предположим, у нас есть форма с двумя полями: «Страна» и «Город». При выборе страны поле «Город» должно обновляться списком соответствующих городов.

HTML-разметка формы может выглядеть так:

<form id="wpbuy_dynamic_form">
    <label for="country">Выберите страну:</label>
    <select name="country" id="country">
        <option value="">-- Выберите --</option>
        <option value="ru">Россия</option>
        <option value="ua">Украина</option>
        <option value="by">Беларусь</option>
    </select>

    <label for="city">Выберите город:</label>
    <select name="city" id="city">
        <option value="">-- Сначала выберите страну --</option>
    </select>
</form>

Важно подключить JS для обработки изменения поля «Страна» и отправки AJAX-запроса.

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

Для корректной работы AJAX в WordPress нужно подключить свой скрипт и передать ему переменную с URL для AJAX-запросов и nonce для безопасности. Добавим следующий код в файл functions.php вашей темы или плагина:

function wpbuy_enqueue_dynamic_fields_script() {
    wp_enqueue_script('wpbuy-dynamic-fields', get_template_directory_uri() . '/js/dynamic-fields.js', array('jquery'), '1.0', true);
    wp_localize_script('wpbuy-dynamic-fields', 'wpbuyAjax', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpbuy_dynamic_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpbuy_enqueue_dynamic_fields_script');

Теперь создадим сам JS-файл dynamic-fields.js в папке js темы:

jQuery(document).ready(function($) {
    $('#country').on('change', function() {
        var country = $(this).val();
        if (!country) {
            $('#city').html('<option value="">-- Сначала выберите страну --</option>');
            return;
        }

        $.ajax({
            url: wpbuyAjax.ajaxurl,
            type: 'POST',
            data: {
                action: 'wpbuy_get_cities',
                country: country,
                security: wpbuyAjax.nonce
            },
            success: function(response) {
                if (response.success) {
                    var options = '';
                    $.each(response.data, function(key, city) {
                        options += '<option value="' + key + '">' + city + '</option>';
                    });
                    $('#city').html(options);
                } else {
                    $('#city').html('<option value="">Нет данных</option>');
                }
            },
            error: function() {
                $('#city').html('<option value="">Ошибка загрузки</option>');
            }
        });
    });
});

Обработка AJAX-запроса на стороне сервера

Теперь нужно создать PHP-обработчик, который примет запрос и вернёт список городов в зависимости от выбранной страны. Добавим в functions.php:

function wpbuy_ajax_get_cities() {
    check_ajax_referer('wpbuy_dynamic_nonce', 'security');

    $country = isset($_POST['country']) ? sanitize_text_field($_POST['country']) : '';

    $cities = array();

    switch ($country) {
        case 'ru':
            $cities = array(
                'moscow' => 'Москва',
                'spb' => 'Санкт-Петербург',
                'kazan' => 'Казань'
            );
            break;
        case 'ua':
            $cities = array(
                'kyiv' => 'Киев',
                'lviv' => 'Львов',
                'odesa' => 'Одесса'
            );
            break;
        case 'by':
            $cities = array(
                'minsk' => 'Минск',
                'gomel' => 'Гомель',
                'vitebsk' => 'Витебск'
            );
            break;
        default:
            wp_send_json_error('Страна не найдена');
            break;
    }

    wp_send_json_success($cities);
}
add_action('wp_ajax_wpbuy_get_cities', 'wpbuy_ajax_get_cities');
add_action('wp_ajax_nopriv_wpbuy_get_cities', 'wpbuy_ajax_get_cities');

Расширение функционала: добавление динамических полей с разным типом

На основе этого примера можно создавать не только динамические <select>, но и другие поля: чекбоксы, радиокнопки, текстовые поля. Для примера добавим динамическое поле «Регион» для России, которое будет появляться только если выбрана Россия.

В JS добавим:

if (country === 'ru') {
    if ($('#region').length === 0) {
        $('#wpbuy_dynamic_form').append('<label for="region">Выберите регион:</label><select id="region" name="region"></select>');
    }

    // AJAX для регионов или заполнение статично
    var regions = {
        'moscow_oblast': 'Московская область',
        'leningrad_oblast': 'Ленинградская область',
        'tatarstan': 'Татарстан'
    };
    var options = '';
    $.each(regions, function(key, val) {
        options += '<option value="' + key + '">' + val + '</option>';
    });
    $('#region').html(options);
} else {
    $('#region').remove();
}

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

Использование плагинов для динамических форм с AJAX

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

• Clearfy Pro — плагин для оптимизации и расширения WordPress, в том числе улучшает работу с формами.
• WPRemark — расширенный функционал для форм с динамическими возможностями.

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

Выводы и рекомендации

Динамические поля с помощью AJAX — мощный инструмент для улучшения UX на сайте WordPress. Подключая AJAX корректно через admin-ajax.php и используя nonce для безопасности, мы получаем гибкий и безопасный механизм. В коде важно уделять внимание валидации и экранированию данных.

Используйте пример из статьи как базу, расширяйте под свои задачи, добавляйте обработку ошибок и оптимизации. Если у вас большой проект, рассмотрите использование кастомных REST API эндпоинтов WordPress вместо admin-ajax.php для повышения производительности.