Cum ne-am creat site-ul web folosind editorul de blocuri

În cazul în care nu ați observat, aspectul site-ului nostru s-a schimbat ușor . Ne-am remodelat site-ul web, actualizând fonturile, stilurile, paleta de culori... trecând de aici:

la acest:

Dar ceea ce este cel mai interesant la aceste modificări nu este modul în care arată – am decis să ne reconstruim site-ul web de la zero, astfel încât să poată deveni un site complet bazat pe blocuri. Astăzi aș dori să vă explic cum ajungem de la o temă personalizată bazată pe șabloane de pagină la o altă temă complet personalizată care se bazează pe blocuri WordPress pentru orice .

De unde venim

Când am lansat Nelio Content în urmă cu trei ani, am decis să ne reorganizăm complet toate site-urile web și să ne centralizăm prezența online sub un singur domeniu și brand: neliosoftware.com . În mod logic, una dintre sarcinile pe care le-am făcut a fost să contactăm Silo Creativo pentru a ne ajuta să proiectăm imaginea noului nostru site web. Aici puteți vedea una dintre primele propuneri pe care le-au făcut:

Când am dat aprobarea acelui design inițial și în urma solicitărilor noastre, Ricardo și Veronica s-au pus pe treabă și au implementat o temă personalizată cu toate șabloanele necesare pentru diferitele părți ale site-ului nostru : pagina principală, blog , postări, ajutor pagini, ... Au proiectat totul și fiecare design a fost implementat într-un șablon de pagină. Aveam o pagină rapidă, care era greu de editat.

Și apoi a sosit Gutenberg.

Înțelegerea conținutului site-ului nostru web

Noul editor de blocuri WordPress , Gutenberg , este o schimbare de paradigmă pentru crearea de conținut într-un WordPress . Până acum, crearea paginilor era un proces obositor și neprietenos pentru utilizatori, cu excepția cazului în care utilizați un generator de pagini. Dar Gutenberg a venit cu o promisiune sub braț : crearea de conținut atrăgător din punct de vedere vizual în WordPress ar trebui să fie la îndemâna oricui . Și am vrut să testăm această afirmație și să vedem dacă am putea într-adevăr să creăm un site web frumos bazându-ne doar pe Gutenberg.

Dacă ați văzut web-ul pe care îl aveam anterior, veți ști că are un design simplu și elegant , incluzând elemente precum:

• Pagini cu o imagine prezentată care a luat prima îndoire
• Blocuri cu text descriptiv și imagini și/sau video
• Formulare de contact
• Pagini legale
• Tabelele de prețuri
• Mărturii de la utilizatorii noștri
• Listări cu funcții

Nimic prea fantezist, dar interesant totuși. Am putea crea toate acestea în Gutenberg ? Așa am crezut și am încercat. Asta am făcut și am găsit.

Noua noastră temă

Primul lucru pe care l-am făcut pentru a proiecta noul site web a fost să creăm o temă de la zero. Pentru aceasta, am decis să pornim de la binecunoscuta temă de start „subliniere”. Este o temă super de bază care vine cu șabloanele minime și necesare pentru a avea o temă WordPress funcțională și este bine documentată și bine organizată.

Adaptarea subliniilor

Fiecare temă WordPress are un set de pagini care sunt comune tuturor instalărilor WordPress și independente de conținutul pe care ajungeți să îl generați pe site-ul dvs. Vorbesc, de exemplu, de pagina de blog în care apar ultimele postări, aspectul unei singure postări, pagina de eroare 404, pagina cu rezultatele căutării etc. Deci primul pas pentru a ne crea tema folosind blocuri WordPress este să adaptați subliniile la propriul nostru stil, astfel încât aceste „generice” să aibă aspectul și senzația pe care ni le dorim. Și asta am făcut.

Dacă te uiți la captura de ecran anterioară, vei vedea că am descărcat tema cu _sassif! opțiunea activată, astfel încât tema este descărcată cu stiluri în format SASS, organizate în mai multe fișiere și facând-o extrem de ușor de editat. Ne-au luat câteva ore de scriere CSS și câteva personalizări PHP în functions.php , dar am reușit să obținem tema corect:

Blocuri WordPress ca blocuri de construcție

Odată ce avem o temă inițială cu care ne simțim confortabil (în cazul nostru, tema pe care am creat-o din subliniere, dar în cazul tău ar putea fi o temă pe care ai găsit-o în wordpress.org , o temă premium pe care ai achiziționat-o de ceva vreme în urmă, sau chiar o temă personalizată ca a noastră), este timpul să ne aranjam toate paginile folosind blocurile WordPress .

Așadar, fără alte prelungiri, să aruncăm o privire la toate „provocările” cu care ne-am confruntat în această etapă și la modul în care am implementat totul folosind blocurile WordPress.

Blocuri implicite

