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

Автор: Олеся Волкова | Опубликовано: 01.12.2025

Создание пользовательских настроек темы WordPress – важный этап для разработчиков, которые хотят дать пользователям возможность легко менять внешний вид и поведение сайта без правки кода. В этой статье мы пошагово разберём, как добавить собственные настройки в тему, используя WordPress Customizer API.

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

WordPress Customizer – это встроенный инструмент, который позволяет пользователям изменять настройки темы в режиме реального времени с предварительным просмотром. Использование Customizer API обеспечивает:

Удобный и понятный интерфейс для пользователя;
Немедленный визуальный отклик на изменения;
Безопасность и совместимость с будущими версиями WordPress;
Возможность сохранять настройки в базе данных и использовать их в шаблонах.

Без Customizer разработчики часто создают собственные страницы настроек, что усложняет поддержку и ухудшает UX. Поэтому правильный подход – именно через Customizer.

Добавление панели, секций и полей в Customizer

Создание панели настроек

Панель служит контейнером для связанных секций. Например, мы можем создать панель «Дополнительные настройки темы».

function wpquiz_customize_register_panel( $wp_customize ) {
    $wp_customize->add_panel( 'wpquiz_theme_options', array(
        'title'       => 'Дополнительные настройки темы',
        'priority'    => 10,
        'description' => 'Настройте дополнительные параметры вашей темы',
    ) );
}
add_action( 'customize_register', 'wpquiz_customize_register_panel' );

Добавление секций в панель

Секции группируют поля внутри панели. Например, создадим секцию для настроек цвета.

function wpquiz_customize_register_section( $wp_customize ) {
    $wp_customize->add_section( 'wpquiz_color_settings', array(
        'title'    => 'Цвета темы',
        'panel'    => 'wpquiz_theme_options',
        'priority' => 20,
    ) );
}
add_action( 'customize_register', 'wpquiz_customize_register_section' );

Добавление поля настройки

Поля позволяют пользователю вводить или выбирать значения. Рассмотрим пример поля цвета для изменения основного цвета сайта.

function wpquiz_customize_register_setting_and_control( $wp_customize ) {
    $wp_customize->add_setting( 'wpquiz_primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'wpquiz_primary_color_control', array(
        'label'    => 'Основной цвет',
        'section'  => 'wpquiz_color_settings',
        'settings' => 'wpquiz_primary_color',
    ) ) );
}
add_action( 'customize_register', 'wpquiz_customize_register_setting_and_control' );

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

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

function wpquiz_apply_custom_colors() {
    $primary_color = get_theme_mod( 'wpquiz_primary_color', '#0073aa' );
    echo "<style>
        .site-header { background-color: {$primary_color}; }
    </style>";
}
add_action( 'wp_head', 'wpquiz_apply_custom_colors' );

Этот код добавит встроенный стиль с цветом из настроек прямо в <head> страницы.

Расширенные типы полей в Customizer

Текстовые поля и текстовые области

Помимо цвета, часто нужно добавить текстовые поля для контактов, ссылок или описания. Добавим текстовое поле с валидацией.

function wpquiz_customize_text_setting( $wp_customize ) {
    $wp_customize->add_section( 'wpquiz_contact_settings', array(
        'title'    => 'Контактные данные',
        'panel'    => 'wpquiz_theme_options',
        'priority' => 30,
    ) );

    $wp_customize->add_setting( 'wpquiz_phone_number', array(
        'default'           => '',
        'sanitize_callback' => 'wpquiz_sanitize_phone',
    ) );

    $wp_customize->add_control( 'wpquiz_phone_number_control', array(
        'label'    => 'Телефон для контактов',
        'section'  => 'wpquiz_contact_settings',
        'settings' => 'wpquiz_phone_number',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'wpquiz_customize_text_setting' );

// Функция очистки номера телефона
function wpquiz_sanitize_phone( $input ) {
    return preg_replace( '/[^0-9+\-\s]/', '', $input );
}

Чекбоксы и выпадающие списки

Чекбоксы удобно использовать для включения/отключения функций, а выпадающие списки – для выбора из нескольких вариантов.

function wpquiz_customize_checkbox_and_select( $wp_customize ) {
    $wp_customize->add_section( 'wpquiz_misc_settings', array(
        'title'    => 'Прочие настройки',
        'panel'    => 'wpquiz_theme_options',
        'priority' => 40,
    ) );

    // Чекбокс отключения футера
    $wp_customize->add_setting( 'wpquiz_disable_footer', array(
        'default'           => false,
        'sanitize_callback' => 'wp_validate_boolean',
    ) );

    $wp_customize->add_control( 'wpquiz_disable_footer_control', array(
        'label'    => 'Отключить футер',
        'section'  => 'wpquiz_misc_settings',
        'settings' => 'wpquiz_disable_footer',
        'type'     => 'checkbox',
    ) );

    // Выпадающий список выбора шрифта
    $wp_customize->add_setting( 'wpquiz_font_family', array(
        'default'           => 'arial',
        'sanitize_callback' => 'wpquiz_sanitize_font',
    ) );

    $wp_customize->add_control( 'wpquiz_font_family_control', array(
        'label'    => 'Выбор шрифта',
        'section'  => 'wpquiz_misc_settings',
        'settings' => 'wpquiz_font_family',
        'type'     => 'select',
        'choices'  => array(
            'arial'      => 'Arial',
            'times'      => 'Times New Roman',
            'courier'    => 'Courier New',
            'helvetica'  => 'Helvetica',
        ),
    ) );
}
add_action( 'customize_register', 'wpquiz_customize_checkbox_and_select' );

function wpquiz_sanitize_font( $input ) {
    $valid = array( 'arial', 'times', 'courier', 'helvetica' );
    if ( in_array( $input, $valid, true ) ) {
        return $input;
    }
    return 'arial';
}

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

Хотя API WordPress позволяет создавать настройки самостоятельно, есть несколько плагинов, которые упрощают задачу или добавляют типы полей:

Kirki Customizer Framework – облегчает создание сложных настроек с минимальным кодом и поддержкой новых типов полей;
Customizer Export/Import – позволяет экспортировать и импортировать настройки Customizer между сайтами;
WP Customizer Reset – добавляет возможность сброса настроек Customizer к значениям по умолчанию;
Advanced Custom Fields (ACF) – хотя основное предназначение для мета-полей, в связке с ACF Customizer можно расширять настройки темы.

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

Заключение по созданию настроек темы

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

Рекомендуется всегда тщательно писать функции очистки (sanitize_callback), чтобы избежать ошибок и обеспечить безопасность. Если в будущем захотите добавить сложные поля, рассмотрите подключение Kirki или других фреймворков.

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