Kako izgraditi prilagođenu WordPress block temu s theme.json: Vodič korak po korak

Sažetak

Izgradnja prilagođene WordPress block teme s potpunim uređivanjem stranice (FSE) može biti zastrašujuća, ali theme.json pojednostavljuje proces. Ovaj vodič vas vodi kroz postavljanje minimalne block teme, definiranje globalnih stilova poput boja i tipografije u theme.json, te izradu prilagođenih predložaka pomoću block markup-a. Naučit ćete dodati block uzorke i varijacije stilova, omogućujući potpuno dizajniranu stranicu bez PHP predložaka. Pokrit ćemo uobičajene pogreške, poput miješanja klasičnih i block značajki, i pokazati kako testirati svoju temu. Na kraju ćete imati modernu, proširivu block temu spremnu za produkciju. Ovaj pristup koristi najnovije WordPress mogućnosti za brži i vizualniji razvoj.

Uvod

Potpuno uređivanje stranice (FSE) revolucioniralo je razvoj WordPress tema, omogućujući vam da vizualno dizajnirate svaki dio stranice. No mnogi programeri i dalje koriste klasične teme ili se muče s izradom block tema od nule. Ključ za otključavanje moći FSE-a je theme.json — konfiguracijska datoteka koja kontrolira globalne stilove, postavke i predloške. Ovaj članak pruža praktičan vodič korak po korak za izradu prilagođene block teme pomoću theme.json. Naučit ćete postaviti strukturu mapa, definirati palete boja i tipografske postavke, izraditi prilagođene predloške s block markup-om i dodati varijacije stilova. Na kraju ćete imati block temu spremnu za produkciju koja se lako održava i proširuje. Zaronimo i demistificirajmo FSE razvoj.

Za širi pogled na to kako FSE oblikuje budućnost WordPress dizajna, pogledajte Gutenberg FSE: Budućnost WordPress dizajna u 2026..

1. Postavljanje minimalne block teme

Block tema zahtijeva najmanje dvije datoteke: style.css i index.html. Stvorimo ih.

Struktura mape

Napravite mapu pod nazivom my-block-theme u vašem wp-content/themes/ direktoriju. Unutar nje postavite:

• style.css
• index.html
• (opcionalno) theme.json

style.css

Iako block teme manje ovise o CSS-u, style.css je još uvijek potreban za identifikaciju teme:

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

Redak Requires at least: 5.9 osigurava da tema radi s FSE značajkom.

index.html

Ovo je vaš zamjenski predložak. Mora započeti s block markup-om. Napravite jednostavan izgled:

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

Ovo koristi block sintaksu za uključivanje dijelova zaglavlja i podnožja te prikazuje naslov i sadržaj objave.

Upozorenje: Block teme ne smiju sadržavati PHP predloške poput header.php ili footer.php. Miješanje klasičnih i block predložaka slomit će FSE.

Aktivacija teme

Prenesite mapu putem FTP-a ili zip instalacije i aktivirajte je. Trebali biste vidjeti praznu stranicu s vašom minimalnom strukturom. Zatim ćemo je stilizirati s theme.json.

2. Ovladavanje theme.json: Globalni stilovi i postavke

theme.json centralizira sve kontrole dizajna. Nalazi se u korijenu vaše teme. Napravimo jednu s postavkama boja i tipografije.

Osnovna struktura

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

Ovo definira paletu boja, obitelji fontova, veličine fontova i globalne stilove. Funkcije var() referenciraju CSS prilagođena svojstva koje WordPress automatski generira. Korisnici ih zatim mogu mijenjati u uređivaču stranice.

Savjet: Koristite CSS prilagođena svojstva radi dosljednosti. Izbjegavajte tvrdo kodiranje vrijednosti u CSS datotekama; neka theme.json bude jedini izvor istine.

3. Stvaranje prilagođenih predložaka

Block predlošci su HTML datoteke s block markup-om. Slijede hijerarhiju sličnu klasičnim predlošcima. Na primjer, stvorite single.html za pojedinačne objave:

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

Slično, stvorite page.html, archive.html itd. Također možete stvoriti prilagođene predloške dodavanjem bloka wp:post-template unutar petlje upita.

Za napredne prilagodbe, razmislite o izradi prilagođenih blokova. Naučite kako u Beyond Basic Blocks: Izrada prilagođenih Gutenberg blokova za poboljšanu WordPress funkcionalnost.

Dijelovi predloška

Napravite mapu parts/ za dijelove koji se mogu ponovno koristiti. Na primjer, 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. Dodavanje block uzoraka i varijacija stilova

Block uzorci su unaprijed dizajnirani izgledi. Definirajte ih u mapi patterns/. Stvorite 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">Dobrodošli</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">Ovo je prilagođeni hero odjeljak</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Varijacije stilova omogućuju korisnicima prebacivanje cjelokupnog izgleda. Stvorite styles/default.json i styles/dark.json koji nadjačavaju postavke teme.

5. Upozorenja i najbolje prakse

• Performanse: theme.json se predmemorira. Očistite predmemoriju nakon promjena. Koristite kuku wp_register_theme_json ako je potrebno.
• Unatrag kompatibilnost: Block teme rade samo od WordPress 5.9. Ako vaša stranica mora podržavati starije verzije, razmislite o hibridnom pristupu, ali izbjegavajte miješanje predložaka.
• Dječje teme: Block teme mogu se koristiti kao roditeljske teme za klasične dječje teme, ali ne obrnuto. Koristite template u style.css za deklariranje roditeljske block teme.
• Internacionalizacija: Koristite funkciju __() unutar PHP dijelova predloška za prevedive nizove. U block markup-u, navedite tekstualnu domenu putem atributa textDomain.

Za više o najboljim praksama razvoja dodataka, pogledajte Izrada robusnih WordPress dodataka: Praktičan vodič za najbolje prakse.

Zaključak

Izgradnja prilagođene block teme s theme.json omogućuje vam stvaranje potpuno dizajnirane stranice bez dodirivanja PHP-a. Slijedeći ovaj vodič, postavili ste minimalnu temu, definirali globalne stilove, stvorili prilagođene predloške i dodali uzorke. Obavezno temeljito testirajte, posebno za rubne slučajeve poput arhivskih stranica ili prilagođenih vrsta objava. Kako WordPress evoluira, block teme će postati standard. Počnite koristiti FSE danas kako biste pojednostavili svoj tijek rada i klijentima pružili neusporedivu fleksibilnost.

Ako želite još više ubrzati izradu teme, razmislite o korištenju alata koji generira kompletnu stranicu iz opisa. Na primjer, možete opisati željeni izgled i imati spremnu block temu za nekoliko minuta.

Spremni za objavu vaše block teme? Uz opis običnog teksta, možete generirati potpuno funkcionalnu odredišnu stranicu ili web stranicu – bez kodiranja.