Руководство по гибридным темам WordPress: что это, отличия

WordPress 5.9 представил новый способ создания проектов: полное редактирование сайта. Это стало поворотным моментом для пользователей, поскольку полностью изменило способ разработки и функционирования тем WP.

Внедрение FSE также привело к появлению различия между шаблонами, которые полностью поддерживают новые функции создания сайтов, также известными как блочные темы и традиционными вариантами на основе PHP. Их мы теперь называем классическими.

Со временем многие опции, созданные для блочных тем, были расширены и на классические. В результате появилась третья категория — гибридные. Они по-прежнему создаются с использованием логики и структуры классических шаблонов, но с поддержкой различных функций, разработанных для блочных темплейтов.

В этой статье рассмотрим гибридные темы, их основные опции, способы улучшения разработчиками и случаи, когда их следует выбирать вместо блочных.

Содержание

Классические или гибридные темы?
Основные функции гибридных тем
Кастомизатор WordPress
Блочные виджеты
Справочник стилей и шаблоны блоков
Структура темы: обзор для разработчиков
Классические темы
Блочные темы
Добавление функций блоков в гибридные темы
Глобальные стили
Варианты стилей блоков
Варианты блоков
Шаблоны блоков
Части шаблона
Когда выбрать гибридные темы вместо блочных
Заключение

Классические или гибридные темы?

До появления блочных тем в Twenty Twenty-Two и WordPress 5.9 не существовало таких вещей, как классические шаблоны. Этот термин появился, чтобы отличать их от блочных. Классические темы — это все шаблоны ВордПресс без поддержки функций блоков.

Сегодня нелегко найти чисто классические темы. Потому что с версии 5.9 эти шаблоны были улучшены многими функциями, созданными для блочных темплейтов. Это со временем сделало опыт редактирования и дизайна 2 категорий все более и более схожим.

Тем не менее, способ работы с гибридными темами по-прежнему отличается от работы с блочными.

Основные функции гибридных тем

С гибридными темами сайт может использовать возможности блочного редактора WordPress, оставаясь при этом совместимым с традиционными плагинами и функциями WP, такими как виджеты, меню и шаблоны страниц.

Кастомизатор WordPress

Гибридные темы обычно поддерживают кастомайзер WP, визуальную среду редактирования. Она позволяет точно кастомизировать внешний вид сайта и просматривать изменения в режиме реального времени.

Twenty Twenty-One по умолчанию — хороший пример гибридной темы. Она предоставляет наиболее распространенные параметры редактора, включая персонализацию проекта, цвета и темный режим, фоновое изображение, меню, виджеты, настройки главной страницы и многое другое.

Темы могут регистрировать определенные элементы управления редактором. Поэтому функциональность варьируется в зависимости от шаблона.

На следующем изображении показан редактор для Neve.

Темы могут регистрировать расширенные функции, чтобы предоставить пользователям детальный контроль над определенными аспектами дизайна сайта.

Например, Neve предоставляет мощный конструктор для создания хедеров и футеров.

Блочные виджеты

Гибридные темы позволяют кастомизировать области виджетов с помощью блоков благодаря редактору компонентов. Он был впервые представлен в WordPress 5.8. Вы можете попробовать его с любой классической темой, использующей виджеты.

Интерфейс редактора виджетов похож на меню кастомайзера постов. На следующем изображении показан блок «Изображение» в области футера Twenty Twenty-One.

Классические виджеты, такие как «Категории», «Архивы», «Последние посты» или «Последние комментарии», по-прежнему поддерживаются в гибридных темах.

Редактор дополняет классические компоненты WP. Он позволяет пользователям создавать собственные через интерфейс на основе блоков.

Справочник стилей и шаблоны блоков

Благодаря недавним изменениям, внесенным в WordPress 6.8, гибридные темы, поддерживающие стили редактора, могут использовать справочник стилей. Это визуальный интерфейс, который позволяет просматривать любой блок, который возможно применить на сайтах, без необходимости использовать их в контенте.

