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

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

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

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

Основы Settings API: регистрация настроек и создание страницы

Settings API позволяет зарегистрировать настройки, их поля и группы, а также выводить страницы с формами в админке WordPress. Процесс можно разбить на несколько этапов:

Регистрация страницы настроек в меню админки через add_options_page или аналогичные функции.
Регистрация группы настроек с помощью register_setting.
Добавление секций настроек и полей через add_settings_section и add_settings_field.
Вывод формы настроек с помощью settings_fields, do_settings_sections и кнопки сохранения.

Рассмотрим пример создания страницы настроек для плагина с доменным префиксом wpdemo.

Пример: создание страницы настроек плагина WPdemo Plugin

1. Добавляем страницу настроек в меню

В файле плагина или в основном классе добавьте хук для создания страницы:

add_action('admin_menu', 'wpdemo_add_settings_page');

function wpdemo_add_settings_page() {
    add_options_page(
        'Настройки WPdemo Plugin', // Заголовок страницы
        'WPdemo Plugin',           // Название в меню
        'manage_options',           // Права доступа
        'wpdemo-plugin-settings',  // Слаг страницы
        'wpdemo_render_settings_page' // Функция вывода
    );
}

2. Регистрируем настройки и поля

Используем admin_init для регистрации настроек и полей:

add_action('admin_init', 'wpdemo_register_settings');

function wpdemo_register_settings() {
    // Регистрируем настройку
    register_setting('wpdemo_settings_group', 'wpdemo_option_text');
    register_setting('wpdemo_settings_group', 'wpdemo_option_checkbox');

    // Добавляем секцию
    add_settings_section(
        'wpdemo_settings_section',
        'Основные настройки',
        'wpdemo_settings_section_callback',
        'wpdemo-plugin-settings'
    );

    // Добавляем поля
    add_settings_field(
        'wpdemo_option_text',
        'Текстовое поле',
        'wpdemo_render_text_field',
        'wpdemo-plugin-settings',
        'wpdemo_settings_section'
    );

    add_settings_field(
        'wpdemo_option_checkbox',
        'Чекбокс',
        'wpdemo_render_checkbox_field',
        'wpdemo-plugin-settings',
        'wpdemo_settings_section'
    );
}

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

3. Вывод полей ввода

Функции для вывода конкретных типов полей:

function wpdemo_render_text_field() {
    $value = get_option('wpdemo_option_text', '');
    echo '<input type="text" name="wpdemo_option_text" value="' . esc_attr($value) . '" class="regular-text" />';
}

function wpdemo_render_checkbox_field() {
    $value = get_option('wpdemo_option_checkbox', false);
    $checked = $value ? 'checked' : '';
    echo '<input type="checkbox" name="wpdemo_option_checkbox" value="1" ' . $checked . ' /> Включить функцию';
}

4. Вывод формы настроек

Теперь создадим функцию, которая выведет всю страницу с формой:

function wpdemo_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки WPdemo Plugin</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('wpdemo_settings_group');
            do_settings_sections('wpdemo-plugin-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

Расширение функционала: добавление дополнительных типов полей

Основные поля — текстовые и чекбоксы — подходят для большинства задач, но иногда нужны более сложные элементы: выпадающие списки, цветовые палитры, загрузка файлов и т.д. Рассмотрим пример добавления поля select и color picker.

Выпадающий список (select)

Для выбора из нескольких вариантов удобно использовать select. Добавим поле:

add_settings_field(
    'wpdemo_option_select',
    'Выбор варианта',
    'wpdemo_render_select_field',
    'wpdemo-plugin-settings',
    'wpdemo_settings_section'
);

register_setting('wpdemo_settings_group', 'wpdemo_option_select');

function wpdemo_render_select_field() {
    $options = get_option('wpdemo_option_select', 'option1');
    $choices = [
        'option1' => 'Вариант 1',
        'option2' => 'Вариант 2',
        'option3' => 'Вариант 3',
    ];
    echo '<select name="wpdemo_option_select">';
    foreach ($choices as $value => $label) {
        $selected = selected($options, $value, false);
        echo "<option value=\"$value\" $selected>$label</option>";
    }
    echo '</select>';
}

Цветовой выбор (color picker)

WordPress поставляется с удобным wp-color-picker, который можно подключить к своим полям.

Добавим поле и подключим скрипты:

add_settings_field(
    'wpdemo_option_color',
    'Выбор цвета',
    'wpdemo_render_color_field',
    'wpdemo-plugin-settings',
    'wpdemo_settings_section'
);

register_setting('wpdemo_settings_group', 'wpdemo_option_color');

function wpdemo_render_color_field() {
    $color = get_option('wpdemo_option_color', '#ffffff');
    echo '<input type="text" name="wpdemo_option_color" value="' . esc_attr($color) . '" class="wpdemo-color-field" data-default-color="#ffffff" />';
}

add_action('admin_enqueue_scripts', 'wpdemo_enqueue_color_picker');
function wpdemo_enqueue_color_picker($hook_suffix) {
    if ($hook_suffix !== 'settings_page_wpdemo-plugin-settings') {
        return;
    }
    wp_enqueue_style('wp-color-picker');
    wp_enqueue_script('wp-color-picker');
    wp_add_inline_script('wp-color-picker', 'jQuery(document).ready(function($){ $(".wpdemo-color-field").wpColorPicker(); });');
}

Советы по безопасности и удобству

При работе с настройками важно соблюдать несколько правил:

Проверяйте и фильтруйте данные: используйте параметры в register_setting для валидации и очистки данных.
Проверяйте права пользователя: доступ к настройкам должен быть только у администраторов или ролей с правом manage_options.
Удобство интерфейса: разбивайте настройки на логичные секции, используйте подсказки и описания.
Локализация: если планируете многоязычность, применяйте функции перевода __() и _e().

Плагины для удобного создания страниц настроек

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

CMB2 — мощный библиотека для создания метаполей и настроек с удобным API.
Redux Framework — популярный фреймворк с большим набором элементов интерфейса и поддержкой экспорта/импорта.
Settings API Extensions — расширения для стандартного Settings API с дополнительными функциями.

Использование таких инструментов ускоряет разработку и снижает вероятность ошибок.

Заключение по созданию страницы настроек плагина WordPress

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

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