Tutorial WordPress Gutenberg despre cum să creați un site web personalizat

Acesta este un tutorial WordPress Gutenberg scris de dezvoltatori web care au o experiență semnificativă în crearea de site-uri web WordPress folosind noul său editor de blocuri.

În acest ghid, vă vom arăta cum să creați un site web complex care va include șabloane de conținut, arhive și o căutare personalizată. Vom folosi editorul de blocuri WordPress cunoscut sub numele de Gutenberg și Toolset Blocks pentru a construi site-ul web.

De ce Gutenberg este acum o modalitate excelentă de a construi site-uri web

Gutenberg a fost lansat de aproape un an și este suficient de matur încât este acum o modalitate excelentă și de încredere de a crea site-ul web exact pe care l-ați planificat.

Gutenberg folosește blocuri pentru a vă construi paginile. Blocurile sunt elemente care conțin diferite tipuri de conținut, astfel încât să vă puteți crea machete.

Editorul de blocuri este încă în evoluție, dar este deja incredibil de intuitiv și flexibil. Nu trebuie să fii un expert în codificare pentru a crea conținut. În plus, atunci când îl combinați cu pluginuri precum Toolset Blocks, puteți crea cu ușurință site-uri web complexe care arată grozav.

Gutenberg este, de asemenea, mult mai ușor de utilizat pe mobil decât predecesorul său. Având în vedere cantitatea tot mai mare de muncă pe care o facem pe telefoanele noastre mobile, este un pas important în direcția corectă.

Cele mai bune tipuri de teme de folosit cu Gutenberg

Există o mulțime de teme premium WordPress care sunt compatibile cu Gutenberg Block Editor și acceptă și alte plugin-uri premium.

Puteți căuta rapid prin cele mai bune teme verificând lista noastră de teme WordPress care sunt compatibile cu Gutenberg.

Cel mai bun plugin pentru blocuri de folosit cu Gutenberg

De la lansarea Gutenberg în urmă cu mai bine de un an, au fost lansate o serie de plugin-uri excelente care completează noul editor WordPress.

Pentru tutorialul nostru WordPress Gutenberg, vom folosi Toolset Blocks împreună cu Gutenberg pentru a construi site-ul nostru WordPress. Toolset Blocks oferă o serie de avantaje care vor face mai ușor atât pentru programatori, cât și pentru cei care nu au coduri să își proiecteze și să implementeze rapid site-urile web:

• Fluxul dvs. de lucru va fi mult mai simplu . Acum nu este nevoie să vă proiectați paginile și apoi să le implementați. Puteți să le construiți pur și simplu pe WordPress și să vedeți instantaneu cum vor arăta.
• Nu este nevoie să comutați între back-end și front-end . În schimb, puteți să vă proiectați pur și simplu șabloanele pe back-end și să vedeți instantaneu cum vor arăta.
• Non-dezvoltatorii își pot construi site-urile web de vis . Nu mai trebuie să fii un expert în codificare pentru a crea site-ul pe care l-ai dorit. Cu blocuri puteți adăuga cu ușurință elemente complexe fără html sau css.
• Petreceți mai puțin timp citind documentația . Natura simplă și intuitivă a Toolset Blocks înseamnă că nu trebuie să citiți grămezi de documentație pentru a înțelege cum să construiți anumite elemente. Multe dintre blocuri descriu ceea ce poți realiza și pot fi folosite și experimentate cu ușurință.
• Nicio integrare ulterioară cu niciun plugin terță parte . Cu editorul WordPress clasic, ar fi trebuit să instalați un generator de pagini și pluginuri compatibile suplimentare. Acest lucru ar putea umfla site-ul dvs., încetinindu-l semnificativ. De asemenea, vă bazați pe terțe părți care își actualizează pluginurile și le păstrează în siguranță. Toolset Blocks este integrat cu Gutenberg și WordPress, așa că nu va cauza aceleași probleme.
• Urmați același flux de lucru ca și nucleul WordPress . Nu trebuie să vă faceți griji cu privire la schimbarea modului în care lucrați cu noul editor WordPress.

Tutorial WordPress Gutenberg despre cum să construiți un site web personalizat folosind blocuri

Acum putem începe să construim site-ul nostru personalizat. De exemplu, vom crea un site web demonstrativ pe care îl puteți folosi pentru a căuta cea mai bună sală de sport sau antrenor personal din zona dumneavoastră.