Можете получить доступ к справочнику стилей в гибридных темах в разделе «Внешний вид» > «Дизайн» > «Стили».

В том же интерфейсе возможно просматривать и управлять шаблонами.

Для гибридных тем, которые их поддерживают, макеты доступны для использования в редакторе постов. Он по умолчанию включен во всех установках WordPress, начиная с версии 5.0, если не отключили его с помощью плагина.

Структура темы: обзор для разработчиков

Классические и блочные темы отличаются не только с точки зрения функциональности для конечного пользователя. Они также различаются структурой.

Классические темы

Классические темы опираются на несколько ключевых файлов, наиболее важным из которых является style.css. Он предоставляет метаданные шаблона и определяет внешний вид сайта на фронтенде.

В дополнение к таблице стилей, классические темы обычно имеют файл functions.php. Он используется для построения функциональности и поддержки темплейта.

Классические темы также опираются на шаблоны PHP. Они определяют структуру страницы и ее основные области: хедер, тело, сайдбары и футер.

Когда пользователь посещает запись или раздел, ВордПресс определяет, какой макет применять для отображения контента на экране в соответствии со строгой системой правил, известной как иерархия шаблонов. Наиболее часто используемые включают index.php, page.php, single.php и многие другие.

Классические темы могут применять определенные функции PHP (хуки действий и фильтров). Они выполняются в определенные моменты жизни WP. Это позволяет разработчикам расширять функциональность с помощью кода PHP в файле functions.php дочерней темы.

Вы можете догадаться, что кастомизация классического шаблона особенно сложна для пользователей, не имеющих навыков программирования.

Блочные темы

Блочные темы также нуждаются в файле style.css. Это позволяет предоставить ВордПресс метаданные шаблона. Но они в значительной степени полагаются на theme.json, конфигурационный файл, который определяет глобальные стили и кастомизации. Он содержит объект JSON. Его свойства определяют начальные параметры, необходимые для создания макета и определения внешнего вида страниц сайта.

Блочные темы также используют шаблоны и части макетов. Но они структурно отличаются от макетов PHP классических темплейтов. В блочных темах шаблоны и их части представляют собой HTML-файлы, содержащие специальную разметку и объекты JSON. Рассмотрим, например, home.html стандартной Twenty Twenty-Five:

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

Этот шаблон состоит из структурированных элементов в виде HTML-тегов и комментариев. Комментарии могут ссылаться на другие типичные компоненты блочной темы, такие как части шаблонов и макеты, которые состоят из блоков или других вложенных элементов.

Добавление функций блоков в гибридные темы

Как я упоминал выше, в классических темах для изменения макета или функциональности сайта необходимо добавлять кастомный код, часто связанный с файлами шаблонов или functions.php. В отличие от этого, блочные варианты дают возможность пользователям, не являющимся разработчиками, более полно контролировать макет и внешний вид сайта.

Гибридные темплейты предлагают меньше функций блоков, чем блочные. Но все же они могут обеспечить расширенный контроль над макетом и внешним видом с помощью шаблонов и глобальных стилей.

Давайте рассмотрим некоторые мощные функции блоков. Их вы можете интегрировать в свою классическую тему. Затем я расскажу, как их эффективно реализовать.

Глобальные стили

В WordPress 5.8 были введены глобальные стили — визуальный интерфейс, который позволяет пользователям контролировать внешний вид сайта из централизованного интерфейса, а разработчикам — стили своих веб-ресурсов WP через файл theme.json.

Чтобы включить эту функцию в гибридной теме, просто добавьте theme.json в корневую папку шаблона.

Давайте рассмотрим некоторые ключевые опции. Их вы можете добавить в свою гибридную тему с помощью theme.json.

Типографика

Допустим, вы хотите добавить поддержку 3 семейств шрифтов в классическую тему. В этом примере я буду использовать Twenty Twenty-One.

Сначала создайте папку fonts в assets. Загрузите несколько шрифтов по своему выбору. Я добавляю 3 варианта: Manrope, Fira Code и Beiruti. Вы можете получить эти шрифты из темы Twenty Twenty-Five.

