Tutorial WordPress Gutenberg pentru dezvoltatori – Proiectați un site web complet

Aici vă prezentăm tutorialul nostru despre WordPress Gutenberg pentru dezvoltatori. După ce au introdus cea mai revoluționară actualizare, majoritatea dezvoltatorilor WordPress se luptă cu ea. Înțelegem că constructorii de site-uri web îi ajută foarte mult pentru a proiecta site-uri web superbe pentru clienții lor.

Cu toate acestea, uneori, constructorii fac ca încărcarea site-urilor web să fie lentă, iar în actualizările recente de la Google, site-urile cu viteză de încărcare mai mică scad drastic. Pe de altă parte, cu simplitatea lui Gutenberg, acum puteți construi orice site web folosindu-l care se încarcă mult mai repede.

Johannes Gensfleisch zur Laden zum Gutenberg a fost un aurar, inventator, tipografi german, așteaptă! Nu vorbim despre Gutenberg umanul; vorbim despre Gutenberg, minunatul editor de blocuri din platforma WordPress.

Acesta este cel mai recent editor bloc al platformei WordPress care a luat cu asalt experiența de construire a site-ului web. Cu Gutenberg, este mai ușor ca niciodată să editați și să personalizați un site web.

Cu Gutenberg, puteți crea și un site web de la zero. Și nu trebuie să cunoașteți codificarea pentru a lucra în Gutenberg. Gutenberg vine cu funcții super ușoare care vă vor ajuta să dezvoltați un site web chiar dacă sunteți începător.

Cu toate acestea, dacă cunoașteți procesul detaliat despre cum să construiți un site web cu editorul de blocuri Gutenberg WordPress, atunci întreaga experiență va deveni mai ușoară pentru dvs. Cu acest gând, vom scrie un tutorial detaliat WordPress Gutenberg pentru dezvoltatori.

Înainte de a intra în detalii despre cum puteți utiliza Gutenberg pentru a crea un site web, am dori să discutăm mai multe despre beneficiile lui Gutenberg. Va arunca lumină asupra semnificației lui Gutenberg și asupra modului în care poate fi cu adevărat util pentru dezvoltatori.

De ce să folosiți Gutenberg pentru a crea un site web?

În cele ce urmează, vom discuta de ce este important să folosiți Gutenberg pentru a crea un site web. Vom indica beneficiile pe care le va obține un dezvoltator utilizând Gutenberg.

Personalizare ușoară

Cu Gutenberg, personalizarea site-ului web se face foarte ușor. Gutenberg vine cu multe funcții ușor de navigat care vă vor ajuta să vă personalizați site-ul cu ușurință. Imaginați-vă că nu aveți nevoie să scrieți o singură linie de cod și totusi ajungeți să aveți un site web stelar. Acest lucru poate fi posibil cu ajutorul lui Gutenberg.

Pluginuri puternice

Gutenberg vine cu multe plugin-uri puternice. Aceste pluginuri fac întreaga experiență Gutenberg mai ușor de navigat. Aceste plugin-uri au caracteristici diferite care pot fi foarte esențiale atunci când proiectați un site web de la sol. Prin integrarea pluginurilor adecvate, veți putea crea cu ușurință un site web uimitor. De exemplu, în acest articol, vom arăta cum un instrument precum Toolset Blocks poate fi utilizat combinat cu Gutenberg și vom crea un site web de calitate.

Flux de lucru simplu

Cu Gutenberg, întregul flux de lucru va fi foarte fluid. Editorul este conceput pentru a face lucrurile mai ușoare pentru toată lumea. Cu diferitele caracteristici și opțiuni suplimentare din pluginuri, veți avea un flux de lucru foarte simplu și structurat.

Prietenos pentru non-dezvoltatori

Cu Gutenberg, și cei care nu sunt dezvoltatori pot obține beneficii. Procesul general al editorului permite non-dezvoltatorilor să intre în design web. Cu multe funcții și blocuri, chiar dacă nu știi cum să codificați, puteți totuși să veniți cu un site web de bună calitate.

