Как создать настройки темы WordPress в админке

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

Зачем нужны настройки темы в админке WordPress

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

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

В этой статье мы рассмотрим, как с помощью стандартных возможностей WordPress создать собственную страницу настроек в админке темы wp0.ru, используя API настроек WordPress (Settings API).

Подготовка: подключение страницы настроек в админку

Для начала нужно создать меню настроек в админке. Сделаем это через хук admin_menu и функцию add_theme_page(), которая добавит страницу именно в раздел "Внешний вид".

function wp0ru_add_theme_settings_page() {
    add_theme_page(
        'Настройки темы wp0.ru', // Заголовок страницы
        'Настройки темы wp0.ru', // Текст меню
        'edit_theme_options',    // Права доступа
        'wp0ru-theme-settings',  // Уникальный slug
        'wp0ru_render_settings_page' // Функция вывода
    );
}
add_action('admin_menu', 'wp0ru_add_theme_settings_page');

Функция wp0ru_render_settings_page создаст HTML интерфейс страницы настроек.

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

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

function wp0ru_register_theme_settings() {
    register_setting('wp0ru_theme_options_group', 'wp0ru_theme_options', 'wp0ru_validate_theme_options');

    add_settings_section(
        'wp0ru_main_section',
        'Основные настройки',
        'wp0ru_main_section_callback',
        'wp0ru-theme-settings'
    );

    add_settings_field(
        'wp0ru_logo',
        'Логотип сайта',
        'wp0ru_logo_field_callback',
        'wp0ru-theme-settings',
        'wp0ru_main_section'
    );

    add_settings_field(
        'wp0ru_facebook',
        'Ссылка на Facebook',
        'wp0ru_facebook_field_callback',
        'wp0ru-theme-settings',
        'wp0ru_main_section'
    );
}
add_action('admin_init', 'wp0ru_register_theme_settings');

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

Описание функции обратного вызова секции

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

function wp0ru_main_section_callback() {
    echo '<p>Настройте основные параметры вашей темы wp0.ru.</p>';
}

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

Для логотипа используем поле загрузки изображения с помощью стандартного медиа-загрузчика WordPress:

function wp0ru_logo_field_callback() {
    $options = get_option('wp0ru_theme_options');
    $logo = isset($options['logo']) ? esc_url($options['logo']) : '';
    ?>
    <input type="text" id="wp0ru_logo" name="wp0ru_theme_options[logo]" value="<?php echo $logo; ?>" style="width:60%;" />
    <input type="button" class="button" id="wp0ru_logo_button" value="Загрузить логотип" />
    <script>
    jQuery(document).ready(function($){
        var mediaUploader;
        $('#wp0ru_logo_button').click(function(e) {
            e.preventDefault();
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            mediaUploader = wp.media.frames.file_frame = wp.media({
                title: 'Выберите или загрузите логотип',
                button: { text: 'Использовать это изображение' },
                multiple: false
            });
            mediaUploader.on('select', function() {
                attachment = mediaUploader.state().get('selection').first().toJSON();
                $('#wp0ru_logo').val(attachment.url);
            });
            mediaUploader.open();
        });
    });
    </script>
    <?php
}

Для ссылки Facebook просто текстовое поле:

function wp0ru_facebook_field_callback() {
    $options = get_option('wp0ru_theme_options');
    $facebook = isset($options['facebook']) ? esc_url($options['facebook']) : '';
    echo "<input type='url' name='wp0ru_theme_options[facebook]' value='$facebook' style='width:60%;' placeholder='https://facebook.com/yourpage'>";
}

Валидация и сохранение опций

Для безопасности и корректности данных реализуем функцию валидации:

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

    if (isset($input['logo']) && filter_var($input['logo'], FILTER_VALIDATE_URL)) {
        $output['logo'] = esc_url_raw($input['logo']);
    }

    if (isset($input['facebook']) && filter_var($input['facebook'], FILTER_VALIDATE_URL)) {
        $output['facebook'] = esc_url_raw($input['facebook']);
    }

    return $output;
}

Эта функция проверяет, что введённые значения — корректные URL, и очищает их.

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

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

function wp0ru_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки темы wp0.ru</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('wp0ru_theme_options_group');
            do_settings_sections('wp0ru-theme-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

Как использовать сохранённые опции в теме

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

$wp0ru_options = get_option('wp0ru_theme_options');
$logo_url = isset($wp0ru_options['logo']) ? $wp0ru_options['logo'] : get_template_directory_uri() . '/images/default-logo.png';
$facebook_url = isset($wp0ru_options['facebook']) ? $wp0ru_options['facebook'] : '#';

// Вывод логотипа
echo '<img src="' . esc_url($logo_url) . '" alt="Логотип">';

// Ссылка на Facebook
echo '<a href="' . esc_url($facebook_url) . '" target="_blank" rel="noopener">Facebook</a>';

Это позволяет динамически изменять элементы темы в зависимости от настроек пользователя без правки кода.

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

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

Используйте функции esc_url_raw при сохранении и esc_url при выводе URL, а также esc_html для текстовых значений.

Для улучшения UX можно добавить визуальный предпросмотр логотипа рядом с полем ввода.

Заключение

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

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