Главная/WordPress Fullstack/Блупринты/Gutenberg & FSE/Создание уникальной темы с нуля (FSE / Блоки)
К карточкам раздела «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 1 из 54)
ТЗ: Создание уникальной темы с нуля (FSE / Блоки)
Gutenberg & FSE7 шагов • +35 XP

ТЗ: Создание уникальной темы с нуля (FSE / Блоки)

Линейное руководство по разработке быстрой нативной темы с поддержкой визуального редактирования Gutenberg блоков, Block Bindings API и стандартов WordPress 7.0.

~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)

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

«Мне нужен уникальный дизайн для блога о технологиях. Хочу, чтобы сайт летал на мобильных, быстро загружался и я мог сам визуально менять структуру блоков, заголовков и меню в админке без программиста.»
Ключевые требования:
  • •Уникальный дизайн по Figma-макету (не шаблон)
  • •Визуальное редактирование блоков, заголовков и меню в админке
  • •Высокая скорость загрузки на мобильных устройствах (LCP < 1.5с)
  • •Адаптивная вёрстка для всех экранов (320px — 4K)
  • •Клиент должен редактировать контент самостоятельно без риска сломать структуру макета
  • •Семантическая оптимизация под поисковые AI-системы (SGE / GEO / Perplexity)
Ограничения проекта:
  • •Сервер клиента — VPS с PHP 8.3/8.4, WordPress 6.7+ / 7.0 (полная поддержка FSE)
  • •Бюджет не предусматривает коммерческие плагины конструкторов (Elementor, Divi)
  • •Шрифты должны хоститься строго локально (GDPR / ФЗ-152, 0 внешних запросов к Google)
  • •Срок сдачи — 2 недели
Критерии приёмки (KPI):
  • PageSpeed Mobile ≥ 90 баллов, Desktop ≥ 95 баллов
  • LCP < 1.5 сек, CLS = 0, INP < 200 мс
  • Все компоненты редактируемы через Gutenberg с защитой макета (contentOnly)
  • Валидная микроразметка TechArticle в JSON-LD без внешних тяжелых плагинов
  • Тема проходит WordPress Theme Check без предупреждений и ошибок

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

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

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

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

1
Этап 1 из 7

Анализ ТЗ и Бриф клиента

~60 минЛегкий

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

Изучите Figma-макет. Выделите повторяющиеся элементы (шапка, подвал, сайдбар, сетка постов). Согласуйте с клиентом список необходимых кастомных блоков и динамических полей (время чтения статьи, Telegram-ссылка автора). Уточните, подготовлены ли шрифты в веб-формате (WOFF2) и оптимизирована ли графика.

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

На первом шаге в зависимости от ТЗ выберите архитектуру: FSE тема требует WP 6.2+ (рекомендуется 6.7+ / 7.0). Если сервер клиента работает на старом окружении без поддержки современного ядра, выбирайте классический PHP-шаблон.

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

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

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

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

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

Настройка локального окружения

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

Создание файлов блочной темы

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

Регистрация возможностей, Block Bindings, Schema.org и ассетов

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

Конфигурация theme.json v3

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

Шаблоны, Block Bindings API и защита макета

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

Тестирование, QA и сдача проекта

~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 и готовыми конфигами