Как да създадете персонализирана WordPress Block Theme с theme.json: Ръководство стъпка по стъпка

Резюме

Създаването на персонализирана WordPress block theme с Full Site Editing (FSE) може да бъде предизвикателство, но theme.json опростява процеса. Това ръководство ви превежда през настройка на минимална block theme, дефиниране на глобални стилове като цветове и типография в theme.json и създаване на персонализирани шаблони с блоков код. Ще научите как да добавяте блокови модели и варианти на стилове, което позволява напълно дизайн способен сайт без PHP файлове с шаблони. Ще покрием често срещани грешки, като смесване на класически и блок теми, и ще покажем как да тествате вашата тема. Накрая ще имате модерна, разширяема block theme, готова за продукция. Този подход използва най-новите възможности на WordPress за по-бързо и по-визуално разработване.

Въведение

Full Site Editing (FSE) революционизира разработката на WordPress теми, позволявайки ви да проектирате всяка част от сайта визуално. Но много разработчици все още разчитат на класически теми или се затрудняват да създадат block theme от нулата. Ключът за отключване на силата на FSE е theme.json — конфигурационен файл, който контролира глобални стилове, настройки и шаблони. Тази статия предоставя практическо ръководство стъпка по стъпка за създаване на персонализирана block theme с theme.json. Ще научите как да настроите структурата на папките, да дефинирате цветови палитри и предварителни настройки за типография, да създавате персонализирани шаблони с блоков код и да добавяте стилови варианти. Накрая ще имате block theme, готова за продукция, която е лесна за поддръжка и разширяване. Нека се потопим и демистифицираме FSE разработката.

За по-широк поглед върху това как FSE оформя бъдещето на дизайна в WordPress, вижте Gutenberg FSE: Бъдещето на WordPress дизайна през 2026.

1. Настройка на минимална Block Theme

Една block theme изисква минимум два файла: style.css и index.html. Нека ги създадем.

Структура на папките

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

• style.css
• index.html
• (по избор) theme.json

style.css

Въпреки че block theme разчитат по-малко на 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

Това е вашият резервен шаблон. Трябва да започва с блоков код. Създайте прост layout:

<!-- 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"} /-->

Това използва блоков синтаксис за включване на части от шаблона за заглавна и долна част, и показва заглавието и съдържанието на публикацията.

Внимание: Block theme не трябва да съдържат 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. Потребителите могат след това да ги променят в Site Editor.

Съвет: Използвайте 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">Добре дошли</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">Това е персонализиран hero раздел</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Вариантите на стилове позволяват на потребителите да сменят цели визии. Създайте styles/default.json и styles/dark.json, които заместват настройките на темата.

5. Внимание и най-добри практики

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

За повече относно най-добрите практики за разработка на плъгини, вижте Изграждане на стабилни WordPress плъгини: Практическо ръководство за най-добри практики.

Заключение

Създаването на персонализирана block theme с theme.json ви дава възможност да създадете напълно дизайн способен сайт, без да докосвате PHP. Следвайки това ръководство, вие настроихте минимална тема, дефинирахте глобални стилове, създадохте персонализирани шаблони и добавихте модели. Не забравяйте да тествате задълбочено, особено за гранични случаи като архивни страници или персонализирани типове публикации. Докато WordPress се развива, block theme ще станат стандарт. Започнете да използвате FSE днес, за да оптимизирате работния си поток и да предложите на клиентите несравнима гъвкавост.

Ако искате да ускорите създаването на тема още повече, помислете за използване на инструмент, който генерира цялостен сайт от описание. Например, можете да опишете желания layout и да имате готова за използване block theme за минути.

Готови ли сте да пуснете вашата block theme в действие? С описание в обикновен текст можете да генерирате напълно функционална целева страница или уебсайт — без код.