Cum să creați modele de blocuri WordPress pentru a accelera construirea site-ului web

Modelele de blocuri vor fi o mare problemă pentru toți utilizatorii WordPress și, în această postare, vă voi arăta exact cum să vă creați propriile modele de blocuri.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

Acum două zile, am apărut cu un videoclip și am prezentat acest concept care vine chiar după colțul WordPress numit modele de blog. Este un fel de experimental acum și este ceva de care sunt foarte încântat de asta. Și cred că dacă vă gândiți la potențialul a ceea ce sunt modelele de bloc, atunci puteți vedea potențialul, pentru a vă ajuta să livrați site-uri web mai rapid dacă aveți clienți, pentru a le permite să facă mai mult cu ei. site-ul web.

Așa că o să-ți arăt. Exact cum să creați un model de bloc în acest videoclip. Acum vom face unele lucruri care sunt puțin pe partea de techie, și știu că acesta este canalul WordPress pentru non-techies, așa că voi încerca să-l fac cât mai simplu posibil, dar tu ești vom vedea de fapt până la sfârșit cât de simplu este să creezi unul dintre aceste modele de bloc.

Deci hai să mergem mai departe și să aruncăm o privire. Deci, iată pagina în care se vorbește despre noua lansare a acestei caracteristici în realizarea acesteia. Capabil doar pentru oamenii obișnuiți să creeze un model de bloc. Deci, când derulez în jos, oferă tipul de șablon pentru el. Deci tot ceea ce este implicat este crearea a ceva numit funcție personalizată.

Dar nu vă faceți griji, voi face foarte ușor de făcut pentru toată lumea, dar aici este acel mic fragment de cod. Acum voi avea un link în descrierea video de mai jos. Te va duce pe site-ul meu. Veți primi instrucțiuni scrise despre cum să faceți acest lucru, precum și. Acest mic fragment de cod pe care îl puteți copia și lipi pe propriul site web.

Bine, iată de ce vom avea nevoie. Aceasta este o caracteristică nouă pentru Gutenberg și veți avea nevoie de pluginul Gutenberg instalat și activat, așa că veți avea nevoie de o versiune minimă de 7.8 și aceasta este ceea ce a apărut recent. Acum, ceea ce se va întâmpla este poate în patru până la șase luni, poate până la sfârșitul verii 2020 acest lucru va fi inclus în WordPress în mod implicit, dar deocamdată va trebui, dacă doriți să încercați acest lucru. , va trebui să instalați pluginul Gutenberg.

Următorul lucru pe care îl puteți face, și acesta este opțional, dacă nu știți cum să adăugați o funcție personalizată la o temă copil și nici măcar nu mai folosesc o temă copil, s-ar putea să doriți să utilizați acest plugin gratuit, și acesta este unul dintre cele mai bune pluginuri gratuite. Pe care l-am întâlnit vreodată și se numește fragmente de cod. Și acest lucru ne va permite să adăugăm această funcție personalizată și un mod foarte ușor de utilizat, ușor de gestionat.

Bine? Deci vei avea nevoie de asta. Și acest lucru este opțional. Acesta este un plugin gratuit numit blocuri de cadență. Și ceea ce face acest lucru este că adaugă o mulțime de funcționalități de generare de pagini la Gutenberg. Este destul de îngrijit în ceea ce îți permite să faci. Puteți trage și redimensiona coloanele. Există o mulțime de elemente care adaugă o mulțime de funcționalitate de generator de pagini, dar pentru Gutenberg și este un plugin complet gratuit.

Bine. Acum să trecem la site-ul meu. Deci iată un site web. Totul este pus la punct chiar acum. Și dacă nu știi cum să instalezi un plugin, cineva s-a supărat pe mine zilele trecute pentru că nu mi-a arătat cum să instalez un plugin și un videoclip. Te duci la pluginuri, dai clic pe add new, apoi chiar aici faci o căutare pentru numele acelui plugin, apoi dai clic.

Descărcați sau îmi pare rău, faceți clic pe instalați acum și apoi îl activați. Este un proces foarte simplu. Așa că voi face clic pe pluginurile mele instalate și puteți vedea că am instalat Gutenberg și acestea erau blocuri de cadență opționale, iar aici sunt fragmente de cod. Deci voi merge mai departe și voi activa fragmentele de cod și puteți vedea că acum este activat chiar aici.

Deci, mergeți mai departe și faceți clic pe fragmente de cod și veți vedea unele cu care vine. Și iată acest comutator și este comutat. Toate sunt dezactivate și de fapt nu trebuie să le păstrați pe acestea cu care vine în mod implicit. Puteți doar să faceți clic chiar aici și le puteți șterge pe toate, dar deja am continuat și am adăugat unul chiar aici numit șablon de model de bloc.

Deci ce ai face. Faceți clic pe adăugați nou și puteți denumi acest șablon de model de bloc în acel mic fragment de cod pe care v-am arătat, care este chiar aici, dar vă voi oferi o versiune modificată a acestuia pe site-ul meu. Veți doar să copiați și să lipiți asta chiar aici, apoi veți face clic pe salvarea modificărilor.

