Cum să creați șabloane Gutenberg

Unul dintre avantajele construirii de pagini și postări cu Gutenberg Blocks este capacitatea de a le salva ca șabloane. Crearea șabloanelor pentru Gutenberg este o modalitate excelentă de a ajuta la accelerarea procesului de publicare. Există mai multe moduri de a le crea. În acest articol, vom vedea cum să creați șabloane Gutenberg.

Vom acoperi trei metode de creare a acestora:

1. Crearea unui aspect pe care să-l adăugați în biblioteca dvs. Gutenberg pentru a-l exporta sau clona.
2. Crearea unui aspect pentru copiere și lipire atunci când doriți să-l utilizați.
3. Crearea unui aspect de adăugat ca aspect implicit pentru pagini, postări sau tipuri de postări personalizate.

Aceste metode ne permit să refolosim numai blocurile. Nu vor fi incluse alte setări.

De ce să creați șabloane Gutenberg

După ce ați proiectat aspectul paginii sau al postării, puteți salva lista blocurilor cu atributele lor pentru a le reutiliza. Acest lucru vă oferă un început avansat în crearea conținutului dvs., deoarece nu trebuie să vă concentrați pe aspect. Șabloanele de blocuri vă permit să aveți un design consistent.

Șablonul de bloc poate avea conținut de substituent. Ele pot fi statice sau dinamice. Puteți defini starea implicită a unei sesiuni de editor. Puteți chiar să importați sau să exportați șabloanele dvs. ca fișiere JSON, astfel încât să puteți reutiliza design-urile dvs. pe mai multe site-uri web sau să le partajați cu alții. Le puteți bloca astfel încât utilizatorii să poată adăuga conținut, dar nu să schimbe blocurile.

Metoda 1: Creați un șablon de aspect

Șabloanele de aspect vă permit să utilizați funcția de selectare multiplă care a fost adăugată inițial pentru a ne permite să mutăm sau să ștergem mai multe blocuri în același timp.

Putem selecta și adăuga un bloc odată sau mai multe blocuri odată la biblioteca noastră de blocuri reutilizabile globale. Acest lucru face ușor să le exportați ca fișiere JSON.

Exemplu de șablon de aspect

Am creat un aspect simplu pe care îl pot folosi ca postare pe blog, recenzie de produs etc. Este ușor să salvați acest lucru în bibliotecă pentru a-l reutiliza.

Plasați cursorul pe primul bloc pe care doriți să îl includeți și trageți mouse-ul pe ultimul bloc pentru a le evidenția.

Deasupra primului bloc, veți vedea trei puncte în stânga. Faceți clic pe puncte și selectați Adăugați la blocuri reutilizabile .

Bara verde de mesaje din partea de sus va arăta că blocul a fost creat. Dați aspectului un nume care are sens pentru dvs. și selectați Salvare .

Mesajul din bara verde va arăta că blocul a fost actualizat. Ați creat aspectul!

Pentru a-l utiliza, creați o pagină sau o postare nouă și deschideți opțiunile (trei puncte). Sub Instrumente , selectați Gestionați toate blocurile reutilizabile .

Aceasta afișează o listă cu toate blocurile dvs. Aici puteți exporta și importa blocurile dvs. ca fișiere JSON. Blocurile refolosibile sunt globale. Dacă editați, atunci veți edita originalul. Pentru a păstra originalul și a crea o postare nouă utilizând aspectul, va trebui să îl exportați, să îl redenumiți și să importați aspectul.

Postări duplicate

Din fericire, avem o altă opțiune. Un plugin numit Duplicate Post adaugă o caracteristică de clonare pentru blocurile Gutenberg.

În setările Duplicate Posts , activați Blocks .

Acum am o opțiune de clonare în biblioteca Blocks. Clonați aspectul dorit și apoi editați. Fiecare aspect este global, deci va trebui să clonați și să editați de fiecare dată când doriți să utilizați aspectul.

Metoda 2: o modalitate alternativă ușoară de a crea un șablon Gutenberg

Această metodă este doar o simplă înșelătorie, dar funcționează. Mai întâi, creați un aspect pe care doriți să îl refolosiți completat cu orice conținut substituent.

Apoi, comutați la editorul de cod. Pentru a face acest lucru, selectați cele trei puncte din colțul din dreapta sus. Sub Editor , selectați Editor de cod .

Evidențiați și copiați codul.

Lipiți codul într-un editor de text și salvați-l pentru reutilizare.

Când sunteți gata să utilizați șablonul, pur și simplu creați o postare nouă, comutați la editorul de cod și lipiți codul.

Acum am o nouă postare la care pot începe să adaug conținut.

Metoda 3: Creați un tip de postare personalizată

Un șablon de bloc este un argument. Puteți adăuga argumentul la pagini și postări sau puteți crea un nou tip de postare. Aspectul va fi legat de acel tip de postare, astfel încât atunci când creați acel tip de postare, aspectul este afișat în mod implicit.

