Создание настроек плагина WordPress с пользовательским интерфейсом на примере

Автор: Георгий Панин | Опубликовано: 16.01.2026

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

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

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

Регистрация страницы настроек и создание меню

Первый шаг — зарегистрировать страницу настроек в административной панели WordPress. Для этого используется функция add_menu_page или add_submenu_page. Вот простой пример, как добавить новую страницу в меню:

function wpcontrol_add_settings_page() {
    add_menu_page(
        'Настройки WPControl', // Заголовок страницы
        'WPControl Настройки',  // Название меню
        'manage_options',       // Уровень доступа
        'wpcontrol-settings',   // Уникальный слаг
        'wpcontrol_render_settings_page', // Функция вывода контента
        'dashicons-admin-generic', // Иконка меню
        80 // Позиция в меню
    );
}
add_action('admin_menu', 'wpcontrol_add_settings_page');

В данном примере создаётся новый пункт меню с названием «WPControl Настройки» и вызывается функция wpcontrol_render_settings_page, которая будет отвечать за вывод содержимого страницы.

Создание формы настроек с использованием Settings API WordPress

Чтобы настройки сохранялись и валидировались корректно, используем Settings API. Сначала регистрируем настройки, потом добавляем секции и поля.

Регистрация настроек и секций

function wpcontrol_register_settings() {
    register_setting('wpcontrol_settings_group', 'wpcontrol_options', 'wpcontrol_validate_options');

    add_settings_section(
        'wpcontrol_main_section',
        'Основные настройки',
        'wpcontrol_section_text',
        'wpcontrol-settings'
    );

    add_settings_field(
        'wpcontrol_text_field',
        'Текстовое поле',
        'wpcontrol_text_field_callback',
        'wpcontrol-settings',
        'wpcontrol_main_section'
    );
}
add_action('admin_init', 'wpcontrol_register_settings');

Здесь register_setting регистрирует группу настроек и ключ опций, а функция wpcontrol_validate_options будет отвечать за валидацию. Секция и поле добавляются для структурирования настроек.

Вывод описания секции

function wpcontrol_section_text() {
    echo '<p>Настройте основные параметры плагина WPControl.</p>';
}

Вывод поля ввода

function wpcontrol_text_field_callback() {
    $options = get_option('wpcontrol_options');
    $value = isset($options['text_field']) ? esc_attr($options['text_field']) : '';
    echo '<input type="text" id="wpcontrol_text_field" name="wpcontrol_options[text_field]" value="' . $value . '" class="regular-text" />';
}

Валидация введенных данных

function wpcontrol_validate_options($input) {
    $output = [];
    if (isset($input['text_field'])) {
        $output['text_field'] = sanitize_text_field($input['text_field']);
    }
    return $output;
}

Вывод страницы настроек с формой

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

function wpcontrol_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки WPControl</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('wpcontrol_settings_group');
            do_settings_sections('wpcontrol-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

Функции settings_fields и do_settings_sections выводят скрытые поля и все зарегистрированные секции с полями.

Добавление расширенного пользовательского интерфейса

Для улучшения UX можно использовать JavaScript и CSS, подключать библиотеку Clearfy Pro для оптимизации админки или WPRemark для отзывов и обратной связи.

Пример добавления переключателя с использованием стандартного чекбокса и кастомного CSS:

function wpcontrol_checkbox_field_callback() {
    $options = get_option('wpcontrol_options');
    $checked = isset($options['enable_feature']) && $options['enable_feature'] ? 'checked' : '';
    echo '<label class="switch">
            <input type="checkbox" name="wpcontrol_options[enable_feature]" value="1" ' . $checked . ' />
            <span class="slider round"></span>
          </label>';
}

// CSS для переключателя нужно подключить отдельно либо вставить inline

Подключение стилей и скриптов

Для подключения CSS и JS в админке используйте хук admin_enqueue_scripts:

function wpcontrol_admin_assets($hook) {
    if ($hook !== 'toplevel_page_wpcontrol-settings') {
        return;
    }
    wp_enqueue_style('wpcontrol-admin-style', plugin_dir_url(__FILE__) . 'css/admin-style.css');
    wp_enqueue_script('wpcontrol-admin-script', plugin_dir_url(__FILE__) . 'js/admin-script.js', ['jquery'], null, true);
}
add_action('admin_enqueue_scripts', 'wpcontrol_admin_assets');

Практические советы по созданию настроек

Используйте Settings API для безопасности и совместимости.
Валидация и санитизация данных обязательны для предотвращения уязвимостей.
Структурируйте настройки по секциям для удобства.
Добавляйте описания и подсказки для каждого поля.
Для сложных интерфейсов подключайте JS-фреймворки или готовые библиотеки.

Пример расширенного поля: загрузка изображения

Часто нужно добавить возможность загрузить логотип или иконку. Сделаем поле загрузки изображения с помощью медиабиблиотеки WordPress.

function wpcontrol_image_field_callback() {
    $options = get_option('wpcontrol_options');
    $image_id = isset($options['logo']) ? $options['logo'] : '';
    $image_url = $image_id ? wp_get_attachment_url($image_id) : '';
    ?>
    <div>
        <img id="wpcontrol_logo_preview" src="<?php echo esc_url($image_url); ?>" style="max-width:150px;<?php echo $image_url ? '' : 'display:none;'; ?>" />
        <input type="hidden" id="wpcontrol_logo" name="wpcontrol_options[logo]" value="<?php echo esc_attr($image_id); ?>" />
        <button type="button" class="button" id="wpcontrol_logo_upload">Загрузить логотип</button>
        <button type="button" class="button" id="wpcontrol_logo_remove" <?php echo $image_url ? '' : 'style="display:none;"'; ?>>Удалить</button>
    </div>
    <script>
    jQuery(document).ready(function($){
        var mediaUploader;
        $('#wpcontrol_logo_upload').on('click', function(e) {
            e.preventDefault();
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            mediaUploader = wp.media.frames.file_frame = wp.media({
                title: 'Выберите логотип',
                button: { text: 'Выбрать' },
                multiple: false
            });
            mediaUploader.on('select', function() {
                var attachment = mediaUploader.state().get('selection').first().toJSON();
                $('#wpcontrol_logo').val(attachment.id);
                $('#wpcontrol_logo_preview').attr('src', attachment.url).show();
                $('#wpcontrol_logo_remove').show();
            });
            mediaUploader.open();
        });
        $('#wpcontrol_logo_remove').on('click', function(e) {
            e.preventDefault();
            $('#wpcontrol_logo').val('');
            $('#wpcontrol_logo_preview').hide();
            $(this).hide();
        });
    });
    </script>
    <?php
}

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

function wpcontrol_enqueue_media() {
    if (get_current_screen()->id === 'toplevel_page_wpcontrol-settings') {
        wp_enqueue_media();
    }
}
add_action('admin_enqueue_scripts', 'wpcontrol_enqueue_media');