Compatibilitate WordPress

Compatibilitatea lui Gutenberg cu WordPress este foarte proeminentă. Fluxul de lucru general al instrumentului este destul de similar și cu WordPress. Asemănarea în fluxul de lucru cu WordPress l-a făcut pe Gutenberg imediat popular. Atât de mult încât mulți dezvoltatori de teme au început să creeze teme care sunt compatibile numai cu Gutenberg. În ceea ce privește gestionarea generală cu WordPress, Gutenberg a devenit unul dintre editorii de referință pentru persoanele care folosesc WordPress.

Acestea sunt motivele pentru care Gutenberg crește în popularitate ca editor puternic în comunitatea WordPress. În cele ce urmează, vom analiza diferitele elemente și domenii ale lui Gutenberg și vă vom ghida despre cum puteți crea un site web folosind editorul Gutenberg.

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

Pentru a demonstra practic cum să construiți un site web personalizat cu Gutenberg, vom dezvolta un site web demonstrativ pentru a vă face ușor de înțeles. Întreaga experiență de învățare va acoperi următoarele subiecte.

• Cum să folosiți Gutenberg pentru a adăuga, edita, muta și șterge blocuri în WordPress?
• Cum să afișați conținut unul lângă altul folosind Gutenberg?
• Tutorial Gutenberg WordPress despre navigarea prin diferite blocuri.
• Afișează câmpurile în editorul de blocuri cu Gutenberg WordPress.
• Tutorial Gutenberg pentru dezvoltatori despre cum să afișați o galerie de imagini.
• Tutorial Gutenberg WordPress pentru blocuri de stil cu Gutenberg WordPress.
• Cum să controlezi tipografia folosind Gutenberg WordPress?
• Tutoriale WordPress Gutenberg pentru dezvoltatori despre crearea unui șablon.
• Tutorial Gutenberg WordPress despre adăugarea căutării personalizate.

Învățând aceste elemente detaliate, îți va fi mai ușor să înțelegi cum să construiești un site web cu Gutenberg WordPress.

Cum să utilizați Gutenberg pentru a adăuga, edita, muta și șterge blocuri în WordPress?

Î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.

Blocurile de construcție ale lui Gutenberg sunt literalmente blocuri! Deci, prima învățare este despre cum să utilizați Gutenberg pentru a adăuga, edita, muta și șterge blocuri în WordPress. Pentru a face acest lucru, va trebui să faceți următoarele:

• Pe o pagină sau postare, faceți clic pe butonul „+”.
• Căutați blocul pe care doriți să îl introduceți și faceți clic pe el pentru a începe.

• Odată ce ați adăugat blocul dorit, puteți introduce conținutul blocului. De exemplu, putem adăuga un titlu la blog și vom oferi un titlu pentru acest bloc.
• Dacă te uiți la stânga oricărui bloc, vei observa un set de mânere care controlează poziția blogului. Puteți utiliza aceste seturi de comenzi pentru a vă deplasa în jurul blocului conform cerințelor dvs.

• Din bara laterală din partea dreaptă a dvs., puteți modifica blocul conform cerințelor dvs. Din acest editor, puteți modifica culoarea, dimensiunea imaginii și alinierea textului blocului pe care l-ați selectat.
• Făcând clic pe opțiunea cu trei puncte, puteți obține opțiuni suplimentare pentru bloc.

Cum să afișați conținut alăturat folosind Gutenberg?

Dacă proiectați un site web, este posibil să doriți să afișați conținutul unul lângă altul. Puteți face asta cu ușurință cu editorul de blocuri Gutenberg. Pentru a afișa conținutul unul lângă altul pe pagina web, vă recomandăm să utilizați blocul de coloane din Gutenberg. Pentru a face asta, va trebui să faceți următoarele.

• Faceți clic pe butonul + și căutați blocurile de coloane.
• Când îl găsiți, faceți clic pe bloc, iar coloanele vor apărea pe pagină.

