Kuinka luoda lohkoteemamalleja WordPress 6.0:ssa

Block kuviot, jota kutsutaan usein myös nimellä osiot, otettiin käyttöön vuonna WordPress 5.5 jotta käyttäjät voivat rakentaa ja jakaa ennalta määritettyjä lohkoasetteluja kuviohakemisto. Hakemistossa on laaja valikoima WordPress-yhteisön suunnittelemia kuratoituja malleja. Nämä kuviot ovat saatavilla yksinkertaisessa kopioi ja liitä -muodossa, eivät vaadi koodaustietoa ja säästävät siten paljon aikaa käyttäjille.

Huolimatta monista kuvioita koskevista artikkeleista, kattavia ja ajantasaisia ​​kuvion luomista koskevia artikkeleita, jotka kattavat uusimmat parannetut ominaisuudet, puuttuu. Tämän artikkelin tarkoituksena on täyttää aukko keskittymällä viimeaikaisiin paranneltuihin ominaisuuksiin, kuten kuvioiden luomiseen ilman rekisteröintiä, ja tarjota ajantasainen vaiheittainen opas niiden luomiseen ja käyttämiseen aloittelijoille ja kokeneille kirjoittajille.

Koska käynnistää WordPress 5.9 ja Kaksikymmentäkaksikymmentäkaksi (TT2) oletusteema, lohkomallien käyttö lohkoteemoissa on yleistynyt. Olen ollut suuri fani estää kuvioita ja olen luonut ja käyttänyt niitä lohkoteemoissani.

Uusi WordPress 6.0 tarjoukset kolmessa suuressa mallissa on parannuksia tekijöille:

• Sallii kuvion rekisteröinnin /patterns kansio (samanlainen kuin /parts, /templatesja /styles rekisteröinti).
• Kuvioiden rekisteröiminen julkisesta kuviohakemistosta käyttämällä theme.json.
• Lisätään malleja, joita voidaan tarjota käyttäjälle uutta sivua luotaessa.

Johdannossa Tutustu WordPress 6.0 -videoon, Automaattinen tuoteyhteyshenkilö Ann McCathy korostaa joitain äskettäin parannettuja kuvioiden ominaisuuksia (alkaen klo 15) ja keskustelee tulevista kuvioiden parantamissuunnitelmista, joihin kuuluvat mm. kuvioita leikkauselementteinä, joka tarjoaa vaihtoehtoja valitse malli sivun luomisen yhteydessä, integroiva mallihakemistohaku ja paljon muuta.

Edellytykset

Artikkelissa oletetaan, että lukijoilla on perustiedot WordPressin täyden sivuston muokkaus (FSE) käyttöliittymästä ja lohkoteemoista. The Lohkoeditorin käsikirja ja Koko sivuston muokkaus verkkosivusto tarjoaa viimeisimmät opetusoppaat kaikkien FSE:n ominaisuuksien oppimiseen, mukaan lukien tässä artikkelissa käsitellyt lohkoteemat ja -mallit.

Osa 1: Kehittyvät lähestymistavat lohkokuvioiden luomiseen

Alkuperäinen lähestymistapa lohkokuvioiden luomiseen edellytti lohkokuvioiden API:n käyttöä joko mukautettuna laajennuksena tai suoraan rekisteröitynä functions.php tiedosto niputettavaksi lohkoteeman kanssa. Äskettäin julkaistu WordPress 6.0 esitteli useita uusia ja parannettuja ominaisuuksia, jotka työskentelevät kuvioiden ja teemojen kanssa, mukaan lukien kuvioiden rekisteröinti /patterns kansio ja a sivun luontimalli modaalinen.

Taustaa varten tarkastellaan ensin lyhyesti, kuinka kuvion rekisteröinnin työnkulku kehittyi rekisterimallin API:n käyttämisestä suoraan lataamiseen ilman rekisteröintiä.

Käytä esimerkkiä 1: Twenty Twenty-one

