Разработка Full Site Editing (FSE) темы WordPress

Клиент хочет менять шапку сайта и цвета без разработчика. Классическая тема не даёт такой возможности — каждое изменение требует правки 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 тема?

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 тему: пошаговая инструкция

1. Настройка окружения — установите WordPress 6.0+ и тему-заготовку (например, emptytheme).
2. Создайте папку темы с файлами style.css, functions.php и theme.json.
3. Определите дизайн-систему в theme.json: цвета, шрифты, отступы, размеры контента.
4. Создайте HTML-шаблоны в папке templates/ для каждого типа записей (index, single, page, archive, 404).
5. Добавьте части (header, footer) в папку parts/ и подключите их через блок core/template-part.
6. Зарегистрируйте кастомные блок-паттерны (hero, галерея, отзывы) через PHP.
7. Ограничьте редактор через theme.json и allowed_block_types_all, чтобы защитить вёрстку.
8. Протестируйте Core Web Vitals: LCP должен быть <2.5s, CLS <0.1, INP <200ms.
9. Оптимизируйте 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 темы

Что входит в работу

При заказе FSE темы под ключ вы получаете дизайн-систему в theme.json, HTML-шаблоны для страниц, записей, архивов, кастомные блок-паттерны, ограничения редактора, документацию по Site Editor, онлайн-обучение команды (1 час), 30 дней поддержки после запуска. Всё это укладывается в сроки от 3 до 15 дней в зависимости от сложности. LCP гарантированно не превышает 2.5 секунды.

Стоимость рассчитывается индивидуально — зависит от количества шаблонов, сложности дизайна и необходимости портирования. Получите консультацию и точную оценку: свяжитесь с нами. Мы гарантируем, что FSE тема будет соответствовать современным стандартам производительности и безопасности. Закажите разработку FSE темы, чтобы получить полный контроль над сайтом без зависимости от разработчика.