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