O introducere în temele WordPress Block

Componentele care alcătuiesc o temă tipică WordPress nu s-au schimbat prea mult de-a lungul anilor. Atât de mult încât cofondatorul proiectului Matt Mullenweg a glumit că tema Kubrick de școală veche (lansată în 2005) încă funcționează cu versiuni moderne ale sistemului de management al conținutului.

Sigur, dezvoltatorii de teme s-au folosit de propriile adăugiri. Am văzut totul, de la interfețe de utilizare cu setări complexe la constructori de pagini integrati. Dar, la baza lor, temele și-au menținut o structură consistentă. Adică până la introducerea temelor de bloc.

Temele bloc sunt setate să devină viitorul WordPress. Vor schimba modul în care construim și întreținem site-uri web. În plus, sunt mai strâns integrați cu editorul de blocuri Gutenberg decât omologii lor „clasici”.

Te întrebi despre ce este toată agitația? Astăzi, vă vom prezenta elementele de bază ale temelor blocate WordPress. Pe parcurs, vom explora modul în care se compară și contrastează cu temele tradiționale. Să începem!

De ce blocați teme?

În primii câțiva ani de existență, editorul bloc a fost în primul rând un mijloc de a stila și de a construi conținut. Atunci când sunt combinate cu o temă clasică, aceasta însemna că paginile și postările pot fi create după dorința inimii tale.

Când vine vorba de a face modificări care afectează întreaga temă, WordPress Customizer a rămas resursa de bază. Acest instrument oferă acces la setările de design și aspect care au fost puse la dispoziție de către autorul temei. Dacă nu se află în Customizer, probabil că va trebui să cercetați cod.

Cu toate acestea, una dintre principiile cheie ale editorului de bloc a fost crearea unei interfețe mai unificate în tabloul de bord WordPress. Am văzut deja că acest lucru se întâmplă odată cu trecerea ecranului Widgeturi la o interfață de utilizare bazată pe blocuri. Personalizatorul pur și simplu nu se potrivește cu această matriță.

Introducerea Full Site Editing (FSE) este următorul pas în acest proces. Depășește doar stilizarea paginilor și postărilor noastre. Acum, fiecare aspect al designului unei teme (antet, subsol, șabloane de pagină etc.) poate fi gestionat direct în WordPress.

Temele bloc servesc drept poarta de acces la această funcționalitate. Ca atare, sunt construite exclusiv având în vedere blocuri.

Funcționarea interioară a unei teme blocuri WordPress

Nu există o mulțime de asemănări între temele clasice și cele bloc. Dar ambele au un set de reguli de bază care le ghidează machiajul. Dacă ar fi să descărcați o temă de bloc și să navigați în structura de fișiere, câteva contraste cheie pot ieși în evidență.

Fișierele șablon sunt HTML, mai degrabă decât PHP

Într-o temă clasică, veți găsi fișiere șablon cu nume precum index.php și header.php . Temele de bloc elimină PHP și au în schimb extensia de fișier .html .

În interior, un fișier șablon conține o combinație de HTML și marcare bloc. De exemplu, să aruncăm o privire la acest șablon din documentația oficială WordPress:

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

Marcarea blocurilor seamănă foarte mult cu comentariile HTML. Dar include sintaxă pentru apelarea anumitor blocuri în șablon. Site-ul web WordPress Full Site Editing are o referință la îndemână care include markup pentru fiecare bloc implicit.

Și dacă acest tip de cod vi se pare familiar, este posibil să fi văzut ceva similar în vizualizarea editorului de cod a lui Gutenberg.

Utilizarea folderelor

Temele clasice sunt capabile să stocheze șabloane în foldere, dar nu este o necesitate. Temele de bloc necesită câteva subdosare:

/parts
Conține elemente reutilizabile, cum ar fi antetul, subsolul și bara laterală.

/templates
Case șabloane pentru diverse tipuri de conținut. Articole precum paginile, arhivele de postări și postările singulare sunt exemple comune. Rețineți că convenția lor de denumire urmează ierarhia șablonului WordPress - o altă similitudine cu temele clasice.

