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