Iată ce vom acoperi în acest tutorial WordPress Gutenberg:

• Adăugarea, editarea, mutarea și ștergerea blocurilor
• Afișați conținutul unul lângă altul
• Navigarea prin blocurile tale
• Afișarea câmpurilor în design-ul editorului de blocuri
• Afișarea unei galerii de imagini
• Blocuri Set de instrumente de stil în editor
• Controale tipografice
• Crearea unui șablon
• Construirea paginilor dvs. de arhivă
• Crearea de liste personalizate de conținut
• Adăugarea unei căutări personalizate

Să începem!

Adăugarea, editarea, mutarea și ștergerea blocurilor

În primul rând, să trecem prin elementele de bază despre cum să creați și să eliminați blocurile. Blocurile sunt o modalitate complet nouă de a construi site-uri web, dar ar trebui să dureze doar câteva minute pentru a vă obișnui cu ele.

1. Pe o pagină sau postare, faceți clic pe butonul +.
2. Căutați și faceți clic pe blocul pe care doriți să îl utilizați pentru a-l insera.

3. Introduceți informațiile de conținut pentru bloc. De exemplu, aici am adăugat blocul „Tit” și vom insera un titlu pentru acesta.
4. În stânga fiecărui bloc, veți vedea un set de comenzi pe care le puteți utiliza pentru a vă muta blocurile.

5. Utilizați bara laterală din dreapta pentru a modifica opțiunile pentru blocul pe care l-ați selectat. De exemplu, puteți schimba culoarea fontului, dimensiunea imaginii sau alinierea textului.
6. Dacă faceți clic pe opțiunea cu trei puncte, puteți vedea opțiuni suplimentare, cum ar fi Eliminarea blocului

Cum să vă afișați conținutul unul lângă altul

Puteți afișa cu ușurință conținutul unul lângă celălalt pe pagina dvs. folosind blocul de coloane.

1. Selectați butonul +.
2. Căutați blocul Coloane și introduceți-l.

3. Acum puteți vedea două coloane la care puteți adăuga blocuri în mod normal.

4. Măriți numărul de coloane selectând blocul de coloane și comutând numărul de pe bara din dreapta.

Navigarea prin blocurile tale

Pe măsură ce vă construiți site-ul, unele dintre modelele și șabloanele dvs. vor avea o mulțime de blocuri. Una dintre cele mai ușoare modalități de a-l selecta pe cel pe care doriți să îl editați este folosind butonul de navigare în bloc din partea de sus a editorului și selectarea blocului cu care doriți să lucrați.

Afișarea câmpurilor în designul editorului de blocuri

Puteți afișa informații din câmpurile postării (titlul, corpul etc.) sau din câmpurile personalizate pe care le-ați putea crea folosind Blocuri de instrumente.

Există trei moduri prin care puteți să vă afișați câmpurile pe care le vom evidenția mai jos ca parte a tutorialului WordPress Gutenberg:

1. Setați conținutul blocului să provină din valorile câmpului

Fiecare bloc din biblioteca Toolset Blocks vă permite să-și setați conținutul din câmpuri. De exemplu, puteți seta orice text de titlu să provină dintr-un câmp de postare sau dintr-un câmp personalizat Set de instrumente.

Să vedem mai jos cum funcționează adăugând text de titlu dintr-un câmp de postare la blocul Heading Set de instrumente pentru antrenorii noștri personali.

1. Creați un nou șablon de conținut și alegeți tipul de postare personalizat pe care doriți să îl afișați.
2. Selectați butonul +.
3. Adăugați blocul Heading Set de instrumente .

4. Activați Textul de titlu dinamic.

5. Selectați câmpul de postare pe care doriți să-l afișați. Mai jos am selectat Titlul postării .

Acum veți putea vedea titlul corect pentru fiecare dintre postările legate de un anumit tip de postare personalizată.

2. Afișați câmpurile ca blocuri individuale

Puteți afișa orice câmp de postare sau câmp personalizat individual creat folosind Toolset ca bloc. De exemplu, mai jos adăugăm conținutul postării principale la șablonul nostru pentru sălile noastre de sport.

1. Selectați blocul Câmp unic .
2. În bara din dreapta, sub Field Type , selectați câmpul Standard .
3. Sub Câmp de postare , selectați opțiunea Postare conținut (corp) .