Откройте текстовый редактор и создайте следующий файл theme.json:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "768px",
			"wideSize": "1024px"
		},
		"typography": {
			"fontFamilies": [
				{
					"name": "Manrope",
					"slug": "manrope",
					"fontFamily": "Manrope, sans-serif",
					"fontFace": [
						{
							"src": [
								"file:./assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
							],
							"fontWeight": "200 800",
							"fontStyle": "normal",
							"fontFamily": "Manrope"
						}
					]
				},
				{
					"name": "Fira Code",
					"slug": "fira-code",
					"fontFamily": "\"Fira Code\", monospace",
					"fontFace": [
						{
							"src": [
								"file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
							],
							"fontWeight": "300 700",
							"fontStyle": "normal",
							"fontFamily": "\"Fira Code\""
						}
					]
				},
				{
					"name": "Beiruti",
					"slug": "beiruti",
					"fontFamily": "Beiruti, sans-serif",
					"fontFace": [
						{
							"src": [
								"file:./assets/fonts/beiruti/Beiruti-VariableFont_wght.woff2"
							],
							"fontWeight": "300 700",
							"fontStyle": "normal",
							"fontFamily": "Beiruti"
						}
					]
				}
			]
		}
	}
}

Свойство settings.typography.fontFamilies позволяет зарегистрировать любое количество кастомных семейств шрифтов. Для каждого необходимо объявить следующие свойства:

name: обязательное понятное для человека название семейства шрифтов.
slug: обязательный слэг для семейства. Он будет добавлен к сгенерированному кастомному свойству CSS: –wp–preset–font-family–{slug}.
fontFamily: обязательное значение. Оно будет сопоставляться со значением CSS font-family.
fontFace: необязательный массив шрифтов, которые сопоставляются с правилом @font-face CSS. Это необходимо только для кастомных начертаний.

Сохраните файл theme.json. Перейдите на дашборд WordPress. Создайте новую запись или страницу. Добавьте абзац с примером текста и откройте сайдбар блока. Нажмите кнопку «Параметры типографики». Выберите «Шрифт». Вы должны увидеть параметры для семейств шрифтов, которые только что вставили в свою тему.

На следующих изображениях показано, как выглядит сайдбар блока «Абзац» до и после добавления файла theme.json.

Глобальные свойства стиля варьируются в зависимости от темы. Помимо типографики, общеподдерживаемые свойства позволяют контролировать цветовую палитру, макет и кастомные стили.

Следующие примеры были протестированы на Twenty Twenty-One.

Цветовая палитра, градиенты и двухцветные фильтры

Вы можете добавить поддержку кастомных цветов с помощью свойства settings.color на уровне темы или отдельного блока. Например, следующий код добавляет 2 оттенка в палитру по умолчанию:

settings: {
	"color": {
		"palette": [
			{
				"name": "Dark blue",
				"slug": "dark-blue",
				"color": "#1e73be"
			},
			{
				"name": "Bright green",
				"slug": "bright-green",
				"color": "#81d742"
			}
		]
	},
}

Вы можете использовать свойство settings.color.palette, чтобы зарегистрировать столько цветов, сколько хотите.

Возможно добавить поддержку градиентов и двухцветных фильтров:

settings: {
	"color": {
		"gradients": [
			{
				"gradient": "linear-gradient(135deg, #0073e6, #8fceff)",
				"name": "Clear Sky",
				"slug": "clear-sky"
			},
			{
				"gradient": "linear-gradient(to right top, #ff8c00, #ff0080)",
				"name": "Vivid Sunset",
				"slug": "vivid-sunset"
			}
		]
	}
}

settings: {
	"color": {
		"duotone": [
			{
				"colors": [ "#0A2F51", "#F5D04E" ],
				"name": "Deep Sea Gold",
				"slug": "deep-sea-gold"
			},
			{
				"colors": [ "#3A0CA3", "#FFB703" ],
				"name": "Purple Amber",
				"slug": "purple-amber"
			},
			{
				"colors": [ "#1B4332", "#BAE6C4" ],
				"name": "Forest Mist",
				"slug": "forest-mist"
			},
			{
				 "colors": [ "#000000", "#FFFFFF" ],
				 "name": "Black and White",
				 "slug": "black-and-white"
			}
		]
	}
}