• După introducerea blocului, veți putea vedea blocurile care pot fi editate cu conținutul unul lângă altul.
• Dacă doriți să creșteți numărul de coloane, puteți face acest lucru cu ușurință selectând blocul de coloane și ajustând numărul din bara laterală din dreapta.
  

Tutorial WordPress Gutenberg despre navigarea prin diferite blocuri

Dacă lucrați la un anumit bloc și doriți să intrați într-un alt bloc pentru personalizare, puteți face acest lucru cu ușurință cu butonul Navigare bloc din partea de sus a editorului. Când lucrați cu un șablon detaliat și navigați între diferite blocuri, puteți utiliza meniul de navigare pentru a naviga prin alte blocuri.

Afișați câmpurile în Editorul de blocuri cu Gutenberg WordPress

În timp ce lucrați la diferitele blocuri, puteți adăuga informații suplimentare la diferitele câmpuri ale blocului. De exemplu, puteți adăuga informații din câmpurile postării, cum ar fi titlul, corpul și așa mai departe. De asemenea, puteți include câmpuri din diferite blocuri pe care le-ați creat deja.

În general, există trei modalități majore de afișare a câmpurilor; vom detalia acest lucru în cele ce urmează.

Aduceți conținut din valoarea câmpului blocului

Fiecare bloc aparținând bibliotecii Toolset Blocks vă oferă libertatea de a seta conținutul din câmpuri. Puteți furniza orice text de titlu de preluat dintr-un câmp de postare sau puteți utiliza câmpul personalizat Set de instrumente. Pentru a face acest lucru, va trebui să urmați pașii de mai jos:

• Creați un nou șablon de conținut.
• Alegeți tipul de postare personalizat pe care veți prefera să fie afișat.
• Selectați butonul „+”.
• Adăugați blocul Heading Set de instrumente

• Activați caseta Text pentru titlu dinamic

• Alegeți câmpul de postare pe care ați prefera să fie afișat. În exemplul dat am selectat Post Title.

De acum înainte, veți avea posibilitatea de a vedea și corecta titlul tuturor postărilor legate de o anumită categorie de postări personalizate.

Afișați câmpurile ca blocuri individuale

Cu următorii pași, veți putea afișa câmpurile și ca blocuri individuale. Pentru a face acest lucru, va trebui să urmați pașii simpli menționați mai jos:

• Selectați blocul de câmp unic
• Din bara din partea dreaptă situată sub Tipul câmpului, selectați opțiunea Câmp standard.
• De sub opțiunea Post Field, selectați opțiunea Post Content (Body).

Descrierea aferentă va fi acum vizibilă sub fiecare dintre câmpuri.

Creați un amestec între câmpuri cu text într-un singur bloc

Dacă doriți să creați o combinație de câmpuri și text pe pagina web, puteți face acest lucru și cu Gutenberg WordPress. Vă rugăm să urmați pașii menționați mai jos.

• Faceți clic pe butonul „+”.
• Selectați Câmpuri și Bloc text

• Scrieți eticheta pe care doriți să o includeți.
• De asemenea, puteți selecta din pictograme ce tip de conținut preferați să adăugați. De exemplu, puteți adăuga un câmp, un formular sau chiar o ieșire condiționată. În exemplul dat, am adăugat un câmp.
• Apoi continuați să selectați conținutul pe care preferați să-l adăugați și apoi faceți clic pe Insert Shortcode.

Tutorial WordPress Gutenberg pentru dezvoltatori despre cum să afișați o galerie de imagini

Dacă doriți să creați o galerie de imagini folosind WordPress Gutenberg, puteți face asta cu ușurință. Pentru a face acest lucru, urmați acești pași:

• Din opțiunea blocuri, selectați blocul Câmp repetat/galerie.
• După selectarea blocului, puteți stabili ce grup de câmpuri personalizate veți prefera să afișați.
• Apoi puteți alege câmpul personalizat care doriți să fie afișat.

După ce faceți acest lucru, veți putea adăuga cu ușurință o galerie de imagini pe pagina dvs. web.

Tutorial WordPress Gutenberg pentru blocuri de stil cu WordPress Gutenberg