Descrierea fiecărei săli de sport va apărea acum în postările respective.

3. Combinați câmpurile cu text într-un singur bloc

S-ar putea să fie nevoie să adăugați un amestec de câmpuri și texte la desenele dvs. De exemplu, poate fi necesar să adăugați etichete lângă câmpurile personalizate.

1. Selectați blocul Câmpuri și text .

2. Introduceți eticheta pe care doriți să o adăugați. De exemplu, am adăugat „Evaluare” deoarece vreau să afișez rezultatele pentru câmpul personalizat Evaluare care arată scorul pentru fiecare sală din 5.

3. Selectați din pictograme ce tip de conținut doriți să adăugați. Puteți adăuga un câmp, un formular sau o ieșire condiționată. În cazul nostru, dorim să adăugăm un câmp.

4. Selectați conținutul pe care doriți să îl adăugați (în cazul meu este câmpul Evaluare ) și faceți clic pe Insert Shortcode .

Afișează o galerie de imagini

De asemenea, puteți adăuga mai multe imagini la postările dvs. folosind blocuri.

1. Selectați câmpul Repetare/blocul Galerie .

2. Selectați grupul de câmpuri personalizate pe care doriți să-l afișați.
3. Alegeți câmpul personalizat pe care doriți să îl afișați.

Stilează-ți blocurile în editor

Când creați site-ul web pe care l-ați avut în vedere, va trebui să vă stilați blocurile. De exemplu, este posibil să doriți să schimbați fontul, culorile, fundalul sau marginile blocurilor dvs.

Există două moduri prin care vă puteți modela blocurile:

1. Stilizarea articolelor folosind interfața

1. Selectați blocul pe care doriți să îl stilați. De exemplu, am selectat blocul Evaluări pe care l-am adăugat mai devreme.
2. Extindeți secțiunea Setări stil din bara laterală.
3. Aici vă puteți ajusta culoarea de fundal, umplutura, chenarul și multe altele.

Desigur, fiecare bloc va oferi diferite opțiuni de stil. De exemplu, blocul de imagine va conține o serie de caracteristici suplimentare de personalizare, cum ar fi capacitatea de a regla poziția imaginii, estomparea sau cât de mult se rotește.

2. Folosind blocul Container

Blocul Container este un bloc pe care îl puteți găsi exclusiv numai cu blocuri de set de instrumente. Utilizați Blocul Container pentru a grupa anumite blocuri împreună și anumite stiluri pentru fiecare dintre ele, care vor fi afișate pentru fiecare dintre postări.

De exemplu, am adăugat un Bloc Container pentru a afișa toate informațiile relevante pentru un antrenor personal împreună într-o secțiune uniformă, inclusiv imaginea, titlul, evaluarea și multe altele. Acum pot stila Blocul Container astfel încât fiecare dintre postările mele de antrenor personal să afișeze aceleași stiluri.

Încă o dată, pot face acest lucru folosind bara laterală din partea dreaptă.

Controale tipografice

Cu Toolset Blocks, puteți stila și formata cu ușurință textul folosind secțiunea Tipografie.

Iată o listă cu ceea ce puteți ajusta:

• Tip de font - alegeți dintr-o selecție mare de fonturi
• Dimensiunea fontului, înălțimea liniilor și spațierea dintre litere
• Stilul fontului
• Transformare text – scriere cu majuscule, majuscule, minuscule
• Culoarea textului
• Umbra textului

Cum să creați șabloane pentru a afișa postări personalizate

Una dintre cele mai importante caracteristici pe care va trebui să le creați pentru un site web personalizat este șablonul. Când creați un șablon, înseamnă că toate postările pentru același tip de postare personalizată vor avea același aspect și design.

De exemplu, putem proiecta un șablon pentru fiecare dintre sălile de sport pe care dorim să le afișam ca parte a tipului nostru de postare personalizată „Gyms”.

1. Accesați Toolset->Dashboard și faceți clic pe opțiunea Creare șablon de conținut pentru tipul de postare pentru care doriți să creați un șablon.

2. Așa cum am făcut înainte, puteți începe să adăugați câmpuri la șablon. Mai jos am adăugat o serie de blocuri diferite, inclusiv blocul Titlu, Imagine și Câmp unic, care conțin toate câmpuri.