Oletusarvo Twenty Twenty-One -teema (TT1) ja TT1 Estää teeman (TT1:n sisarus) esittelee kuinka lohkokuvioita voidaan rekisteröidä teemaan functions.php. Kokeellisessa TT1 Blocks -teemassa tämä single block-pattern.php sisältävä tiedosto kahdeksan lohkokuvioita lisätään functions.php kuin include kuten tässä näkyy.

Mukautettu lohkokuvio on rekisteröitävä käyttäen register_block_pattern funktio, joka saa kaksi argumenttia — title (kuvioiden nimi) ja properties (Matriisi, joka kuvaa kuvion ominaisuuksia).

Tässä on esimerkki yksinkertaisen "Hello World" -kappalemallin rekisteröimisestä tästä Theme Shaper -artikkeli:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

Rekisteröinnin jälkeen register_block_pattern() funktio tulee kutsua käsittelijää, joka on liitetty init koukku kuvatulla tavalla tätä.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

Kun lohkokuviot on rekisteröity, ne näkyvät lohkoeditorissa. Tarkempi dokumentaatio löytyy tästä Estä kuvion rekisteröinti.

Lohkon kuvion ominaisuudet

Vaaditun lisäksi title ja content ominaisuudet, lohkoeditorin käsikirja luetellaan seuraavat valinnaiset kuvion ominaisuudet:

• title (edellytetään): Ihmisen luettava otsikko kuviolle.
• content (edellytetään): Estä kuvion HTML-merkintä.
• description (Valinnainen): Visuaalisesti piilotettu teksti, jota käytetään kuvaamaan kuviota lisäyksessä. Kuvaus on valinnainen, mutta se on erittäin suositeltavaa, jos otsikko ei kuvaa täysin kuvion toimintaa. Kuvaus auttaa käyttäjiä löytämään kuvion haun aikana.
• categories (Valinnainen): Joukko rekisteröityjä kuvioluokkia, joita käytetään lohkokuvioiden ryhmittelyyn. Lohkokuvioita voidaan näyttää useissa luokissa. Luokka on rekisteröitävä erikseen, jotta sitä voidaan käyttää täällä.
• keywords (Valinnainen): Joukko aliaksia tai avainsanoja, jotka auttavat käyttäjiä löytämään kuvion haun aikana.
• viewportWidth (Valinnainen): Kokonaisluku, joka määrittää kuvion aiotun leveyden, jotta kuvion skaalattu esikatselu lisäyssovelluksessa.
• blockTypes (Valinnainen): Joukko lohkotyyppejä, joiden kanssa kuvio on tarkoitettu käytettäväksi. Jokaisen arvon on oltava ilmoitettu lohko name.
• inserter (Valinnainen): Oletuksena kaikki kuviot näkyvät lisäyssovelluksessa. Jos haluat piilottaa kuvion niin, että se voidaan lisätä vain ohjelmallisesti, aseta inserter että false.

Seuraavassa on esimerkki lainausmallilaajennuksen koodikatkelmista, jotka on otettu WordPress blogi.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

Mallien käyttäminen mallitiedostossa

Kun kuviot on luotu, niitä voidaan käyttää teemamallitiedostossa seuraavalla lohkomerkinnällä:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

Esimerkki kohteesta tämä GitHub-arkisto näyttää "käytön"footer-with-background" kuvio etana "tt2gopher” etuliite TT2 Gopher blocks -teemassa.

Varhaiset lohkoteemojen ja Gutenberg-laajennuksen käyttäjät hyödynsivät myös klassisten teemojen malleja. Oletusarvo Kaksikymmentä kaksikymmentä ja suosikki Eksell-teemojani (a demo-sivusto tässä) ovat hyviä esimerkkejä, jotka osoittavat, kuinka kuvioominaisuuksia voidaan lisätä klassisiin teemoihin.

Käytä esimerkkiä 2: Twenty Twenty-Two

