Cum se creează tema WooCommerce Storefront Child

Ultima actualizare - 5 martie 2021

O temă copil este o modificare a unei teme existente, păstrându-și stilul și funcțiile de bază. Tema originală se numește temă părinte, iar noua temă modificată se numește temă copil. Crearea propriei teme pentru copii WooCommerce Storefront este o modalitate bună de a merge atunci când doriți să vă personalizați magazinul fără a cumpăra o nouă temă.

Obțineți WooCommerce Storefront!

Tema copilului – O privire de ansamblu

După cum s-a menționat în introducere, o temă copil va folosi tema părinte ca bază și va conferi caracteristici suplimentare temei. Adesea, aceasta este o opțiune bună atunci când doriți să faceți variații pentru o singură temă. În directorul de teme pentru copii Storefront, puteți găsi o gamă bună de teme premium pentru copii, potrivite pentru diverse industrii și tipuri de produse. În acest fel, vă puteți crea cu ușurință propria temă de copil pentru Storefront.

Avantajele utilizării unei teme pentru copii

Modificarea directă a unei teme riscă pierderea modificărilor în timpul actualizării. O temă copil asigură că modificările sunt păstrate intacte. În general, dezvoltarea unei teme pentru copil este un proces mai rapid decât crearea unei teme noi. În plus, pentru cei care sunt interesați de dezvoltarea temei WordPress , crearea unei teme pentru copii este o modalitate excelentă de a experimenta și de a învăța.

Iată câteva dintre avantajele creării unei teme pentru copil:

• Ajută la crearea diferitelor variații pentru aceeași temă, pentru a se potrivi diferitelor domenii.
• Poate salva personalizările designului separat, fără a modifica tema părinte.
• Personalizările pot fi păstrate chiar și după actualizarea temei părinte sau a fișierelor de bază ale WordPress sau WooCommerce.

Crearea unei teme WooCommerce Storefront Child

Este recomandabil să aveți o copie de rezervă adecvată a site-ului dvs. înainte de a încerca să personalizați o temă. Aveți nevoie de acces FTP la gazdă pentru a încărca noua temă copil.

Pentru a începe procesul, creați un fișier style.css pentru tema copil cu următorul exemplu de cod dat în documentele WooCommerce.

Apoi, modificați câmpul șablonului pentru a indica Storefront.

O diferență pe care poate ați observat-o aici este că, cu Storefront, nu aveți nevoie de pasul de coadă care a fost urmat în timp ce creați o temă copil pentru tema Twenty Fifteen. Când creați o temă copil folosind Storefront, aveți nevoie doar de un fișier function.php gol și un fișier style.css pentru a începe procesul.

Puteți pur și simplu să transferați fișierul într-un folder cu temă copil, să creați un fișier zip și să încărcați. După ce ați făcut acest lucru, activați noua temă copil din Aspect > Teme .

De asemenea, puteți încărca tema copil prin FTP, dacă aveți acces la serviciul dvs. de găzduire. Puteți utiliza un program FTP precum FileZilla.

Cei mai buni clienți FTP pentru Mac și Windows.

Acum puteți personaliza adăugând coduri în foaia de stil pentru tema copil și fișierele șablon. De exemplu, puteți copia orice fișier șablon din folderul cu teme Storefront în folderul cu tema copil. Acest fișier din folderul cu tema copil poate fi personalizat prin modificarea codului conform cerințelor dvs.

Cum să personalizați designul și funcționalitatea unei teme pentru copii?

Cu setările de mai sus, ați creat o temă copil pentru Storefront. Cu toate acestea, nu există încă proprietăți personalizate pentru tema dvs. Puteți adăuga funcționalități și personalizări de design la tema copilului fără a modifica tema părinte.

Modificări de design

De exemplu, în foaia de stil de mai sus pe care ați creat-o pentru tema copil, puteți personaliza culoarea titlului site-ului cu codul de mai jos:
.site-branding h1 a {
color: red;
}

Modificări ale șablonului

De asemenea, puteți modifica fișierele șablon (*.php) din folderul cu teme. De exemplu, puteți modifica un anumit cod prin copierea header.php din folderul cu tema părinte wp-content/themes/storefront/header.php în folderul cu tema copil wp-content/themes/storefront-child/header.php.

Odată ce copierea a fost făcută, puteți edita header.php și personaliza orice cod în funcție de nevoi. Header.php din tema copil va fi folosit în locul header.php al temei părinte.

De asemenea, puteți modifica șabloanele WooCommerce în acest fel. Pur și simplu creați un folder nou în tema copilului și numiți-l „WooCommerce”. Aici puteți face modificări șabloanele WooCommerce pentru a le alinia cu designul site-ului dvs.

