Recrearea paginii de pornire a temei WordPress pentru artistul muzical cu Editorul de blocuri

Una dintre activitățile mele preferate în fiecare săptămână este să citesc cele mai recente teme pentru a ajunge în directorul de teme WordPress. Adesea, există concepte de design interesante. Cu toate acestea, în cea mai mare parte a timpului, sunt dezamăgit să aflu că multe dintre modelele paginii de pornire se bazează pe opțiunile temei în loc de editorul de blocuri.

În timp ce editorul are câteva limitări de design, autorii de teme au o mulțime de spațiu de explorat. Are suficientă putere pentru a realiza unele dintre aceste modele personalizate de pagini de pornire cu mult mai puțină muncă de cod.

Music Artist a fost una dintre cele mai recente teme care mi-a atras atenția. Mi-a plăcut zona mare de eroi și câteva elemente ale designului temei. După ce l-am instalat, mi-am dat seama că aspectul paginii de pornire a fost gestionat prin opțiunile temei. Cu toate acestea, autorul temei ar fi putut construi această pagină în întregime din blocuri și ar fi înfășurat fiecare secțiune sau chiar întregul design în modele de bloc.

Toate acestea sunt realizabile cu editorul de blocuri.

Pentru ca să exersez ceea ce predic, mi-am luat câteva ore și am recreat demo-ul paginii de pornire pentru tema direct din editorul de blocuri. Nu este necesar niciun cod. Au fost câteva piese complicate, în care voi intra. Cu toate acestea, nu a fost atât de greu de construit și ar fi putut fi mai ușor dacă tema ar fi acceptat editorul de blocuri.

Planul a fost de a replica pagina personalizată cu tema Music Artist instalată. Cu toate acestea, lipsa temei de suport pentru blocuri a însemnat că unele lucruri au fost fundamental rupte. În schimb, am activat o temă cu asemănări de design, cum ar fi fonturile și culorile. Pentru că știam deja că Ariele Lite a lucrat cu editorul de blocuri, era logic să văd dacă puteam construi cu el. S-a dovedit a fi o bază solidă.

Următoarea este o comparație a paginii de pornire a temei originale Music Artist (în primul rând) și o recreare folosind blocuri prin tema Ariele Lite (a doua):

Există, evident, diferențe de spațiere, culori, tipografie și alte elemente. O mare parte din aceasta se rezumă la alegerile stilistice ale designerilor de teme. Având mai mult timp și modificări prin intermediul unui plugin precum Editor Plus, aș fi putut ajusta acest lucru suficient pentru a obține o replică mai apropiată. Cu toate acestea, scopul meu a fost să rămân cât mai aproape posibil de core WordPress. Din punct de vedere tehnic, am instalată cea mai recentă versiune a plugin-ului Gutenberg, așa că ar putea exista câteva elemente care nu au aterizat încă în WordPress.

Pentru acest experiment am folosit:

• WordPress 5.7 Beta
• Gutenberg 10.1 Beta
• Ariele Lite 1.0.8
• Editor Plus 2.6

Aveam nevoie doar de Editor Plus pentru a face câteva ajustări de marjă în blocul Grup. Aș fi putut să o las în pace, dar am vrut să reduc o parte din distanța dintre secțiunile din pagină pentru a obține o recreare mai apropiată. În viitor, vom vedea mai multe controale de spațiere în WordPress, așa că am considerat acest lucru un compromis corect.

Acest experiment este de a le arăta autorilor de teme că își pot construi design-urile personalizate cu sistemul de blocuri. Renunțarea la opțiunile de teme vechi înseamnă mult mai puțină muncă de cod pentru dezvoltatori, permițându-le să se concentreze mai mult pe stil. Utilizatorii finali beneficiază, de asemenea, de mai multă flexibilitate, cum ar fi adăugarea de elemente personalizate sau îndepărtarea pieselor pe care nu le doresc. Asta nu include nici măcar opțiunile de stil la nivel de bloc individual.

Scopul secundar este de a arăta utilizatorilor că pot crea unele dintre aceste pagini de pornire fără cod. Editorul de blocuri și o temă bine rotunjită, pregătită pentru blocuri, vă pot duce destul de departe.

Recrearea paginii de pornire a artistului muzical