Jos teema sisältää vain muutaman kuvion, kehitys ja ylläpito ovat melko hallittavissa. Jos lohkoteema sisältää kuitenkin monia kuvioita, kuten TT2-teemassa, pattern.php tiedostosta tulee erittäin suuri ja vaikea lukea. Oletusarvoinen TT2-teema, joka niputtaa yli 60 mallia, esittelee uudelleen muotoiltua kuvion rekisteröintityönkulkua rakenne joka on helpompi lukea ja ylläpitää.

Otetaan esimerkkejä TT2-teemasta, ja keskustellaan lyhyesti, kuinka tämä yksinkertaistettu työnkulku toimii.

2.1: Kuvioluokkien rekisteröinti

Esittelytarkoituksia varten loin TT2-lapsiteeman ja asensin sen paikalliselle testisivustolleni, jossa oli vähän tyhjää sisältöä. TT2:n jälkeen rekisteröidyin footer-with-background ja lisätty seuraaviin kuvioluokkien matriisiluetteloon block-patterns.php tiedosto.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

Tässä koodiesimerkissä jokainen malli, joka on lueteltu kohdassa $block_patterns = array() kutsuu foreach() toiminto, joka requires patterns hakemistotiedosto, jossa on listattu mallinimi taulukossa, jonka lisäämme seuraavassa vaiheessa.

2.2: Mallitiedoston lisääminen /inc/patterns kansio

Seuraavaksi meillä pitäisi olla kaikki luetellut mallitiedostot $block_patterns = array(). Tässä on esimerkki yhdestä mallitiedostosta, footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

Viitataan kuvioon footer.html mallin osa:

<!-- wp:template-part {"slug":"footer"} /-->

Tämä on samanlainen kuin otsikko- tai alatunnisteosien lisääminen mallitiedostoon.

