Kā izveidot pielāgotu WordPress bloku motīvu ar theme.json: soli pa solim ceļvedis

Kopsavilkums

Pielāgota WordPress bloku motīva izveide ar Full Site Editing (FSE) var būt biedējoša, bet theme.json vienkāršo procesu. Šis ceļvedis iepazīstina ar minimāla bloku motīva izveidi, globālo stilu, piemēram, krāsu un tipogrāfijas, definēšanu theme.json, un pielāgotu veidņu izveidi, izmantojot bloku atzīmes. Jūs iemācīsities pievienot bloku modeļus un stila variācijas, ļaujot izveidot pilnībā noformējamu vietni bez PHP veidņu failiem. Mēs apskatīsim biežas kļūdas, piemēram, klasisku un bloku motīvu funkciju sajaukšanu, un parādīsim, kā testēt savu motīvu. Beigās jums būs moderns, paplašināms bloku motīvs, kas gatavs ražošanai. Šī pieeja izmanto WordPress jaunākās iespējas ātrākai un vizuālākai izstrādei.

Ievads

Full Site Editing (FSE) ir revolucionizējis WordPress motīvu izstrādi, ļaujot vizuāli noformēt katru vietnes daļu. Bet daudzi izstrādātāji joprojām paļaujas uz klasiskajiem motīviem vai cenšas izveidot bloku motīvus no nulles. Atslēga FSE spēka atbloķēšanai ir theme.json — konfigurācijas fails, kas kontrolē globālos stilus, iestatījumus un veidnes. Šis raksts sniedz praktisku, soli pa solim ceļvedi pielāgota bloku motīva izveidei, izmantojot theme.json. Jūs iemācīsities izveidot mapju struktūru, definēt krāsu paletes un tipogrāfijas iestatījumus, izveidot pielāgotas veidnes ar bloku atzīmēm un pievienot stila variācijas. Beigās jums būs ražošanai gatavs bloku motīvs, ko ir viegli uzturēt un paplašināt. Ienirsim un demistificēsim FSE izstrādi.

Lai iegūtu plašāku ieskatu par to, kā FSE veido WordPress dizaina nākotni, izlasiet Gutenberg FSE: WordPress dizaina nākotne 2026. gadā.

1. Minimāla bloku motīva izveide

Mapju struktūra

Izveidojiet mapi ar nosaukumu my-block-theme savā wp-content/themes/ direktorijā. Iekšpusē ievietojiet:

• style.css
• index.html
• (neobligāti) theme.json

style.css

Lai arī bloku motīvi mazāk paļaujas uz CSS, style.css joprojām ir nepieciešams motīva identifikācijai:

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

Rinda Requires at least: 5.9 nodrošina, ka motīvs darbojas ar FSE funkcionalitāti.

index.html

Šī ir jūsu rezerves veidne. Tai jāsākas ar bloku atzīmēm. Izveidojiet vienkāršu izkārtojumu:

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

Šis izmanto bloku sintaksi, lai iekļautu galvenes un kājenes veidņu daļas, un attēlo ziņas virsrakstu un saturu.

Uzmanību: Bloku motīvi nedrīkst saturēt PHP veidņu failus, piemēram, header.php vai footer.php. Klasisku un bloku veidņu sajaukšana salauzīs FSE.

Motīva aktivizēšana

Augšupielādējiet mapi, izmantojot FTP vai zip instalāciju, un aktivizējiet to. Jums vajadzētu redzēt tukšu vietni ar savu minimālo struktūru. Tālāk mēs to stilizēsim ar theme.json.

2. Apgūstot theme.json: Globālie stili un iestatījumi

theme.json centralizē visus dizaina kontroles. Tas atrodas jūsu motīva mapes saknē. Izveidosim vienu ar krāsu un tipogrāfijas iestatījumiem.

Pamata struktūra

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

