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

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

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

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

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

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

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

Регистрация страницы настроек с помощью функции add_theme_page

Начнём с простого примера создания раздела настроек в меню «Внешний вид».

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

function expertreview_render_theme_settings_page() {
    // Здесь будет форма настроек
    echo '<h1>Настройки темы</h1>';
}

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

Регистрация и сохранение настроек через Settings API

WordPress предоставляет мощный механизм Settings API для безопасного хранения пользовательских опций.

Добавим регистрацию опций и форму:

function expertreview_register_settings() {
    register_setting('expertreview_theme_options_group', 'expertreview_theme_options');
}
add_action('admin_init', 'expertreview_register_settings');

function expertreview_render_theme_settings_page() {
    $options = get_option('expertreview_theme_options');
    ?>
    <div class="wrap">
        <h1>Настройки темы</h1>
        <form method="post" action="options.php">
            <?php settings_fields('expertreview_theme_options_group'); ?>
            <?php do_settings_sections('expertreview_theme_options_group'); ?>

            <table class="form-table">
                <tr valign="top">
                    <th scope="row">Цвет фона</th>
                    <td><input type="text" name="expertreview_theme_options[background_color]" value="<?php echo esc_attr($options['background_color'] ?? ''); ?>" class="regular-text" /></td>
                </tr>
                <tr valign="top">
                    <th scope="row">Логотип (URL)</th>
                    <td><input type="text" name="expertreview_theme_options[logo_url]" value="<?php echo esc_attr($options['logo_url'] ?? ''); ?>" class="regular-text" /></td>
                </tr>
            </table>

            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

Теперь при заполнении формы и сохранении параметры будут храниться в базе. Для использования настроек в теме достаточно вызвать get_option('expertreview_theme_options').

Добавление более сложных полей и загрузка файлов

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

Для удобства загрузки логотипа лучше добавить кнопку вызова стандартного медиа-загрузчика WordPress. Это можно сделать с помощью JavaScript и поля input.

Пример кода для добавления кнопки загрузки логотипа:

<input type="text" id="expertreview-logo-url" name="expertreview_theme_options[logo_url]" value="<?php echo esc_attr($options['logo_url'] ?? ''); ?>" class="regular-text" readonly />
<input type="button" id="upload-logo-button" class="button" value="Загрузить логотип" />

<script>
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();
            $('#expertreview-logo-url').val(attachment.url);
        });
        mediaUploader.open();
    });
});
</script>

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

Добавление цветового пика для выбора цвета

Чтобы улучшить UX, используйте компонент Color Picker, встроенный в WordPress с jQuery UI. Для подключения:

function expertreview_enqueue_admin_scripts($hook) {
    if ($hook != 'appearance_page_expertreview-theme-settings') {
        return;
    }
    wp_enqueue_style('wp-color-picker');
    wp_enqueue_script('expertreview-admin-script', get_template_directory_uri() . '/js/admin.js', array('wp-color-picker'), false, true);
}
add_action('admin_enqueue_scripts', 'expertreview_enqueue_admin_scripts');

// В файле admin.js
jQuery(document).ready(function($) {
    $('#expertreview_background_color').wpColorPicker();
});

В HTML нужно добавить id для поля цвета:

<input type="text" id="expertreview_background_color" name="expertreview_theme_options[background_color]" value="<?php echo esc_attr($options['background_color'] ?? ''); ?>" class="regular-text" />

Рекомендации по использованию плагинов для настройки тем

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

• Kirki Customizer Framework — позволяет создавать гибкие настройки через Customizer API с поддержкой большого числа полей и удобным UI.
• OptionTree — инструмент для быстрого создания страниц настроек и интеграции с Customizer.
• WP Customizer — упрощённый плагин с набором полезных элементов для кастомизации.

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

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

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

$options = get_option('expertreview_theme_options');
$background_color = $options['background_color'] ?? '#ffffff';
echo '<style>body { background-color: ' . esc_attr($background_color) . '; }</style>';

Для вывода логотипа:

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

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