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

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

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

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

Пользовательские типы полей дают возможность создавать интуитивные формы, которые позволяют выбирать цвет, загружать изображения, добавлять несколько элементов в одном разделе и многое другое. Это повышает удобство работы с плагином и снижает вероятность ошибок.

К тому же, грамотное оформление интерфейса настроек повышает доверие к продукту и улучшает пользовательский опыт.

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

WordPress предоставляет Settings API — удобный и стандартизированный способ создания и обработки настроек.

Для начала создадим страницу настроек в административной панели. В файле основного плагина добавим следующий код:

add_action('admin_menu', 'wproot_add_settings_page');
function wproot_add_settings_page() {
    add_options_page('Настройки плагина', 'WPRoot Настройки', 'manage_options', 'wproot-settings', 'wproot_render_settings_page');
}

function wproot_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки плагина WPRoot</h1>
        <form method="post" action="options.php">
            <?php
                settings_fields('wproot_options_group');
                do_settings_sections('wproot-settings');
                submit_button();
            ?>
        </form>
    </div>
    <?php
}

Этот код создаёт новую страницу в меню «Настройки» с формой для наших опций.

Регистрация и определение пользовательских полей

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

Для примера создадим 4 поля:

• Цветовой селектор
• Загрузчик изображения
• Повторяющийся список текстовых значений
• Переключатель (toggle switch)

Вот пример регистрации настроек и добавления секций и полей:

add_action('admin_init', 'wproot_settings_init');
function wproot_settings_init() {
    register_setting('wproot_options_group', 'wproot_options', 'wproot_sanitize_options');

    add_settings_section('wproot_main_section', 'Основные настройки', null, 'wproot-settings');

    add_settings_field('wproot_color', 'Выберите цвет', 'wproot_color_render', 'wproot-settings', 'wproot_main_section');
    add_settings_field('wproot_image', 'Загрузите изображение', 'wproot_image_render', 'wproot-settings', 'wproot_main_section');
    add_settings_field('wproot_list', 'Список значений', 'wproot_list_render', 'wproot-settings', 'wproot_main_section');
    add_settings_field('wproot_toggle', 'Включить функцию', 'wproot_toggle_render', 'wproot-settings', 'wproot_main_section');
}

function wproot_sanitize_options($input) {
    $sanitized = [];
    if(isset($input['color'])) {
        $sanitized['color'] = sanitize_text_field($input['color']);
    }
    if(isset($input['image'])) {
        $sanitized['image'] = esc_url_raw($input['image']);
    }
    if(isset($input['list']) && is_array($input['list'])) {
        $sanitized['list'] = array_map('sanitize_text_field', $input['list']);
    }
    $sanitized['toggle'] = !empty($input['toggle']) ? 1 : 0;
    return $sanitized;
}

Цветовой селектор

Используем встроенный в WordPress элемент color picker. Для этого подключим скрипты и стили, а в рендере поля добавим input с классом wp-color-picker-field.

add_action('admin_enqueue_scripts', 'wproot_enqueue_color_picker');
function wproot_enqueue_color_picker($hook_suffix) {
    if ($hook_suffix === 'settings_page_wproot-settings') {
        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script('wproot-color-picker', plugins_url('color-picker.js', __FILE__), ['wp-color-picker'], false, true);
    }
}

function wproot_color_render() {
    $options = get_option('wproot_options');
    $color = isset($options['color']) ? $options['color'] : '#ffffff';
    echo '<input type="text" name="wproot_options[color]" value="'.esc_attr($color).'" class="wp-color-picker-field" />';
}

Файл color-picker.js содержит инициализацию:

jQuery(document).ready(function($){
    $('.wp-color-picker-field').wpColorPicker();
});

Загрузчик изображения

Для удобной загрузки изображений используем медиабиблиотеку WordPress. В поле добавим кнопку, которая откроет медиабиблиотеку, и поле с URL выбранного файла.

