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

В админке WordPress часто требуется добавить пользовательские настройки с удобным интерфейсом для выбора значений. Один из популярных элементов — это выпадающий список (select). В этой статье мы подробно разберем, как создать поле выпадающий список в админке WordPress, сохранить выбранное значение и вывести его на сайте. Пример будет написан с применением стандартных API WordPress, что обеспечит максимальную совместимость и надежность.

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

Для начала определимся, куда мы хотим добавить наше поле. Чаще всего это страница настроек темы или отдельная опция в разделе «Настройки» (Settings). Рассмотрим добавление поля в раздел настроек на примере страницы настроек темы.

Для создания страницы настроек и добавления туда поля используем функции add_menu_page и add_settings_field. Сначала создадим функцию, которая зарегистрирует настройки и добавит поле:

function wpmanual_register_settings() {
    register_setting('wpmanual_options_group', 'wpmanual_select_option');

    add_settings_section(
        'wpmanual_main_section',
        'Основные настройки',
        'wpmanual_section_callback',
        'wpmanual'
    );

    add_settings_field(
        'wpmanual_select_field',
        'Выберите значение',
        'wpmanual_select_field_callback',
        'wpmanual',
        'wpmanual_main_section'
    );
}
add_action('admin_init', 'wpmanual_register_settings');

Здесь мы регистрируем новую опцию wpmanual_select_option, создаем секцию и добавляем поле. Далее создадим коллбэки для секции и поля:

function wpmanual_section_callback() {
    echo '<p>Настройте параметры темы через этот раздел.</p>';
}

function wpmanual_select_field_callback() {
    $option = get_option('wpmanual_select_option', '');
    $options = [
        'red' => 'Красный',
        'green' => 'Зеленый',
        'blue' => 'Синий',
    ];

    echo '<select name="wpmanual_select_option" id="wpmanual_select_option">';
    foreach ($options as $value => $label) {
        $selected = selected($option, $value, false);
        echo "<option value=\"$value\" $selected>$label</option>";
    }
    echo '</select>';
}

Теперь создадим страницу настроек и добавим меню в админку, чтобы открывать эту страницу:

function wpmanual_add_admin_menu() {
    add_menu_page(
        'Настройки WPManual',
        'WPManual Настройки',
        'manage_options',
        'wpmanual',
        'wpmanual_options_page'
    );
}
add_action('admin_menu', 'wpmanual_add_admin_menu');

function wpmanual_options_page() {
    ?>
    <div class="wrap">
        <h1>Настройки WPManual</h1>
        <form action="options.php" method="post">
            <?php
            settings_fields('wpmanual_options_group');
            do_settings_sections('wpmanual');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

Обработка и сохранение данных из выпадающего списка

WordPress автоматически сохраняет значение поля, если мы правильно указали параметр в register_setting и используется функция settings_fields. Однако, чтобы обезопасить данные и выполнить дополнительную валидацию, можно добавить callback в register_setting:

function wpmanual_sanitize_select_option($input) {
    $allowed = ['red', 'green', 'blue'];
    if (!in_array($input, $allowed, true)) {
        add_settings_error('wpmanual_select_option', 'invalid_color', 'Выбран недопустимый цвет');
        return get_option('wpmanual_select_option');
    }
    return $input;
}

register_setting('wpmanual_options_group', 'wpmanual_select_option', 'wpmanual_sanitize_select_option');

Это позволит предотвратить сохранение некорректных данных в базу.

Вывод выбранного значения на сайте

Чтобы использовать выбранное значение в шаблонах сайта, просто вызовите функцию get_option('wpmanual_select_option'). Например, можно задать цвет фона в зависимости от выбора пользователя:

$color = get_option('wpmanual_select_option', 'red');
echo '<div style="background-color: ' . esc_attr($color) . '; padding: 20px; color: #fff;">';
echo 'Выбран цвет: ' . esc_html($color);
echo '</div>';

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

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

Еще один вариант — использовать WPCommunity, если вы создаете сайт с участниками и хотите добавить индивидуальные настройки с удобным UI.

Добавление нескольких выпадающих списков с зависимостями

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

function wpmanual_select_field_callback() {
    $option_cat = get_option('wpmanual_category_option', 'fruit');
    $option_item = get_option('wpmanual_item_option', 'apple');
    $categories = [
        'fruit' => 'Фрукты',
        'vegetable' => 'Овощи',
    ];
    $items = [
        'fruit' => ['apple' => 'Яблоко', 'banana' => 'Банан'],
        'vegetable' => ['carrot' => 'Морковь', 'potato' => 'Картофель'],
    ];

    echo '<select name="wpmanual_category_option" id="wpmanual_category_option">';
    foreach ($categories as $key => $label) {
        $selected = selected($option_cat, $key, false);
        echo "<option value=\"$key\" $selected>$label</option>";
    }
    echo '</select>';

    echo '<select name="wpmanual_item_option" id="wpmanual_item_option">';
    foreach ($items[$option_cat] as $key => $label) {
        $selected = selected($option_item, $key, false);
        echo "<option value=\"$key\" $selected>$label</option>";
    }
    echo '</select>';

    // JS для динамической подгрузки
    echo '<script>
    const categorySelect = document.getElementById("wpmanual_category_option");
    const itemSelect = document.getElementById("wpmanual_item_option");
    const items = ' . json_encode($items) . ';

    categorySelect.addEventListener("change", function() {
        const selectedCategory = this.value;
        itemSelect.innerHTML = "";
        for (const key in items[selectedCategory]) {
            const option = document.createElement("option");
            option.value = key;
            option.text = items[selectedCategory][key];
            itemSelect.appendChild(option);
        }
    });
    </script>';
}

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