Stilizarea și personalizarea blocurilor dvs. sunt o parte integrantă a designului web. Cu Gutenberg WordPress, puteți face stilul blocurilor foarte ușor cu Gutenberg. Urmând ghidul pe care îl vom elabora, puteți schimba fontul, culoarea, fundalul și marginile blogului dvs.

Blocuri de stil folosind interfața

• Selectați blocul pe care doriți să îl personalizați.
• Din bara laterală, extindeți opțiunea Setări stil.
• Puteți personaliza diferite opțiuni, cum ar fi culoarea de fundal, chenarul, căptușeala și multe altele ale site-ului.

Folosind Blocul Container

Puteți obține acces la blocul container dacă utilizați blocurile setului de instrumente. Puteți folosi această opțiune pentru a clasifica anumite blocuri împreună și pentru a alege un stil specific pentru toate acele blocuri împreună. Din bara laterală din dreapta, veți avea opțiunea de a vă stila blocul cu opțiunea de stil disponibilă. Această opțiune este potrivită dacă modelați mai multe blocuri împreună.

Cum să controlezi tipografia folosind Gutenberg WordPress?

În timp ce utilizați blocurile de instrumente, trebuie doar să navigați la secțiunea Tipografie pentru a stila și formata fonturile care vor fi afișate pe site-ul dvs. Din secțiunea Tipografie, puteți personaliza următoarele elemente ale fonturilor.

• Tipul, dimensiunea și stilul fontului
• Transformarea textului cu opțiuni de scriere cu majuscule, majuscule și minuscule
• Schimbarea culorii textelor
• Adăugând umbră textelor

Tutoriale WordPress Gutenberg pentru dezvoltatori despre crearea unui șablon.

Un șablon este un element esențial pentru orice site web. Prin urmare, este foarte necesar să știți de unde puteți personaliza șablonul site-ului dvs. Crearea unui șablon înseamnă că toate postările și postările personalizate ale paginii dvs. vor urma designul și aspectul din șablon. Pentru a crea un anumit șablon, procedați în felul următor:

• Navigați la opțiunea Toolset > Dashboard.
• Faceți clic pe Creare șablon de conținut pentru tipul de postare pe care doriți să o proiectați.
• Similar cu data anterioară, puteți începe prin a adăuga câmpuri la șablon. Din exemplu, puteți vedea cum am adăugat mai multe blocuri diferite care includ antet, imagine, câmp de bloc cu un singur câmp și multe altele.

• După salvarea și publicarea șablonului, toate postările aferente vor avea același design și aspect. Acest instrument ajută la crearea unui șablon care personalizează o mulțime de blocuri și elemente împreună.

Tutorial WordPress Gutenberg despre adăugarea căutării personalizate

Prin adăugarea unei opțiuni de căutare pe site-ul dvs., vizitatorii dvs. vor putea găsi conținutul cu ușurință. Ei pot folosi această opțiune de căutare pentru a căuta conținutul și elementele pe care le caută. Pentru a adăuga o căutare personalizată, va trebui să parcurgeți următorii pași:

• Introduceți blocul Vizualizare pe pagina dvs.
• În Expertul de creare a vizualizării, activați opțiunea de căutare.

• În bloc, puteți adăuga câmpuri de căutare și butoane de căutare din zona de editare. De asemenea, îl puteți personaliza dacă este necesar.

• Din bara laterală din dreapta, puteți adăuga mai multe setări de câmp, etichete și stiluri la această opțiune. Când ați terminat cu personalizarea necesară, veți obține o secțiune de căutare atrăgătoare din punct de vedere vizual.

Aceștia sunt diferiții pași pe care îi puteți face pentru a proiecta un site web folosind Gutenberg complet de la zero. Puteți vedea din tutorial că acesta este unul dintre creatorii de pagini ușor de utilizat pentru site-ul dvs. Credem că dacă practicați tutorialul nostru WordPress Gutenberg pentru dezvoltatori, puteți crea cu ușurință orice site web ca înainte.

Sperăm că ați găsit articolul valoros și util. Nu uitați să consultați blogul nostru.