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

Sažetak

Izgradnja prilagođene WordPress blok teme uz potpuno uređivanje sajta (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, i kreiranje prilagođenih šablona pomoću blok oznaka. Naučićete kako da dodate obrasce blokova i varijacije stilova, omogućavajući potpuno dizajniranje sajta bez PHP šablona. Pokrićemo uobičajene greške, poput mešanja klasičnih i blok tema, i pokazati kako testirati svoju temu. Na kraju ćete imati modernu, proširivu blok temu spremnu za produkciju. Ovaj pristup koristi najnovije mogućnosti WordPress-a za brži i vizuelniji razvoj.

Uvod

Potpuno uređivanje sajta (FSE) je revolucionisalo razvoj WordPress tema, omogućavajući vam da vizuelno dizajnirate svaki deo 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 — konfiguracioni fajl koji kontroliše globalne stilove, podešavanja 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 da postavite strukturu fascikli, definišete palete boja i tipografske presete, kreirate prilagođene šablone pomoću blok oznaka i dodate varijacije stilova. Na kraju ćete imati blok temu spremnu za produkciju koja je laka za održavanje i proširivanje. Zaronimo i demistifikujmo 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 zahteva najmanje dva fajla: style.css i index.html. Hajde da ih kreiramo.

Struktura fascikli

Kreirajte fasciklu pod nazivom my-block-theme u vašem wp-content/themes/ direktorijumu. Unutar nje postavite:

• style.css
• index.html
• (opciono) 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
*/

Linija Requires at least: 5.9 osigurava da tema radi sa FSE funkcijom.

index.html

Ovo je vaš rezervni šablon. Mora početi sa blok oznakama. Kreirajte 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 delova šablona zaglavlja i podnožja, i prikazuje naslov i sadržaj objave.

Upozorenje: Blok teme ne smeju da sadrže PHP šablonske fajlove poput header.php ili footer.php. Mešanje klasičnih i blok šablona će pokvariti FSE.

Aktiviranje teme

Otpremite fasciklu putem FTP-a ili instalirajte zip, i aktivirajte je. Trebalo bi da vidite prazan sajt sa minimalnom strukturom. Sledeće, stilizovaćemo je pomoću theme.json.

2. Ovladavanje theme.json: Globalni stilovi i podešavanja

theme.json centralizuje sve kontrole dizajna. Nalazi se u korenu fascikle teme. Hajde da kreiramo jedan sa podešavanjima 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 prilagođena svojstva koja WordPress automatski generiše. Korisnici zatim mogu da ih menjaju u uređivaču sajta.

Savet: Koristite CSS prilagođena svojstva radi doslednosti. Izbegavajte tvrdo kodiranje vrednosti u CSS fajlovima; neka theme.json bude jedinstveni izvor istine.

3. Kreiranje prilagođenih šablona

Blok šabloni su HTML fajlovi sa blok oznakama. Oni prate hijerarhiju sličnu klasičnim šablonima. Na primer, 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đe možete kreirati prilagođene šablone dodavanjem bloka wp:post-template unutar petlje upita.

Za napredno prilagođavanje, razmislite o izgradnji prilagođenih blokova. Naučite kako u Izvan osnovnih blokova: Izrada prilagođenih Gutenberg blokova za poboljšanu funkcionalnost WordPress-a.

Delovi šablona

Kreirajte fasciklu parts/ za delove koji se mogu ponovo koristiti. Na primer, 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 obrazaca blokova i varijacija stilova

Obrasci blokova su unapred dizajnirani rasporedi. Definišite ih u fascikli 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 deo</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Varijacije stilova omogućavaju korisnicima da prebacuju izgled. Kreirajte styles/default.json i styles/dark.json koji menjaju podešavanja teme.

5. Upozorenja i najbolje prakse

• Performanse: theme.json se kešira. Očistite keš nakon promena. Koristite hook wp_register_theme_json ako je potrebno.
• Unazadna kompatibilnost: Blok teme rade samo od WordPress 5.9. Ako vaš sajt mora da podržava starije verzije, razmotrite hibridni pristup, ali izbegavajte mešanje šablonskih fajlova.
• Podređene teme: Blok teme mogu se koristiti kao roditeljske teme za klasične podređene teme, ali ne obrnuto. Koristite template u style.css da deklarišete roditeljsku blok temu.
• Internacionalizacija: Koristite funkciju __() unutar PHP delova šablona za prevedive niske. U blok oznakama, navedite tekstualni domen putem atributa textDomain.

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

Zaključak

Izgradnja prilagođene blok teme sa theme.json omogućava vam da kreirate potpuno dizajnirajući sajt bez diranja PHP-a. Prateći ovaj vodič, postavili ste minimalnu temu, definisali globalne stilove, kreirali prilagođene šablone i dodali obrasce. Ne zaboravite da temeljno testirate, posebno za granične slučajeve poput arhivskih stranica ili prilagođenih tipova objava. Kako WordPress evoluira, blok teme će postati standard. Počnite da koristite FSE danas da biste pojednostavili radni tok i pružili klijentima neuporedivu fleksibilnost.

Ako želite da dodatno ubrzate kreiranje teme, razmotrite korišćenje alata koji generiše kompletan sajt na osnovu opisa. Na primer, možete opisati željeni raspored i imati gotovu blok temu za nekoliko minuta.

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