Nu veți face clic pe salvare și activare, veți face clic pe pentru a salva modificările și vă voi arăta de ce într-un moment. Bine. Deci acum ceea ce veți dori să faceți este să creați acest model de bloc. Și un model de bloc este pur și simplu o secțiune salvată. Deci, dacă utilizați un generator de pagini, acum știți că ați putea salva secțiuni și unele dintre ele vin cu secțiuni prestabilite, dar experiența utilizatorului, cred că este mult mai bună în Gutenberg.

Deci ceea ce vei dori să faci este să mergi la pagini. Și faceți clic pe adăugați nou și veți dori să îi denumiți. Hm, lasă-mă să scap de acest tur. Veți dori să denumiți acest model de bloc și tocmai aici vom crea acest model de bloc. Acum, nu voi trece prin crearea unui model de bloc chiar acum.

Îți voi arăta pe cea pe care am creat-o deja și este . Chiar aici. Deci, iată un model de bloc pe care l-am creat. Ai putea vedea că este această secțiune. Are acest fundal colorat. Am un titlu, câteva subtitluri și câteva butoane aici și am pus un videoclip. Așa că voi face din acesta modelul meu de bloc, astfel încât, doar cu două clicuri de mouse, să îl adaug oriunde pe site-ul meu.

Deci ceea ce voi face este să dau clic în dreapta sus, sunt aceste trei puncte. Sunt cam greu de văzut, iar când faceți clic pe asta, există această opțiune chiar aici care spune editor de cod. Deci, veți dori să faceți clic pe editorul de cod și apoi vă arată tot codul care este implicat în a face din acel blog un model de blog cu model bloc.

Bine? Deci, veți face clic aici și apoi veți face clic pe control a sau comanda a pe computer pentru a evidenția totul. Și sunt anul nou. Pune-l în clipboard. Așa că o voi face controlul C. așa că acum este în clipboard-ul meu. Așa că acum ceea ce voi face este să plec de aici. De fapt, dacă vrei să ieși din această vizualizare, există un mic X chiar aici care spune editor de cod de ieșire, iar acum îmi va arăta așa cum este în mod normal chiar aici.

Bine. Așa că ai putea salva asta ca schiță dacă vrei, dar nu vei avea nevoie de asta. Acesta este doar pentru a crea acest model de bloc și ai putea crea un model de bloc care este orice și nu trebuie să fie un bloc de lucruri. Ar putea fi un șablon întreg pentru o postare pe blog, de exemplu. Bine, deci acum voi face clic acolo unde este w care mă scoate din editorul de blocuri.

Acum voi reveni la fragmente de cod. Așa că chiar aici am creat șablonul de tip bloc. Voi face clic pe clonă, iar acum a fost creată o clonă a acesteia, apoi voi face clic pe titlu pentru a începe editarea acestuia. Deci, pentru titlu, voi schimba asta cu un titlu care are sens pentru a-l gestiona.

Deci, pentru mine, o să-i dau doar un nume. Un erou cu video. Așa că acum știu ce este asta când mă uit la listă în viitor. Bine, deci sunt câteva lucruri aici pe care va trebui să le editați. Trei lucruri. Este super simplu. Primul este numele. Deci, acesta poate fi orice nume va fi, trebuie să fie tot cu litere mici, fără spații sau caractere funky.

Așa că voi merge înainte și voi pune un nume chiar acum. Puteți vedea că l-am numit erou cu un videoclip. Apoi, chiar aici trebuie să puneți un titlu. Deci, înlocuim acest cuvânt titlu și acesta este ceea ce va apărea. Te uiți la o listă de modele de blog, bloc, nu modele de bloc de blog. Și dacă observi, poți, acesta este numele prietenos, deci poate avea spații.

Nu aș pune niciun personaj funky acolo doar. Spațiile e bine. Așa că asta va apărea în această listă a și în următoarea, chiar aici, unde scrie modelul a. Veți doar să lipiți ceea ce tocmai ați copiat în clipboard. Acum vreau să ții cont de un lucru. Pentru fiecare dintre acestea. Am lăsat micul apostrof pe față și pe spate.

Vedeți că există apostroful care trebuie să fie acolo. Dacă îl scoateți din greșeală, puneți-l înapoi. Bine. Doar ne schimbăm. Înlocuim substituentul textului. Deci, pentru aici, nu vreau să înlocuiesc totul. Vreau doar să înlocuiesc modelul de cuvinte, așa că îl voi evidenția și apoi voi lipi ceea ce am copiat.

Și iată-l. Așa că acum voi derula în jos și de data aceasta voi face clic pe salvare modificări și activare. Și acum ar trebui să spună fragment actualizat și activat. Și când dau clic pe toate fragmentele, ați putea vedea acum că acest erou cu videoclip este activat. Deci, în viitor, pentru modele de bloc suplimentare, vreau să merg acolo unde scrie șablon de model de bloc și dați clic pe clonare și să fac acel șablon de model de bloc în acest fel.

