Doriți să creați un WordPress plug-in blocul Gutenberg simplu?
Nu ne place cu toții WordPress? Platforma a cunoscut un succes masiv încă de la înființare, dezvoltatorii adăugând constant noi funcții. Una dintre caracteristicile remarcabile din ultima vreme este WordPress Block Editor, nume de cod Gutenberg.
Gutenberg oferă utilizatorilor WordPress o nouă modalitate interesantă de a publica conținut și de a-și personaliza site-ul web. Este incredibil de ușor de utilizat, ceea ce este o veste excelentă atât pentru începători, cât și pentru dezvoltatori. Dacă utilizați cea mai recentă versiune de WordPress, sunteți deja familiarizat cu editorul de blocuri și conceptul de blocuri.
În mod implicit, editorul de blocuri WordPress vine cu câteva blocuri care vă permit să includeți text, imagini, citate, audio, video, încorporare etc. În plus, există o mulțime de suplimente Gutenberg care vă permit să extindeți editorul fără a fi întrerupt. o sudoare.
Cu toate acestea, este posibil să aveți o nevoie specifică care vă solicită să vă creați propriile blocuri personalizate. În acest articol, vă vom arăta în câteva paragrafe cum să creați blocuri Gutenberg personalizate pentru a vă satisface nevoile specifice.
Fără alte prelungiri, să începem pentru că sunt multe de învățat.
Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs.
Apoi înapoi la motivul pentru care suntem aici.
Ce sunt blocurile, oricum?
Blocurile tratează paragrafele, titlurile, media și încorporațiile ca componente care, atunci când sunt înșirate împreună, alcătuiesc conținutul stocat în baza de date WordPress, înlocuind conceptul tradițional de text cu media și coduri scurte încorporate.
În trecut, utilizatorii WordPress se bazau pe text și coduri scurte pentru a adăuga conținut. Gutenberg folosește blocuri. Noul editor vă permite să utilizați unități de bloc pentru a crea machete bogate și flexibile, care sunt ușor de gestionat. În prezent, puteți utiliza editorul de blocuri pentru postări și pagini, dar există planuri active de luat acceptă editarea completă a site-ului în viitor.
Lucrul cu blocuri face crearea de conținut în WordPress destul de revigorantă. În plus, multe plugin-uri existente acceptă noul editor și vin cu blocuri gata de utilizare care facilitează adăugarea conținutului din pluginurile menționate. Editorul vă permite să glisați și să plasați blocuri pe o pagină, astfel încât să puteți apăsa mai repede butonul de publicare.
La fel ca un generator de pagini integrat direct în WordPress.
Dacă sunteți familiarizat cu constructori de pagini, cum ar fi Elementor, probabil că sunteți familiarizat cu conceptul de creare a paginii prin glisare și plasare. Gutenberg este o încercare de a integra complet construirea site-ului web drag-and-drop în nucleul WordPress.
Deci, să ajungem la cea mai bună parte a articolului de astăzi. Să învățăm cum să creăm un bloc simplu. Puteți face acest lucru manual sau folosind plugin-uri precum Blocuri personalizate Genesis (fost BlockLab), Blocuri leneșe ou ACF. Crearea blocurilor personalizate este puțin tehnică, așa că, în scopul articolului de astăzi, vom folosi un plugin.
Cum să creați un bloc personalizat (folosind genesis Custom Blocks)
Este mai ușor să mergeți pe calea pluginului, deoarece crearea blocurilor Gutenberg personalizate de la zero necesită o bună înțelegere a HTML, CSS, PHP și, cel mai important, a javaScript. De asemenea, va trebui să înțelegeți React.
Pentru următoarea secțiune, vom folosi Genesis Custom Blocks. Versiunea sa gratuită este disponibilă în depozitul oficial WordPress, ceea ce înseamnă că o putem instala în tabloul de bord de administrare WordPress.
Instalați Genesis Custom Blocks
Conectați-vă la tabloul de bord WordPress și navigați la Extensii> Adăugare, așa cum se arată mai jos.
Apoi introduceți „ Blocuri personalizate Genesis în caseta de căutare prin cuvinte cheie și clic pe buton instalați acum
Dupa aceea, activa pluginul pentru a începe
Apoi, să creăm un nou bloc personalizat. În scopuri ilustrative, să creăm un îndemn personalizat (CTA) pe care îl vom adăuga la sfârșitul fiecărui articol pe care îl publicăm. Cea mai bună parte este că puteți reutiliza blocurile pentru a vă salva de la crearea acelorași blocuri din nou și din nou.
În meniul dvs. de administrare WordPress, navigați la Blocuri personalizate > Adăugați nou, după cum subliniem mai jos.
Acest lucru vă va duce la următoarea pagină unde veți găsi toate opțiunile pentru a crea un bloc personalizat (în cazul nostru, un CTA):
Iată câteva cuvinte pentru a explica ceea ce vedeți în captura de ecran de mai sus. Începând de sus, îl ai.
Zona principală de editare:
- Constructor – Probabil că veți petrece mult timp aici proiectând blocul personalizat. cel Constructor vă permite să adăugați titlu, câmpuri, slug, cuvinte cheie, categorie și previzualizați blocul personalizat. Veți învăța cum să adăugați câmpuri.
- Editor de șabloane – După ce ați proiectat blocul personalizat (adică adăugați diverse câmpuri), va trebui să creați un șablon de bloc (citiți, adăugați cod) în editorul de modele. Vom afla mai multe când vom proiecta CTA.
- Previzualizare editor – Vă permite să previzualizați blocul personalizat în editorul de blocuri WordPress.
- Previzualizare front-end – Aici puteți previzualiza cum va arăta blocul personalizat pe site-ul dvs. web.
- EditorField – Va afișa câmpuri în zona de editare principală a unei postări sau a unei pagini (știi, așa cum vezi postările tale obișnuite în editorul WordPress)
- InspectorField – Afișează câmpul în bara laterală din dreapta sub Inspectorul bloc.
Opțiuni pentru bara laterală
- Stăvili – Se completează automat în funcție de titlul pe care îl dați blocului personalizat. Acest lucru este important la crearea modelului bloc.
- Icoană – Această opțiune vă permite să adăugați o pictogramă la blocul personalizat.
- Categorii – Vă permite să atribuiți o categorie blocului dvs. personalizat. Puteți clasifica blocul personalizat folosind una dintre categoriile încorporate sau puteți crea o categorie complet nouă.
- Cuvinte cheie – Adăugați maximum trei cuvinte cheie asociate blocului dvs. personalizat, astfel încât oamenii să-l găsească cu ușurință în selectorul de blocuri.
- Deschideți câmpurile bloc într-un mod modal în loc să le redați în loc – Activați dacă doriți să deschideți câmpuri într-un mod modal. Acest lucru este util dacă aveți un bloc personalizat cu multe câmpuri.
- Tipuri de postare – Bifați casetele pentru a permite afișarea blocului personalizat pe fiecare tip de postare. De exemplu, dacă debifați Postări, blocarea nu va apărea pe nicio postare.
Creați un bloc personalizat
Acum că aveți o mai bună înțelegere a interfeței cu utilizatorul și a ceea ce face fiecare parte, să trecem la lucru.
In Constructor - Constructor -, dați blocului dvs. personalizat un titlu adecvat. Vom alege CTA pentru acesta, așa cum se arată mai jos.
Înainte de a adăuga câmpuri noi, să adăugăm o pictogramă, cuvinte cheie și să alegem o categorie pentru blocul personalizat, așa cum se arată mai jos.
La asta, să adăugăm câteva câmpuri la blocul nostru personalizat. Pentru exemplul nostru de bloc CTA, vom adăuga doar trei câmpuri în următoarea ordine: o imagine, ceva text și un câmp de fișier care le permite oamenilor să descarce o carte electronică.
Citiți și: Pluginurile 5 WooCommerce pentru a vă edita produsele în bloc
Adăugarea câmpurilor blocate
În secțiunea Câmpuri editorFaceți clic pe pictograma Plus (+). pentru a adăuga primul câmp, așa cum se arată mai jos.
Apoi, să adăugăm un câmp de imagine. În bara laterală, setați Tip câmp activat Imagine și setați celelalte opțiuni. De asemenea, luați în considerare slug-ul așa cum îl vom folosi la crearea modelului bloc.
După aceea, adăugați câmpurile text și fișier în același mod.
Schimba cu Editor de șabloane > Markup.
Aici vom proiecta cum va arăta blocul nostru personalizat pe site-ul dvs. Editorul de modele acceptă HTML, CSS și slug-uri de câmp (pe care trebuie să le plasați între 2 paranteze drepte). Dacă trebuie să utilizați limbajul PHP, puteți crea șablonul folosind Metoda de modelare PHP
Nu vă faceți griji, este ușor.
Dans editorul de modele, sub fila de marcare, adăugați următorul cod:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Pe măsură ce scrieți codul, veți observa asta editorul de modele Completați automat melci de câmp (de exemplu, {{image-field}}) pentru dvs.
Apoi mergeți la secțiune CSS pentru a adăuga stiluri simple cu următorul cod:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
Puteți personaliza aceste stiluri după cum doriți,
Faceți clic pe publica :
Pentru a vedea noul bloc personalizat în acțiune, reveniți la tabloul de bord WordPress și creați o postare așa cum o faceți de obicei, faceți clic pe Mai multe (+) pentru a adăuga un bloc nou și pentru a alege noul bloc personalizat, așa cum evidențiem mai jos.
Apoi, completați blocul personalizat după cum doriți și postați mesajul:
Acum, dacă verificăm noul nostru bloc CTA personalizat pe front-end, asta este ceea ce vedem.
CTA-ul nostru personalizat este chiar acolo! Vă rugăm să nu vă faceți griji cu privire la capacitățile noastre de proiectare – desigur, într-un scenariu din viața reală, veți petrece ceva mai mult timp personalizându-vă blocul. Dar sperăm că ai învățat ceva aici.
Alte resurse recomandate
De asemenea, vă invităm să consultați Resurse de mai jos pentru a prelua mai multă proprietate și control asupra site-ului și blogului dvs.
- 10 pluginuri WordPress afiliate pentru a crea un program
- Cum să adăugați mai multe coloane în WordPress
- Cum să adăugați mai multe coloane în WordPress
- Folosind diferite medii WordPress
- Elementor: Cum se creează o animație la hover
Concluzie
Construirea blocurilor personalizate nu este o sarcină ușoară. Dar cu WordPress plugin-uri precum Genesis Custom Blocks și Lazy Blocks, printre altele, indiferent dacă ești sau nu începător, vei reuși să le creezi. De la cel mai elementar la cel mai complex, în funcție de nevoile tale.
Asta este pentru acest articol care vă arată cum să adăugați fonturi personalizate la un site web WordPress. Vă invităm să încercați. Dacă aveți nelămuriri sau sugestii, vă rugăm să ne anunțați comentarii.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
În același timp, împărtășește acest articol pe diferitele rețele de socializare.
...
