Kako izgraditi prilagođenu WordPress blok temu sa theme.json: Vodič korak po korak

Sažetak

Izgradnja prilagođene WordPress blok teme uz Full Site Editing (FSE) može biti zastrašujuća, ali theme.json pojednostavljuje proces. Ovaj vodič vas vodi kroz postavljanje minimalne blok teme, definisanje globalnih stilova poput boja i tipografije u theme.json-u, te kreiranje prilagođenih šablona koristeći blok markup. Naučićete kako dodati blok šablone i varijacije stilova, omogućavajući potpuno dizajniranje sajta bez PHP šablona. Pokrićemo uobičajene greške, poput miješanja klasičnih i blok tema, i pokazati kako testirati vašu temu. Na kraju ćete imati modernu, proširivu blok temu spremnu za produkciju. Ovaj pristup koristi najnovije WordPress mogućnosti za brži i vizuelniji razvoj.

Uvod

Full Site Editing (FSE) je revolucionirao razvoj WordPress tema, omogućavajući vam da vizuelno dizajnirate svaki dio vašeg sajta. Ali mnogi programeri se i dalje oslanjaju na klasične teme ili se muče da kreiraju blok teme od nule. Ključ za otključavanje moći FSE-a je theme.json—konfiguraciona datoteka koja kontroliše globalne stilove, postavke i šablone. Ovaj članak pruža praktičan, korak-po-korak vodič za izgradnju prilagođene blok teme koristeći theme.json. Naučićete kako postaviti strukturu foldera, definirati palete boja i tipografske presete, kreirati prilagođene šablone s blok markupom i dodati varijacije stilova. Na kraju ćete imati produkcijski spremnu blok temu 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. godini.

1. Postavljanje minimalne blok teme

Blok tema zahtijeva najmanje dvije datoteke: style.css i index.html. Kreirajmo ih.

Struktura foldera

Napravite folder pod nazivom my-block-theme u vašem wp-content/themes/ direktoriju. Unutar njega stavite:

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

style.css

Iako se blok teme manje oslanjaju na CSS, style.css je i dalje 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
*/

Red Requires at least: 5.9 osigurava da tema radi s FSE funkcijom.

index.html

Ovo je vaš rezervni šablon. Mora početi s blok markupom. Napravite jednostavan raspored:

<!-- 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 blok sintaksu za uključivanje dijelova šablona header i footer, te prikazuje naslov i sadržaj objave.

Upozorenje: Blok teme ne smiju sadržavati PHP datoteke šablona poput header.php ili footer.php. Miješanje klasičnih i blok šablona će pokvariti FSE.

Aktivacija teme

Prenesite folder putem FTP-a ili instalacijom zip datoteke i aktivirajte je. Trebali biste vidjeti prazan sajt s vašom minimalnom strukturom. Sljedeće ćemo je stilizirati pomoću theme.json.

2. Savladavanje theme.json: Globalni stilovi i postavke

theme.json centralizira sve kontrole dizajna. Nalazi se u korijenu vašeg foldera teme. Kreirajmo jedan 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 definiše paletu boja, porodice fontova, veličine fontova i globalne stilove. Funkcije var() referenciraju CSS custom svojstva koja WordPress automatski generiše. Korisnici ih mogu mijenjati u Site Editoru.

Savjet: Koristite CSS custom svojstva za konzistentnost. Izbjegavajte tvrdo kodiranje vrijednosti u CSS datotekama; neka theme.json bude jedini izvor istine.

3. Kreiranje prilagođenih šablona

Blok šabloni su HTML datoteke s blok markupom. Slijede hijerarhiju sličnu klasičnim datotekama šablona. Na primjer, kreirajte 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, kreirajte page.html, archive.html itd. Također možete kreirati prilagođene šablone dodavanjem bloka wp:post-template unutar query petlje.

Za naprednu prilagodbu, razmislite o izgradnji prilagođenih blokova. Saznajte kako u Izvan osnovnih blokova: Izrada prilagođenih Gutenberg blokova za poboljšanu WordPress funkcionalnost.

Dijelovi šablona

Kreirajte folder parts/ za dijelove koji se mogu ponovo 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 blok šablona i varijacija stilova

Blok šabloni su unaprijed dizajnirani rasporedi. Definišite ih u folderu patterns/. Kreirajte 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 sekcija</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Varijacije stilova omogućavaju korisnicima da promijene cjelokupni izgled. Kreirajte styles/default.json i styles/dark.json koji poništavaju postavke teme.

5. Upozorenja i najbolje prakse

• Performanse: theme.json se kešira. Očistite keš nakon promjena. Koristite hook wp_register_theme_json ako je potrebno.
• Unatrag kompatibilnost: Blok teme rade samo od WordPress 5.9. Ako vaš sajt mora podržavati starije verzije, razmotrite hibridni pristup, ali izbjegavajte miješanje datoteka šablona.
• Child teme: Blok teme se mogu koristiti kao roditeljske teme za klasične child teme, ali ne obrnuto. Koristite template u style.css za deklarisanje roditeljske blok teme.
• Internacionalizacija: Koristite funkciju __() unutar PHP dijelova šablona za prevedive nizove. U blok markupu, specificirajte tekstualni domen putem atributa textDomain.

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

Zaključak

Izgradnja prilagođene blok teme s theme.json omogućava vam da kreirate potpuno dizajniran sajt bez dodirivanja PHP-a. Prateći ovaj vodič, postavili ste minimalnu temu, definirali globalne stilove, kreirali prilagođene šablone i dodali šablone. Obavezno temeljito testirajte, posebno za rubne slučajeve poput arhivskih stranica ili prilagođenih tipova objava. Kako WordPress evoluira, blok teme će postati standard. Počnite koristiti FSE danas da biste pojednostavili svoj radni tok i ponudili klijentima neuporedivu fleksibilnost.

Ako želite još brže kreirati temu, razmislite o korištenju alata koji generiše kompletan sajt iz opisa. Na primjer, možete opisati željeni raspored i dobiti spremnu blok temu za nekoliko minuta.

Spremni da vašu blok temu pustite u rad? Uz opis u običnom tekstu, možete generisati potpuno funkcionalnu odredišnu stranicu ili web stranicu—bez potrebe za kodiranjem.