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

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

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

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

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

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

Создаем страницу настроек: добавление меню и раздела

Начнем с добавления пункта меню в админпанель. Для этого используем хук admin_menu и функцию add_menu_page. В нашем примере создадим меню «WPTO Настройки».

add_action('admin_menu', 'wpto_add_admin_menu');
function wpto_add_admin_menu() {
    add_menu_page(
        'WPTO Настройки', // Заголовок страницы
        'WPTO Настройки', // Название меню
        'manage_options', // Права доступа
        'wpto_settings', // slug страницы
        'wpto_settings_page', // callback функция для вывода
        'dashicons-admin-generic', // иконка меню
        80 // позиция
    );
}

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

Регистрация настроек и полей формы с Settings API

Для хранения настроек используем функцию register_setting, а для создания полей — add_settings_section и add_settings_field.

Добавим пример настройки — поле для ввода API ключа.

add_action('admin_init', 'wpto_settings_init');
function wpto_settings_init() {
    register_setting('wpto_settings_group', 'wpto_api_key', [
        'sanitize_callback' => 'sanitize_text_field'
    ]);

    add_settings_section(
        'wpto_section_main',
        'Основные настройки',
        'wpto_section_main_cb',
        'wpto_settings'
    );

    add_settings_field(
        'wpto_field_api_key',
        'API ключ',
        'wpto_field_api_key_cb',
        'wpto_settings',
        'wpto_section_main'
    );
}

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

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

Вывод формы и обработка сохранения данных

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

function wpto_settings_page() {
    ?>
    <div class="wrap">
        <h1>WPTO Настройки</h1>
        <form action="options.php" method="post">
            <?php
            settings_fields('wpto_settings_group');
            do_settings_sections('wpto_settings');
            submit_button('Сохранить настройки');
            ?>
        </form>
    </div>
    <?php
}

Функции settings_fields и do_settings_sections позаботятся о безопасности и выводе всех зарегистрированных секций и полей.

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

После того как пользователь сохранит API ключ, можно использовать его в вашем плагине или теме, например, для подключения к внешнему сервису:

$api_key = get_option('wpto_api_key', '');
if (!empty($api_key)) {
    // пример вызова внешнего API
    $response = wp_remote_get('https://api.example.com/data?key=' . urlencode($api_key));
    if (is_wp_error($response)) {
        // обработка ошибки
    } else {
        $data = json_decode(wp_remote_retrieve_body($response), true);
        // работа с данными
    }
}

Добавление нескольких типов полей и валидация

Помимо текстовых полей, можно добавлять чекбоксы, селекты, радио-кнопки. Например, добавим чекбокс «Включить режим отладки».

register_setting('wpto_settings_group', 'wpto_debug_mode', [
    'sanitize_callback' => 'wpto_sanitize_checkbox'
]);

add_settings_field(
    'wpto_field_debug_mode',
    'Режим отладки',
    'wpto_field_debug_mode_cb',
    'wpto_settings',
    'wpto_section_main'
);

function wpto_field_debug_mode_cb() {
    $value = get_option('wpto_debug_mode', 0);
    $checked = $value ? 'checked' : '';
    echo '<input type="checkbox" name="wpto_debug_mode" value="1" ' . $checked . ' /> Включить отладку';
}

function wpto_sanitize_checkbox($input) {
    return $input == 1 ? 1 : 0;
}

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

1. Разделяйте настройки на несколько страниц или вкладок, если их много. Для этого используйте add_submenu_page или JavaScript.

2. Добавляйте подсказки и описания к полям, чтобы пользователь понимал их назначение.

3. Используйте кастомные CSS и JS для улучшения интерфейса, например, добавьте селекторы с автозаполнением.

4. Для сложных настроек можно использовать плагины, такие как Clearfy Pro, которые расширяют возможности управления настройками и оптимизации.

Заключение

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