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

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

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

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

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

Рассмотрим, как создать такую панель шаг за шагом с примерами кода.

Создание страницы настроек в админке WordPress

Для начала нам нужно добавить новую страницу в меню админки. Для этого используем хук admin_menu и функцию add_theme_page. Ниже пример функции premiumwp_add_theme_settings_page:

function premiumwp_add_theme_settings_page() {
    add_theme_page(
        'Настройки темы PremiumWP', // Заголовок страницы
        'Настройки темы',             // Название в меню
        'manage_options',             // Права доступа
        'premiumwp-theme-settings',  // Уникальный слаг
        'premiumwp_render_settings_page' // Функция вывода страницы
    );
}
add_action('admin_menu', 'premiumwp_add_theme_settings_page');

Эта функция добавит пункт меню в раздел «Внешний вид».

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

Теперь создадим функцию premiumwp_render_settings_page, которая будет выводить форму с полями для настройки темы. Для управления настройками WordPress рекомендует использовать API настроек (Settings API), который позволяет легко регистрировать параметры, секции и поля.

Пример простейшей формы с двумя настройками: цвет фона и текст заголовка.

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

Здесь settings_fields выводит скрытые поля безопасности, do_settings_sections — все зарегистрированные секции и поля настройки для страницы с слагом premiumwp-theme-settings.

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

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

function premiumwp_register_theme_settings() {
    // Регистрируем группу настроек и ключ в базе
    register_setting('premiumwp_theme_options_group', 'premiumwp_theme_options', 'premiumwp_sanitize_settings');

    // Добавляем секцию
    add_settings_section(
        'premiumwp_main_section',
        'Основные настройки',
        'premiumwp_main_section_callback',
        'premiumwp-theme-settings'
    );

    // Добавляем поля
    add_settings_field(
        'background_color',
        'Цвет фона',
        'premiumwp_background_color_render',
        'premiumwp-theme-settings',
        'premiumwp_main_section'
    );

    add_settings_field(
        'header_text',
        'Текст заголовка',
        'premiumwp_header_text_render',
        'premiumwp-theme-settings',
        'premiumwp_main_section'
    );
}
add_action('admin_init', 'premiumwp_register_theme_settings');

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

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

function premiumwp_background_color_render() {
    $options = get_option('premiumwp_theme_options');
    ?>
    <input type="text" name="premiumwp_theme_options[background_color]" value="<?php echo esc_attr($options['background_color'] ?? '#ffffff'); ?>" class="regular-text" placeholder="#ffffff">
    <p class="description">Введите цвет в формате HEX, например #ffffff</p>
    <?php
}

function premiumwp_header_text_render() {
    $options = get_option('premiumwp_theme_options');
    ?>
    <input type="text" name="premiumwp_theme_options[header_text]" value="<?php echo esc_attr($options['header_text'] ?? 'Добро пожаловать!'); ?>" class="regular-text">
    <p class="description">Текст, который будет отображаться в заголовке сайта</p>
    <?php
}

Описание секции

function premiumwp_main_section_callback() {
    echo '<p>Настройки, влияющие на внешний вид и контент темы PremiumWP.</p>';
}

Обработка и валидация данных настроек

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

function premiumwp_sanitize_settings($input) {
    $output = [];

    // Санитизация цвета фона
    if (isset($input['background_color']) && preg_match('/^#[a-f0-9]{6}$/i', $input['background_color'])) {
        $output['background_color'] = $input['background_color'];
    } else {
        add_settings_error('premiumwp_theme_options', 'invalid_color', 'Цвет фона указан некорректно');
    }

    // Санитизация текста заголовка
    if (isset($input['header_text'])) {
        $output['header_text'] = sanitize_text_field($input['header_text']);
    }

    return $output;
}

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

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

function premiumwp_apply_background_color() {
    $options = get_option('premiumwp_theme_options');
    $color = $options['background_color'] ?? '#ffffff';
    echo "<style>body { background-color: {$color}; }</style>";
}
add_action('wp_head', 'premiumwp_apply_background_color');

Для вывода текста заголовка в нужном месте темы используйте:

<?php
$options = get_option('premiumwp_theme_options');
echo '<h1>' . esc_html($options['header_text'] ?? 'Добро пожаловать!') . '</h1>';
?>

Дополнительные советы и расширения панели настроек

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

Кроме текстовых полей и цветов, можно использовать checkbox, select, radio, upload для логотипов и фоновых изображений. WordPress API позволяет это легко реализовать, главное — правильно обрабатывать и сохранять данные.

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

function premiumwp_logo_render() {
    $options = get_option('premiumwp_theme_options');
    $logo_id = $options['logo_id'] ?? '';
    $logo_url = $logo_id ? wp_get_attachment_url($logo_id) : '';
    ?>
    <input type="hidden" name="premiumwp_theme_options[logo_id]" id="premiumwp_logo_id" value="<?php echo esc_attr($logo_id); ?>" />
    <img id="premiumwp_logo_preview" src="<?php echo esc_url($logo_url); ?>" style="max-width:150px; display:block; margin-bottom:10px;" />
    <button type="button" class="button" id="premiumwp_logo_upload">Загрузить логотип</button>
    <button type="button" class="button" id="premiumwp_logo_remove">Удалить логотип</button>
    <script>
    jQuery(document).ready(function($){
        var frame;
        $('#premiumwp_logo_upload').on('click', function(e){
            e.preventDefault();
            if(frame) { frame.open(); return; }
            frame = wp.media({
                title: 'Выберите или загрузите логотип',
                button: { text: 'Выбрать логотип' },
                multiple: false
            });
            frame.on('select', function(){
                var attachment = frame.state().get('selection').first().toJSON();
                $('#premiumwp_logo_id').val(attachment.id);
                $('#premiumwp_logo_preview').attr('src', attachment.url);
            });
            frame.open();
        });
        $('#premiumwp_logo_remove').on('click', function(e){
            e.preventDefault();
            $('#premiumwp_logo_id').val('');
            $('#premiumwp_logo_preview').attr('src', '');
        });
    });
    </script>
    <?php
}

Локализация и безопасность

Для публикации темы рекомендуется использовать функции локализации __() и _e() для всех текстов. Также важно проверять права пользователя и использовать nonce для защиты форм.

Автоматизация и расширяемость

Можно создать класс или использовать существующие библиотеки для автоматического создания панели настроек, что ускорит процесс разработки и упростит поддержку.

Заключение

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