Acest lucru este minunat pentru crearea de machete pentru diferite tipuri de articole. De exemplu, ați putea avea un tip de post de recenzie a produsului, un tip de post de rezumat al vacanței, un tip de postare de rețetă etc., iar atunci când încărcați tipul de postare, acesta vă oferă automat aspectul asociat acestuia.

Crearea șablonului include:

• Setarea dinamică a stării implicite.
• Înregistrarea acestuia ca aspect implicit pentru un anumit tip de postare.

Declararea șablonului

Șablonul în sine va fi declarat ca o matrice de tipuri de blocuri. Acest lucru se face în JavaScript sau în PHP. Așa cum arată manualul dezvoltatorului Gutenberg, ar arăta astfel:

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

Sau asta:

'template' => array(

array( 'block/name' ),

),

Înregistrarea șablonului în tipuri de postări personalizate

Tipul de postare personalizat poate, de asemenea, să înregistreze șablonul. Ar putea arăta astfel:

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

Matricea identifică de unde provine blocul și numele blocului. În acest exemplu, matricea folosește „nucleu / paragraf”. Acest lucru înseamnă că blocul provine din nucleul WordPress (spre deosebire de un plugin) și numele său este paragraful (identificând ce bloc să utilizați).

Înregistrarea șablonului în pagini și postări

Dacă adăugați șablonul la pagini sau postări, acesta se va încărca automat de fiecare dată când creați o pagină sau o postare. Prefer să le adaug la anumite tipuri de postări personalizate, deoarece aveți mai multă libertate creativă și simplifică procesul de creare a conținutului, facilitând găsirea șabloanelor.

Dacă decideți să le adăugați la pagini sau postări, puteți utiliza acest cod:

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

Șabloane de cuibărire

Puteți chiar să cuibăriți șabloane în blocuri de containere (de exemplu, blocuri de coloane). Acest lucru se face prin atribuirea unui șablon imbricat blocului în sine. De exemplu:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

Blocarea șablonului

Puteți bloca șablonul folosind acest cod:

'template_lock' => 'all', // or 'insert' to allow moving

Exemplu de șablon cu un tip de postare personalizată

Vreau să creez tipul de postare personalizat numit Cărți pe care l-am văzut mai sus. Acesta va afișa șablonul de aspect și va include o imagine, un antet și un paragraf.

Codul va fi lipit în fișierul functions.php. Utilizați întotdeauna o temă copil atunci când adăugați cod la fișierele PHP. Dacă nu, codul va fi suprascris când actualizați tema.

Va trebui să scrieți codul manual (vă recomand să folosiți exemplele de cod pe care le-am arătat). O opțiune este să creați aspectul dorit și apoi să vizualizați codul (faceți clic pe cele trei puncte din colțul din dreapta sus și selectați Editor de cod în secțiunea Editor ). Aceasta va afișa blocurile cu atributele lor din aspectul pe care l-ați făcut deja, astfel încât să puteți ști din timp cum să aranjați blocurile în codul dvs.

Accesați Funcțiile temei (functions.php) și lipiți codul. Am lipit codul chiar în partea de jos. Acesta este un site de testare și nu intenționez să păstrez codul, așa că nu am folosit o temă pentru copii.

Un nou tip de postare este adăugat la meniul tabloului de bord numit Cărți. Include o listă și un link Adăugare nouă . Am făcut clic pe Adăugare nouă și noul meu șablon este adăugat la editor, unde pot începe pur și simplu să adaug conținut.

Blocurile sunt plasate în ordinea în care apar în cod și includ atributele care le-au fost atribuite. Puteți plasa cât mai multe blocuri în cod și doriți să le dați orice atribute doriți. Puteți crea câte tipuri de postări personalizate doriți și fiecare poate avea un aspect implicit unic. Acest exemplu include text substituent.

Gânduri de sfârșit

Acesta este aspectul nostru de a crea șabloane Gutenberg. Toate cele trei metode funcționează excelent. Șabloanele reutilizabile sau una dintre metodele de duplicare ar putea fi o alegere mai bună dacă nu doriți să creați noi tipuri de postări personalizate. Îmi plac tipurile de postări personalizate, deoarece facilitează alegerea tipului de conținut pe care doriți să îl creați, iar șabloanele sunt pre-sortate pentru dvs.

Tipurile de postări personalizate sunt ușor de realizat dacă vă simțiți bine cu codul și sunt cele mai convenabile de utilizat în WordPress. Principalul dezavantaj în crearea de șabloane pentru a le adăuga la funcțiile dvs. php este că creați aspectul în cod mai degrabă decât în ​​editorul Gutenberg, deci nu este vizual.

Îmi place că puteți adăuga conținut prefabricat în șabloane. Acest lucru este excelent pentru textul substituent pentru a le arăta contribuitorilor ce informații merg unde. Șabloanele reutilizabile sunt o modalitate excelentă de a accelera și de a eficientiza procesul de flux de lucru și sunt o modalitate excelentă de a crea pagini și postări de distribuire.

Vrem sa auzim de la tine. Ați creat șabloane Gutenberg? Spuneți-ne despre experiența dvs. în comentariile de mai jos.

Imagine prezentată prin Nadia Snopek / shutterstock.com