Principal/WordPress Fullstack/Blueprints/Temas personalizados/Panel de opciones del tema personalizado basado en Settings API
Volver a tarjetas «Temas personalizados»
Temas personalizados(ТЗ 25 из 54)
Especificación: Panel de opciones del tema personalizado basado en Settings API
Temas personalizados5 шагов • +25 XP

Especificación: Panel de opciones del tema personalizado basado en Settings API

Panel de configuración limpio y ligero para el tema: página en el panel de administración con add_theme_page(), Settings API nativa, saneamiento estricto en el servidor, pestañas y función auxiliar 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)

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

Queremos configurar los ajustes globales del tema (logotipo, contacto, redes sociales, derechos del footer e inserción de scripts) en el panel de administración. No queremos plugins pesados como Redux Framework o ACF Theme Options que ralenticen el escritorio.
Ключевые требования:
  • •Página de administración bajo Apariencia > Opciones del tema mediante add_theme_page()
  • •Arquitectura nativa de Settings API: register_setting, add_settings_section, add_settings_field
  • •Funciones de saneamiento estricto en el servidor para cada tipo de campo (texto, email, URL, teléfono, código)
  • •Interfaz con pestañas que respete el estilo nativo de WordPress e integración con el selector de medios
  • •Función auxiliar eficiente get_theme_option($key, $default = null) con caché en memoria
Ограничения проекта:
  • •Cero dependencias de librerías o frameworks de terceros
  • •Todos los ajustes almacenados en un único array serializado en wp_options para minimizar consultas
  • •Acceso restringido a usuarios con la capacidad 'manage_options'
Критерии приёмки (KPI):
  • La página de opciones carga en < 150ms en el panel de administración
  • Cero opciones sin sanear guardadas en la base de datos
  • Acceso a todas las opciones desde cualquier plantilla sin consultas SQL adicionales

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

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

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

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

1
Этап 1 из 5

Paso 1: Registro de la página de menú en administración

~25 минЛегкий

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

Conéctese al gancho admin_menu. Llame a add_theme_page('Opciones del tema', 'Opciones del tema', 'manage_options', 'theme-options', 'render_theme_options_page').

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

Restrinja siempre la capacidad a 'manage_options' para que únicamente los administradores puedan modificar la configuración global.

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

Пункт меню «Настройки темы» в админке 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

Paso 2: Registro en Settings API y definición de campos

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

Paso 3: Funciones de saneamiento de datos en el servidor

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

Paso 4: Maquetación de pestañas y selector de medios

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

Paso 5: Función auxiliar get_theme_option() e integración en plantillas

~20 минЛегкий

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

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

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

Интеграция