Cum să creezi o temă WordPress Block personalizată cu theme.json: Ghid pas cu pas

Rezumat

Construirea unei teme WordPress block personalizată cu Full Site Editing (FSE) poate fi descurajantă, dar theme.json simplifică procesul. Acest ghid te îndrumă prin configurarea unei teme block minime, definirea stilurilor globale precum culorile și tipografia în theme.json și crearea de șabloane personalizate folosind markup block. Vei învăța să adaugi modele block și variații de stil, permițând un site complet designabil fără fișiere PHP de șablon. Vom acoperi greșeli comune, cum ar fi amestecarea funcțiilor clasice și block, și vom arăta cum să-ți testezi tema. Până la sfârșit, vei avea o temă block modernă, extensibilă, gata de producție. Această abordare valorifică cele mai recente capacități WordPress pentru o dezvoltare mai rapidă și mai vizuală.

Introducere

Full Site Editing (FSE) a revoluționat dezvoltarea temelor WordPress, permițându-ți să proiectezi vizual fiecare parte a site-ului tău. Dar mulți dezvoltatori încă se bazează pe teme clasice sau se luptă să creeze teme block de la zero. Cheia pentru a debloca puterea FSE este theme.json—un fișier de configurare care controlează stilurile globale, setările și șabloanele. Acest articol oferă un ghid practic, pas cu pas, pentru construirea unei teme block personalizate folosind theme.json. Vei învăța să configurezi structura folderelor, să definești palete de culori și presetări de tipografie, să creezi șabloane personalizate cu markup block și să adaugi variații de stil. Până la sfârșit, vei avea o temă block gata de producție, ușor de întreținut și extins. Să începem și să demistificăm dezvoltarea FSE.

Pentru o privire mai amplă asupra modului în care FSE modelează viitorul designului WordPress, consultă Gutenberg FSE: Viitorul designului WordPress în 2026.

1. Configurarea unei teme block minime

O temă block necesită minim două fișiere: style.css și index.html. Să le creăm.

Structura folderelor

Creează un folder numit my-block-theme în directorul wp-content/themes/. În interior, plasează:

• style.css
• index.html
• (opțional) theme.json

style.css

Chiar dacă temele block se bazează mai puțin pe CSS, style.css este încă necesar pentru identificarea temei:

/*
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
*/

Linia Requires at least: 5.9 asigură că tema funcționează cu funcția FSE.

index.html

Acesta este șablonul de rezervă. Trebuie să înceapă cu markup block. Creează un aspect simplu:

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

Atenție: Temele block nu trebuie să conțină fișiere PHP de șablon precum header.php sau footer.php. Amestecarea șabloanelor clasice și block va strica FSE.

Activarea temei

Încarcă folderul prin FTP sau instalare zip și activează-l. Ar trebui să vezi un site gol cu structura ta minimă. Apoi, îl vom stiliza cu theme.json.

2. Stăpânirea theme.json: Stiluri și setări globale

theme.json centralizează toate controalele de design. Se află în rădăcina folderului temei tale. Să creăm unul cu setări de culoare și tipografie.

Structura de bază

{
    "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)"
        }
    }
}

Sfat: Folosește proprietăți CSS custom pentru consistență. Evită să hardcodezi valori în fișierele CSS; lasă theme.json să fie singura sursă de adevăr.

3. Crearea șabloanelor personalizate

Șabloanele block sunt fișiere HTML cu markup block. Urmează o ierarhie similară cu fișierele clasice de șablon. De exemplu, creează single.html pentru articole individuale:

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

Similar, creează page.html, archive.html, etc. Poți crea și șabloane personalizate adăugând un block wp:post-template într-o buclă de interogare.

Pentru personalizare avansată, ia în considerare construirea de blocuri personalizate. Învață cum în Dincolo de blocurile de bază: Crearea de blocuri Gutenberg personalizate pentru funcționalitate WordPress îmbunătățită.

Părți de șablon

Creează un folder parts/ pentru părți reutilizabile. De exemplu, 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 -->

Și footer.html:

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

4. Adăugarea modelelor block și a variațiilor de stil

Modelele block sunt layout-uri pre-proiectate. Definește-le într-un folder patterns/. Creează 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 -->

Variațiile de stil permit utilizatorilor să schimbe întregul aspect. Creează styles/default.json și styles/dark.json care suprascriu setările temei.

5. Avertismente și cele mai bune practici

• Performanță: theme.json este stocat în cache. Șterge memoria cache după modificări. Folosește hook-ul wp_register_theme_json dacă este necesar.
• Compatibilitate inversă: Temele block funcționează doar din WordPress 5.9. Dacă site-ul tău trebuie să suporte versiuni mai vechi, ia în considerare o abordare hibridă, dar evită amestecarea fișierelor de șablon.
• Teme copil: Temele block pot fi folosite ca teme părinte pentru teme copil clasice, dar nu invers. Folosește template în style.css pentru a declara o temă părinte block.
• Internaționalizare: Folosește funcția __() în părțile PHP de șablon pentru șiruri traductibile. În markup block, specifică domeniul de text prin atributul textDomain.

Pentru mai multe informații despre cele mai bune practici de dezvoltare a pluginurilor, consultă Construirea de pluginuri WordPress robuste: Un ghid practic pentru cele mai bune practici.

Concluzie

Construirea unei teme block personalizate cu theme.json îți oferă puterea de a crea un site complet designabil fără a atinge PHP. Urmând acest ghid, ai configurat o temă minimă, ai definit stiluri globale, ai creat șabloane personalizate și ai adăugat modele. Nu uita să testezi temeinic, în special pentru cazuri limită precum paginile de arhivă sau tipurile de postări personalizate. Pe măsură ce WordPress evoluează, temele block vor deveni standardul. Începe să folosești FSE astăzi pentru a-ți eficientiza fluxul de lucru și a oferi clienților o flexibilitate de neegalat.

Dacă dorești să accelerezi și mai mult crearea de teme, ia în considerare utilizarea unui instrument care generează un site complet dintr-o descriere. De exemplu, poți descrie layout-ul dorit și poți avea o temă block gata de utilizare în câteva minute.

Pregătit să pui tema block în producție? Cu o descriere în text simplu, poți genera o pagină de destinație sau un site complet funcțional—fără cod necesar.