function wproot_image_render() {
    $options = get_option('wproot_options');
    $image = isset($options['image']) ? $options['image'] : '';
    ?>
    <div>
        <input type="text" name="wproot_options[image]" id="wproot_image" value="<?php echo esc_attr($image); ?>" style="width:60%;" />
        <button type="button" class="button" id="wproot_image_button">Выбрать изображение</button>
    </div>
    <script>
    jQuery(document).ready(function($){
        var file_frame;
        $('#wproot_image_button').on('click', function(e){
            e.preventDefault();
            if (file_frame) {
                file_frame.open();
                return;
            }
            file_frame = wp.media.frames.file_frame = wp.media({
                title: 'Выберите изображение',
                button: { text: 'Выбрать' },
                multiple: false
            });
            file_frame.on('select', function(){
                var attachment = file_frame.state().get('selection').first().toJSON();
                $('#wproot_image').val(attachment.url);
            });
            file_frame.open();
        });
    });
    </script>
    <?php
}

Повторяющийся список текстовых значений

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

function wproot_list_render() {
    $options = get_option('wproot_options');
    $list = isset($options['list']) && is_array($options['list']) ? $options['list'] : [''];
    ?>
    <div id="wproot-list-container">
        <?php foreach($list as $index => $item): ?>
            <div class="wproot-list-item">
                <input type="text" name="wproot_options[list][]" value="<?php echo esc_attr($item); ?>" />
                <button type="button" class="button wproot-remove-item">Удалить</button>
            </div>
        <?php endforeach; ?>
    </div>
    <button type="button" class="button" id="wproot-add-item">Добавить элемент</button>
    <script>
    jQuery(document).ready(function($){
        $('#wproot-add-item').on('click', function(){
            $('#wproot-list-container').append('<div class="wproot-list-item"><input type="text" name="wproot_options[list][]" value="" /> <button type="button" class="button wproot-remove-item">Удалить</button></div>');
        });
        $(document).on('click', '.wproot-remove-item', function(){
            $(this).parent('.wproot-list-item').remove();
        });
    });
    </script>
    <style>
        .wproot-list-item { margin-bottom: 5px; }
        .wproot-list-item input { width: 60%; }
    </style>
    <?php
}

Переключатель (toggle switch)

Для красивого переключателя можно использовать простой чекбокс со стилями или готовую библиотеку. Для простоты используем чекбокс с label:

function wproot_toggle_render() {
    $options = get_option('wproot_options');
    $checked = !empty($options['toggle']) ? 'checked' : '';
    ?>
    <label style="display:flex; align-items:center;">
        <input type="checkbox" name="wproot_options[toggle]" value="1" <?php echo $checked; ?> />
        <span style="margin-left:8px;">Включить функцию</span>
    </label>
    <?php
}

Пример использования настроек в коде плагина

После того, как настройки сохранены, получаем их с помощью get_option('wproot_options') и используем в нужных местах.

$options = get_option('wproot_options');

// Например, выводим выбранный цвет для стилизации
if (!empty($options['color'])) {
    echo '<style> body { background-color: '.esc_attr($options['color']).'; } </style>';
}

// Используем загруженное изображение
if (!empty($options['image'])) {
    echo '<img src="'.esc_url($options['image']).'" alt="Изображение" />';
}

// Выводим список элементов
if (!empty($options['list']) && is_array($options['list'])) {
    echo '<ul>';
    foreach ($options['list'] as $item) {
        echo '<li>' . esc_html($item) . '</li>';
    }
    echo '</ul>';
}

// Проверяем переключатель
if (!empty($options['toggle'])) {
    // Выполняем дополнительную логику
}

Подключение и рекомендации по безопасности

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

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

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

Заключение

Создание настроек с пользовательскими типами полей значительно расширяет возможности плагина и улучшает удобство для пользователей. Используйте Settings API, медиазагрузчик и JavaScript для динамичных элементов. Такой подход позволяет создавать мощные и гибкие решения без избыточной сложности.

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