Полное редактирование сайта (Full Site Editing, FSE) – это значительный сдвиг в разработке тем WordPress, предоставляющий беспрецедентный контроль над каждым аспектом сайта через интерфейс блочного редактора. Этот подход отходит от классической модели, где разметка и логика во многом определялись PHP-файлами шаблонов, в сторону декларативной конфигурации через блоки и файл theme.json.
Что такое Full Site Editing (FSE) и его преимущества?
FSE позволяет пользователям редактировать не только контент записей и страниц, но и структурные элементы сайта: хедеры, футеры, сайдбары, шаблоны записей блога, архивы и даже 404 страницы – всё в одном визуальном интерфейсе. Вместо виджетов и настроек темы в кастомайзере, управление макетом и стилями осуществляется с помощью блоков и глобальных стилей.
Преимущества FSE:
- Единый интерфейс: Всё редактирование сосредоточено в блочном редакторе, упрощая процесс для конечных пользователей.
- Визуальный контроль: Разработчики тем могут предоставить пользователям детальный контроль над внешним видом без написания кода.
- Гибкость: Создание и переиспользование частей шаблонов (template parts) и паттернов блоков.
- Стандартизация стилей: Файл
theme.jsonцентрализует управление стилями и настройками, уменьшая необходимость в сложных таблицах CSS и PHP-логике для опций темы.
Отличия FSE тем от классических тем WordPress
Ключевое отличие заключается в подходе к шаблонам и стилям. Классические темы используют PHP-файлы (index.php, page.php, single.php и т.д.) для определения структуры HTML и PHP-функции для вывода контента и сайдбаров. Стили часто управляются через style.css и настройки кастомайзера.
FSE темы используют HTML-файлы в каталоге /templates для определения структуры шаблонов с использованием разметки блоков. PHP-файлы, такие как index.php, становятся минималистичными заглушками, часто просто загружающими стандартный шаблон. Файл theme.json берет на себя роль управления глобальными настройками и стилями, замещая многие функции, ранее реализуемые через functions.php или кастомайзер.
Необходимые требования для создания FSE темы
Для работы с FSE требуются:
- WordPress версии 5.9+: FSE был официально представлен в этой версии.
- Активная тема с поддержкой FSE: Самые простые темы, такие как Twenty Twenty-Two, демонстрируют базовую структуру.
- Понимание концепций блоков и шаблонов блоков (Block Editor): Опыт работы с редактором блоков Gutenberg.
- Знание HTML, CSS и основ PHP: Хотя FSE уменьшает зависимость от PHP для шаблонов, базовые знания остаются необходимыми.
- Понимание структуры JSON: Для работы с файлом
theme.json.
Подготовка к Созданию FSE Темы: Необходимые Файлы и Структура
Создание FSE темы начинается с определения базовой структуры файлов и каталогов. В отличие от классических тем, где index.php и style.css являются ключевыми, в FSE темах центральную роль играют style.css, index.php (как точка входа) и, самое главное, theme.json.
Основные файлы FSE темы: style.css, index.php, theme.json
style.css: Традиционный файл стилей, который обязательно должен присутствовать. Он содержит комментарий-заголовок с информацией о теме (Название, Автор, Версия и т.д.). В FSE темах его роль в плане стилизации часто уменьшается, поскольку большая часть стилей определяется черезtheme.json. Однако, он может использоваться для добавления специфических стилей или переопределений.index.php: В FSE темах этот файл служит минимальной точкой входа. Его основная задача – гарантировать, что WordPress найдет тему. Типичное содержимое может быть очень простым, часто только включающим шаблон:
<?php
// Simple index.php for FSE themes
// This file is required by WordPress to recognize the theme.
// In FSE themes, it often serves as a fallback or minimal loader.
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
// The block template handles the output
the_content();
}
} else {
// No posts found, potentially load a specific template part or block pattern
echo 'No content found.';
}
// Note: In many FSE themes, this file is even simpler, relying
// almost entirely on the block templates in the /templates directory.
?>
theme.json: Ключевой файл для FSE тем. Он определяет глобальные настройки (цвета, типографика, отступы, размеры), включает/отключает поддержку различных функций (например, кастомные поля, изображения записей) и устанавливает стили по умолчанию для блоков. Это декларативный файл в формате JSON, который заменяет множество настроек, ранее разбросанных по кастомайзеру иfunctions.php.
Создание базовой структуры каталогов темы
Стандартная структура FSE темы включает несколько ключевых каталогов:
my-fse-theme/
├── assets/ # Необязательно: для JS, изображений и других ассетов
├── parts/ # Части шаблонов (header, footer и т.д.)
├── patterns/ # Паттерны блоков
├── styles/ # Необязательно: варианты стилей темы
├── templates/ # Шаблоны страниц (index, single, page, archive и т.д.)
├── theme.json # Глобальные настройки и стили (обязательно)
├── style.css # Информация о теме и базовые стили (обязательно)
├── index.php # Точка входа (обязательно)
└── functions.php # Необязательно: для регистрации таксономий, типов записей и т.д.
Каталоги parts и templates содержат HTML-файлы, описывающие структуру шаблонов и их частей с использованием разметки блоков.
Описание файла theme.json и его роль в настройке темы
theme.json – это манифест вашей FSE темы. Он позволяет централизованно управлять множеством аспектов:
settings: Определяет доступные пользователю настройки в редакторе (например, поддержка цветовой палитры, размеров шрифтов, отступов). Здесь же можно включить/отключить поддержку различных функций WordPress.styles: Устанавливает стили по умолчанию для всего сайта (типографика, цвета, макет), а также стили для отдельных блоков.templateParts: Необязательно, но полезно для регистрации частей шаблонов.patterns: Необязательно, но полезно для регистрации паттернов блоков.
Пример базовой структуры theme.json:
{
"version": 2,
"settings": {
"appearanceTools": true, // Включает набор полезных настроек (отступы, границы и т.д.)
"color": {
"palette": [ // Определение цветовой палитры темы
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#6c757d",
"name": "Secondary"
}
] // Добавьте свои цвета
// ... другие настройки цвета (gradients, duotone)
},
"typography": {
"fontFamilies": [ // Определение доступных шрифтов
{
"fontFamily": "'Arial', sans-serif",
"slug": "arial",
"name": "Arial"
}
]
// ... другие настройки типографики (fontSizes)
},
"layout": { // Настройка ширины контента
"contentSize": "800px",
"wideSize": "1100px"
}
// ... другие глобальные настройки (spacing, border, shadow)
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)", // Использование CSS переменной из палитры
"text": "var(--wp--preset--color--primary)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--arial)"
},
"blocks": { // Стили для конкретных блоков
"core/paragraph": {
"spacing": {
"margin": {
"top": "1em",
"bottom": "1em"
}
},
"typography": {
"fontSize": "16px"
}
},
"core/heading": {
"color": {
"text": "var(--wp--preset--color--primary)"
}
}
}
}
}
theme.json автоматически генерирует кастомные CSS свойства (CSS variables) на основе определенных вами настроек (например, --wp--preset--color--primary). Это позволяет легко использовать определенные в JSON значения в ваших CSS файлах или в самих JSON стилях.
Создание Блоков для FSE Темы
Хотя создание FSE темы в первую очередь фокусируется на использовании и конфигурировании существующих блоков и шаблонов, понимание того, как работают блоки и как регистрировать свои или использовать паттерны, является важной частью экосистемы.
Разработка собственных блоков: основы и принципы
Разработка собственных блоков Gutenberg – это отдельная сложная тема, требующая глубокого понимания React, JavaScript, PHP и API блоков WordPress. Обычно для создания кастомного блока используется инструмент @wordpress/create-block. Это создает boilerplate код с файлами JavaScript (для редактора и фронтенда), PHP (для регистрации и рендеринга) и CSS. Принципы включают в себя определение атрибутов блока, создание функций edit() (для редактора) и save() (для сохранения контента) или использование динамического рендеринга через PHP-колбэк.
Для FSE темы важно не столько уметь создавать сложные динамические блоки, сколько понимать, как существующие или простые статические блоки могут быть использованы для построения макета шаблонов.
Использование существующих блоков WordPress
Основа FSE – это использование богатой библиотеки стандартных блоков WordPress (блоки контента, блоки макета, блоки темы). При создании шаблонов в каталогах /templates и /parts, вы вручную пишете HTML-разметку, представляющую блоки. Например, блок заголовка сайта:
<!-- wp:site-title /-->
Блок навигации:
<!-- wp:navigation /-->
Блок для вывода контента поста:
<!-- wp:post-content /-->
Структура HTML-файлов шаблонов строится путем комбинирования этих комментариев блоков и обычной HTML-разметки (например, div для оберток).
Регистрация блоков в теме
Если вы разрабатываете собственные блоки или используете блоки из плагина, их регистрация происходит с использованием PHP функции register_block_type(), обычно в файле functions.php вашей темы (хотя для блоков, связанных с плагинами, это чаще делается в плагине).
FSE темы также могут регистрировать паттерны блоков (Block Patterns). Паттерны – это готовые, предопределенные макеты, состоящие из комбинации одного или нескольких блоков. Они регистрируются с помощью register_block_pattern() и хранятся либо в PHP-файлах, либо в формате JSON. Паттерны значительно упрощают создание сложных секций или целых страниц для пользователей.
Пример регистрации паттерна в functions.php:
<?php
// functions.php
/**
* Register custom block patterns.
*/
function mytheme_register_block_patterns() : void {
// Example pattern registration
register_block_pattern(
'mytheme/basic-columns-layout',
array(
'title' => __( 'Two Columns Layout', 'mytheme' ),
'description' => __( 'A simple layout with two columns.', 'mytheme' ),
'categories' => array( 'columns', 'layout' ),
'content' => "<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph placeholder=\"Add content...\" /--></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph placeholder=\"Add content...\" /--></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->"
)
);
}
// Hook into the init action to register patterns
add_action( 'init', 'mytheme_register_block_patterns' );
Настройка Внешнего Вида Темы через theme.json
Файл theme.json является центральным инструментом для управления стилями и настройками FSE темы. Он позволяет задать глобальные стилевые переменные, контролировать доступные опции в редакторе и применять стили к конкретным блокам или элементам.
Глобальные стили и настройки: цвета, типографика, размеры
В секции settings файла theme.json вы определяете, какие возможности стайлинга будут доступны пользователям и разработчикам в редакторе, а также задаете глобальные палитры, размеры и отступы. В секции styles вы применяете эти настройки или другие CSS-значения к элементам всего сайта (styles) или к конкретным блокам (styles.blocks).
Пример глобальных настроек и стилей:
{
"version": 2,
"settings": {
"color": {
"palette": [ /* ... ваша палитра цветов ... */ ]
},
"typography": {
"fontFamilies": [ /* ... ваши шрифты ... */ ],
"fontSizes": [ // Определение доступных размеров шрифта
{
"slug": "small",
"size": "0.875rem",
"name": "Small"
},
{
"slug": "large",
"size": "1.5rem",
"name": "Large"
}
]
},
"spacing": {
"units": [ "%", "px", "rem", "vh", "vw" ], // Доступные единицы измерения для отступов/полей
"padding": true, // Включить контроль над внутренними отступами
"margin": true, // Включить контроль над внешними отступами
"blockGap": true // Включить контроль над промежутками между блоками
}
},
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)" // Применяем 'large' размер шрифта ко всему сайту по умолчанию
},
"spacing": {
"blockGap": "1.5rem" // Устанавливаем стандартный промежуток между блоками
}
}
}
Эти настройки влияют как на внешний вид сайта, так и на опции, доступные пользователям в боковой панели редактора.
Настройка стилей для отдельных блоков
Внутри секции styles.blocks вы можете переопределить или добавить стили для конкретных блоков, используя их slug (например, core/paragraph, core/heading, core/image).
{
"version": 2,
"styles": {
"blocks": {
"core/button": { // Стили для блока Кнопка
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "#ffffff"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
},
"border": { // Добавление стилей границ
"radius": "5px"
}
},
"core/site-title": { // Стили для блока Заголовок сайта
"typography": {
"fontSize": "clamp(2rem, 4vw, 3rem)",
"fontWeight": "bold"
},
"color": {
"text": "#333333"
}
}
}
}
}
Этот подход позволяет очень гранулярно контролировать внешний вид каждого типа блока прямо из файла конфигурации темы.
Использование CSS variables (пользовательских свойств) в theme.json
Как упоминалось ранее, theme.json автоматически генерирует кастомные CSS свойства (--wp--...) на основе ваших настроек в секции settings. Это мощная функция, которая способствует согласованности стилей. Вы можете использовать эти переменные в секции styles файла theme.json, а также в вашем файле style.css или любых других CSS-файлах, загружаемых темой.
Например, если в settings.color.palette вы определили цвет с slug: "primary" и color: "#007bff", WordPress сгенерирует переменную --wp--preset--color--primary со значением #007bff. Вы можете использовать ее так:
/* В вашем style.css */
.my-custom-class {
background-color: var(--wp--preset--color--primary);
padding: var(--wp--custom--spacing--medium); /* Пример использования кастомной переменной для отступа */
}
Вы также можете определять свои собственные CSS переменные в theme.json в секции settings.custom, а затем использовать их в styles или внешних CSS файлах:
{
"version": 2,
"settings": {
"custom": { // Определение своих CSS переменных
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"padding": {
"top": "var(--wp--custom--spacing--medium)",
"bottom": "var(--wp--custom--spacing--medium)"
}
}
}
}
Использование переменных упрощает внесение изменений в стили и обеспечивает консистентность дизайна.
Тестирование и Отладка FSE Темы
Создание FSE темы – это итеративный процесс, требующий тщательного тестирования и отладки. Поскольку большая часть логики представления перенесена в редактор и theme.json, инструменты отладки несколько отличаются от классической разработки тем.
Проверка совместимости с различными браузерами и устройствами
Как и любая веб-разработка, FSE темы должны корректно отображаться и функционировать в разных браузерах (Chrome, Firefox, Safari, Edge) и на разных устройствах с различными размерами экранов (десктопы, планшеты, мобильные телефоны). Используйте инструменты разработчика браузера (Developer Tools) для тестирования адаптивности (Responsiveness) и проверки стилей.
Особое внимание уделите тому, как блоки ведут себя при изменении размеров экрана, особенно блоки макета, такие как «Columns» или «Group». Убедитесь, что настройки отступов и ширин, заданные в theme.json или вручную в шаблонах, работают предсказуемо.
Использование инструментов разработчика для отладки
Инструменты разработчика браузера – ваш лучший друг при отладке FSE тем. Вкладки Elements (для просмотра структуры HTML блоков), Styles (для инспекции и изменения CSS, включая CSS variables) и Console (для ошибок JavaScript) неоценимы.
При отладке стилей, определенных в theme.json, обратите внимание на то, как браузер применяет сгенерированные CSS переменные (--wp--...). Помните, что стили из theme.json имеют определенный приоритет и загружаются до основных стилей темы.
Для отладки PHP-логики (если у вас есть functions.php или кастомные динамические блоки), используйте стандартные методы WordPress: WP_DEBUG, WP_DEBUG_LOG, wp_die() и логирование ошибок PHP.
Отладка шаблонов блоков (HTML-файлов в /templates и /parts) сводится к проверке правильности HTML-структуры и разметки блоков.
Рекомендации по оптимизации производительности FSE темы
FSE может генерировать достаточно много CSS из файла theme.json. Для оптимизации:
- Минимизируйте
theme.json: Включайте только те настройки и опции, которые действительно нужны вашей теме. - Оптимизируйте CSS: Если вы используете дополнительный CSS в
style.css, убедитесь, что он минимизирован и не содержит избыточных правил. - Оптимизируйте изображения: Используйте современные форматы (WebP) и правильно масштабируйте изображения.
- Отложенная загрузка (Lazy Loading): WordPress поддерживает нативную отложенную загрузку для изображений и iframes, но убедитесь, что эта функция работает корректно или рассмотрите добавление ее для других элементов.
- Минимизируйте JavaScript: Если у вас есть кастомный JS, убедитесь, что он оптимизирован и загружается только там, где это необходимо.
- Используйте паттерны и части шаблонов эффективно: Переиспользование элементов уменьшает избыточность.
Понимание того, как theme.json влияет на конечный CSS и HTML, является ключом к созданию производительных FSE тем.