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

Автор: Дмитрий Никитин | Опубликовано: 12.11.2025

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

Почему нужна собственная страница настроек темы

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

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

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

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

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

Здесь мы добавляем пункт меню в раздел «Внешний вид» для удобства. Теперь создадим функцию wppartner_render_theme_settings_page, которая будет выводить форму настроек.

Вывод формы и безопасность данных

Очень важно защитить форму от CSRF-атак, использовать nonce, а также корректно сохранять данные через POST-запрос.

function wppartner_render_theme_settings_page() {
    if (!current_user_can('manage_options')) {
        return;
    }

    // Обработка сохранения настроек
    if (isset($_POST['wppartner_save_settings'])) {
        if (!check_admin_referer('wppartner_theme_settings_nonce_action', 'wppartner_theme_settings_nonce_field')) {
            echo '<div class="notice notice-error"><p>Ошибка проверки безопасности. Попробуйте еще раз.</p></div>';
            return;
        }

        $custom_color = sanitize_text_field($_POST['custom_color']);
        update_option('wppartner_custom_color', $custom_color);
        echo '<div class="notice notice-success"><p>Настройки успешно сохранены.</p></div>';
    }

    $custom_color = get_option('wppartner_custom_color', '#000000');
    ?>
    <div class="wrap">
        <h1>Настройки темы</h1>
        <form method="post" action="">
            <?php wp_nonce_field('wppartner_theme_settings_nonce_action', 'wppartner_theme_settings_nonce_field'); ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row"><label for="custom_color">Цвет акцента</label></th>
                    <td><input type="color" id="custom_color" name="custom_color" value="<?php echo esc_attr($custom_color); ?>" /></td>
                </tr>
            </table>
            <?php submit_button('Сохранить настройки', 'primary', 'wppartner_save_settings'); ?>
        </form>
    </div>
    <?php
}

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

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

Текстовое поле и чекбокс

Расширим форму, добавив простое текстовое поле для ввода заголовка и чекбокс для включения или отключения определенной функции.

function wppartner_render_theme_settings_page() {
    if (!current_user_can('manage_options')) {
        return;
    }

    if (isset($_POST['wppartner_save_settings'])) {
        if (!check_admin_referer('wppartner_theme_settings_nonce_action', 'wppartner_theme_settings_nonce_field')) {
            echo '<div class="notice notice-error"><p>Ошибка проверки безопасности. Попробуйте еще раз.</p></div>';
            return;
        }

        $custom_color = sanitize_text_field($_POST['custom_color']);
        $header_text = sanitize_text_field($_POST['header_text']);
        $enable_feature = isset($_POST['enable_feature']) ? 1 : 0;

        update_option('wppartner_custom_color', $custom_color);
        update_option('wppartner_header_text', $header_text);
        update_option('wppartner_enable_feature', $enable_feature);

        echo '<div class="notice notice-success"><p>Настройки успешно сохранены.</p></div>';
    }

    $custom_color = get_option('wppartner_custom_color', '#000000');
    $header_text = get_option('wppartner_header_text', 'Добро пожаловать');
    $enable_feature = get_option('wppartner_enable_feature', 0);

    ?>
    <div class="wrap">
        <h1>Настройки темы</h1>
        <form method="post" action="">
            <?php wp_nonce_field('wppartner_theme_settings_nonce_action', 'wppartner_theme_settings_nonce_field'); ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row"><label for="custom_color">Цвет акцента</label></th>
                    <td><input type="color" id="custom_color" name="custom_color" value="<?php echo esc_attr($custom_color); ?>" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row"><label for="header_text">Заголовок на главной</label></th>
                    <td><input type="text" id="header_text" name="header_text" value="<?php echo esc_attr($header_text); ?>" class="regular-text" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row">Включить дополнительный блок</th>
                    <td><input type="checkbox" id="enable_feature" name="enable_feature" value="1" <?php checked(1, $enable_feature); ?> /></td>
                </tr>
            </table>
            <?php submit_button('Сохранить настройки', 'primary', 'wppartner_save_settings'); ?>
        </form>
    </div>
    <?php
}

Загрузка изображения — пример использования media uploader

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

function wppartner_enqueue_media_uploader() {
    wp_enqueue_media();
    wp_enqueue_script('wppartner-media-uploader', get_template_directory_uri() . '/js/media-uploader.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'wppartner_enqueue_media_uploader');

Создайте файл media-uploader.js в папке js вашей темы со следующим содержимым:

jQuery(document).ready(function($) {
    var mediaUploader;
    $('#upload_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() {
            var attachment = mediaUploader.state().get('selection').first().toJSON();
            $('#logo_url').val(attachment.url);
            $('#logo_preview').attr('src', attachment.url);
        });
        mediaUploader.open();
    });
});

И расширьте форму настроек так:

<tr valign="top">
    <th scope="row"><label for="logo_url">Логотип сайта</label></th>
    <td>
        <input type="text" id="logo_url" name="logo_url" value="<?php echo esc_attr(get_option('wppartner_logo_url', '')); ?>" class="regular-text" />
        <input type="button" id="upload_logo_button" class="button" value="Загрузить логотип" />
        <br />
        <img id="logo_preview" src="<?php echo esc_attr(get_option('wppartner_logo_url', '')); ?>" style="max-width: 150px; margin-top: 10px;" />
    </td>
</tr>

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

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

function wppartner_custom_theme_styles() {
    $color = get_option('wppartner_custom_color', '#000000');
    echo "<style> 
        a, .accent-color { 
            color: " . esc_attr($color) . "; 
        } 
    </style>";
}
add_action('wp_head', 'wppartner_custom_theme_styles');

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

echo '<h1>' . esc_html(get_option('wppartner_header_text', 'Добро пожаловать')) . '</h1>';

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

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

Advanced Custom Fields (ACF) — позволяет создавать мета-поля и использовать их в теме.
Redux Framework — мощный фреймворк для создания панелей настроек с множеством готовых компонентов.
OptionTree — простой и удобный плагин для создания настроек темы.

Все они позволяют значительно ускорить разработку, но требуют изучения их API.

Советы по безопасности и оптимизации

При создании страницы настроек:

Обязательно проверяйте права доступа через current_user_can.
Используйте wp_nonce_field и проверяйте nonce с помощью check_admin_referer для защиты от CSRF.
Санитизируйте все входящие данные с помощью функций типа sanitize_text_field, esc_url_raw и т.д.
Кэшируйте полученные значения, если они часто используются, чтобы не перегружать базу.

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