Noțiuni de bază pentru constructor: Cum să creați modele de bloc

În articolul Noțiunile de bază ale constructorului de luna trecută, am explorat modelele de bloc: ce sunt acestea și cum le puteți folosi. Am aflat că un model de bloc este pur și simplu o colecție predefinită de blocuri care formează un aspect specific. Am prezentat puterea modelelor și am discutat despre modul în care acestea sunt o piatră de temelie a dezvoltării moderne a temelor WordPress. Astăzi vom învăța cum să proiectăm, să distribuim și să înregistrăm propriile noastre modele!

Vă rugăm să rețineți că acest articol folosește tema Twenty Twenty-Two în toate exemplele sale. Această temă bazată pe blocuri a fost lansată împreună cu WordPress 5.9 și este o resursă fantastică, cu peste 60 de modele de bloc.

Design de model

Cea mai grea parte a creării unui model de bloc este să decizi cum ar trebui să arate. Să începem cu ceva relativ simplu: o grilă de articole, două rânduri de trei. Am putea folosi acest design pentru a prezenta diferite servicii comerciale sau caracteristici ale produsului.

Sfat rapid: modelele pot fi construite din orice bloc, inclusiv blocuri de la terți. Cu toate acestea, dacă intenționați să vă distribuiți modelele unui public larg, încercați să utilizați numai blocuri de bază WordPress - în acest fel, utilizatorul nu trebuie să instaleze pluginuri suplimentare pentru a vă folosi design-urile.

Pentru mine, designul modelului începe în Editor. În timp ce modelele pot fi codificate manual, este mult mai ușor să faci lucrurile vizual. Voi începe prin a adăuga un bloc Coloane cu trei coloane pentru primul rând al grilei. Apoi, adăugați blocuri Titlu, Paragraf și Butoane în fiecare coloană. Duplicați blocul Coloane pentru a crea al doilea rând de grilă. În cele din urmă, voi aplica câteva configurații de stil și voi împacheta ambele blocuri Coloane într-un bloc Grup cu o culoare de fundal. Rezultatul arată astfel:

Puteți vedea cele 33 de blocuri care alcătuiesc acest design în captura de ecran de mai sus!

Dacă vreau să creez o versiune alternativă „întunecată” a grilei, trebuie doar să dublez designul original și să modific stilul.

În timp ce ambele modele sunt relativ simple, crearea lor de la zero poate fi plictisitoare. A putea partaja și/sau salva aceste modele de bloc ar economisi mult timp.

Partajarea unui design

Partajarea unui model de design este ușor! Să presupunem că doriți să mutați designul într-o altă pagină de pe site-ul dvs. web sau poate într-un alt site web în întregime. Este la fel de simplu ca să copiați și să lipiți marcajul de bloc. Există mai multe moduri de a realiza acest lucru.

Dacă modelul este conținut într-un bloc „container”, cum ar fi un bloc Grup, Copertă sau Coloane, selectați containerul cel mai exterior și utilizați meniul de instrumente pentru a selecta „Copiere”. Marcajul bloc este copiat în clipboard și îl puteți lipi oriunde doriți.

O a doua opțiune este să utilizați Editorul de coduri, pe care îl puteți accesa din panoul Opțiuni.

Editorul de coduri oferă o reprezentare vizuală a tuturor marcajelor de bloc de pe pagina sau postarea curentă. Prefer această metodă pentru că este ușor să vezi exact ce cod este copiat.

Înregistrarea unui model

Copierea și lipirea blocurilor de marcare ar putea fi ușoară, dar deseori ne dorim o versiune mai permanentă a modelelor noastre. Pentru a face acest lucru, vom folosi API-ul Patterns pentru a „înregistra” un model de bloc personalizat. Acest lucru face ca designul nostru să fie disponibil atât în ​​Inserer, cât și în Pattern Explorer din WordPress.

Pentru a înregistra un model, folosim funcția PHP register_block_pattern(). Această funcție acceptă doi parametri, un titlu și o matrice de proprietăți. Înainte de a trece prin fiecare dintre ele, să ne uităm la un exemplu.

