Principal/WordPress Fullstack/Blueprints/Gutenberg y FSE/Creación de un tema único desde cero (FSE / Bloques y Clásico)
Volver a tarjetas «Gutenberg y FSE»
Gutenberg y FSE(ТЗ 1 из 54)
Especificación: Creación de un tema único desde cero (FSE / Bloques y Clásico)
Gutenberg y FSE7 шагов • +35 XP

Especificación: Creación de un tema único desde cero (FSE / Bloques y Clásico)

Guía completa para el desarrollo de un tema nativo ultrarrápido para WordPress: edición completa del sitio (FSE), plantillas de bloques, theme.json v3, tipografía fluida, Block Bindings API y alternativas clásicas en PHP.

~10 ч работыУровень: MiddlePHP 8.3/8.4WordPress 7.0 ReadyGutenberg Block Themestheme.json v3Block Bindings APIInteractivity APIView TransitionsLocal WOFF2Schema.org JSON-LD
+5 XP за шаг
Выполнено 0 из 7 шагов (0%)
Трудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)

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

Necesito un diseño a medida para un blog de tecnología. Quiero que el sitio vuele en dispositivos móviles, cargue en menos de un segundo y me permita modificar visualmente la estructura de bloques, cabeceras y menús en el editor sin tocar código.
Ключевые требования:
  • •Diseño exclusivo trasladado desde Figma sin constructores visuales pesados
  • •Compatibilidad con temas de bloques FSE o arquitectura híbrida con plantillas clásicas
  • •Tipografía fluida y sistema de diseño adaptativo configurado en theme.json v3
  • •Rendimiento móvil estricto (LCP < 1.5s, CLS = 0, INP < 150ms)
  • •Integración de Block Bindings API para vincular campos personalizados de forma nativa
Ограничения проекта:
  • •Servidor con PHP 8.3+, WordPress 6.7+ / 7.0+
  • •Cero constructores comerciales (sin Elementor, Divi ni WPBakery)
  • •Fuentes alojadas localmente conforme al RGPD (0 llamadas externas a Google)
  • •Plazo de entrega de 2 semanas
Критерии приёмки (KPI):
  • PageSpeed Móvil >= 90, Escritorio >= 95
  • Aprobación de WordPress Theme Check y Theme Sniffer con 0 errores
  • Todos los componentes editables en Gutenberg con bloqueo de diseño contentOnly

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

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

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

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

1
Этап 1 из 7

Paso 1: Inicialización de la estructura de directorios del tema

~60 минЛегкий

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

Cree la carpeta del tema en wp-content/themes/. Cree los archivos raíz obligatorios: style.css con cabeceras de metadatos completas (Theme Name, Template, Requires at least: 6.7, Requires PHP: 8.2) e index.php/templates/index.html.

План и контрольные точки реализации:
1Получить доступ к Figma-макету от дизайнера
2Выписать все уникальные компоненты из макета (header, footer, hero, card, CTA)
3Проверить версию WordPress на сервере клиента (wp-admin → Консоль)
4Запросить у клиента шрифты в формате WOFF2
5Согласовать палитру цветов (primary, secondary, background, text)
6Уточнить список динамических полей для Block Bindings API (время чтения, бейджи)
Важные технические нюансы и подводные камни:

Asegúrese de que el nombre del directorio coincida exactamente con el textdomain para una correcta traducción.

Совет эксперта (Best Practice):

Создайте в Notion или Google Docs таблицу «Компонент → Gutenberg блок → Block Bindings → Статус». Это даст клиенту прозрачность, а вам — контроль над объёмом работы.

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

Утверждённое ТЗ: таблица компонентов, палитра, шрифты, список динамических полей.

DocsWordPress Full Site Editing DocumentationИнструментFigma Community — WordPress UI Kit
2
Этап 2 из 7

Paso 2: Encolado de recursos y tipografías alojadas en local

~20 минЛегкий
3
Этап 3 из 7

Paso 3 (FSE): Arquitectura de plantillas de bloques y partes de plantilla

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

Paso 4: Patrones de bloques, Block Bindings y diseños personalizados

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

Paso 5 (FSE): Sistema de diseño global en theme.json v3

~45 минСредний
6
Этап 6 из 7

Paso 6 (FSE): Protección de diseño con templateLock='contentOnly'

~75 минСложный
7
Этап 7 из 7

Paso 7: Compilación final, auditoría con Theme Check y entrega

~60 минСредний

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

8 антипаттерна

Что сдаём клиенту (Deliverables)

Чек-лист сдачи
Тема активирована на production-сервере клиента под управлением PHP 8.3/8.4 и WordPress 7.0
Показатели PageSpeed Mobile ≥ 90 и Desktop ≥ 95 баллов, INP < 200 мс, CLS = 0
Все компоненты страниц редактируемы через Gutenberg с защитой макета (templateLock="contentOnly")
Динамические метаполя подключены через нативный Block Bindings API (без тяжелого React-кода)
Локальные шрифты WOFF2 с предзагрузкой rel="preload" (0 внешних сетевых запросов к Google)
Встроенная микроразметка Schema.org TechArticle в формате JSON-LD для поисковых AI-систем (SGE/GEO)
Плавные кинематографичные переходы страниц с поддержкой View Transitions API
Документация с командами WP-CLI для управления и очистки кэша шаблонов wp_template
ZIP-архив темы для резервного копирования и прохождение Theme Check без замечаний

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

Интеграция

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

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

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

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