Blocurile pe care WordPress le include în mod implicit sunt puțin limitate: paragrafe, imagini, galerii... Nimic prea elegant – toate par mai concentrate pe crearea de postări pe blog decât pe aspectul paginii.

Dar este in regula.

Este în regulă pentru că, pentru început, există o mulțime de pagini pe un site web care arată ca postări de blog. De exemplu, paginile cu informații legale sau o politică de confidențialitate și module cookie sunt mai aproape de o postare pe blog decât ați fi crezut la început.

Dar este și OK pentru că putem construi pagini frumoase cu componente extrem de simple. De exemplu, în putem combina text și videoclipuri. Acesta este ceva ce putem realiza cu ușurință cu blocurile Media și Text :

Destul de aproape, nu?

Combinarea blocurilor implicite

Blocurile simple pot fi extrem de puternice atunci când sunt combinate. De exemplu, luați în considerare următoarea captură de ecran, unde avem o listă de caracteristici:

Cum s-ar aborda asta? Ei bine, dacă îl priviți cu atenție și logic, veți vedea că fiecare caracteristică este o combinație între o imagine și ceva text (sună cunoscut?). Apoi, veți vedea că avem în mod clar trei coloane, așa că... ce se întâmplă dacă combinăm blocurile Media și Text cu un bloc Coloane ?

Nu-i rău, suntem destul de aproape! Când combini blocuri, trebuie să fii inteligent. Utilizarea unui singur bloc Coloane înseamnă că este posibil ca caracteristicile să nu fie aliniate corect pe orizontală, deoarece fiecare coloană este organizată independent de cealaltă. Pentru a rezolva această problemă, trebuie să fiți puțin viclean: în loc să adăugați un singur bloc Coloane cu mai multe caracteristici în fiecare coloană, să creăm mai multe blocuri Coloane pentru a ne asigura că există o singură caracteristică în fiecare coloană:

Și BUM! Acum avem trei coloane de caracteristici cu rânduri aliniate corect.

Blocuri implicite cu steroizi

Există cazuri în care blocurile implicite sunt suficient de apropiate de ceea ce ne dorim, dar nu arată corect. Dacă ne confruntăm cu o problemă vizuală, este foarte probabil să o putem rezolva folosind CSS, iar cea mai bună parte este că Gutenberg funcționează extrem de bine cu clasele CSS.

De exemplu, dacă dorim ca blocurile noastre de imagine să aibă o umbră (opțională), putem crea o clasă CSS simplă care adaugă umbra imaginii și apoi să aplicăm respectiva clasă folosind secțiunea Advanced a blocului de imagine:

Problema cu această soluție este că amestecăm interfața cu utilizatorul cu detaliile de implementare (numele unei clase CSS). De ce naiba să știu că există o clasă numită shadow care adaugă o umbră unei imagini? Ei bine, aceasta are și o soluție simplă.

Interfața de programare a editorului de blocuri WordPress expune o funcție numită registerBlockStyle , după cum sugerează și numele, stilurilor de bloc de înregistrare. Ceva la fel de simplu ca:

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

ne permite să înregistrăm un nou stil pentru blocul de imagine ( core/image ) numit Shadow care, atunci când este aplicat, are ca rezultat blocul imagine având clasa has-style-image-with-shadow :

Blocuri personalizate

În cele din urmă, pentru acele cazuri în care niciun bloc implicit nu îl taie, vă puteți crea propriul bloc (sau utilizați un bloc terț deja existent). Am implementat această soluție în mai multe cazuri: în tabelele de prețuri Nelio Content și Nelio A/B Testing, harta care apare pe pagina noastră de contact (care, de altfel, a fost arătată în profunzime în postarea noastră despre cum să creăm un bloc), iar rezultatele în termeni de utilizare sunt impresionante:

dacă nu știți sau nu doriți să vă creați propriile blocuri, vă las câteva plugin-uri care includ blocuri suplimentare pentru multe lucruri:

• GhostKit
• Blocuri atomice
• CoBlocks
• Blocuri Kadence

Experiența noastră

Acum câteva luni am decis că trebuie să ne renovăm puțin site-ul web și să îl implementăm folosind Gutenberg. Scopul nostru a fost dublu: pe de o parte, am vrut să actualizăm puțin site-ul și să-i dăm un aer mai proaspăt. Pe de altă parte, am vrut să aflăm mai multe despre Gutenberg, atât la nivel de utilizator, cât și la nivel de dezvoltator. În cele din urmă, am reușit să migrăm întregul web către Gutenberg și rezultatul a fost un succes absolut. Vă încurajăm să o faceți și pe voi și, dacă aveți întrebări, nu ezitați să le lăsați în comentarii.

Apropo, postarea de astăzi a fost inspirată de discursul pe care l-am susținut în WordCamp Lisabona 2019. Aici aveți diapozitivele mele:

Imagine prezentată de Samuel Zeller pe Unsplash .