Cum se creează o temă copil bloc în WordPress

Publicat: 2023-07-14

Imaginează-ți acest scenariu: tocmai ai găsit o temă aproape perfectă pe care să o folosești pe site-ul tău. Este bine conceput, include machetele dorite, dar doriți să schimbați paleta de culori și să limitați clienții să modifice unele zone. Din păcate, tema pe care o utilizați nu vă permite să eliminați culorile implicite sau să blocați blocurile.

Deși puteți edita direct fișierele temei, toate modificările dvs. se vor pierde atunci când executați actualizări ale temei. Puteți adăuga un mic CSS personalizat folosind un plugin pentru fragmente de cod, dar asta nu va modifica opțiunile de stil disponibile pentru utilizatorii conectați.

Deci ce poți face? Cum schimbați opțiunile disponibile pentru stilul global? Pentru asta, ai nevoie de o temă copil bloc.

Ce este o temă copil WordPress?

Conform documentației pentru dezvoltatori WordPress:

O temă copil moștenește aspectul temei părinte și toate funcțiile sale, dar poate fi folosită pentru a face modificări oricărei părți a temei. În acest fel, personalizările sunt păstrate separat de fișierele temei părinte. Utilizarea unei teme secundare vă permite să actualizați tema părinte fără a afecta personalizările pe care le-ați făcut site-ului dvs.

Deci, pentru a utiliza o temă copil în WordPress, va trebui să aveți instalată și tema părinte. Tema copilului tău moștenește totul de la părinte, cu câteva variații adăugate.

Cum se creează o temă pentru copil

Ați prefera o opțiune de cod pentru a personaliza stilul pe site-ul dvs.? La fel ca suprascrierea altor teme WordPress, utilizarea unei teme secundare este cea mai bună modalitate de a înlocui codul. Când tema se actualizează, codul temei pentru copil va rămâne.

În acest articol, acoperim componentele cheie ale ceea ce face o temă bună WordPress pentru copii și oferim resurse de lectură aprofundate.

1. Când să utilizați o temă copil bloc

Temele pentru copii sunt adesea o soluție excelentă. Cu toate acestea, dacă doriți să adăugați doar un pic de cod CSS, o întreagă temă copil poate fi exagerată. Luați în considerare un plugin precum Code Snippets pentru a adăuga doar un pic de personalizare.

Personalizarea site-urilor clienților

Atunci când construiți site-uri pentru clienți, este posibil să doriți să oferiți anumite personalizări suplimentare.

Dacă doriți să controlați capacitatea utilizatorilor de a introduce blocuri noi, de a muta blocuri existente sau de a șterge blocuri, este posibil să doriți să implementați blocarea blocurilor. Puteți învăța cum să blocați blocuri și multe altele în acest tutorial introductiv.

Crearea de variații de temă

Pe lângă definirea regiunilor din aspectul temei pe care clienții le pot modifica, este posibil să doriți să modificați opțiunile paletei de culori, omițând ceea ce vine implicit cu tema sau WordPress și adăugând opțiuni unice. De asemenea, puteți defini opțiuni de degrade și duoton care ar trebui să fie disponibile și în tema dvs.

2. Alegeți o temă WordPress bună

Nu toate temele sunt create la fel. Pe lângă ceea ce vedeți în designul temei, selectarea unei teme părinte implică factori suplimentari, cum ar fi frecvența actualizărilor, calitatea suportului, documentația și reputația dezvoltatorului temei. Aflați mai multe în Cum să utilizați temele WordPress pentru a construi un site web.

3. Creați un mediu de testare

Până acum ați ales tema părinte, ați adunat elemente de marcă și ați decis ce setări doriți să înlocuiți. În continuare, va trebui să configurați un mediu de testare.

Dacă utilizați un furnizor de găzduire WordPress gestionat, cum ar fi Găzduirea WordPress gestionată de la GoDaddy, puteți utiliza site-ul dvs. de pregătire cu un singur clic ca mediu de dezvoltare. Dacă utilizați ceva precum cPanel sau VPS pentru găzduire, puteți configura o instalare WordPress separată și puteți clona sau copia site-ul dvs. existent în noua instalare.

Dacă nu aplicați tema copil pe un site existent sau dacă preferați să construiți de la zero, puteți crea un mediu de dezvoltare WordPress local pe computer folosind un instrument precum MAMP sau DesktopServer de la ServerPress.

4. Creați-vă directorul de teme

Mai întâi va trebui să instalați tema părinte. Apoi, folosind un client FTP, conectați-vă la mediul dvs. de dezvoltare și navigați la locul în care se află fișierele dvs. WordPress.

Cauți următorul folder:

 /wp-content/themes/

Acolo puteți găsi toate temele dvs. WordPress instalate. Fiecare temă are propriul folder sau director care conține toate fișierele temei. Veți adăuga un nou director la listă, care va păstra tema copilului dvs. Vei ajunge cu ceva de genul:

 /wp-content/themes/tema-copil-tau/

5. Creați fișierele cu tema

Pentru exemplul nostru, vom presupune că folosim tema Twenty Twenty Two. Va trebui să aveți acea temă instalată pentru ca tema copil să se refere la ea.

În noul director cu temă copil, veți crea două fișiere noi:

 stil.css
theme.json

Ambele fișiere servesc unui scop specific. Fișierul style.css este folosit pentru a furniza WordPress informații despre temă, cum ar fi numele, autorul, etichetele și ID-ul temei părinte.