A începe cu o bază de Ariele Lite a însemnat că designul a fost în cutie. Cu toate acestea, tema are un șablon de pagină personalizat „Pânză goală” care le permite utilizatorilor să proiecteze întreaga pagină.

Au fost elemente pe care nu le-am putut recrea în întregime din cauza limitărilor cu editorul de blocuri. Alte părți au fost probleme sau alegeri de design venite din temă.

Următoarea este o prezentare generală a modului în care am reușit să construiesc fiecare secțiune a paginii de pornire. Voi trece peste părți precum adăugarea de culori și schimbarea dimensiunilor fontului, concentrându-mă pe conceptele legate de aspect.

Secția Eroi

Blocul Cover al WordPress rămâne unul dintre blocurile mele preferate. Le permite utilizatorilor să creeze secțiuni eroi fără prea multă muncă. Am luat imaginea de fundal din demonstrația originală și am introdus-o. Făcusem primul pas real în această călătorie.

Apoi, am adăugat un bloc Heading, ajustându-i puțin dimensiunea. L-am urmat cu un bloc Spacer și Social Icons.

M-am lovit imediat de două probleme. Primul a fost că WordPress nu include o pictogramă socială iTunes. Nu am putut găsi o problemă deschisă în depozitul Gutenberg pentru asta. Poate că nu este o caracteristică solicitată des. A doua problemă a fost că blocul Social Icons nu scoate etichetele rețelei sociale, așa că nu am putut replica acea parte a designului.

Secția Discografie

Există câteva moduri de a gestiona această secțiune. Presupunând că albumele enumerate sunt un tip de postare personalizat, indiferent de pluginul din care ar proveni aceste albume, în mod ideal, ar avea un bloc personalizat pentru afișarea lor. Utilizatorii pot folosi, de asemenea, blocul Ultimele postări dacă acestea sunt postări de blog sau blocul de interogări viitor.

Pentru simplitate, am decis să adaug un bloc Coloane și să introduc trei imagini conectate.

Secțiunea Media și Text

Planul meu pentru această secțiune a fost să folosesc blocul de bază Media & Text. Cu toate acestea, acceptă doar media auto-găzduită. Nu am avut nicio modalitate de a încorpora un videoclip YouTube.

În schimb, am mers cu un bloc Coloane. În coloana din stânga, am lăsat o adresă URL a unui videoclip YouTube. În dreapta, am adăugat blocurile Titlu, Paragraf și Butoane.

Sectiunea Video

Aceasta a fost o secțiune relativ simplă de recreat. Pentru aspect, a fost nevoie doar de un bloc Heading urmat de un bloc Coloane. Apoi, am luat câteva link-uri video de pe YouTube și am lipit URL-urile în editor.

Secțiunea Ultimele Postări

Aceasta a fost partea din layout cu care am avut cele mai multe probleme. WordPress oferă blocul Ultimele postări, care poate fi setat într-o grilă. Cu toate acestea, Ariele Lite nu a gestionat corect coloanele.

Deci, am trișat puțin.

Am trecut la o temă bazată pe blocuri care acceptă viitoarea funcție de editare completă a site-ului. Apoi, am introdus un bloc de interogare pentru a obține mai mult control asupra coloanelor de postări. După aceea, am revenit la tema Ariele Lite.

Designul original ar putea fi realizat cu blocul actual Ultimele postări, deci aceasta nu este o problemă cu editorul de blocuri.

Secțiunea bară laterală de subsol

Din punct de vedere tehnic, bara laterală de subsol este în afara domeniului de aplicare al designului paginii de pornire. Este o parte a subsolului temei pe întregul site. Cu toate acestea, am decis să-l adaug, deoarece eram deja pe un rol.

Această secțiune necesită blocul Coloane. Din acel moment, este o chestiune de introducere a unui bloc Heading pentru fiecare coloană. Am adăugat un bloc Paragraf, Calendar și Galerie pentru a recrea cele trei „widgeturi”.

Designul blocului Calendar al lui Ariele Lite funcționează mai bine pe un fundal de culoare deschisă. A fost un mic punct dureros pe care l-am trecut cu vederea. Pe termen lung, WordPress ar trebui să ofere controale de design pentru blocurile care le lipsesc.