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

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

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

Настройки плагина — это его «панель управления». Без удобного интерфейса сложнее донести до пользователя все возможности вашего решения. Хорошо продуманная страница настроек улучшает UX, снижает нагрузку на поддержку и делает ваш плагин более профессиональным.

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

Обратите внимание: не стоит создавать настройки вручную через $_POST и $_GET — это небезопасно и неудобно для пользователя. Лучше использовать стандартные механизмы WordPress.

Создание страницы настроек плагина: базовый пример

Начнём с простого примера, который добавляет новую страницу в меню «Настройки» WordPress и регистрирует одну опцию.

Добавление меню настроек

Для начала подключимся к хуку admin_menu и добавим пункт меню:

add_action('admin_menu', 'wpstandart_add_plugin_menu');
function wpstandart_add_plugin_menu() {
    add_options_page(
        'Настройки плагина WPStandart',
        'WPStandart',
        'manage_options',
        'wpstandart-settings',
        'wpstandart_render_settings_page'
    );
}

Здесь add_options_page создаёт страницу в разделе «Настройки» с названием «WPStandart».

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

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

add_action('admin_init', 'wpstandart_register_settings');
function wpstandart_register_settings() {
    register_setting('wpstandart_options_group', 'wpstandart_option_name');

    add_settings_section(
        'wpstandart_main_section',
        'Основные настройки',
        'wpstandart_main_section_cb',
        'wpstandart-settings'
    );

    add_settings_field(
        'wpstandart_field_text',
        'Текстовое поле',
        'wpstandart_field_text_cb',
        'wpstandart-settings',
        'wpstandart_main_section'
    );
}

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

function wpstandart_field_text_cb() {
    $option = get_option('wpstandart_option_name');
    echo '<input type="text" name="wpstandart_option_name" value="' . esc_attr($option) . '" />';
}

Здесь мы создаём группу настроек, секцию и одно текстовое поле.

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

Наконец, реализуем функцию вывода формы на странице настроек:

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

Функции settings_fields и do_settings_sections автоматически выводят необходимые поля и nonce для безопасности.

Добавление разных типов полей настроек

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

Чекбокс

add_settings_field(
    'wpstandart_field_checkbox',
    'Включить функцию',
    'wpstandart_field_checkbox_cb',
    'wpstandart-settings',
    'wpstandart_main_section'
);

function wpstandart_field_checkbox_cb() {
    $option = get_option('wpstandart_checkbox_option');
    $checked = $option ? 'checked' : '';
    echo '<input type="checkbox" name="wpstandart_checkbox_option" value="1" ' . $checked . ' />';
}

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

$choices = [
    'red' => 'Красный',
    'green' => 'Зелёный',
    'blue' => 'Синий'
];

add_settings_field(
    'wpstandart_field_select',
    'Выберите цвет',
    'wpstandart_field_select_cb',
    'wpstandart-settings',
    'wpstandart_main_section'
);

function wpstandart_field_select_cb() {
    $option = get_option('wpstandart_select_option');
    global $choices;
    echo '<select name="wpstandart_select_option">';
    foreach ($choices as $key => $label) {
        $selected = selected($option, $key, false);
        echo "<option value='$key' $selected>$label</option>";
    }
    echo '</select>';
}

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

Для цвета можно использовать HTML5 input type="color":

add_settings_field(
    'wpstandart_field_color',
    'Выберите цвет',
    'wpstandart_field_color_cb',
    'wpstandart-settings',
    'wpstandart_main_section'
);

function wpstandart_field_color_cb() {
    $option = get_option('wpstandart_color_option', '#ffffff');
    echo '<input type="color" name="wpstandart_color_option" value="' . esc_attr($option) . '" />';
}

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

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

register_setting('wpstandart_options_group', 'wpstandart_option_name', 'wpstandart_validate_option');

function wpstandart_validate_option($input) {
    $output = sanitize_text_field($input);
    // Можно добавить дополнительные проверки
    return $output;
}

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

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

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

• CMB2 — мощная библиотека для создания полей настройки и метабоксов. Позволяет быстро добавить любые поля без глубоких знаний Settings API.
• Redux Framework — фреймворк с визуальным интерфейсом и множеством готовых опций.
• OptionTree — ещё один плагин для создания панелей опций с простым UI.

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

add_action('cmb2_admin_init', 'wpstandart_register_cmb2_settings');
function wpstandart_register_cmb2_settings() {
    $cmb = new_cmb2_box([
        'id' => 'wpstandart_options_box',
        'title' => 'Настройки WPStandart',
        'object_types' => ['options-page'],
        'option_key' => 'wpstandart_options',
        'parent_slug' => 'options-general.php',
    ]);

    $cmb->add_field([
        'name' => 'Текстовое поле',
        'id' => 'text_field',
        'type' => 'text',
    ]);
}

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

Чтобы ваша страница настроек была удобна в международных проектах, обязательно используйте функции локализации: __() и _e(). Например:

add_options_page(
    __('Настройки плагина WPStandart', 'wpstandart'),
    __('WPStandart', 'wpstandart'),
    'manage_options',
    'wpstandart-settings',
    'wpstandart_render_settings_page'
);

Для безопасности используйте функции check_admin_referer() и полагайтесь на settings_fields(), которая выводит nonce автоматически.

Вывод

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