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

Автор: Максим Федоров | Опубликовано: 07.11.2025

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

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

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

Админка WordPress предлагает два основных способа создания настроек для темы:

Использование встроенного Customizer API, где настройки меняются в реальном времени с предпросмотром.
Создание отдельной страницы настроек в меню админки с кастомными полями.

Давайте разберем оба способа подробно.

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

Что такое Customizer и почему он удобен

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

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

Пошаговое создание настройки цвета фона

Пример кода для добавления настройки изменения цвета фона сайта:

function wpsetup_customize_register( $wp_customize ) {
    // Добавляем секцию в Customizer
    $wp_customize->add_section('wpsetup_colors_section', array(
        'title' => __('Цвета темы', 'wpsetup'),
        'priority' => 30,
    ));

    // Добавляем настройку цвета фона
    $wp_customize->add_setting('wpsetup_background_color', array(
        'default' => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    // Добавляем контрол для выбора цвета
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'wpsetup_background_color_control', array(
        'label' => __('Цвет фона сайта', 'wpsetup'),
        'section' => 'wpsetup_colors_section',
        'settings' => 'wpsetup_background_color',
    )));
}
add_action('customize_register', 'wpsetup_customize_register');

В этом примере создается новая секция Цвета темы и настройка для цвета фона. Пользователь сможет выбрать цвет через стандартный Color Picker.

Вывод выбранного цвета в теме

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

function wpsetup_customize_css() {
    $background_color = get_theme_mod('wpsetup_background_color', '#ffffff');
    echo "<style>body { background-color: {$background_color}; }</style>";
}
add_action('wp_head', 'wpsetup_customize_css');

Теперь при смене цвета в Customizer фон сайта будет меняться сразу.

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

Когда нужен собственный раздел настроек

В некоторых случаях настройки слишком объемные или не подходят для Customizer. Тогда удобнее сделать отдельный пункт меню в админке с формой настроек.

Для этого используется функция add_menu_page и сохранение данных через опции WordPress.

Пример создания страницы настроек с полем для логотипа

Добавим страницу с загрузкой логотипа и сохранением его URL в опции:

function wpsetup_add_settings_page() {
    add_menu_page(
        'Настройки темы WpSetup',
        'Настройки WpSetup',
        'manage_options',
        'wpsetup-settings',
        'wpsetup_render_settings_page',
        'dashicons-admin-customizer',
        60
    );
}
add_action('admin_menu', 'wpsetup_add_settings_page');

function wpsetup_render_settings_page() {
    if (isset($_POST['wpsetup_logo_url'])) {
        update_option('wpsetup_logo_url', sanitize_text_field($_POST['wpsetup_logo_url']));
        echo '<div class="updated"><p>Настройки сохранены</p></div>';
    }
    $logo_url = get_option('wpsetup_logo_url', '');
    ?>
    <div class="wrap">
        <h1>Настройки темы WpSetup</h1>
        <form method="post" action="">
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">URL логотипа</th>
                    <td><input type="text" name="wpsetup_logo_url" value="<?php echo esc_attr($logo_url); ?>" size="50" /></td>
                </tr>
            </table>
            <input type="submit" class="button-primary" value="Сохранить" />
        </form>
    </div>
    <?php
}

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

В шаблоне темы можно вывести сохраненный логотип так:

$logo_url = get_option('wpsetup_logo_url');
if ($logo_url) {
    echo '<img src="' . esc_url($logo_url) . '" alt="Логотип" />';
}

Для загрузки изображения удобнее использовать медиабиблиотеку WordPress через JavaScript, но в простом варианте можно вставлять URL вручную.

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

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

Используйте функции sanitize_text_field, sanitize_hex_color и другие для очистки данных перед сохранением.
Проверяйте права пользователя с помощью current_user_can('manage_options'), чтобы ограничить доступ к настройкам.
Для настройки в Customizer используйте встроенные контролы, чтобы обеспечить совместимость.
Добавляйте переводы для текстов через функцию __(), чтобы тема была локализуемой.

Итог

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

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

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