Creați șabloane de bloc Gutenberg pentru o experiență mai bună
Publicat: 2019-05-02
WordPress 5.x este cea mai recentă versiune a celui mai popular CMS din lume. O caracteristică interesantă a noii versiuni este Editorul Gutenberg, care este pregătit să revoluționeze modul în care WordPresserii creează conținut pe platformă. Cel puțin asta este versiunea oficială!
Indiferent de ceea ce simțiți despre editorul Gutenberg, este important să vă dați seama că acest editor nu va dispărea în următoarele versiuni WordPress. Motivul este simplu: editorul „clasic” WordPress a început să-și arate vârsta. În plus, noua generație de utilizatori care sunt familiarizați cu editorii disponibili pe alte platforme similare, sunt mai confortabili cu editorul de stil Gutenberg decât editorul clasic.
Personalizarea blocurilor Gutenberg
Editorul Gutenberg se bazează pe ideea de „blocuri”, componente discrete care pot fi utilizate după bunul plac pentru a adăuga funcționalitatea dorită conținutului. Prin intermediul acestor blocuri Gutenberg, utilizatorul poate adăuga secțiuni reglabile și gestionabile independent, care adaugă valoare cititorilor.
Deoarece personalizarea se află în centrul WordPress, editorul Gutenberg acceptă șabloane de blocuri personalizate care îi ajută pe utilizatori să adauge blocuri personalizate la CMS-ul lor.
Există două modalități de a crea șabloane de blocuri Gutenberg personalizate. Rețineți că ambele metode necesită cunoștințe de dezvoltare WordPress.
Înregistrați blocurile Gutenberg
Prima metodă implică crearea de șabloane de blocuri personalizate care pot fi utilizate pentru a construi blocuri pre-populate. Pentru aceasta, adăugați următorul cod în fișierul functions.php
add_action ('init', function () {
$ args = array (
'public' => adevărat,
'label' => 'Știri',
'show_in_rest' => adevărat,
'template_lock' => 'toate',
'template' => matrice (
matrice ('nucleu / paragraf', matrice (
'placeholder' => 'Știri de ultimă oră',
)),
matrice ('nucleu / imagine', matrice (
'align' => 'dreapta',
)),
),
);
register_post_type ('știri', $ args);
});
Iată cum ar arăta în acțiune acest șablon personalizat pentru blocul Gutenberg:
În fragmentul de cod de mai sus, parametrul matricei „nucleu / paragraf” este responsabil pentru conținutul blocului. În mod similar, parametrul matricei „nucleu / imagine” vă permite să încărcați imagini în trei moduri: Încărcare directă, Selectarea din biblioteca media și Încorporarea utilizând o adresă URL.
Parametrul „show_in_rest” indică nucleului WordPress că acest bloc personalizat ar trebui să poată fi preluat prin intermediul API-ului WordPress REST.
Argumentul „template_lock”, când este setat la „all”, împiedică adăugarea (sau eliminarea) blocurilor personalizate la șablon.
Când vine vorba de adăugarea unui bloc personalizat la acest șablon, utilizați sub-matricea „șablon”. De exemplu, luați în considerare următorul fragment:
'template' => matrice (
matrice ('nucleu / titlu', matrice ('level' => '4', 'content' => 'Titlu')),
matrice („nucleu / paragraf”),
)
Creați un plugin Gutenberg
Când lucrați cu șabloane personalizate și șabloane Gutenberg, cea mai bună practică este să creați un plugin personalizat pentru pluginul Gutenberg Editor personalizat.
La fel ca toate pluginurile, acest plugin va fi localizat în directorul wp-content / plugins care conține foldere separate pentru toate pluginurile instalate pe site.
Pentru a crea pluginul, accesați directorul wp-content / plugins și creați un folder nou. Numele folderului ar trebui să fie numele pluginului șablon Gutenberg personalizat. În scopul acestui tutorial, am numit pluginul meu „Gutenberg Blocks”. Astfel, numele dosarului ar fi „ Gutenberg-Blocks ”.
În acest folder, creați un fișier numit Gutenberg-blocks.php și următorul cod:
/ **
* Nume plugin: Gutenberg Blocks
* Autor: Muhammad Owais Alam
* Descriere: acest plugin permite utilizatorilor să adauge un șablon personalizat WordPress Gutenberg pentru editorul Gutenberg
* Versiune: 1.0.0
* /
add_action ('init', function () {
$ args = array (
'public' => adevărat,
'label' => 'Știri',
'show_in_rest' => adevărat,
'template_lock' => 'toate',
'template' => matrice (
matrice ('nucleu / paragraf', matrice (
'placeholder' => 'Știri de ultimă oră',
)),
matrice ('nucleu / imagine', matrice (
'align' => 'dreapta',
)),
),
);
register_post_type ('știri', $ args);
});
Rețineți că acest cod este destinat doar ca ghid și puteți modifica detaliile pentru a se potrivi cerințelor dvs. Când este instalat, acest plugin va apărea în lista de pluginuri disponibile.
Exemplu de temă WordPress Gutenberg - Gutenberry
Noul editor fără distrageri, Gutenberg, face parte din nucleul WordPress de aproape un an. Cu toate acestea, a fost destul de greu să găsești o temă Gutenberg realizată și bine gândită pe web până când Gutenberry a ieșit.
Gutenberry este în prezent una dintre cele mai bune teme 100% pregătite pentru Gutenberg. Această temă curată și minimă a fost creată în Gutenberg, oferindu-vă o ușurință de editare fără precedent și o viteză exemplară. De exemplu, Google Speed evaluează Gutenberry A 97.
Această temă de vârf vine, de asemenea, cu 5 modele de acasă, toate create pentru bloguri moderne, cu integrare media bogată. Mai mult, Gutenberry vă oferă o mulțime de machete de blog și postări, mai mult de 10 widget-uri, forme de lucru și o puternică integrare în rețelele sociale.
Iată caracteristicile notabile ale temei Gutenberg:
- Instalator de date eșantion
- Suport pe tot parcursul vieții 24/7
- Cod sursă optimizat
- Gata pentru MailChimp
- Complet receptiv
- Aspecte alternative ale modulelor
- 3 machete dinamice de blog
Încheiem!
Personalizarea șabloanelor Gutenberg este o modalitate excelentă de a personaliza editorul Gutenberg pentru a face față cerințelor personalizate. La fel ca în orice WordPress, procesul de creare a șablonului Gutenberg personalizat este o simplă chestiune de a adăuga cod inline sau de a configura un plugin personalizat.