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

Автор: Екатерина Лебедева | Опубликовано: 02.12.2025

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

Что такое Settings API и зачем он нужен в WordPress

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

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

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

Создаем страницу настроек плагина в WordPress

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

function wpreboot_add_settings_page() {
    add_options_page(
        'Настройки WPReboot', // Заголовок страницы
        'WPReboot Settings',   // Текст меню
        'manage_options',      // Права доступа
        'wpreboot-settings',   // Уникальный slug
        'wpreboot_render_settings_page' // Функция вывода
    );
}
add_action('admin_menu', 'wpreboot_add_settings_page');

Затем создадим функцию wpreboot_render_settings_page, которая будет выводить HTML формы с вызовом settings_fields и do_settings_sections:

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

Регистрируем секции и поля

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

function wpreboot_register_settings() {
    register_setting('wpreboot_options_group', 'wpreboot_options', 'wpreboot_validate_options');

    add_settings_section(
        'wpreboot_main_section',
        'Основные настройки',
        'wpreboot_main_section_callback',
        'wpreboot-settings'
    );

    add_settings_field(
        'wpreboot_text_field',
        'Текстовое поле',
        'wpreboot_text_field_callback',
        'wpreboot-settings',
        'wpreboot_main_section'
    );

    add_settings_field(
        'wpreboot_checkbox',
        'Опция включена',
        'wpreboot_checkbox_callback',
        'wpreboot-settings',
        'wpreboot_main_section'
    );
}
add_action('admin_init', 'wpreboot_register_settings');

Функция вывода описания секции:

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

Вывод поля текстового ввода:

function wpreboot_text_field_callback() {
    $options = get_option('wpreboot_options');
    $value = isset($options['text_field']) ? esc_attr($options['text_field']) : '';
    echo "<input type='text' name='wpreboot_options[text_field]' value='$value' />";
}

Вывод флажка (checkbox):

function wpreboot_checkbox_callback() {
    $options = get_option('wpreboot_options');
    $checked = isset($options['checkbox']) && $options['checkbox'] ? 'checked' : '';
    echo "<input type='checkbox' name='wpreboot_options[checkbox]' value='1' $checked />";
}

Валидация и очистка данных настроек

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

function wpreboot_validate_options($input) {
    $output = array();

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

    $output['checkbox'] = isset($input['checkbox']) && $input['checkbox'] ? 1 : 0;

    return $output;
}

Здесь мы используем sanitize_text_field для безопасной очистки текста и приводим чекбокс к 0 или 1.

Примеры полезных плагинов с настройками

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

Contact Form 7 — простой интерфейс с настройками форм;
Yoast SEO — сложный набор настроек с множеством секций и опций;
Akismet Anti-Spam — минималистичный, но эффективный интерфейс.

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

Расширение: Добавление поля выбора цвета и селекта

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

add_settings_field(
    'wpreboot_color_picker',
    'Выбор цвета',
    'wpreboot_color_picker_callback',
    'wpreboot-settings',
    'wpreboot_main_section'
);

add_settings_field(
    'wpreboot_select_field',
    'Выбор опции',
    'wpreboot_select_field_callback',
    'wpreboot-settings',
    'wpreboot_main_section'
);

function wpreboot_color_picker_callback() {
    $options = get_option('wpreboot_options');
    $color = isset($options['color_picker']) ? esc_attr($options['color_picker']) : '#ffffff';
    echo "<input type='text' class='wpreboot-color-field' name='wpreboot_options[color_picker]' value='$color' />";
}

function wpreboot_select_field_callback() {
    $options = get_option('wpreboot_options');
    $selected = isset($options['select_field']) ? $options['select_field'] : '';
    $choices = array('option1' => 'Опция 1', 'option2' => 'Опция 2', 'option3' => 'Опция 3');
    echo "<select name='wpreboot_options[select_field]'>";
    foreach ($choices as $value => $label) {
        $sel = selected($selected, $value, false);
        echo "<option value='$value' $sel>$label</option>";
    }
    echo "</select>";
}

Чтобы цветовой селектор работал, подключим скрипты и стили WordPress color picker в админке:

function wpreboot_enqueue_color_picker($hook_suffix) {
    if ('settings_page_wpreboot-settings' !== $hook_suffix) {
        return;
    }
    wp_enqueue_style('wp-color-picker');
    wp_enqueue_script('wpreboot-color-picker', plugins_url('color-picker.js', __FILE__), array('wp-color-picker'), false, true);
}
add_action('admin_enqueue_scripts', 'wpreboot_enqueue_color_picker');

В файле color-picker.js инициализируем плагин jQuery color picker:

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

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

Для получения сохраненных значений используйте функцию get_option с вашим ключом:

$options = get_option('wpreboot_options');
$text = isset($options['text_field']) ? $options['text_field'] : '';
$enabled = !empty($options['checkbox']);

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

Подводим итоги

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

Добавлять меню и страницу настроек;
Регистрировать секции и поля;
Правильно валидировать и сохранять данные;
Добавлять сложные поля, например, цветовой селектор и выпадающие списки;
Подключать скрипты и стили для улучшения UX;
Использовать сохраненные настройки в коде плагина.

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