Как создать динамические выборы (селекты) в админке WordPress с примерами кода

Автор: Сергей Кузнецов | Опубликовано: 30.12.2025

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

Зачем нужны динамические селекты в админке WordPress

Обычные выпадающие списки в админке часто создаются статично, то есть список вариантов жестко задан в коде. Однако в реальных проектах часто требуется, чтобы список зависел от каких-то параметров, данных из базы или выбора пользователя. Например, выбор категории должен влиять на выбор подкатегории, или список постов должен отображаться в зависимости от выбранного типа записи.

Динамические селекты делают интерфейс удобнее и помогают избежать ошибок, так как пользователь видит только релевантные варианты. Особенно это актуально для разработчиков плагинов и тем, которые хотят расширить стандартные возможности WordPress.

Основы создания динамических селектов в админке WordPress

Для создания динамических выпадающих списков нужно:

Создать HTML-разметку селектов в нужной админ-странице;
Подключить JavaScript для отслеживания изменений и динамического обновления второго селекта;
Организовать AJAX-запросы к серверу для получения данных из базы в зависимости от выбора пользователя;
Обработать AJAX-запрос на стороне PHP и вернуть нужные данные.

Пример: выбор категории и подкатегории

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

Шаг 1. Добавляем селекты в админ-страницу

Для примера создадим простую админ-страницу с двумя селектами. В вашем плагине или в functions.php темы добавьте:

function wpshablon_add_admin_page() {
    add_menu_page('Динамические селекты', 'Динамические селекты', 'manage_options', 'wpshablon-dynamic-selects', 'wpshablon_render_admin_page');
}
add_action('admin_menu', 'wpshablon_add_admin_page');

function wpshablon_render_admin_page() {
    ?>
    <div class="wrap">
        <h1>Выберите категорию и подкатегорию</h1>
        <select id="wpshablon_category_select">
            <option value="">Выберите категорию</option>
            <?php
            $categories = get_terms(['taxonomy' => 'category', 'hide_empty' => false]);
            foreach ($categories as $cat) {
                echo '<option value="'.esc_attr($cat->term_id).'">'.esc_html($cat->name).'</option>';
            }
            ?>
        </select>

        <select id="wpshablon_subcategory_select" disabled>
            <option value="">Сначала выберите категорию</option>
        </select>
    </div>
    <?php
}

Этот код создаёт меню в админке с двумя селектами. Первый селект заполняется категориями из стандартной таксономии WordPress (category). Второй селект пока пуст и заблокирован.

Шаг 2. Добавляем JavaScript для динамического обновления селекта

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

function wpshablon_enqueue_admin_scripts($hook) {
    if ($hook !== 'toplevel_page_wpshablon-dynamic-selects') return;

    wp_enqueue_script('wpshablon-admin-js', plugin_dir_url(__FILE__) . 'admin.js', ['jquery'], false, true);
    wp_localize_script('wpshablon-admin-js', 'wpshablon_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('admin_enqueue_scripts', 'wpshablon_enqueue_admin_scripts');

Создайте файл admin.js рядом с плагином с таким содержимым:

jQuery(document).ready(function($) {
    $('#wpshablon_category_select').on('change', function() {
        var catId = $(this).val();
        var subcatSelect = $('#wpshablon_subcategory_select');

        if (!catId) {
            subcatSelect.html('<option value="">Сначала выберите категорию</option>');
            subcatSelect.prop('disabled', true);
            return;
        }

        subcatSelect.prop('disabled', true);
        subcatSelect.html('<option>Загрузка...</option>');

        $.ajax({
            url: wpshablon_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wpshablon_get_subcategories',
                category_id: catId
            },
            success: function(response) {
                if (response.success) {
                    var options = '<option value="">Выберите подкатегорию</option>';
                    $.each(response.data, function(index, subcat) {
                        options += '<option value="' + subcat.term_id + '">' + subcat.name + '</option>';
                    });
                    subcatSelect.html(options);
                    subcatSelect.prop('disabled', false);
                } else {
                    subcatSelect.html('<option>Подкатегории не найдены</option>');
                }
            },
            error: function() {
                subcatSelect.html('<option>Ошибка загрузки</option>');
            }
        });
    });
});

Шаг 3. Обрабатываем AJAX-запрос в PHP

В functions.php или в файле плагина добавьте обработку ajax:

function wpshablon_ajax_get_subcategories() {
    if (!isset($_POST['category_id'])) {
        wp_send_json_error('Нет ID категории');
    }
    $cat_id = intval($_POST['category_id']);

    // Получаем подкатегории, где parent равен выбранной категории
    $subcategories = get_terms([
        'taxonomy' => 'category',
        'hide_empty' => false,
        'parent' => $cat_id
    ]);

    if (is_wp_error($subcategories) || empty($subcategories)) {
        wp_send_json_error('Подкатегории не найдены');
    }

    $result = [];
    foreach ($subcategories as $subcat) {
        $result[] = [
            'term_id' => $subcat->term_id,
            'name' => $subcat->name
        ];
    }

    wp_send_json_success($result);
}
add_action('wp_ajax_wpshablon_get_subcategories', 'wpshablon_ajax_get_subcategories');

Дополнительные советы и расширения

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

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

Если вы хотите встраивать подобный функционал в пользовательские формы на фронтенде, то придется адаптировать JavaScript и PHP обработку для публичной части.

Как улучшить UX динамических селектов

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

2. Используйте селекты с поддержкой поиска, например, Select2, чтобы облегчить выбор при большом количестве опций.

3. Кэшируйте результаты AJAX-запросов, если данные не меняются часто, чтобы уменьшить нагрузку на сервер.

Заключение по созданию динамических селектов

Создание динамических выпадающих списков в админке WordPress — задача, которую можно реализовать с помощью стандартных инструментов WP: хуков, AJAX и JS. Это позволяет сделать админку удобнее и мощнее, особенно если вы разрабатываете сложные плагины или темы. Код из статьи можно взять за основу и адаптировать под любые свои задачи.