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

ТЗ: Створення унікальної теми з нуля (FSE / Блоки та Класична)

Повний практичний посібник із розробки надшвидкої нативної теми WordPress: повне редагування сайту (Full Site Editing), блокові шаблони, theme.json v3, адаптивна типографіка, Block Bindings API та сумісність із класичними 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)

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

Мені потрібен унікальний дизайн для технологічного блогу. Хочу, щоб сайт літав на мобільних, швидко завантажувався і я міг сам візуально змінювати структуру блоків, заголовків та меню в адмінці без програміста.
Ключевые требования:
  • •Унікальний дизайн за макетом із Figma без сторонніх конструкторів сторінок
  • •Підтримка блокової теми FSE або гібридної архітектури з класичними шаблонами
  • •Адаптивна типографіка та дизайн-система, налаштовані в theme.json v3
  • •Висока швидкість на мобільних пристроях (LCP < 1.5с, CLS = 0, INP < 150мс)
  • •Інтеграція Block Bindings API для прив'язки метаполів без важких плагінів
Ограничения проекта:
  • •Серверне оточення: PHP 8.3+, WordPress 6.7+ / 7.0+
  • •Нуль комерційних конструкторів сторінок (без Elementor, Divi чи WPBakery)
  • •Локальне розміщення шрифтів для відповідності вимогам GDPR (0 зовнішніх запитів)
  • •Термін реалізації — 2 тижні
Критерии приёмки (KPI):
  • PageSpeed Mobile >= 90, Desktop >= 95
  • Успішне проходження перевірок WordPress Theme Check та Theme Sniffer без зауважень
  • Усі компоненти редагуються через редактор сайту Gutenberg із захистом макета contentOnly

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

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

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

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

1
Этап 1 из 7

Крок 1: Ініціалізація структури директорії теми

~60 минЛегкий

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

Створіть директорію теми в wp-content/themes/. Створіть обов'язкові кореневі файли: style.css з повними метаданими (Theme Name, Template, Requires at least: 6.7, Requires PHP: 8.2), а також 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 (время чтения, бейджи)
Важные технические нюансы и подводные камни:

Переконайтеся, що назва директорії теми точно відповідає текстовому домену (textdomain) для безпомилкового перекладу.

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

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

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

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

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

Крок 2: Підключення асетів та локальне завантаження шрифтів

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

Крок 3 (FSE): Архітектура блокових шаблонів та частин шаблону

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

Крок 4: Патерни блоків, Block Bindings та кастомні макети

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

Крок 5 (FSE): Глобальна дизайн-система в theme.json v3

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

Крок 6 (FSE): Захист макета за допомогою templateLock='contentOnly'

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

Крок 7: Фінальна збірка, аудит Theme Check та здача клієнту

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