Unul dintre efectele secundare pozitive ale acestui aranjament este că temele vor fi mai bine organizate. A avea o structură de foldere standardizată înseamnă mai puțin timp petrecut căutând un anumit fișier.

Stilul Theme.json

Fișierul theme.json este utilizat pentru a atribui setări implicite editorului de blocuri. Aceasta înseamnă, printre altele, că este posibil să setați palete de culori, tipografie și spațiere implicite. Setările pot fi la nivel de site sau aplicate anumitor blocuri.

Deoarece theme.json va genera automat CSS-ul corespunzător pe baza configurației sale, este posibil să nu fie nevoie să completați atât de mult fișierul style.css al unei teme. În acest scenariu, foaia de stil este folosită pentru a defini câteva elemente de bază, în timp ce totul se bazează pe acest fișier nou-fangle.

Crearea și editarea șabloanelor

WordPress a oferit de mult capacitatea de a edita fișierele șablon ale unei teme direct în tabloul de bord. Acest lucru a fost adesea descurajat, deoarece chiar și o mică eroare de codare ar putea face un site web inaccesibil. Ca să nu mai vorbim de posibilitatea ca modificările să fie suprascrise atunci când o temă este actualizată (astfel, o parte din motivul utilizării unei teme secundare). Unii dezvoltatori dezactivează complet funcția pentru a evita chiar și o șansă îndepărtată de catastrofă.

Dar temele de blocare se referă la editare în tabloul de bord. Șabloanele care sunt incluse cu o temă pot fi modificate prin intermediul editorului de blocuri și pot fi create și noi șabloane personalizate.

După cum vă puteți aștepta, codul este complet opțional în acest scenariu. Totul poate fi editat prin noul Editor de site ( Aspect > Editor – este necesar WordPress 5.9 sau o versiune superioară ) care înlocuiește Customizerul moștenit atunci când este activată o temă de blocare. Și, la fel ca paginile sau postările, Editorul de site folosește interfața de utilizare a editorului de blocuri familiar.

Și asta nu este tot. Orice modificări pe care le faceți în WordPress pot fi exportate. Acest lucru vă va permite să utilizați tema de blocare personalizată pe mai multe site-uri web.

Acest lucru scade bariera de intrare pentru cei care doresc să personalizeze sau chiar să creeze teme. Acum, un ochi de bază pentru design și o cunoaștere de lucru a blocurilor pot duce la un site web personalizat.

Lucruri de reținut

Înainte să vă scufundați și să comutați toate site-urile dvs. web pentru a utiliza teme bloc, există câteva lucruri pe care ar trebui să le știți.

În primul rând, temele bloc sunt o tehnologie în curs de dezvoltare. Nu toate funcțiile au fost finalizate și unele bune practici trebuie rezolvate. În plus, abia începem să vedem cum funcționează aceste teme într-un mediu de producție. Așteptați-vă la câteva schimbări pe măsură ce lucrurile evoluează.

Dacă construiți site-uri pentru clienți și doriți să păstrați o oarecare flexibilitate în viitor, temele hibride pot fi de interes. Acestea permit utilizarea caracteristicilor FSE, menținând în același timp structura PHP a unei teme clasice. Puteți chiar modifica o temă existentă pentru a utiliza această funcționalitate.

În cele din urmă, temele bloc nu semnifică sfârșitul temelor clasice – cel puțin nu pentru viitorul previzibil. Cu asta, trecerea la acest nou mod de tematică nu trebuie să fie imediată. Este în regulă, de exemplu, să experimentezi blocuri într-un mediu local, bazându-te în continuare pe temele tale clasice preferate în producție.

Bloc de resurse tematice

Dacă doriți să aflați mai multe despre temele de blocare WordPress, există câteva resurse remarcabile disponibile. Iată câteva dintre preferatele noastre:

• Block Theme Documentation by WordPress
• Tema Blockbase de Automattic
• Editare completă a site-ului de Carolina Nymark
• Ghidul suprem pentru șabloane de blocuri WordPress în Gutenberg de Rich Tabor
• Revoluția temei WordPress Block primește în liniște avânt de Justin Tadlock
• WordPress Theme Experimente de WordPress