Fișierul theme.json este folosit pentru a defini numeroasele setări din Stiluri globale și multe altele. Aflați mai multe despre theme.json din manualul pentru dezvoltatori.

În temele clasice anterioare, fișierul functions.php era necesar în temele copil. Blocarea temelor copil nu necesită acești pași.

Style.css

Ce aparține fișierului tău style.css ? Documentația dezvoltatorului spune:

Foaia de stil trebuie să conțină comentariul de antet necesar de mai jos, în partea de sus a fișierului. Acest lucru spune WordPress informații de bază despre temă, inclusiv faptul că este o temă copil cu un anumit părinte.

Va trebui să includeți boilerplate în fișierul style.css care conține informațiile antet. Numele șablonului: corespunde numelui folderului (directorului) temei părinte pe care o construiți. Domeniul text : numele este unic pentru tema dvs. copil WordPress.

Mai jos este un exemplu de temă pentru copil folosind Twenty Twenty Two:

 /*
Numele temei: Douăzeci și douăzeci și doi de copii
URI temă: https://example.com/
Autor: Numele tău
URI autor: https://example.com/
Descriere: Tema Douăzeci și doi de copii
Necesită cel puțin: 5.8
Testat până la: 5.9
Necesită PHP: 5.6
Versiune: 0.1
Licență: GNU General Public License v2 sau o versiune ulterioară
URI licență: http://www.gnu.org/licenses/gpl-2.0.html
Domeniul text: douăzeci și doi de copii
Șablon: douăzeci și douăzeci
Etichete: culori personalizate, meniu personalizat, logo personalizat, stil editor, imagini prezentate, editare completă a site-ului, modele bloc

Tema WordPress Twenty Twenty-Two Child, (C) 2021 WordPress.org
Twenty Twenty-Two Child este distribuit în conformitate cu termenii GNU GPL.
*/

Theme.json

Consultați documentația pentru dezvoltatori pentru o scufundare mai profundă în theme.json. Să aruncăm o privire la fișierul Twenty Twenty Two theme.json:

 {
 „versiunea”: 2,
 „setări”: {},
 „stiluri”: {},
 „CustomTemplates”: {},
 „templateParts”: {}
}

În fiecare dintre acestea sunt disponibile alte stiluri. De exemplu, în zona stilului, Twenty Twenty Two utilizează:

 {
 "setari": {
 „appearanceTools”: adevărat,
 "culoare": {
 „duoton”: [
 {
 „culori”: [
 „#000000”,
 „#ffffff”
 ],
 "slug": "prim-plan și fundal",
 "name": "Primul plan și fundal"
}

Aveți nevoie de ajutor pentru a crea un fișier theme.json? Consultați themegen.app pentru un ghid care creează multe dintre opțiunile pentru fișierul dvs. theme.json.

6. Personalizarea temei de copil bloc

Deși s-ar putea să creați cu ușurință fișierul theme.json și să-l adăugați la tema dvs., mai sunt câteva alte opțiuni de făcut. Temele pentru copii și chiar temele bloc sunt o zonă nouă pentru WordPress. Editorul site-ului are în mod clar o etichetă beta pe el la momentul acestei postări. Veți dori să vă referiți înapoi pentru a vedea ce funcționează și ce nu funcționează încă în temele secundare, cum ar fi părțile șablonului.

În plus, este posibil să găsiți setări pe care Global Styles și theme.json nu le acceptă încă. Dacă adăugați CSS suplimentar, cum ar fi un chenar de bloc de grup cu o umbră de casetă, este posibil să doriți să adăugați asta în fișierul style.css .

 .are-primary-border-color {
 box-shadow: .1rem .1rem .05rem #647BAF ;
}

7. Testează tema copilului tău

Odată ce simțiți că site-ul dvs. arată bine în mediul actual de dezvoltare, este timpul să-l testați înainte de a-l încărca pe un site live.

  • Testați în diferite dimensiuni de browser, cum ar fi ferestrele mobile
  • Testați în diferite browsere sau utilizați un instrument precum BrowserStack
  • Examinați standardele de accesibilitate. Începeți cu WebAim

8. Pregătiți-vă să încărcați tema de copil bloc

Dacă ați dezvoltat pe un site de staging, fișierele dvs. sunt exact acolo unde trebuie să fie. Puteți să vă vizitați opțiunile de găzduire pentru a împinge site-ul de organizare. Dacă ați creat fișiere într-un mediu de dezvoltator local, este timpul să comprimați fișierele style.css și theme.json împreună ca un singur fișier zip și să le încărcați pe site-ul dvs.

Recapitulați despre crearea temei de copil bloc

  1. Decideți dacă aveți nevoie de o temă pentru copii bloc
  2. Alegeți o temă părinte
  3. Configurați mediul de testare
  4. Creați-vă directorul de teme
  5. Creează-ți fișierele tematice
  6. Personalizați-vă tema pentru copii blocate
  7. Testează tema copilului tău
  8. Încărcați-le pe site-ul live

La fel ca temele clasice din WordPress, temele Block au încă nevoie de un loc pentru a stoca personalizări care nu vor fi suprascrise atunci când tema părinte primește o actualizare. Crearea unei teme copil bloc vă permite să adăugați, să blocați și să omiteți opțiuni disponibile pentru alți utilizatori de pe site.