Așa am întotdeauna șablonul acolo. Acum, dacă știți deja și aveți propriul mod de a adăuga funcții personalizate, nu aveți nevoie de fragmente de cod și, și toate aceste lucruri, le puteți pune acolo unde doriți. Acesta este doar un mod mult mai ușor de a o gestiona dacă mă întrebați pe mine. Bine, deci acum voi merge la pagini cu clic pe adăugare nou, iar dacă doriți să vedeți.

Modele de bloc. Uh, chiar aici este pictograma pentru asta. Și când treci cu mouse-ul peste el, scrie modele de bloc. Și când dau clic pe el, vezi câteva dintre modelele de bloc cu care sunt experimentate chiar acum. Dar când derulați în jos, veți vedea acel model de bloc pe care l-am creat. Și ceea ce este cu adevărat frumos este că generează o previzualizare în miniatură.

Și face acest lucru dinamic. Ai instrumente de creare a paginilor care nici măcar nu fac asta. Uh, și face mult mai ușor să gestionați tiparele de blocare. Deci, și puteți vedea chiar aici, scrie erou cu șablon. Acum, dacă vreau să folosesc asta oriunde pe site-ul meu, este un clic de mouse. Și apoi iată-l. Și tot ce ar trebui să fac în acel moment pentru a începe să schimb unele texte, să schimb linkurile către butoane.

Pot da clic chiar aici și pot schimba videoclipul. Asa de. Așa creezi un model de bloc. Acum, aceasta este o mare problemă, cred că pentru că ceea ce se va întâmpla este o temă. Dezvoltatorii și creatorii de pluginuri, vor putea crea aceste modele de bloc pentru dvs., așa că va fi mult mai rapid, mai rapid și mai ușor să construiți un site web folosind instrumentul nativ de creare a blocurilor pe care WordPress îl include deja.

Nu există nimic de cumpărat, nu există coduri umflate. Nu există niciunul dintre aceste lucruri și. Ceea ce duce și mai departe. Puteți vedea cât de ușor vă este să vă creați propriile modele de bloc și este foarte ușor să le vedeți într-o listă. Faceți clic pe un buton și acesta va fi pus acolo. Așa că acum vă puteți gândi cât de ușor poate fi să construiți un site web atunci când aveți propria bibliotecă de modele de bloc.

Deci, dacă creați site-uri web pentru clienți și nu doriți să utilizați un generator de pagini. Vrei doar să folosești generatorul de blocuri încorporat. Vă puteți crea propria bibliotecă de modele. Ai văzut cât de ușor este. O pot face. Ai putea să o faci. Ați putea să vă creați propria bibliotecă de modele de bloc pe care să le mutați de la un site la altul și să-i arătați clientului cum poate construi acest lucru.

Acum, acest lucru nu este doar pentru pagini, este pentru postări și nu se limitează doar la acea secțiune pe care ați văzut-o. Practic, orice puteți crea pe o pagină. Puteți face un model de bloc. Deci, dacă utilizați generatorul de blocuri doar pentru postările de blog și există anumite elemente pe care doriți să le utilizați din nou și din nou într-o postare de blog pentru a îmbunătăți aspectul postărilor de blog, ei bine, puteți crea un model de bloc pentru aceasta.

Și este chiar ușor. Un clic și îl poți folosi. De fapt, toate șabloanele de postare pe blog. Deci, dacă există o formulă pe care o urmați pentru secțiunile unei postări de blog, puteți face ca întreaga postare de blog să fie un șablon de bloc. Se aplică acel clic și apoi tot ce trebuie să faceți este să indicați, să faceți clic și să editați.

Deci, ultimul lucru înainte de a încheia aici, acesta este un concept nou și este ceva la care să ne gândim în următoarele câteva luni. Experimentează cu acum. Nu este chiar Yeti, Yeti. Nu este deloc pregătit pentru prime time pentru că dacă ai observat, um, singurul negativ pe care l-am văzut este când te uiți pe blog. Vezi acolo merg din nou.

Dacă te uiți la tiparele blocurilor, este doar o listă de articole mai înaltă în care trebuie să defilezi, așa că trebuie să îmbunătățească procesul de clasificare și organizare. Poate că au un fel de interfață pentru a-l face mai vizual și mai ușor de lucrat. Dacă veți avea 50 de blocuri diferite.

Modele. Deci trebuie doar să îmbunătățească asta. Și o parte din sintaxa codului s-ar putea schimba puțin. Cine știe când iese în sfârșit asta. Dar scopul acestui videoclip este doar să vă arate ce va fi posibil foarte, foarte curând, astfel încât să puteți începe. Gândindu-vă cum se poate aplica fluxului dvs. de lucru și ce faceți ca creator de site-uri web.

Oricum, asta este tot ce am pentru tine în această postare. Sper că veți aprecia astfel de priviri avansate asupra viitorului WordPress și, dacă ați apreciat acest videoclip sau ați găsit ceva valoare, luați în considerare să-i dați cu degetul mare și să distribuiți acest videoclip, astfel încât oamenii să poată vedea ce se întâmplă după colț.