Kuvioita voidaan samalla tavalla lisätä parts/footer.html mallia muokkaamalla sitä viittaamaan slug teeman mallitiedostosta (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Jos nyt käymme lohkoeditorin kuvioiden lisäysohjelmassa, Footer with background pitäisi olla käytettävissämme:

Seuraavassa kuvakaappauksessa näkyy äskettäin luotu alatunniste, jonka etuosassa on taustakuvio.

Nyt kun kuvioista on tullut olennainen osa lohkoteemaa, monet kuviot on niputettu lohkoteemoiksi - kuten Neliö, Taimen, Mayland, Eläintieteilijä, Geologi — edellä käsiteltyä työnkulkua noudattaen. Tässä on esimerkki Quadrat-teemasta /inc/patterns kansio a lohkokuvion rekisteröinti tiedostoon ja tiedostoluettelo jossa on sisältölähde ja vaadittu malliotsikko sisällä return array() toiminto.

Osa 2: Kuvioiden luominen ja lataaminen ilman rekisteröitymistä

Huomaa, että tämä ominaisuus vaatii WordPress 6.0:n tai Gutenberg-laajennuksen 13.0 tai uudemman asennuksen sivustollesi.

Tämä uusi WordPress 6.0 -ominaisuus mahdollistaa kuvioiden rekisteröinnin standarditiedostojen ja kansioiden kautta - /patterns, joka tuo samanlaisia ​​sopimuksia, kuten /parts, /templatesja /styles.

Prosessi, kuten kuvataan myös kohdassa tämä WP Tavern artikkeli sisältää seuraavat kolme vaihetta:

• kuviokansion luominen teeman juureen
• lisäämällä laajennustyylin malliotsikon
• mallin lähdesisältö

Tyypillinen mallin otsikkomerkintä, joka on otettu artikkelista, näkyy alla:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Kuten edellisessä osiossa kuvattiin, vain Title ja Slug kentät ovat pakollisia ja muut kentät ovat valinnaisia.

Viitaten esimerkkeihin äskettäin julkaistuista teemoista, tein kuvion rekisteröinnin uudelleen tämä TT2 Gopher Blocks demo teema, valmis edellinen artikkeli CSS-Tricksistä.

Seuraavissa vaiheissa tutkitaan, kuinka a footer-with-background.php kuvio rekisteröity PHP:llä ja käytetty a footer.html malli on refaktoroitu.

2.1: Luo a /patterns kansio teeman juuressa

Ensimmäinen askel on luoda a /patterns kansio TT2 Gopher -teeman juureen ja siirrä footer-with-background.php kuviotiedosto /patterns kansio ja refactor.

2.2: Lisää kuviotiedot tiedoston otsikkoon

Luo seuraavaksi seuraavat kuvion otsikon rekisteröintikentät.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

Mallitiedostossa on yläotsikkokenttä, joka on kirjoitettu PHP-kommentteina. Seuraaja lohko-sisältö kirjoitettu HTML-muodossa.

2.3: Lisää tiedostoon kuviosisältö

Kopioikaa sisältöosion koodinpätkät yksittäisiä lainauksia (esim, '...') sisältöosiosta footer-with-background ja vaihda <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

Koko koodinpätkä patterns/footer-with-background.php tiedostoa voi katsella täällä GitHubissa.

Huomaa, että /inc/patterns ja block-patterns.php olemme ote, ei vaadita WordPress 6.0:ssa ja sisältyy vain esittelytarkoituksiin.

2.4: Viitataan mallin kuvioihin

Yllä olevan refaktoroinnin lisääminen footer-with-background.php mallia footer.html malli on täsmälleen sama kuin edellisessä osiossa (osio 1, 2.2).

Jos nyt tarkastelemme sivuston alatunnisteosaa lohkoeditorissa tai sivustomme etuosaa selaimessa, alatunnisteosio tulee näkyviin.

Kuvioluokat ja -tyypit Rekisteröinti (valinnainen)

Lohkokuvioiden luokittelua varten kuvioluokat ja -tyypit tulee rekisteröidä teemaan functions.php tiedosto.

Tarkastellaan esimerkkiä lohkokuvioiden luokkien rekisteröinti TT2 Gopher -teemasta.

Rekisteröinnin jälkeen kuviot näytetään kuvion lisäysohjelmassa yhdessä ydinoletuskuvioiden kanssa. Jos haluat lisätä teemakohtaisia ​​luokkatunnisteita kuvioiden lisäyslaitteeseen, meidän tulee muokata aiempia katkelmia lisäämällä teeman nimiavaruus:

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

- footer-with-background kuvio näkyy sen esikatselussa lisätyissä kuvioissa (jos valittu):

Tämä prosessi yksinkertaistaa suuresti lohkokuvioiden luomista ja näyttämistä lohkoteemoissa. Se on saatavana WordPress 6.0:ssa ilman Gutenberg-laajennusta.

Esimerkkejä teemoista ilman kuvioiden rekisteröintiä

Varhaiset käyttäjät ovat jo alkaneet käyttää tätä ominaisuutta lohkoteemoissaan. Muutamia esimerkkejä teemoista, jotka ovat saatavilla osoitteessa teemahakemisto, jonka latauskuviot ilman rekisteröintiä on lueteltu alla:

• Archaeo – 12 mallia
• Riipus – 13 mallia
• Kaukosäädin – 11 mallia
• Skatepark – 10 mallia
• Stewart – 17 mallia
• kirja – 16 mallia
• Avantgarde- – 14 mallia

Osa 3: Kuvioiden luominen ja käyttäminen matalakoodilla

- virallinen mallihakemisto sisältää yhteisön toimittamia luovia suunnitelmia, joita voidaan kopioida ja muokata haluamallaan tavalla sisällön luomiseksi. Kuvioiden käyttäminen lohkoeditorilla ei ole koskaan ollut näin helpompaa!

Mitä tahansa kuvioita jatkuvasti kasvavasta hakemistosta voidaan myös lisätä estoteemoihin yksinkertaisesti "kopioi ja liitä" tai sisällyttää theme.json tiedosto viittaamalla niiden hakemistoon kuviollinen etana. Seuraavaksi käyn lyhyesti läpi, kuinka helposti tämä voidaan saavuttaa erittäin rajoitetulla koodauksella.

Kuvioiden lisääminen ja mukauttaminen kuviohakemistosta

3.1: Kopioi kuvio hakemistosta sivulle

Tässä minä käytän tämä alatunnisteen osiokuvio kirjoittanut FirstWebGeek mallihakemistosta. Kopioi kuvion valitsemalla "Kopioi kuvio" -painikkeen ja liitti sen suoraan uudelle sivulle.

3.2: Tee haluamasi mukautuksets

Tein vain muutaman muutoksen fonttien väriin ja painikkeiden taustaan. Sitten kopioitiin koko koodi tiedostosta koodinmuokkaaja leikepöydälle.

Jos koodieditorin käyttö ei ole sinulle tuttua, siirry vaihtoehtoihin (kolme pisteellä, oikeassa yläkulmassa), napsauta Koodieditori-painiketta ja kopioi koko koodi täältä.

3.3: Luo uusi tiedosto /patterns-kansioon

Ensin luodaan uusi /patterns/footer-pattern-test.php tiedosto ja lisää tarvittava kuvion otsikkoosio. Liitä sitten koko koodi (vaihe 3, yllä). Kuvio on luokiteltu alatunnistealueelle (rivit: 5), voimme tarkastella juuri lisättyä kuvion lisäyssovelluksessa.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Näytä uusi kuvio lisäyssovelluksessa

Nähdäksesi juuri lisätyt Footer pattern from patterns library kuvio, siirry mille tahansa viestille tai sivulle ja valitse lisäyskuvake (sininen plussymboli, vasemmassa yläkulmassa) ja valitse sitten "TT2 Gopher – Footer" -luokat. Uusi lisätty kuvio näkyy vasemmassa paneelissa yhdessä muiden alatunnistekuvioiden ja sen esikatselun kanssa oikealla (jos valittu):

Rekisteröi kuviot suoraan sisään theme.json tiedosto

WordPress 6.0:ssa on mahdollista rekisteröidä haluamasi kuviot kuviohakemistosta theme.json tiedosto seuraavalla syntaksilla. The 6.0:n kehittäjä huomauttaa, "kuviot-kenttä on joukko [kuviolliset etanat] kuviohakemistosta. Pattern etanat voidaan poimia [URL]:stä yksittäisessä kuvionäkymässä Pattern Directorysta."

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

Tämä lyhyt WordPress 6.0 sisältää video osoittaa, kuinka kuviot rekisteröidään /patterns kansio (klo 3:53) ja rekisteröi haluamasi kuviot kuvion ohjaajalta kohtaan a theme.json tiedosto (3:13).

Sitten rekisteröity kuvio on saatavilla kuvioiden lisäyshakukentässä, joka on sitten käytettävissä kuten teemapakettikirjasto.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

Tässä esimerkissä kuvion etana footer-section-design-with-3-column-description-social-media-contact-and-newsletter mistä aikaisempi esimerkki on rekisteröity kautta theme.json.

Sivun luomismalli

Osana "rakennus kuvioilla”-aloitteita, WordPress 6.0 tarjoaa mallimodaalivaihtoehdon Teeman tekijöille lisätä sivun asettelumalleja lohkoteemaan, jolloin sivuston käyttäjät voivat valita sivun asettelumalleja (esim. Tietoja-sivu, yhteystietosivu, tiimisivu jne.) sivua luodessaan. Seuraava esimerkki on otettu kehittäjän muistiinpano:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

Tämä ominaisuus on tällä hetkellä rajoitettu sivun viestityyppiin vain, ei vielä "Posts Post Type" -kohdassa.

- sivun luontimalli modaalinen voidaan myös poistaa kokonaan käytöstä poistamalla sisällön jälkeinen lohkotyyppi kaikista kuvioista. Esimerkkikoodiesimerkki löytyy täältä.

Voit seurata GitHubin keskustelua ja osallistua siihen alla olevassa resurssiosiossa olevista linkeistä.

Mallihakemiston käyttäminen sivun rakentamiseen

Hakemiston kuvioita voidaan käyttää myös halutun postauksen tai sivuasettelun luomiseen, kuten sivujen rakentajat. The GutenbergHub tiimi on luonut kokeellinen online-sivujen rakennussovellus käyttämällä kuvioita suoraan hakemistosta (esittelyvideo). Sitten sovelluksen koodit voidaan kopioida ja liittää sivustoon, mikä yksinkertaistaa huomattavasti monimutkaisen sivuasetteluprosessin rakentamista ilman koodausta.

In tämä lyhyt video, Jamie Marsland näyttää (1:30), kuinka sovelluksella voidaan luoda koko sivuasettelu, joka on samanlainen kuin sivunrakennustyökalu, käyttämällä hakemiston haluttuja sivuosia.

Käärimistä

Mallit antavat käyttäjille mahdollisuuden luoda uudelleen yleisesti käytetyn sisällön asettelun (esim. sankarisivu, kutsumus jne.) millä tahansa sivulla ja alentaa esteitä sisällön esittämiselle tyyleissä, mikä ei aiemmin ollut mahdollista ilman koodaustaitoja. Aivan kuten liitännäiset ja Teemat hakemistot, uusi kuviot hakemisto tarjoaa käyttäjille mahdollisuuden käyttää laajaa valikoimaa kuviohakemistosta valitsemiaan malleja sekä kirjoittaa ja näyttää sisältöä tyylillä.

Todellakin, lohkokuviot muuttavat kaiken ja tämä on varmasti a pelin vaihtaja ominaisuus WordPress-teemamaisemassa. Kun täysi potentiaali rakennus kuvioilla Pyrkimys tulee saataville, tämä muuttaa tapaa, jolla suunnittelemme lohkoteemoja ja luomme kaunista sisältöä jopa matalan koodin tietämyksellä. Monille luoville suunnittelijoille kuviohakemisto voi myös tarjota sopivan tavan esitellä omia muotojaan luovuus.

---

Esittelymateriaalit

WordPress 6.0

• WordPress 6.0 -kenttäopas (WordPress Core)
• WordPress 6.0:n tutkiminen: Tyylivariaatiot, lohkolukittava käyttöliittymä, kirjoitusparannukset – 22 min video (Anne McCarthy)
• WordPress 6.0 -ominaisuudet 4 minuutissa (Dave Smith)
• Mitä uutta WordPress 6.0:ssa: uudet lohkot, tyylin vaihto, mallien muokkaus, Webfonts API ja paljon muuta (Kinsta)

Kuvioiden luominen

• Johdatus lohkokuvioihin (Koko sivuston muokkaus)
• Johdatus Block Patterns -videoon, 14 minuuttia (Opi WordPress)
• Block kuviot (Block Editorin käsikirja)
• Haluatko siis tehdä lohkokuvioita? (WordPress-blogi)
• Kuinka luoda ja jakaa alhaisen koodin lohkokuvioita WordPressissä (Hyvä isä)

Kuvioiden parannus (GitHub)

• Rakennus kuvioilla #38529
• Kuviot leikkauselementteinä #39281
• Lisää: Mahdollisuus valita kuvio sivun luomisen yhteydessä. #40034
• Estä kuviot sivun luomista varten. #38787
• Lisää: Sivun aloitusvaihtoehdot (mallit ja kuviot) #39147

Blogiartikkeleita

• Gutenbergin mallit: Sivujen rakentamisen tulevaisuus WordPressissä (Rich Tabor)
• Block Patterns -toiminnon käyttäminen WordPress-sivustojen rakentamisen nopeuttamiseen (Hyvä isä)
• Lohkomallit muuttavat kaiken (WP Tavern)

---

Kuinka luoda lohkoteemamalleja WordPress 6.0:ssa alun perin julkaistu CSS-temppuja. Sinun pitäisi hanki uutiskirje.

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. VAPAA PÄÄSY.
• CryptoHawk. Altcoinin tutka. Ilmainen kokeilu.
• Lähde: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/