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

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

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

Многие плагины предлагают множество функций, которые должны настраиваться под конкретные задачи сайта. Без удобного интерфейса настройки пользователю придётся менять код вручную или использовать устаревшие методы. Создание собственного меню и страницы настроек в админке решает эти проблемы:

• Пользователь видит все параметры в одном месте;
• Настройки сохраняются корректно и безопасно;
• Можно использовать типовые элементы управления (чекбоксы, селекты, текстовые поля);
• Упрощается поддержка и развитие плагина;
• Повышается доверие и удобство для пользователей плагина.

Как добавить страницу настроек в меню админки WordPress

Для начала нужно зарегистрировать страницу настроек в меню. Делается это с помощью add_menu_page() или add_submenu_page(). Вот простой пример регистрации своей страницы настроек:

add_action('admin_menu', 'wpdir_add_plugin_settings_page');

function wpdir_add_plugin_settings_page() {
    add_menu_page(
        'Настройки моего плагина', // Заголовок страницы
        'Мой плагин',             // Название меню
        'manage_options',         // Возможности
        'wpdir-plugin-settings',  // Уникальный слаг
        'wpdir_render_settings_page', // Функция отображения
        'dashicons-admin-generic' // Иконка меню
    );
}

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

Реализация функции вывода страницы настроек

Эта функция должна выводить HTML форму, в которой пользователь сможет менять параметры. Важный момент — использовать settings_fields() и do_settings_sections() для корректной работы безопасности и разметки.

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

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

Для того чтобы WordPress понимал, какие настройки мы хотим сохранить, нужно зарегистрировать их с помощью register_setting(), добавить секции (add_settings_section()) и поля (add_settings_field()).

add_action('admin_init', 'wpdir_register_settings');

function wpdir_register_settings() {
    register_setting('wpdir_plugin_options_group', 'wpdir_plugin_options', 'wpdir_sanitize_options');

    add_settings_section(
        'wpdir_main_section',
        'Основные настройки',
        'wpdir_main_section_callback',
        'wpdir-plugin-settings'
    );

    add_settings_field(
        'wpdir_text_field',
        'Текстовое поле',
        'wpdir_render_text_field',
        'wpdir-plugin-settings',
        'wpdir_main_section'
    );

    add_settings_field(
        'wpdir_checkbox_field',
        'Чекбокс',
        'wpdir_render_checkbox_field',
        'wpdir-plugin-settings',
        'wpdir_main_section'
    );
}

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

function wpdir_render_text_field() {
    $options = get_option('wpdir_plugin_options');
    ?>
    <input type="text" name="wpdir_plugin_options[wpdir_text_field]" value="<?php echo esc_attr($options['wpdir_text_field'] ?? ''); ?>" />
    <?php
}

function wpdir_render_checkbox_field() {
    $options = get_option('wpdir_plugin_options');
    ?>
    <input type="checkbox" name="wpdir_plugin_options[wpdir_checkbox_field]" <?php checked(isset($options['wpdir_checkbox_field']), true); ?> />
    <?php
}

function wpdir_sanitize_options($input) {
    $output = [];
    if (isset($input['wpdir_text_field'])) {
        $output['wpdir_text_field'] = sanitize_text_field($input['wpdir_text_field']);
    }
    $output['wpdir_checkbox_field'] = isset($input['wpdir_checkbox_field']) ? true : false;
    return $output;
}

В этом примере создаются две настройки — текстовое поле и чекбокс, которые сохраняются в массиве опций wpdir_plugin_options. Функция wpdir_sanitize_options отвечает за очистку и валидацию данных перед сохранением.

Советы по улучшению UX настроек плагина

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

• Разбивайте настройки на логические секции и вкладки, если их много;
• Используйте описание для каждого поля, чтобы объяснить его назначение;
• Добавляйте подсказки и предупреждения, если неправильные значения могут привести к ошибкам;
• Поддерживайте стандартный стиль интерфейса WordPress для консистентности;
• Если нужно, используйте JavaScript для динамического изменения настроек без перезагрузки страницы.

Пример добавления вкладок в страницу настроек

Для сложных плагинов часто требуется сделать несколько вкладок. Это можно реализовать с помощью GET-параметра и условного вывода. Например:

function wpdir_render_settings_page() {
    $tab = $_GET['tab'] ?? 'general';
    ?>
    <div class="wrap">
        <h1>Настройки моего плагина</h1>
        <h2 class="nav-tab-wrapper">
            <a href="?page=wpdir-plugin-settings&tab=general" class="nav-tab <?php echo $tab == 'general' ? 'nav-tab-active' : ''; ?>">Общие</a>
            <a href="?page=wpdir-plugin-settings&tab=advanced" class="nav-tab <?php echo $tab == 'advanced' ? 'nav-tab-active' : ''; ?>">Дополнительно</a>
        </h2>
        <form method="post" action="options.php">
            <?php
            if ($tab == 'general') {
                settings_fields('wpdir_plugin_options_group');
                do_settings_sections('wpdir-plugin-settings');
            } elseif ($tab == 'advanced') {
                settings_fields('wpdir_plugin_advanced_group');
                do_settings_sections('wpdir-plugin-settings-advanced');
            }
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

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

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

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

• Clearfy Pro — плагин для оптимизации и настройки WordPress, который расширяет возможности админки;
• Redux Framework — популярный PHP-фреймворк для создания сложных панелей настроек;
• CMB2 — библиотека для создания метабоксов и настроек с удобным API.

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

Заключение

Создание удобной настройки для плагина в WordPress — обязательный навык для разработчика. Используя add_menu_page, register_setting, add_settings_section и add_settings_field, вы сможете сделать интерфейс понятным и безопасным. Не забывайте про валидацию данных и удобство пользователя. Это повысит качество вашего плагина и упростит его поддержку.

Если хотите углубиться, рекомендуем ознакомиться с документацией на официальном сайте WordPress.