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

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

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

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

Использование стандартного API WordPress для настроек (Customizer API или Settings API) обеспечивает совместимость с будущими версиями и чистый код.

В этой статье рассмотрим реализацию через Settings API, так как он отлично подходит для создания страниц с настройками в разделе "Внешний вид" или отдельном меню.

Создание страницы настроек темы с Settings API

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

function wphow_add_theme_settings_page() {
    add_theme_page(
        'Настройки темы',
        'Настройки темы',
        'edit_theme_options',
        'wphow_theme_settings',
        'wphow_render_theme_settings_page'
    );
}
add_action('admin_menu', 'wphow_add_theme_settings_page');

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

function wphow_render_theme_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки темы WPHow</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('wphow_theme_options_group');
            do_settings_sections('wphow_theme_settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

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

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

function wphow_register_theme_settings() {
    register_setting('wphow_theme_options_group', 'wphow_theme_options', 'wphow_sanitize_theme_options');

    add_settings_section(
        'wphow_main_section',
        'Основные настройки',
        'wphow_main_section_callback',
        'wphow_theme_settings'
    );

    add_settings_field(
        'background_color',
        'Цвет фона',
        'wphow_background_color_callback',
        'wphow_theme_settings',
        'wphow_main_section'
    );

    add_settings_field(
        'footer_text',
        'Текст в футере',
        'wphow_footer_text_callback',
        'wphow_theme_settings',
        'wphow_main_section'
    );
}
add_action('admin_init', 'wphow_register_theme_settings');

Создадим callback-функции для вывода описания секции и полей:

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

function wphow_background_color_callback() {
    $options = get_option('wphow_theme_options');
    $color = isset($options['background_color']) ? esc_attr($options['background_color']) : '#ffffff';
    echo '<input type="text" name="wphow_theme_options[background_color]" value="' . $color . '" class="wp-color-picker-field" data-default-color="#ffffff" />';
}

function wphow_footer_text_callback() {
    $options = get_option('wphow_theme_options');
    $text = isset($options['footer_text']) ? esc_textarea($options['footer_text']) : '';
    echo '<textarea name="wphow_theme_options[footer_text]" rows="5" cols="50">' . $text . '</textarea>';
}

Санитизация и валидация данных

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

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

    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('wphow_theme_options', 'invalid_color', 'Неверный формат цвета');
    }

    if(isset($input['footer_text'])) {
        $output['footer_text'] = sanitize_textarea_field($input['footer_text']);
    }

    return $output;
}

Подключение цветовой палитры WordPress

Для удобства выбора цвета подключим встроенный компонент WordPress — wp-color-picker. Добавим скрипты и стили на страницу настроек:

function wphow_enqueue_color_picker($hook_suffix) {
    if($hook_suffix === 'appearance_page_wphow_theme_settings') {
        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script('wphow-color-picker', get_template_directory_uri() . '/js/wphow-color-picker.js', array('wp-color-picker'), false, true);
    }
}
add_action('admin_enqueue_scripts', 'wphow_enqueue_color_picker');

В файле js/wphow-color-picker.js добавим инициализацию:

jQuery(document).ready(function($){
    $('.wp-color-picker-field').wpColorPicker();
});

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

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

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

function wphow_display_footer_text() {
    $options = get_option('wphow_theme_options');
    if(!empty($options['footer_text'])) {
        echo '<div class="footer-text">' . wp_kses_post($options['footer_text']) . '</div>';
    }
}
add_action('wp_footer', 'wphow_display_footer_text');

Плагины для расширения возможностей настроек темы

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

• Kirki Customizer Framework — мощный инструмент для добавления кастомных настроек в Customizer с минимальным кодом.
• Advanced Custom Fields (ACF) — позволяет создавать поля для настроек и использовать их в теме.
• Customizer Custom Controls — добавляет дополнительные типы контролов в стандартный Customizer.

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

Заключение

Создание настроек темы в админке WordPress — обязательный навык для разработчика тем, позволяющий сделать продукт удобным и гибким. В статье мы рассмотрели, как через Settings API добавить страницу настроек с цветом фона и текстом в футере, как подключить wp-color-picker и использовать сохранённые данные в шаблонах. Такой подход гарантирует удобство для пользователей и простоту поддержки кода.