Как использовать PHP-шаблоны в блочных темах

Если WordPress не находит подходящий .html файл шаблона, он пытается использовать его .php версию. Для разработчиков тем это значит, что можно использовать PHP.

Ниже рассмотрим пример PHP-шаблона для блочной темы, который подключает header и footer части шаблона и выводит блоки из контента страницы.

Важные моменты

Файл index должен быть HTML-файлом в папке templates. Если в теме есть index.php, WordPress не сможет понять, что это блочная тема, и редактор сайта будет недоступен.
PHP-шаблоны нельзя редактировать в редакторе сайта или шаблонов.
Нужно добавить необходимые хуки WordPress, а также разметку <html> и <body>.
Можно использовать do_blocks() для рендеринга блоков.

Используя существующие части шаблона header и footer, пользователь сможет редактировать эти части напрямую в админке.

Добавление head, body и footer хуков в шаблон

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

Создаём файл example-page.php в корне и добавляем заголовок шаблона:

<?php
/*
Template Name: Example
*/
?>

Если нужно несколько PHP-шаблонов, можно вынести header и footer в отдельные части. Для простоты добавим хуки прямо в файл.

Базовый шаблон с wp_head, body_class, wp_body_open и wp_footer:

<?php
/*
Template Name: Example
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<?php wp_body_open(); ?>

	<div class="wp-site-blocks">
		<!-- тут блоки -->
	</div>

	<?php wp_footer(); ?>
</body>
</html>

Как выводить блоки в PHP-шаблонах

Чтобы блоки отображались как разметка, а не как HTML-комментарии, оборачивайте их в do_blocks().

Функция принимает строку с контентом для парсинга.
Можно рендерить один или несколько блоков за вызов.

Функции для вывода частей шаблона:

block_template_part( $part ) — обёртка для do_blocks(), выводит содержимое части шаблона.
block_header_area() — выводит часть header.
block_footer_area() — выводит часть footer.

Пример подключения header и footer:

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div class="wp-site-blocks">
	<header class="wp-block-template-part site-header">
		<?php block_header_area(); ?>
	</header>

	<footer class="wp-block-template-part site-footer">
		<?php block_footer_area(); ?>
	</footer>
</div>
<?php wp_footer(); ?>
</body>

Загрузка CSS для блоков

С WP 6.0:

В классических PHP-темах CSS блоков грузится в body.
В блочных темах — в head.

✋ Поэтому, если вы вызываете do_blocks() после wp_head(), CSS не загрузится.

Разместите вызов do_blocks() выше wp_head(), затем выведите результат в body.

<?php
$block_content = do_blocks(
	<<<'HTML'
	<!-- wp:group {"layout":{"type":"constrained"}} -->
	<div class="wp-block-group">
	<!-- wp:post-content /-->
	</div>
	<!-- /wp:group -->
	HTML
);
?>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
	<div class="wp-site-blocks">

		<header class="wp-block-template-part site-header">
			<?php block_header_area(); ?>
		</header>

		<?php echo $block_content; ?>

		<footer class="wp-block-template-part site-footer">
			<?php block_footer_area(); ?>
		</footer>

	</div>
<?php wp_footer(); ?>
</body>

Использование частей шаблона внутри `do_blocks()`

Чтобы вставить часть шаблона прямо в do_blocks(), добавьте атрибут theme со слагом темы:

<!-- wp:template-part {"slug":"comments","theme":"fse"} /-->

Итог

Использовать PHP-шаблон (с блоками или без) в FSE-темах вполне возможно, пока вам не нужно редактировать такой шаблон в редакторе сайта.

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