Cum se creează o temă WooCommerce Storefront Child [Ghid complet]
Publicat: 2022-01-05
În acest articol, ne vom uita la modul în care puteți crea tema copil WooCommerce Storefront în doar patru pași simpli. Tema Storefront WooCommerce este unul dintre principalele motive care a făcut ca WooCommerce să aibă succes, deoarece este gratuit și ușor de utilizat pentru a crea un magazin unic cu efort minim.
În plus, WooCommerce are posibilități de personalizare aproape infinite oferite, care este un alt factor uriaș care contribuie la succesul WooCommerce. Aceasta înseamnă că, atunci când este combinată cu tema potrivită, vă va oferi multă flexibilitate de design.
WooCommerce Storefront Child Theme
Pentru un aspect profesional, tema Storefront este o alegere excelentă. Acum că magazinul dvs. WooCommerce este în funcțiune, este posibil să doriți în continuare să personalizați aspectul magazinului dvs. pentru a se potrivi cu viziunea dvs. exactă.
După ce instalați tema magazinului WooCommerce, următorul pas trebuie să creați tema secundară WooCommerce Storefront, care vă va permite să faceți modificări temei părinte Storefront fără a edita codul temei părinte direct.
Acest lucru facilitează personalizarea aspectului magazinului dvs. și elimină riscul potențial pentru tema și stocați, în special riscul de a pierde personalizarea pe care ați adăugat-o atunci când tema WooCommerce Storefront este actualizată.
De ce să creați o temă WooCommerce Storefront Child?
Dacă ați dedicat mult timp citind pe WordPress, atunci s-ar putea să fi întâlnit înainte teme pentru copii. În termeni simpli, tema copil este o copie a unei alte teme, adesea denumită „tema părinte”.
Aceasta înseamnă că puteți face modificări temei secundare și le puteți testa, fără a edita direct tema părinte. Efectuarea modificărilor temei copil este importantă, deoarece modificarea temei originale poate duce la erori ireversibile și chiar la deteriorarea site-ului dvs.
Mai mult, este posibil să doriți să creați o temă copil, deoarece doriți să utilizați o altă temă ca bază. Acest lucru vă va economisi timp și nu va trebui să construiți o temă nouă complet de la zero.
În plus, este posibil să doriți să faceți câteva modificări minore la brandingul unei teme sau la estetica generală. Utilizarea unei teme pentru copil deschide multe posibilități, în funcție de timpul pe care ești dispus să-l acorzi proiectului în derulare.
Cu toate acestea, puteți descărca mai multe opțiuni din magazinul oficial WooCommerce sau din alte site-uri precum ThemeForest, dar niciuna dintre temele pentru copii existente oferite nu se potrivește nevoilor dvs. În plus, este posibil să doriți să creați un aspect unic. Tema Copilului Storefront își propune să ofere o experiență de magazin perfectă pentru nișa ta.
De asemenea, merită menționat faptul că procesul real de creare a unei teme copil este același pentru WooCommerce sau un site WordPress mai general. În ciuda acestui fapt, trebuie să țineți cont de scopul magazinului dvs. atunci când personalizați tema copilului.
Cum se creează tema WooCommerce Storefront Child
În acest tutorial, vom crea o temă care folosește Storefront ca părinte. Puteți folosi orice temă ca bază. De asemenea, este important să creați o copie de rezervă a site-ului dvs. înainte de a continua, deoarece acest lucru vă va păstra magazinul în siguranță dacă ceva se întrerupe în timpul procesului de dezvoltare.
În plus, este, de asemenea, inteligent să folosiți un mediu de punere în scenă pentru a crea și a modifica tema copilului. Pentru a crea tema copil, avem nevoie doar de trei lucruri pentru a începe: directorul temei copil, fișierul style.css și fișierul functions.php.
Iată pașii pe care trebuie să îi urmați pentru a crea o temă WooCommerce Child.
1. Crearea folderului cu teme
Acest folder cu temă va găzdui foaia de stil și fișierele cu funcții. Din punctul de vedere al unui expert, este ideal să folosiți numele temei părinte ca nume de folder și să îl adăugați cu „-child”. În acest tutorial, mi-am numit directorul „Storefront-child”. De asemenea, este important să verificați dacă numele de director al temei copilului dumneavoastră nu are spații pentru a evita posibile erori.
2. Foaie de stil tematică pentru copii
După crearea folderului, trebuie să creați o foaie de stil pentru tema copil. Foaia de stil trebuie setată să moștenească stilurile din tema părinte.
Pentru a face acest lucru, trebuie să inserați următorul antet al foii de stil și să le înlocuiți cu detalii relevante. De asemenea, merită menționat faptul că personalizările efectuate aici vor înlocui stilurile temei părinte.
/* Numele temei: Copil Vitrina URI temei: http://sitename.com/storefront/ Descriere: Tema Copilului Vitrinei Autor: Numele tău URI autor: http://sitename.com Șablon: vitrină /*acest lucru este sensibil la majuscule*/ Versiune: 1.0.0 Licență: GNU General Public License v2 sau o versiune ulterioară URI licență: http://www.gnu.org/licenses/gpl-2.0.html Etichete: deschis, întunecat, lățime completă, aspect receptiv, gata pentru accesibilitate Domeniu text: vitrina-copil */ /* Personalizările temei încep aici*/
Cu toate acestea, în acest tutorial, nu vă voi învăța cum să utilizați CSS, deoarece este imposibil de acoperit în acest articol. Trebuie să înveți CSS sau să angajezi un dezvoltator pentru a face modificările CSS pe site-ul tău.
3. Funcția Tema Copilului
În metodele anterioare, ei sugerează să utilizați „@import” în foaia de stil pentru a încărca tema copilului. Este important să rețineți că aceasta nu mai este considerată o bună practică. Cu toate acestea, trebuie doar să „puneți în coadă” foaia de stil a temei părinte în fișierul functions.php al temei copilului.
Pentru a face acest lucru posibil, puteți folosi „wp_enqueue_scripts action” și folosiți „wp_enqueue_style()”. De asemenea, merită menționat că foaia de stil pentru tema copilului dvs. este de obicei încărcată automat.
Trebuie să-l puneți bine în coadă, astfel încât să fie încărcat și trebuie să vă asigurați că foaia de stil copil are prioritate. Pentru a ușura lucrurile, am creat următorul cod care setează „stil părinte” ca dependență, astfel încât foaia de stil pentru tema copilului să se încarce după aceasta.
<?php
funcția theme_enqueue_styles() {
$parent_style = 'stil-parent';
wp_enqueue_style( $style_parent, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles');
?>4. Activare
Acum că folderul cu teme pentru copil este complet, trebuie să creați un fișier .zip al folderului cu tema copil, astfel încât să îl puteți adăuga la temele dvs. WordPress.
Puteți face acest lucru folosind 7-zip sau Winrar. De asemenea, este important să vă asigurați că aveți style.css și functions.php în folderul cu tema copilului.
În plus, este important să luați notă și să păstrați evidența altor setări de plugin înainte de a vă activa tema copilului. După aceea, puteți încărca acest lucru în WordPress prin Aspect > Adăugați teme . 
WordPress îl va instala la fel ca orice temă și, odată ce este instalat, trebuie să activați acest lucru făcând clic pe „Activare”, accesând Aspect > Teme , așa cum se arată mai jos: 
După activare, arată la fel ca tema originală. Tema copilului atrage stilurile din tema părintelui. Apoi, trebuie să fiți creativ și să personalizați aspectul în foaia de stil.
În plus, puteți face modificări la fișierele șablon ale temei dvs., prin copierea fișierului șablon pe care doriți să îl modificați, cum ar fi header.php, din părintele dvs. în folderul cu tema copilului.
Mai mult, va trebui să faceți și câteva modificări pentru a specifica ce funcție folosește WordPress pentru a face referire la fișierele șablon. Aceasta înseamnă că veți folosi get_stylesheet_directory(); funcția în loc de get_template_directory() pentru a face referire la șabloanele dvs.
Concluzie
În acest moment, sunt sigur că puteți crea WooCommerce Storefront Child Theme. Vă recomand cu căldură să vă perfecționați CSS-ul pentru a profita la maximum de stilul dvs. și să consultați celălalt ghid al nostru despre crearea temelor pentru copii pentru și mai multe sfaturi.
De asemenea, puteți achiziționa o temă pentru copii de la un furnizor terță parte, dar nu trebuie să vă bazați pe creativitatea altora. Acest lucru se datorează faptului că crearea temei WooCommerce Storefront Child nu este atât de dificil pe cât ați putea crede.
În plus, vă oferă control aproape total asupra aspectului și funcționalității magazinului dvs. Prin urmare, trebuie să creați unul, deoarece este considerată cea mai bună practică atunci când lucrați de dezvoltare pe site-ul dvs. WooCommerce.
În plus, modificarea directă a unei teme riscă pierderea modificărilor în timpul actualizării. Tema copilului se va asigura că modificările sunt păstrate intacte.
Articole similare
- Ce este tema WooCommerce Storefront? [Răspuns]
- Peste 80 de trucuri pentru a personaliza tema Storefront WooCommerce: Ghidul final de personalizare a temei Storefront
- Cum să adăugați o siglă de încredere sau sigură pe pagina de finalizare a plății WooCommerce
- Cum să redirecționați WooCommerce după finalizare: Redirecționați către pagina personalizată de mulțumire
- Cum se creează o notificare de administrator WooCommerce pentru plugin – Dezvoltare WooCommerce
- Cum se creează o bază de date WordPress în PHPMyAdmin
- Cum să creezi mai multe widget-uri în WordPress utilizând bucle For & Foreach
- Cum se creează un cod scurt pentru plugin în WordPress
- Cum se creează o bază de date MySQL WordPress prin linia de comandă
- Primii 20 de pași pentru începătorii WordPress complete pentru a începe
- Cum să afișați produsele WooCommerce după categorie
- Fragment PHP de deconectare WooCommerce pentru a crea butonul de deconectare
- Cum să schimbați textul butonului Adăugați în coș în pagina magazinului WooCommerce
- Cum să setați produsele recomandate în WooCommerce
- Cum să adăugați o metodă de livrare personalizată în WooCommerce