Як створити власну блокову тему WordPress з theme.json: покрокова інструкція

Резюме

Створення власної блокової теми WordPress з повним редагуванням сайту (Full Site Editing, 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: Your Name
Description: A custom block theme built with 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 сьогодні, щоб оптимізувати свій робочий процес і надати клієнтам безпрецедентну гнучкість.

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

Готові запустити вашу блокову тему? За допомогою текстового опису ви можете згенерувати повністю функціональну цільову сторінку або веб-сайт — без коду.