Макет

Вы также можете кастомизировать параметры макета по умолчанию. Свойство settings.layout позволяет установить ширину содержимого по умолчанию и размер выравнивания по ширине. Вот пример:

"settings": {
	"layout": {
		"contentSize": "768px",
		"wideSize": "1024px"
	}
}

Варианты стилей блоков

Впервые представленные в WordPress 5.3, варианты стилей блоков позволяют разработчикам создавать альтернативные стили для определенных вариантов.

Короче говоря, стили блоков — это CSS-классы, добавляемые к элементу-обертке блока в форме .is-style-{name}.

Варианты стилей блоков отображаются на панели «Стили» сайдбара. Они позволяют выбрать внешний вид для компонента в один клик.

Вы можете зарегистрировать их несколькими способами.

Во-первых, возможно зарегистрировать стили блоков с помощью функции PHP register_block_style(). Например, можете зарегистрировать следующую вариацию стиля в файле функций темы:

if ( function_exists( 'register_custom_block_style' ) ) {
	register_block_style(
		'core/image',
		array(
			'name'	=> 'custom',
			'label'	=> __( 'Custom', 'text-domain' ),
			'inline_style'	=> '.wp-block-image.is-style-custom img { border-radius: 12px; }',
		)
	);
}

add_action( 'init', 'register_custom_block_style' );

register_block_style() принимает 2 аргумента:

$block_name: имя типа блока или массив.
$style_properties: массив, содержащий свойства стиля. В этом примере я использовал name, label и inline_style.

Вышеуказанный код генерирует вариацию стиля блока с одним свойством CSS. После добавления его в файл functions.php или дочерней темы на панели стилей блоков отобразится кнопка, позволяющая пользователю установить стиль в один клик.

На следующем изображении показана вариация стиля блока в интерфейсе. Тема по-прежнему Twenty Twenty-One.

Возможно добавить свои встроенные стили в код PHP, как в приведенном выше примере. Но ваш код может быстро стать сложным в обслуживании, поскольку стили становятся более изощренными. В таких случаях возможно зарегистрировать вариацию стиля, как я показал ранее, но определить их в файле theme.json.

В следующем примере я создам вариацию стиля «Темно-синий» для блока «Заголовок».

Сначала зарегистрируйте ее в файле функций темы:

add_action('init', 'register_block_style_labels');

function register_block_style_labels() {
	$block_types = ['core/heading'];

	if (function_exists('register_block_style')) {
		foreach ($block_types as $block_type) {
			register_block_style(
				$block_type,
				array(
					'name'	=> 'dark-blue-bg',
					'label' => __('Dark Blue', 'twentytwentyone')
				)
			);
		}
	}
}

Затем определите вариации стилей в theme.json:

"settings": {
	"styles": {
		"blocks": {
			"core/heading": {
				"variations": {
					"dark-blue-bg": {
						"color": {
							"background": "#2860a6",
							"text": "#ffffff"
						},
						"spacing": {
							"padding": {
								"top": "0.3em",
								"right": "0.4em",
								"bottom": "0.3em",
								"left": "0.4em"
							}
						}
					}
				}
			}
		}
	}
}

Теперь пользователи темы могут выбирать между 2 вариациями стиля для блока «Заголовок», как показано на следующем изображении.

Варианты блоков

Варианты блоков — это альтернативные версии любого зарегистрированного блока. В то время как варианты стилей блоков (или стили блоков) являются кастомизируемыми версиями. Их пользователи могут добавлять к контенту в один клик.

Варианты блоков являются альтернативными версиями конфигураций блока. Они позволяют быстро вставлять элемент с предварительно настроенными параметрами, не устанавливая одинаковые для каждого экземпляра.

