Как сделать выпадающий список с зависимостями в WordPress

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

Что такое зависимые выпадающие списки в WordPress и зачем они нужны

Выпадающий список с зависимостями — это два и более элементов выбора, где содержимое последующих списков зависит от выбора в предыдущем. Например, сначала выбирается категория товара, а потом в зависимости от неё подтягиваются подкатегории.

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

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

Выбор технологии: AJAX и REST API WordPress для динамического обновления

Чтобы обновлять второй список без перезагрузки страницы, используют AJAX. В WordPress для этого можно применять встроенный REST API или admin-ajax.php. Мы покажем пример на admin-ajax.php, так как он прост и не требует регистрации маршрутов.

Примерный алгоритм:

• Пользователь выбирает опцию в первом списке.
• Срабатывает JavaScript, который отправляет AJAX запрос с выбранным значением.
• На сервере WordPress обрабатывает запрос, получает связанные данные.
• Возвращает JSON с опциями для второго списка.
• JavaScript обновляет второй список.

Пример кода: создание зависимого выпадающего списка для типов записей и таксономий

Добавим в functions.php следующий код для обработки AJAX запроса и регистрации скриптов:

function wpfaq_enqueue_scripts() {
    wp_enqueue_script('wpfaq-dependent-select', get_template_directory_uri() . '/js/wpfaq-dependent-select.js', array('jquery'), null, true);
    wp_localize_script('wpfaq-dependent-select', 'wpfaqAjax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpfaq_enqueue_scripts');

// AJAX обработчик
function wpfaq_get_taxonomies_by_post_type() {
    if ( ! isset($_POST['post_type']) ) {
        wp_send_json_error('Не выбран тип записи');
    }
    $post_type = sanitize_text_field($_POST['post_type']);
    $taxonomies = get_object_taxonomies($post_type, 'objects');
    $result = array();
    foreach ($taxonomies as $tax) {
        $result[] = array(
            'slug' => $tax->name,
            'label' => $tax->label
        );
    }
    wp_send_json_success($result);
}
add_action('wp_ajax_wpfaq_get_taxonomies', 'wpfaq_get_taxonomies_by_post_type');
add_action('wp_ajax_nopriv_wpfaq_get_taxonomies', 'wpfaq_get_taxonomies_by_post_type');

Теперь создадим JavaScript файл wpfaq-dependent-select.js в папке js темы:

jQuery(document).ready(function($) {
    $('#wpfaq-post-type-select').on('change', function() {
        var postType = $(this).val();
        var taxSelect = $('#wpfaq-taxonomy-select');
        taxSelect.prop('disabled', true).html('<option>Загрузка...</option>');

        $.post(wpfaqAjax.ajax_url, {
            action: 'wpfaq_get_taxonomies',
            post_type: postType
        }, function(response) {
            if (response.success) {
                var options = '<option value="">Выберите таксономию</option>';
                $.each(response.data, function(i, tax) {
                    options += '<option value="' + tax.slug + '">' + tax.label + '</option>';
                });
                taxSelect.html(options).prop('disabled', false);
            } else {
                taxSelect.html('<option>Ошибка загрузки</option>');
            }
        });
    });
});

Добавление HTML на страницу: пример формы с зависимыми списками

Вставьте в нужное место темы или через шорткод следующий HTML:

<select id="wpfaq-post-type-select">
    <option value="">Выберите тип записи</option>
    <option value="post">Записи</option>
    <option value="page">Страницы</option>
    <option value="product">Товары</option>
</select>

<select id="wpfaq-taxonomy-select" disabled>
    <option>Сначала выберите тип записи</option>
</select>

Так вы получите два связанных списка: сначала выбирается тип записи, затем появляются соответствующие таксономии.

Расширение функционала: фильтрация по терминам таксономий и использование плагинов

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

Для реализации фильтров с зависимостями также можно использовать плагины, например, Clearfy Pro, который помогает оптимизировать и расширять функциональность WordPress, включая управление формами и скриптами.

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

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

Для повышения производительности кешируйте результаты запросов, если данные не меняются часто. Можно использовать Transients API.

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