Как создать настройку с выбором из списка в админке WordPress

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

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

Выбор из списка (select dropdown) помогает ограничить ввод пользователя конкретными значениями, что предотвращает ошибки и упрощает логику обработки данных. В отличие от простого текстового поля, список строго контролирует, что именно будет записано в базу данных.

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

Кроме того, использование списка улучшает UX: администратору проще выбрать вариант, чем вводить его вручную.

Как добавить настройку с выбором из списка в WordPress: пример кода

Для примера создадим настройку wpsetup_color_scheme, которая будет хранить выбранную цветовую схему сайта. Возможные варианты: light, dark, auto.

Для этого будем использовать API настроек WordPress — register_setting, add_settings_section и add_settings_field.

function wpsetup_register_settings() {
    register_setting('wpsetup_options_group', 'wpsetup_color_scheme', [
        'type' => 'string',
        'sanitize_callback' => 'wpsetup_sanitize_color_scheme',
        'default' => 'light'
    ]);

    add_settings_section(
        'wpsetup_main_section',
        'Основные настройки',
        null,
        'wpsetup_options_page'
    );

    add_settings_field(
        'wpsetup_color_scheme',
        'Цветовая схема сайта',
        'wpsetup_color_scheme_field_cb',
        'wpsetup_options_page',
        'wpsetup_main_section'
    );
}
add_action('admin_init', 'wpsetup_register_settings');

// Коллбек для поля выбора
function wpsetup_color_scheme_field_cb() {
    $options = [
        'light' => 'Светлая',
        'dark' => 'Тёмная',
        'auto' => 'Автоматическая'
    ];
    $current = get_option('wpsetup_color_scheme', 'light');
    echo '<select name="wpsetup_color_scheme" id="wpsetup_color_scheme">';
    foreach ($options as $value => $label) {
        $selected = selected($current, $value, false);
        echo "<option value=\"$value\" $selected>$label</option>";
    }
    echo '</select>';
}

// Функция валидации
function wpsetup_sanitize_color_scheme($input) {
    $valid = ['light', 'dark', 'auto'];
    if (in_array($input, $valid, true)) {
        return $input;
    }
    return 'light';
}

Как вывести страницу настроек с этим параметром в админке

Чтобы пользователь мог менять эту настройку, нужно создать страницу в меню админки и подключить к ней форму с вызовом settings_fields, do_settings_sections и submit_button.

function wpsetup_add_options_page() {
    add_options_page(
        'Настройки WpSetup',
        'WpSetup',
        'manage_options',
        'wpsetup_options_page',
        'wpsetup_options_page_html'
    );
}
add_action('admin_menu', 'wpsetup_add_options_page');

function wpsetup_options_page_html() {
    if (!current_user_can('manage_options')) {
        return;
    }
    if (isset($_GET['settings-updated'])) {
        add_settings_error('wpsetup_messages', 'wpsetup_message', 'Настройки сохранены', 'updated');
    }
    settings_errors('wpsetup_messages');
    echo '<div class="wrap">';
    echo '<h1>Настройки WpSetup</h1>';
    echo '<form action="options.php" method="post">';
    settings_fields('wpsetup_options_group');
    do_settings_sections('wpsetup_options_page');
    submit_button('Сохранить');
    echo '</form></div>';
}

Как использовать сохранённое значение в теме или плагине

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

$color_scheme = get_option('wpsetup_color_scheme', 'light');
switch ($color_scheme) {
    case 'dark':
        // Подключаем темные стили
        wp_enqueue_style('wpsetup-dark-style', get_template_directory_uri() . '/css/dark.css');
        break;
    case 'auto':
        // Логика авто-выбора по времени или системным настройкам
        break;
    case 'light':
    default:
        // Подключаем светлые стили
        wp_enqueue_style('wpsetup-light-style', get_template_directory_uri() . '/css/light.css');
        break;
}

Альтернативы: использование плагинов для управления настройками

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

• Clearfy Pro – расширяет возможности управления настройками и оптимизации сайта.
• Expert Review – если нужны настройки для управления отзывами и оценками.

Но если нужна именно своя, уникальная настройка с контролем, то ручной код — самый гибкий вариант.

Проверка и отладка

После добавления кода проверьте что:

• В админке появилась новая страница с настройками.
• Выпадающий список корректно отображает варианты.
• При сохранении выбранное значение сохраняется и выводится при повторном открытии страницы.
• Валидация работает: если вручную отправить в базу неправильное значение, оно не сохранится.

Если что-то не работает, проверьте консоль браузера и логи сервера, а также правильность регистрации хуков.