register_block_pattern(

„exemplu/funcție-grilă-lumină”,

matrice(

'title' => __( 'Feature Grid - Light', 'textdomain' ),

'description' => __( 'Afișați șase articole prezentate într-o grilă pe un fundal deschis.', 'textdomain' ),

'categories' => array( 'featured', 'colons'),

'keywords' => array('funcție', 'grid'),

'viewportWidth' => 1400,

'blockTypes' => array('core/columns'),

'content' => 'CONTINUT MODEL'

)

);

Aici înregistrăm modelul Feature Grid pe care l-am proiectat anterior. Titlul urmează o convenție de denumire a spațiului de nume/titlu. Când înregistrați mai multe modele în același proiect, este cea mai bună practică să păstrați consecvent spațiul de nume.

Doar titlul și parametrii de conținut din matricea de proprietăți sunt necesari din punct de vedere tehnic. Pentru concizie, conținutul modelului este exclus în exemplul de mai sus. Cu toate acestea, acesta este același cod pe care l-am copiat și lipit în secțiunea anterioară. Categoriile sunt setate folosind câmpul de categorii, iar un model poate avea mai multe. În Editor, modelele sunt organizate pe categorii. Pentru proprietățile rămase, o defalcare fantastică este furnizată în Manualul Editorului de blocuri.

Pentru a înregistra modelul Feature Grid cu fundal întunecat, doar duplicați codul de înregistrare și actualizați în consecință. În cele din urmă, împachetăm ambele funcții așa și plasăm totul în fișierul functions.php al temei noastre.

funcția my_pattern_library_register_block_patterns() {

register_block_pattern(

„exemplu/funcție-grilă-lumină”,

matrice(…)

);

register_block_pattern(

„exemplu/grilă-funcție-întunecată,

matrice(…)

);

}

add_action('init', 'example_register_block_patterns');

Codul complet este disponibil într-un Gist pe GitHub.

Odată ce codul este adăugat, modelele noastre nou înregistrate se vor afișa acum în Inserer și Pattern Explorer.

Înregistrarea unei categorii de model

Când lucrați cu modele personalizate, este adesea util să le plasați în categorii personalizate. WordPress simplifică cu register_block_pattern_category(). Această funcție este similară cu cea pe care am folosit-o pentru a înregistra modele. Tot ce trebuie să faceți este să furnizați un titlu de categorie și o serie de proprietăți. Începând cu WordPress 5.9, eticheta este singura proprietate acceptată, dar ne așteptăm la mai multe în viitor.

Următorul exemplu înregistrează categoria „Custom” cu titlul personalizat. Plasați acest cod în fișierul functions.php al temei dvs. alături de exemplele de înregistrare a modelului.

funcția example_register_block_pattern_categories() {

register_block_pattern_category(

'personalizat',

array( 'label' => __( 'Personalizat', 'textdomain' ) )

);

}

add_action('init', 'example_register_block_pattern_categories');

Categoriile de modele vor fi afișate în Editor numai dacă au modele asociate. Prin urmare, dacă adăugăm personalizate celor două modele de grilă de caracteristici pe care le-am înregistrat mai devreme, categoria „Personalizată” va apărea astfel:

Creați un plugin pentru bibliotecă de modele

În secțiunile anterioare, am înregistrat modele și o categorie de modele prin plasarea codului în fișierul functions.php al temei noastre. Deși funcționează, nu este ideal pe termen lung. Să presupunem că trebuie să ne actualizăm tema? Poate vrem să folosim modelele pe alt site web?

WordPress nu a furnizat încă o soluție nativă pentru gestionarea modelelor personalizate, așa că trebuie să căutăm soluții alternative. În plus, este adesea de preferat să aveți modele într-un format mai portabil.

Cea mai bună abordare pe care am găsit-o este să creez un plugin WordPress simplu pentru a stoca colecția mea de modele personalizate. Pluginurile oferă versatilitate maximă și sunt agnostice de temă. Vă voi arăta cum să vă creați propriul plugin de bibliotecă de modele în următorii pași.

Sfat rapid: Dacă doriți să săriți peste următorii pași, am pregătit un plugin complet „My Pattern Library” care ar trebui să ofere un punct de plecare excelent pentru propria dvs. bibliotecă. Codul este disponibil ca Gist pe GitHub.