Această documentație WooCommerce vă va ajuta să înțelegeți mai multe despre structura șablonului WooCommerce.

Personalizarea funcționalității

Când creați o temă copil, ați dori ca aceasta să aibă și funcționalitate personalizată. Pentru aceasta, trebuie să vă asigurați mai întâi că fișierul functions.php este gol și nu conține nicio informație din fișierul functions.php al părintelui. Acum, dacă o anumită funcție din funcția temei părinte este conectabilă (înfășurată într-o declarație condițională if), atunci o vei putea copia în temele secundare functions.php. După ce ați copiat o funcție conectabilă, puteți face modificări după cum este necesar. Mai jos este un exemplu pentru o funcție conectabilă:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Crearea unei teme generale pentru copil

Procesul de creare a unei teme pentru copil este diferit și mai simplu cu Storefront, în comparație cu alte teme. În acest articol, ne vom uita și la detaliile de bază ale metodei generale.

Primul pas este crearea unui director de teme. Apoi, creați o foaie de stil (fișier style.css) pentru tema copil. WooCommerce recomandă crearea unui fișier functions.php, care este util pentru a pune corect stilurile în coadă.

Crearea unei teme generale pentru copil

Procesul de creare a unei teme pentru copil este diferit și mai simplu în vitrină în comparație cu alte teme. În acest articol, ne vom uita și la detaliile de bază ale metodei generale.

Primul pas este crearea unui director de teme. Apoi, creați o foaie de stil (fișier style.css) pentru tema copil. WooCommerce recomandă crearea unui fișier functions.php, care este util pentru a pune corect stilurile în coadă.

Se creează un director de teme secundare

Creați și plasați directorul de teme copil în wp-content/themes. Adăugarea numelui directorului temei copil cu „-child” este sugerată, deși nu este obligatorie. Ar trebui să aveți grijă să nu lăsați spații în numele directorului temei copil pentru a evita orice probleme.

Crearea foii de stil a temei copilului

Creați un antet pentru foaia de stil pentru a începe procesul. Mai jos este un exemplu WordPress Codex de antet de foaie de stil creat pentru o temă copil bazată pe tema Twenty Fifteen.

În timp ce creați o temă copil, puteți utiliza acest exemplu de text ca punct de referință și îl puteți înlocui cu detalii relevante pentru tema dvs. Linia Șablon oferă numele directorului temei părinte. Trebuie să o ajustați în funcție de tema cu care lucrați.

Pune în coadă temele pentru părinți și copii

Creați un fișier functions.php în directorul de teme secundare pentru a pune în coadă temele părinte și secundare. Puneți în coadă foaia de stil a temei părinte adăugând o acțiune wp_enqueue_scripts și folosind wp_enqueue_style() în funcția.php a temei copil. Deschide funcția.php a temei copilului tău cu o etichetă PHP (<?php). Apoi, puneți în coadă foile de stil ale temei părinte și copil. Captura de ecran de mai jos este un exemplu care va funcționa numai dacă tema părinte folosește un fișier .css pentru a păstra CSS. Dacă există mai mult de un fișier .css, cum ar fi style.css, main.css, adică.css, asigurați-vă că mențineți toate dependențele temei părinte. Un nivel bun de cunoștințe de codificare este în mod clar un factor important în a face acest lucru corect de prima dată.

De asemenea, trebuie să puneți în coadă codul CSS real în tema copilului style.css. Pentru a vă asigura că foaia de stil a temei secundare se încarcă după foaia de stil părinte, puteți seta stilul părinte ca dependență. În plus, includeți numărul versiunii temei copil pentru a vă asigura că puteți pierde memoria cache și pentru tema copilului. Exemplul recomandat în Codex este prezentat mai jos:

Activarea temei copilului

Creați un fișier zip al folderului cu tema copilului și încărcați-l navigând prin Aspect → Teme → Adăugați o temă nouă .

Acum noua temă copil va fi vizibilă pe lista de teme.

Puteți activa noua temă copil acum făcând clic pe butonul Activare .

• Descărcați tema Storefront acum.
• Citiți mai multe despre temele pentru copii din WordPress Codex.

De asemenea, puteți descărca un exemplu de temă copil de pe acest link WooCommerce pentru a afla mai bine. Sau citiți câteva dintre articolele noastre conexe:

1. Cum să alegi tema potrivită pentru magazinul tău WooCommerce?
2. Cum se instalează și se configurează Storefront?
3. Cele mai recente tendințe în temele WooCommerce.