3. După ce salvați și publicați șablonul, fiecare dintre postările dvs. pentru acel tip de postare personalizat va afișa același aspect și stil.

Construirea paginilor dvs. de arhivă

Arhivele sunt lista de conținut pentru fiecare tip de postare personalizată pe care WordPress o generează pentru tine. Puteți folosi Toolset Blocks și Gutenberg pentru a personaliza modul în care arată fiecare dintre paginile dvs. de arhivă.

Mai jos, ca parte a tutorialului WordPress Gutenberg, am creat o arhivă pentru tipul meu personalizat de postare „Gyms”.

1. Accesați Toolset->Dashboard și faceți clic pe opțiunea Creare arhivă de lângă tipul de postare pentru care doriți să creați o arhivă.

2. În Editorul de blocuri puteți adăuga acum diferitele elemente pe care doriți să le afișați pentru fiecare dintre postările dvs. De exemplu, puteți afișa toate câmpurile dvs. standard și personalizate (cum ar fi Evaluările, Adresa și Titlurile postărilor pe care le-am creat pentru tipurile mele de postări personalizate „Salle de sport”) folosind Blocuri de instrumente.

3. Pentru a modifica numărul de coloane faceți clic pe opțiunea Block Navigation și selectați bucla de arhivă WordPress .
4. În Loop Style puteți ajusta numărul de coloane.

5. De asemenea, puteți face o serie de modificări la setările implicite pentru arhive, cum ar fi paginarea, ordonarea și multe altele în blocul Arhivă WordPress.

6. De asemenea, puteți adăuga texte personalizate și alte blocuri înainte sau după bucla principală de arhivă, care vă va afișa postările. Pur și simplu faceți clic pe pictograma + înainte sau după buclă pentru a adăuga blocurile sau textul.

Afișează liste personalizate de conținut

Puteți folosi Toolset Blocks și Gutenberg pentru a afișa oricare dintre postările dvs. sub formă de listă, în orice ordine doriți. De asemenea, puteți proiecta lista în orice mod doriți, cum ar fi o grilă, HTML simplu, un tabel sau în orice alt mod. În Toolset, acest tip de listă se numește View.

Această listă poate fi apoi adăugată la orice pagină. De exemplu, mai jos am adăugat o listă de săli de sport recomandate pe pagina de pornire.

1. Faceți clic pe butonul + de pe pagina la care doriți să adăugați vizualizarea.
2. Adăugați blocul Vizualizări și denumiți-l.
3. Selectați conținutul pe care doriți să îl afișați vizualizarea dvs. De exemplu, vreau să-mi afișez sălile de sport.

4. Adăugați blocurile pe care doriți să le afișați ca parte a Vizualizării dvs.
5. Puteți edita ordinea, conținutul afișat și multe altele când faceți clic pe Blocare navigare , selectați Vizualizare și utilizați bara laterală.

6. Sub View Loop puteți modifica un număr de setări pentru întreaga vizualizare, inclusiv numărul de coloane.

Adăugați o căutare personalizată

Puteți adăuga la vizualizarea dvs. propria căutare, ceea ce va permite utilizatorilor să restrângă conținutul de care sunt interesați pe front-end. De exemplu, puteți crea o căutare pentru utilizatorii dvs. pentru a găsi cea mai bună sală de sport care este cea mai apropiată de ei.

1. Introduceți blocul Vizualizare în pagina dvs.
2. Activați opțiunea Căutare în expertul de creare a vizualizării.

3. Apoi puteți adăuga câmpuri de căutare, butoane de căutare și multe altele în zona de editare Vizualizări.

4. Puteți utiliza bara laterală din dreapta pentru a modifica opțiunile pentru acest câmp de căutare. Aceasta include setările principale ale câmpului și opțiunile de etichetă și stil.

Iată cum arată căutarea noastră personalizată pentru cea mai bună sală de sport pe front-end.

Începeți azi să vă construiți site-ul personalizat!

Acum că știți elementele de bază după ce ați citit acest tutorial WordPress Gutenberg, puteți începe cu proiectarea și construirea propriului site web personalizat. Puteți descărca WordPress și Toolset Blocks astăzi pentru a vedea cât de ușor vă este să vă creați propriul site web.

Dacă aveți gânduri sau întrebări, vă rugăm să ne spuneți în comentariile de mai jos!