Šis definē krāsu paleti, fontu saimes, fontu izmērus un globālos stilus. var() funkcijas atsaucas uz CSS pielāgotajiem rekvizītiem, ko automātiski ģenerē WordPress. Lietotāji pēc tam var tos mainīt Vietnes redaktorā.

Padoms: Izmantojiet CSS pielāgotos rekvizītus konsekvencei. Izvairieties no vērtību iehardkodēšanas CSS failos; ļaujiet theme.json būt vienīgajam patiesības avotam.

3. Pielāgotu veidņu izveide

Bloku veidnes ir HTML faili ar bloku atzīmēm. Tās seko hierarhijai, kas līdzīga klasiskajiem veidņu failiem. Piemēram, izveidojiet single.html atsevišķiem ierakstiem:

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

Līdzīgi izveidojiet page.html, archive.html utt. Varat arī izveidot pielāgotas veidnes, pievienojot wp:post-template bloku vaicājuma cilpā.

Papildu pielāgošanai apsveriet iespēju veidot pielāgotus blokus. Uzziniet, kā rakstā Ārpus pamata blokiem: Pielāgotu Gutenberg bloku veidošana uzlabotai WordPress funkcionalitātei.

Veidņu daļas

Izveidojiet mapi parts/ atkārtoti lietojamām daļām. Piemēram, 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 -->

Un footer.html:

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

4. Bloku modeļu un stila variāciju pievienošana

Bloku modeļi ir iepriekš noformēti izkārtojumi. Definējiet tos mapē patterns/. Izveidojiet 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 -->

Stila variācijas ļauj lietotājiem pārslēgt pilnīgu izskatu. Izveidojiet styles/default.json un styles/dark.json, kas pārraksta motīva iestatījumus.

5. Brīdinājumi un labākā prakse

• Veiktspēja: theme.json tiek kešots. Pēc izmaiņām notīriet kešatmiņu. Ja nepieciešams, izmantojiet wp_register_theme_json āķi.
• Atpakaļsaderība: Bloku motīvi darbojas tikai no WordPress 5.9. Ja jūsu vietnei jāatbalsta vecākas versijas, apsveriet hibrīda pieeju, bet izvairieties no veidņu failu sajaukšanas.
• Bērnu motīvi: Bloku motīvus var izmantot kā pamata motīvus klasiskajiem bērnu motīviem, bet ne otrādi. Izmantojiet template vērtību style.css failā, lai deklarētu pamata bloku motīvu.
• Internacionalizācija: Izmantojiet __() funkciju PHP veidņu daļās tulkojamām virknēm. Bloku atzīmēs norādiet teksta domēnu, izmantojot textDomain atribūtu.

Plašāk par spraudņu izstrādes labāko praksi skatiet rakstā Stabilu WordPress spraudņu izveide: Praktisks ceļvedis labākajai praksei.

Secinājumi

Pielāgota bloku motīva izveide ar theme.json ļauj jums izveidot pilnībā noformējamu vietni, nepieskaroties PHP. Ievērojot šo ceļvedi, jūs esat izveidojis minimālu motīvu, definējis globālos stilus, izveidojis pielāgotas veidnes un pievienojis modeļus. Atcerieties rūpīgi testēt, īpaši robežgadījumus, piemēram, arhīvu lapas vai pielāgotos ierakstu veidus. WordPress attīstoties, bloku motīvi kļūs par standartu. Sāciet izmantot FSE jau šodien, lai racionalizētu savu darbplūsmu un piedāvātu klientiem nepārspējamu elastību.

Ja vēlaties vēl vairāk paātrināt motīva izveidi, apsveriet iespēju izmantot rīku, kas ģenerē pilnīgu vietni no apraksta. Piemēram, jūs varat aprakstīt vēlamo izkārtojumu un dažu minūšu laikā iegūt gatavu lietošanai bloku motīvu.

Gatavs nodot savu bloku motīvu dzīvē? Ar vienkārša teksta aprakstu varat ģenerēt pilnībā funkcionējošu galveno lapu vai vietni — bez kodēšanas.