API Block Variations позволяет Hybrid Themes регистрировать варианты блоков с помощью JavaScript. В простейших случаях для этого может быть достаточно создания скрипта и его постановки в очередь. Но если много работаете с JavaScript и блоками Gutenberg, может понадобиться включить инструменты сборки в свой рабочий процесс.

Предположим, вы хотите сделать вариацию блока с набором предварительно настроенных опций, чтобы вариация могла быть быстро вставлена в посты или страницы с минимальными дополнительными настройками.

Первый шаг — создать пустой файл JavaScript и загрузить его в редактор. Нужно будет поставить его в очередь в документе functions.php темы, используя wp_enqueue_script() и action hook enqueue_block_editor_assets.

add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_script(
		'my-block-variations',
		get_theme_file_uri( 'assets/js/block-variations.js' ) . '?cache_bust=' . time(),
		array( 
			'wp-blocks', 
			'wp-dom-ready',
			'wp-i18n',
			'wp-edit-post'
		),
		wp_get_theme()->get( 'Version' ),
		true
	);
} );

В приведенном выше коде я использовал ?cache_bust=’ . time(), чтобы добавить уникальную метку времени к URL-адресу block-variations.js (например, block-variations.js?cache_bust=1698765432).

Это полезно во время разработки, так как гарантирует, что браузер, сервер или CDN всегда загружают последнюю версию скрипта, предотвращая блокировку отображения изменений устаревшей кэшированной версией.

Далее необходимо зарегистрировать вариацию блока в скрипте с помощью функции registerBlockVariation, предоставляемой API Block Variations.

Вот сигнатура функции:

const registerBlockVariation = ( blockName, variation )

blockName: имя блока (т. е. core/query).
variation: объект, описывающий вариацию для типа блока.

Объект вариации может включать любой из следующих параметров:

name: (строка) уникальный идентификатор вариации.
title: (строка) читаемый человеком заголовок вариации.
description: (строка) подробное описание.
category: (строка) категория, используемая в интерфейсах поиска.
keywords: (массив) массив терминов, помогающих пользователям найти вариацию.
icon: (WPIcon) значок для отображения в инструменте вставки блоков.
isDefault: (булево значение) является ли текущая вариация вариацией по умолчанию. По умолчанию false.
isActive: (функция/массив) функция или массив атрибутов блока, используемый для определения, активна ли вариация при выборе блока. Без isActive WordPress не сможет отличить вашу от стандартного блока или других, что приведет к несогласованному поведению в редакторе.
attributes: (объект) значения атрибутов, которые переопределяют значения по умолчанию блока.
innerBlocks: (массив[]) начальная конфигурация вложенного блока.
example: (объект) структурированные данные для предварительного просмотра блока. Установите значение undefined, чтобы отключить предварительный просмотр.
scope: (WPBlockVariationScope[]) список областей, в которых применима вариация. Если не указано, предполагается, что она применима ко всем доступным областям. Доступные варианты: block, inserter и transform. По умолчанию установлено значение block и inserter.

Теперь можете добавить JavaScript в файл block-variations.js:

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'custom-centered-text', 
	title: 'Custom Centered Text', 
	description: 'This is a block variation with custom attributes.', 
	attributes: { 
		level: 2,
		textAlign: 'center',
		placeholder: 'Add your text here',
		style: {
			color: {
				text: '#1e73be',
				background: '#81d742'
			}
		}
	},
	isActive: ( blockAttributes ) => {
		return (
			blockAttributes.level === 2 &&
			blockAttributes.textAlign === 'center' &&
			blockAttributes.style?.color?.text === '#1e73be' &&
			blockAttributes.style?.color?.background === '#81d742'
		);
	},
	icon: 'airplane', 
	scope: [ 'inserter' ] 
} );

Этот код вставляет новый тип блока с иконкой самолета в инструмент вставки. При нажатии на него на страницу добавляется новый вариант элемента «Заголовок» с вашими параметрами. Я установил уровень (H2), выровнял текст по центру, установил заполнитель и определил цвет текста и фона.

