Главная/WordPress Fullstack/Блупринты/Кастомные темы/Кастомная панель настроек темы (Theme Options) на базе Settings API
К карточкам раздела «Кастомные темы»
Кастомные темы(ТЗ 25 из 54)
ТЗ: Кастомная панель настроек темы (Theme Options) на базе Settings API
Кастомные темы5 шагов • +25 XP

ТЗ: Кастомная панель настроек темы (Theme Options) на базе Settings API

Создание чистого экрана глобальных настроек в админке без тяжелых плагинов: WordPress Settings API, санирование через sanitize_callback, сохранение во wp_options с autoload и хелпер get_theme_option().

~7 ч работыУровень: JuniorPHP 8.3/8.4WordPress Settings APIregister_settingadd_settings_sectionadd_settings_fieldwp_options autoloadesc_html / esc_attrwp_filter_post_kses
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~7 рабочих часов
Фриланс вилка~$315 – $525 (€280 – €490)
Оценка веб-студии~$665 – $1,120 (€630 – €1050)

ТЗ заказчика (исходный бриф):

«Мы не хотим ставить громоздкие плагины настроек вроде Redux Framework или ACF только ради того, чтобы задать контакты компании, логотип и код Яндекс.Метрики. Нужна нативная легкая страница опций темы прямо в меню «Внешний вид», где клиент сможет безопасно менять общие данные сайта.»
Ключевые требования:
  • •Страница в админке: «Внешний вид → Опции темы»
  • •Табы настроек: «Контакты», «Шапка и подвал», «Счетчики аналитики»
  • •Строгая валидация и санитизация всех типов полей (телефоны, email, ссылки, скрипты)
  • •Хранение всех полей в одном сериализованном ключе wp_options с включенным autoload
  • •Глобальная функция get_theme_option($key, $default = null) для шаблонов
Ограничения проекта:
  • •0 сторонних плагинов — использовать только ядро WordPress (Settings API)
  • •Безопасность: только администраторы (manage_options) могут изменять настройки
  • •Скрипты аналитики должны безопасно фильтроваться без риска уязвимости XSS
Критерии приёмки (KPI):
  • 0 дополнительных SQL-запросов (все опции читаются из кеша wp_load_alloptions)
  • 100% защита от CSRF-атак за счет встроенных токенов Settings API
  • Интуитивный интерфейс с нативными стилями админки WordPress

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Регистрация страницы меню через add_theme_page()

~25 минЛегкий

Практическое руководство:

На хуке admin_menu зарегистрируйте страницу «Настройки темы». Укажите capability: "manage_options", slug: "theme-options" и функцию рендеринга формы.

План и контрольные точки реализации:
1Подключить хук admin_menu
2Задать права manage_options
3Создать функцию-заглушку theme_render_options_page
Важные технические нюансы и подводные камни:

Всегда проверяйте права manage_options — рядовые авторы и редакторы не должны иметь доступ к глобальным настройкам.

Ожидаемый артефакт этапа:

Пункт меню «Настройки темы» в админке WordPress.

PHP
<?php
// inc/theme-options.php
declare(strict_types=1);

add_action('admin_menu', function (): void {
    add_theme_page(
        'Настройки темы',
        'Настройки темы',
        'manage_options',
        'theme-options',
        'theme_render_options_page'
    );
});
2
Этап 2 из 5

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

~45 минСредний
3
Этап 3 из 5

Серверная санитизация данных перед записью в БД

~30 минСредний
4
Этап 4 из 5

Вёрстка страницы настроек с формой и табами

~30 минЛегкий
5
Этап 5 из 5

Хелпер-функция get_theme_option() и вывод в шаблонах

~20 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами