Розробка 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 разів порівняно з традиційними темами.

Порівняння 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 теми, щоб отримати повний контроль над сайтом без залежності від розробника.