Чтобы этот код работал как ожидается, убедитесь, что ваша гибридная тема поддерживает такие функции редактора, как «editor-color-palette», «editor-styles» и другие.

Шаблоны блоков

Шаблоны блоков — это готовые к работе группы блоков. Их вы можете добавлять в свой контент и кастомизировать с помощью интерфейса редактора.

Темы блоков обычно предоставляют переменное количество шаблонов, которые возможно добавлять в свой материал прямо из инструмента вставки. Гибридные темплейты умеют вставлять поддержку шаблонов, чтобы пользователи классических тем могли воспользоваться этой мощной функцией.

Вы можете создать папку в корневой библиотеке темы. Затем включить в нее шаблоны блоков, либо зарегистрировать их в файле functions.php или других файлах .php.

Чтобы все было упорядочено, возможно создать inc/block-patterns.php и включить его в function.php вашей темы со следующим кодом:

require get_template_directory() . '/inc/block-patterns.php';

После этого можете создать свой шаблон в редакторе, скопировать код и зарегистрировать его и категорию в inc/block-patterns.php с помощью функций register_block_pattern_category и register_block_pattern():

if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_hybrid_theme_register_block_pattern_category() {
		register_block_pattern_category(
			'myhybridtheme',
			array( 'label' => esc_html__( 'My Hybrid Theme', 'myhybridtheme' ) )
		);
	}
	add_action( 'init', 'my_hybrid_theme_register_block_pattern_category' );
}

if ( function_exists( 'register_block_pattern' ) ) {
	function my_hybrid_theme_register_block_pattern() {

		// My pattern
		register_block_pattern(
			'myhybridtheme/huge-heading',
			array(
				'title'			=> esc_html__( 'Huge heading', 'myhybridtheme' ),
				'categories'	=> array( 'myhybridtheme' ),
				'viewportWidth'	=> 1440,
				'blockTypes'	=> array( 'core/heading' ),
				'content'		=> '<!-- wp:heading {"textAlign":"center","align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.2"}}} --><h2 class="alignwide has-text-align-center has-gigantic-font-size" style="line-height:1.2">' . esc_html__( 'A simple Heading in a pattern', 'myhybridtheme' ) . '</h2><!-- /wp:heading -->',
			)
		);
	}
	add_action( 'init', 'my_hybrid_theme_register_block_pattern' );
}

Вы можете предварительно просмотреть шаблон на дашборде WordPress в разделе «Внешний вид» > «Дизайн» > «Шаблоны» > «Моя гибридная тема» и использовать его в своем контенте.

Возможно дублировать, экспортировать и импортировать его на другие сайты ВордПресс.

Части шаблона

Хотя гибридные темы использует классические шаблоны PHP и части макетов, вы можете добавить поддержку частей блочных шаблонов в файл functions.php темплейта.

function my_hybrid_theme_setup() {
	add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'my_hybrid_theme_setup' );

После этого можете включить любую часть шаблона в любой файл темы с помощью функции block_template_part.

Давайте посмотрим на практический пример. Начните с создания папки /parts в корневой директории темы и загрузки в нее файла footer.html. Для этого примера я скопировал футер из Twenty Twenty-Five:

<!-- wp:group {"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
	<div class="wp-block-group">
		<!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-large"} /-->
		<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"Social media"} -->
		<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->
		<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->
		<!-- wp:navigation-link {"label":"X","url":"#"} /-->
		<!-- /wp:navigation -->
	</div>
	<!-- /wp:group -->
	<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
	<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
	<!-- /wp:spacer -->
	<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
	<p class="has-text-align-center has-small-font-size">
		Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>
	</p>
	<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

Теперь можете включить эту часть шаблона в классическую тему с помощью функции block_template_part:

<?php block_template_part( 'footer' ); ?>

Вы можете, например, включить его в файл footer.php Twenty Twenty-One.

Возможно включить части шаблона в блок-шаблон, используя следующий код:

<!-- wp:template-part {"slug":"footer"} /-->

Вы можете, например, скопировать код шаблона page.html из Twenty Twenty-Five:

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
		<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
		<!-- wp:post-title {"level":1} /-->
		<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
	</div>
	<!-- /wp:group -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

