Как создать кастомную блочную тему WordPress с theme.json: пошаговое руководство

Краткое описание

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

Введение

Полное редактирование сайта (FSE) произвело революцию в разработке тем WordPress, позволяя визуально проектировать каждую часть сайта. Но многие разработчики по-прежнему полагаются на классические темы или изо всех сил пытаются создать блочные темы с нуля. Ключ к раскрытию возможностей FSE — theme.json, конфигурационный файл, управляющий глобальными стилями, настройками и шаблонами. Эта статья предоставляет практическое пошаговое руководство по созданию кастомной блочной темы с использованием theme.json. Вы узнаете, как настроить структуру папок, определить цветовые палитры и типографические пресеты, создать кастомные шаблоны с разметкой блоков и добавить вариации стилей. В итоге у вас будет готовая к продакшену блочная тема, которую легко поддерживать и расширять. Давайте погрузимся и демистифицируем разработку FSE.

Для более широкого взгляда на то, как FSE формирует будущее дизайна WordPress, ознакомьтесь с Gutenberg FSE: будущее дизайна WordPress в 2026 году.

1. Настройка минимальной блочной темы

Блочная тема требует минимум двух файлов: style.css и index.html. Давайте создадим их.

Структура папок

Создайте папку my-block-theme в каталоге wp-content/themes/. Внутри поместите:

• style.css
• index.html
• (опционально) theme.json

style.css

Хотя блочные темы меньше полагаются на CSS, style.css все еще требуется для идентификации темы:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Ваше Имя
Description: Кастомная блочная тема, созданная с помощью theme.json.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

Строка Requires at least: 5.9 гарантирует, что тема работает с функцией FSE.

index.html

Это ваш запасной шаблон. Он должен начинаться с разметки блоков. Создайте простой макет:

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

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

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

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

Предостережение: Блочные темы не должны содержать PHP-шаблоны, такие как header.php или footer.php. Смешивание классических и блочных шаблонов сломает FSE.

Активация темы

Загрузите папку через FTP или zip-установку и активируйте ее. Вы должны увидеть пустой сайт с вашей минимальной структурой. Далее мы стилизуем его с помощью theme.json.

2. Освоение theme.json: глобальные стили и настройки

theme.json централизует все элементы управления дизайном. Он находится в корне папки темы. Давайте создадим его с настройками цвета и типографики.

Базовая структура

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "Secondary"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "Serif"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "Large"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

Это определяет цветовую палитру, семейства шрифтов, размеры шрифтов и глобальные стили. Функции var() ссылаются на CSS-кастомные свойства, автоматически генерируемые WordPress. Затем пользователи могут изменить их в редакторе сайта.

Совет: Используйте CSS-кастомные свойства для согласованности. Избегайте жестко заданных значений в CSS-файлах; пусть theme.json будет единым источником истины.

3. Создание кастомных шаблонов

Блочные шаблоны — это HTML-файлы с разметкой блоков. Они следуют иерархии, аналогичной классическим файлам шаблонов. Например, создайте single.html для отдельных записей:

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

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

Аналогично создайте page.html, archive.html и т.д. Вы также можете создавать кастомные шаблоны, добавив блок wp:post-template внутри цикла запросов.

Для продвинутой кастомизации рассмотрите создание кастомных блоков. Узнайте, как это сделать, в статье За пределами базовых блоков: создание кастомных блоков Gutenberg для расширенной функциональности WordPress.

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

Создайте папку parts/ для переиспользуемых частей. Например, header.html:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

И footer.html:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 My Site</p>
<!-- /wp:paragraph -->

4. Добавление блок-паттернов и вариаций стилей

Блок-паттерны — это предварительно спроектированные макеты. Определите их в папке patterns/. Создайте patterns/hero.php:

<?php
/**
 * Title: Hero
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">Welcome</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">This is a custom hero section</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Вариации стилей позволяют пользователям переключать внешний вид целиком. Создайте styles/default.json и styles/dark.json, которые переопределяют настройки темы.

5. Предостережения и лучшие практики

• Производительность: theme.json кешируется. Очищайте кеш после изменений. При необходимости используйте хук wp_register_theme_json.
• Обратная совместимость: Блочные темы работают только с WordPress 5.9. Если ваш сайт должен поддерживать более старые версии, рассмотрите гибридный подход, но избегайте смешивания файлов шаблонов.
• Дочерние темы: Блочные темы могут использоваться как родительские для классических дочерних тем, но не наоборот. Используйте template в style.css, чтобы объявить родительскую блочную тему.
• Интернационализация: Используйте функцию __() внутри PHP-частей шаблона для переводимых строк. В разметке блоков укажите текстовый домен через атрибут textDomain.

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

Заключение

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

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

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