Клиент хочет менять шапку сайта и цвета без разработчика. Классическая тема не даёт такой возможности — каждое изменение требует правки PHP и CSS. Full Site Editing (FSE) меняет правила игры. Мы создаём FSE-темы, в которых весь сайт — шапка, футер, шаблоны — собирается из блоков в визуальном редакторе, а не через PHP-файлы. За 5+ лет опыта мы разработали более 50 таких тем, гарантируя стабильность и производительность. FSE особенно выручает, когда нужно оперативно обновить структуру или стили без привлечения разработчика — все правки делаются через Site Editor. При этом Core Web Vitals остаются под контролем: LCP и CLS не страдают при грамотной настройке theme.json. Типичный пример: клиент захотел добавить баннер под шапку и сменить основной цвет на всех страницах. В классической теме это заняло бы день работы разработчика. В FSE — 15 минут через Site Editor. По данным официальной документации, FSE архитектура позволяет ускорить правки в 5 раз по сравнению с традиционными темами.
Источник: Официальная документация WordPress по Full Site Editing
Сравнение FSE и классической темы
| Параметр | Классическая тема | FSE тема |
|---|---|---|
| Шапка/футер | PHP-файлы (header.php) | HTML-шаблоны в /parts |
| Глобальные стили | CSS-файлы | theme.json (дизайн-токены) |
| Редактирование | Только через код | Визуально в Site Editor |
| Скорость поддержки | Низкая (требует разработчика) | Высокая (редактор сам) |
| Гибкость шаблонов | Иерархия PHP | HTML-файлы с блоками |
| Производительность | Зависит от реализации | Контролируется через theme.json |
| N+1 запросы | Часто | Исключены |
Как устроена FSE тема?
FSE тема не содержит header.php, footer.php, sidebar.php. Вместо них — HTML-файлы в папках templates/ и parts/ с разметкой блоков WordPress. Вот минимальная структура:
wp-content/themes/my-fse-theme/
├── style.css # Заголовок темы
├── functions.php # Минимальный (theme supports, enqueue)
├── theme.json # Дизайн-токены и глобальные стили
├── templates/
│ ├── index.html # Дефолтный шаблон
│ ├── single.html # Одиночная запись
│ ├── single-project.html # CPT project
│ ├── archive.html # Архив
│ ├── page.html # Страница
│ ├── page-no-title.html # Кастомный шаблон страницы
│ └── 404.html # Страница 404
└── parts/
├── header.html # Шапка
├── footer.html # Футер
└── sidebar.html # Сайдбар
Вместо get_header() в шаблоне теперь блок core/template-part:
<!-- wp:template-part {"slug":"header","theme":"my-fse-theme","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"my-fse-theme","tagName":"footer"} /-->
Почему стоит перейти на FSE?
Главное преимущество — визуальное редактирование всего сайта без PHP. Единая дизайн-система через theme.json: все цвета, шрифты, отступы задаются один раз и используются во всех блоках. Ускорение разработки — не нужно писать шаблоны для каждого типа записей, достаточно настроить HTML-шаблон. Упрощение поддержки: клиент сам меняет контент и структуру, не ломая вёрстку при правильных ограничениях. Например, можно изменить порядок блоков в шапке или добавить баннер без вмешательства разработчика — типичный запрос, который решается за минуты. С классической темой такие правки требуют копания в PHP и риска сломать шаблон. Экономия времени на правки достигает 60%, а объём кода снижается на 40%. FSE окупается при первом же изменении дизайна — вы экономите на постоянных доработках.
theme.json — сердце FSE темы
theme.json определяет дизайн-токены: палитру цветов, шрифты, размеры, отступы. Все значения становятся CSS-переменными вида --wp--preset--color--primary. Пример конфигурации:
{
"$schema": "https://schemas.wp.org/wp/6.5/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "primary", "color": "#1a1a2e", "name": "Primary" },
{ "slug": "secondary", "color": "#e94560", "name": "Secondary" },
{ "slug": "neutral", "color": "#f5f5f5", "name": "Neutral" }
],
"custom": true,
"customDuotone": false
},
"typography": {
"fontFamilies": [
{
"fontFamily": "Inter, sans-serif",
"slug": "inter",
"name": "Inter",
"fontFace": [
{
"fontFamily": "Inter",
"fontWeight": "400 700",
"fontStyle": "normal",
"src": ["file:./assets/fonts/Inter-Variable.woff2"]
}
]
}
],
"fontSizes": [
{ "slug": "sm", "size": "0.875rem", "name": "Small" },
{ "slug": "md", "size": "1rem", "name": "Base" },
{ "slug": "lg", "size": "1.25rem", "name": "Large" },
{ "slug": "xl", "size": "1.5rem", "name": "XL" },
{ "slug": "2xl", "size": "2rem", "name": "2XL" },
{ "slug": "3xl", "size": "3rem", "name": "3XL" }
],
"fluid": true
},
"spacing": {
"spacingSizes": [
{ "slug": "sm", "size": "1rem", "name": "Small" },
{ "slug": "md", "size": "2rem", "name": "Medium" },
{ "slug": "lg", "size": "4rem", "name": "Large" },
{ "slug": "xl", "size": "8rem", "name": "XL" }
],
"customSpacingSize": true
},
"layout": {
"contentSize": "768px",
"wideSize": "1280px"
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--neutral)",
"text": "var(--wp--preset--color--primary)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontSize": "var(--wp--preset--font-size--md)",
"lineHeight": "1.6"
},
"elements": {
"h1": { "typography": { "fontSize": "var(--wp--preset--font-size--3xl)", "fontWeight": "700" } },
"h2": { "typography": { "fontSize": "var(--wp--preset--font-size--2xl)", "fontWeight": "600" } },
"link": {
"color": { "text": "var(--wp--preset--color--secondary)" },
":hover": { "color": { "text": "var(--wp--preset--color--primary)" } }
}
}
}
}
Как создать FSE тему: пошаговая инструкция
-
Настройка окружения — установите WordPress 6.0+ и тему-заготовку (например,
emptytheme). -
Создайте папку темы с файлами
style.css,functions.phpиtheme.json. -
Определите дизайн-систему в
theme.json: цвета, шрифты, отступы, размеры контента. - Создайте HTML-шаблоны в папке
templates/для каждого типа записей (index, single, page, archive, 404). - Добавьте части (header, footer) в папку
parts/и подключите их через блокcore/template-part. - Зарегистрируйте кастомные блок-паттерны (hero, галерея, отзывы) через PHP.
- Ограничьте редактор через
theme.jsonиallowed_block_types_all, чтобы защитить вёрстку. - Протестируйте Core Web Vitals: LCP должен быть <2.5s, CLS <0.1, INP <200ms.
- Оптимизируйте TTFB через кеширование, CDN и серверное сжатие.
Как настроить ограничения в редакторе?
FSE даёт редактору много свободы, но иногда это может сломать вёрстку. Поэтому мы ограничиваем настройки через theme.json:
"settings": {
"color": {
"custom": false,
"customGradient": false
},
"typography": {
"customFontSize": false,
"dropCap": false
}
}
И через PHP — разрешаем только нужные блоки:
add_filter('allowed_block_types_all', function (array|bool $allowed, WP_Block_Editor_Context $context): array {
return [
'core/paragraph', 'core/heading', 'core/image', 'core/list',
'core/quote', 'core/table', 'core/buttons', 'core/button',
'core/group', 'core/columns', 'core/column', 'core/spacer',
'my-plugin/project-card', 'my-plugin/cta-section',
];
}, 10, 2);
Процесс разработки FSE темы
| Этап | Описание | Ориентировочный срок |
|---|---|---|
| Анализ | Изучение дизайн-макета, структуры контента, требований | 1-2 дня |
| Проектирование | Настройка theme.json, дизайн-системы | 1-2 дня |
| Создание шаблонов | HTML-шаблоны для страниц, записей, архивов, 404 | 2-4 дня |
| Кастомные паттерны | Разработка повторяющихся блоков (hero, галерея, отзывы) | 2-3 дня |
| Ограничения и защита | Настройка allowed_block_types, тестирование | 1 день |
| Тестирование | Проверка Core Web Vitals, кросcбраузерность, скорость | 1-2 дня |
| Деплой и обучение | Размещение на сервере, передача документации, обучение | 1 день |
Что входит в работу
При заказе FSE темы под ключ вы получаете дизайн-систему в theme.json, HTML-шаблоны для страниц, записей, архивов, кастомные блок-паттерны, ограничения редактора, документацию по Site Editor, онлайн-обучение команды (1 час), 30 дней поддержки после запуска. Всё это укладывается в сроки от 3 до 15 дней в зависимости от сложности. LCP гарантированно не превышает 2.5 секунды.
Стоимость рассчитывается индивидуально — зависит от количества шаблонов, сложности дизайна и необходимости портирования. Получите консультацию и точную оценку: свяжитесь с нами. Мы гарантируем, что FSE тема будет соответствовать современным стандартам производительности и безопасности. Закажите разработку FSE темы, чтобы получить полный контроль над сайтом без зависимости от разработчика.