Pasul 1: Se instalează

Înainte de a începe să construiți pluginul, veți avea nevoie de o versiune funcțională a WordPress și de un editor de text de o oarecare varietate. Recomand local pentru crearea de instalații locale WordPress și îl folosesc exclusiv de mulți ani. Folosesc Atom pentru editarea textului, dar există multe opțiuni grozave. Chiar și editorul de text de bază care vine cu sistemul dvs. de operare va funcționa.

Configurați un site WordPress local folosind Local sau o aplicație similară. Asigurați-vă că WordPress este actualizat la versiunea 5.9 sau mai mare. Modelele vor funcționa pe 5.5+, dar cel mai bine este întotdeauna să utilizați cea mai recentă versiune de WordPress ori de câte ori este posibil.

Pasul 2: Creați pluginul

Următorul lucru pe care trebuie să-l faceți este să creați „baza” pluginului. Dacă sunteți nou în dezvoltarea de pluginuri, nu vă temeți. Sună mai descurajantă decât este.

Navigați la directorul wp-content → pluginuri din instalația dvs. locală WordPress și creați un nou director intitulat my-pattern-library. Puteți denumi directorul orice doriți. Înlocuiți „bibliotecă-my-pattern” cu numele dvs. personalizat în toți pașii următori.

În noul director wp-content → plugins → my-pattern-library , creați un fișier PHP intitulat my-pattern-library.php. Deschideți fișierul în editorul de text și adăugați următorul comentariu pentru antetul pluginului în partea de sus a fișierului. Nu uitați de liderul <?php. Rețineți că am simplificat antetul pentru acest tutorial.

<?php

/**

* Nume plugin: Biblioteca mea de modele

* Descriere: O bibliotecă simplă de modele de bloc.

* Versiune: 0.1.0

* Necesită cel puțin: 5.8

* Necesită PHP: 7.0

* Autor: Numele tău

* Licență: GPL v2 sau o versiune ulterioară

* Domeniul text: my-pattern-library

*/

Simțiți-vă liber să modificați informațiile din antet după cum credeți de cuviință. Apoi salvați fișierul. Acum aveți un plugin WordPress complet funcțional. Confirmați că este vizibil pe pagina de pluginuri admin și faceți clic pe „Activați”. Ar trebui să arate așa.

Deși acum aveți un plugin funcțional, acesta nu face nimic. Să schimbăm asta.

Pasul 3: Înregistrați modele și categorii

În acest pas final, tot ce trebuie să faceți este să copiați codul de înregistrare a modelului și a categoriei de model de la începutul acestui articol în noul plugin. Am plasat anterior acest cod în fișierul functions.php al temei. Acum, lipiți-l sub comentariul antetului în fișierul my-pattern-library.php.

Salvați fișierul și apoi navigați la Editor în WordPress. Deschideți Inserer, faceți clic pe fila Patterns și alegeți categoria Personalizate. Ar trebui să vedeți cele două modele înregistrate de plugin.

Biblioteca dvs. de modele este acum operațională! Când este nevoie de noi modele sau categorii personalizate, pur și simplu adăugați-le la plugin. Un exemplu de cod complet este disponibil ca Gist pe GitHub.

Înainte de a încheia, este important să menționăm că acest exemplu este destinat uzului personal. Probabil că ați dori să includeți mai multe funcționalități dacă pluginul ar fi distribuit public. Îmi vine în minte localizarea. Acestea fiind spuse, acest tutorial demonstrează cât de ușor este să creezi un plugin simplu care stochează modele de blocuri personalizate.

Încheierea

În acest articol, ați învățat cum să proiectați, să partajați și să înregistrați modele de bloc. Ați învățat chiar și cum să creați un plugin WordPress simplu pentru a vă găzdui propria bibliotecă de modele. Cred cu tărie că modelele de bloc sunt parte integrantă a dezvoltării temelor moderne și sunt încântat să văd ce ne rezervă viitorul. Dacă nu ați început să explorați tipare, sper că acest articol vă va încuraja să faceți acest lucru. Learn WordPress este o resursă fantastică pentru învățare suplimentară și dacă aveți întrebări, vă rugăm să-mi spuneți în comentarii.