Сохраните этот шаблон в папке /templates и назовите его page.html. WordPress автоматически загрузит его в соответствии с иерархией. Он автоматически включит части шаблонов header.html и footer.html из папки /parts гибридной темы.

Когда выбрать гибридные темы вместо блочных

Гибридная тема может быть лучшим вариантом в следующих сценариях:

Когда хотите использовать некоторые современные функции блочных тем без полной перестройки существующего сайта. Гибридные шаблоны позволяют применять такие функции блоков, как редактор, глобальные стили и макеты. Они также поддерживают API редакторов блоков, такие как Block Bindings API, Interactivity API и HTML API. Это означает, что вы можете создавать современные сайты без необходимости проходить сложную миграцию.
Когда желаете сохранить совместимость с классическими плагинами или виджетами, но не хотите отказываться от некоторых мощных опций блочных тем. Старые версии некоторых расширений могут иметь проблемы с совместимостью с блочными темами, например, устаревшие Contact Form 7, NextGEN Gallery, Custom Post Type UI и т. д. Хотя для предотвращения уязвимостей безопасности рекомендуется обновлять плагины до последних версий, на некоторых сайтах WP могут быть установлены старые вариации плагинов. Если еще не готовы обновить все расширения, можете рассмотреть возможность установки гибридного темплейта.
Когда пытаетесь найти лучший компромисс между дизайном и производительностью. Некоторые популярные гибридные темы оптимизированы для скорости и могут обеспечить значительно лучшую эффективность, чем блочные. При этом они поддерживают подход блочных без кода/с минимальным кодом, обеспечивая лучший опыт дизайна, чем классические. Оптимизированные для производительности гибридные темы, такие как Neve или Kadence, позволяют создавать современные ресурсы без ущерба для функционирования.
Когда хотите плавный переход к FSE. Иногда миграция от старой к новой логике дизайна может занять время, особенно при работе в командах над большими сайтами. Здесь кривая обучения вызывает беспокойство. Гибридная тема позволяет команде экспериментировать с функциональностью блоков, сохраняя при этом привычные инструменты дизайна, такие как кастомайзер и классические шаблоны PHP.

Однако есть и сценарии, в которых грибридные темы не являются лучшим вариантом:

Когда инструменты дизайна сайта имеют приоритет над общей производительностью. Если хотите использовать некоторые функции, специфичные для полного редактирования ресурса, такие как редактор, полная кастомизация шаблонов с помощью блоков и интерфейс глобальных стилей, гибридная тема не подходит. Поскольку эти опции не поддерживаются или работают только частично.
С сайтами WP, основанными на REST API. В этом сценарии предпочтительны блочные темы, поскольку данные блоков легко доступны через REST API или WPGraphQL. Там гибридные темы могут добавить большую сложность.
Когда предпочтительным является подход к созданию сайта без использования кода. Гибридные темы не поддерживают разработку или редактирование шаблонов через редактор. Хотя поддержка частей может быть добавлена. В настоящее время она ограничена, и управление в основном основано на PHP.

Суть в том, что нет жестких правил выбора между гибридными и блочными темами. Это зависит от многих факторов, таких как навыки команды, тип создаваемого сайта, требования к производительности, обратная совместимость и многое другое.

Заключение

Полное редактирование сайта и блочные темы кардинально изменили подход к созданию ресурсов на ВордПресс. Такой подход дает пользователям больше возможностей для разработки сложных макетов и тонкой кастомизации всех аспектов проекта.

Но если еще не готовы к переходу, потому что сайт может быть не полностью совместим с блочными темплейтами или требует определенных функций классического шаблона, гибридные темы — это вариант, который позволяет получить лучшее из обоих миров.

Также стоит упомянуть производительность. Блочные темы могут быть ресурсоемкими из-за обширного рендеринга блоков и использования JavaScript. Гибридные шаблоны с оптимизированной производительностью сделают сайт более легким и эффективным за счет уменьшения нагрузки на JS.