Ghidul suprem pentru temele WordPress pentru copii

Publicat: 2022-06-13

Ați găsit vreodată o temă WordPress aproape perfectă pentru site-ul dvs., dar v-ați hotărât să nu o folosiți din cauza unui element de design minuscul și deranjant pe care nu l-ați putea trece cu vederea? Este stilul fontului, paleta de culori sau plasarea elementelor de design, poate?

Piața de teme WordPress este saturată cu atât de multe teme grozave, atât gratuite, cât și premium, dar în lipsa de a angaja un dezvoltator pentru a crea o temă personalizată pentru site-ul dvs., sunt puține șanse să găsiți una perfectă până la ultimul pixel.

Temele copil WordPress permit webmasterilor să modifice fișierele unei teme, păstrând în același timp funcționalitatea de bază, fără a risca să piardă modificările de fiecare dată când tema este actualizată. Ele vă oferă puterea de a modifica aspectul unei teme de la ceva la fel de mic precum îndemnul unui buton la schimbarea completă a fiecărui element de design.

Acest articol va acoperi tot ce trebuie să știți despre temele copiilor, de la ce sunt ele până la de ce sunt atât de importante. Vom încheia cu un tutorial despre utilizarea temelor copil pe site-ul dvs. WordPress – în modul corect.

Suna bine? Să începem!

Teme WordPress pentru copii: elementele de bază

Temele copil sunt teme separate care moștenesc în mod activ funcționalitatea de la temele lor părinte. Funcționalitatea unei teme secundare suprascrie temei părinte, ceea ce înseamnă că funcționalitatea temei secundare va fi aplicată site-ului dvs. Odată ce activați o temă copil, WordPress va verifica dacă are o anumită funcționalitate. Cu toate acestea, dacă funcționalitatea nu există, se va uita în fișierele părintelui și va merge cu cel codificat acolo.

Într-o engleză simplă, temele copil sunt fișiere de temă duplicat și de fiecare dată când simți nevoia de a modifica aspecte de design sau unele funcționalități, le editezi în fișierele temei copil. Aceasta este o caracteristică excelentă, deoarece le permite webmasterilor să facă modificări temei fără teama persistentă de a distruge fișierele originale.

Majoritatea temelor WordPress din ziua de azi vin cu teme pentru copii (sau variații ale temelor lor pentru copii) imediat din cutie.

De ce ar trebui să folosiți teme pentru copii?

Efectuarea de modificări și modificări temei dvs. prin teme pentru copii este o bună practică acceptată (și recomandată) pe scară largă. Gândiți-vă la asta astfel: dacă dați greșelii prima dată, puteți oricând să încercați din nou. Pe lângă acest beneficiu proeminent, temele pentru copii sunt importante pentru întreținerea și dezvoltarea site-ului dvs. WordPress.

Eliminați riscul de a pierde modificări

Efectuarea modificărilor temei părinte (fișierele temei originale) înseamnă că modificările se vor pierde atunci când actualizați tema. Acest lucru vă lasă într-o stare de fund; dacă actualizați tema, pierdeți toate modificările, dar dacă nu actualizați tema, veți avea erori pe site-ul dvs. care l-ar putea afecta negativ.

Puteți copia și lipi codul asociat modificărilor în tema părinte odată ce actualizarea este finalizată. Deși acest lucru este în întregime posibil, de ce să petreceți timp localând modificările pe care le-ați făcut și să le copiați și să le inserați în fișierele cu tema actualizate de fiecare dată când actualizați tema? Este un proces ușor, dar falibil.

Aici se realizează pentru prima dată importanța temelor copiilor. Folosind temele copil, puteți păstra toate modificările și puteți actualiza în siguranță tema site-ului dvs.

Menține organizarea codului

O temă WordPress este de obicei alcătuită din câteva mii de linii de cod și mai multe fișiere diferite - HTML, CSS, PHP, JavaScript și multe altele. Și din această cauză, orice modificări ușoare făcute ici și colo devin greu de urmărit. Când va veni timpul să revenim și să editați tema sau să remediați erori neprevăzute, se va dovedi a fi destul de costisitor (atât din punct de vedere al timpului, cât și al bugetului).

menține organizarea codului
Temele secundare ajută dezvoltatorii web să mențină un cod organizat.

După cum sa discutat mai sus, temele copil sunt moștenite în mod activ de la temele părinte. Orice modificări pe care le faceți temei copil rămân acolo (ceea ce se întâmplă în temele copil rămâne în temele copil!) și sunt mai ușor de urmărit, deoarece va avea doar câteva sute de linii de cod (în cele mai agresive circumstanțe), spre deosebire de un câteva mii.

După cum probabil vă puteți da seama până acum, nu există dezavantaje în utilizarea temelor pentru copii. În realitate, vă protejează site-ul de erori accidentale.

Cum se creează o temă pentru copii în WordPress

Majoritatea temelor vin cu teme pentru copii, dar dacă găsești una pe placul tău care nu este, să creezi singur o temă pentru copii nu este dificilă. Voi demonstra tutorialul creând o temă copil pentru tema noastră Sparkling.

Tema Sparkling a lui Colorlib
Tema strălucitoare a lui Colorlib

Pasul 1: Creați un director pentru tema copil în instalarea WordPress.

  1. Navigați la directorul de teme al site-ului dvs. WordPress ( /wp-content/themes ).
  2. Creați un folder nou și denumiți-l sparkling-child . Este cea mai bună practică să dai temei copilului tău același nume ca și părintelui cu -child atașat la sfârșit.
directorul temei părinte, directorul temei secundare
Tema părinte – Tema copilului

Vom adăuga toate fișierele temei copil în acest folder. Acestea fiind spuse, singurul fișier de care o temă copil are nevoie pentru a funcționa corect este fișierul style.css .

Pasul 2: Creați un fișier style.css pentru noua temă copil.

  1. Navigați la directorul temei copil creat la Pasul 1, adică /wp-content/themes/sparkling-child .
  2. Creați un nou fișier .css în director și denumiți-l style.css .
  3. Copiați și inserați următorul cod în noul fișier style.css :

https://gist.github.com/rafaysansari/59ab402cffc540d050ed

În codul de mai sus, cele mai importante linii sunt cele care încep cu Numele temei , Template și @import . Trebuie să completați corect aceste rânduri dacă creați o temă secundară pentru o altă temă părinte. Linia @import asigură că nu trebuie să rescrieți de la zero regulile CSS ale temei părinte. Fără linia @import , noul site va avea doar conținutul încărcat pe el, fără stil.

Dacă tema dvs. părinte are mai multe foi de stil, săriți peste acest pas. Vă vom arăta cum să importați mai multe foi de stil folosind o funcție nativă WordPress în următorii pași.

Pasul 3: Creați fișierul functions.php (opțional).

Fișierul functions.php le permite dezvoltatorilor web să adauge funcționalități site-urilor lor WordPress utilizând funcții WordPress native și cod PHP.

  1. Navigați la folderul temei copilului dvs., adică sparkling-child .
  2. Creați un fișier .php și numiți-l functions.php .
  3. Adăugați următorul cod în fișierul functions.php:

https://gist.github.com/rafaysansari/6c3cc1606823d56388f4

Este important să rețineți că o temă copil nu necesită un fișier functions.php pentru a funcționa. De fapt, ar trebui să adăugați acest fișier numai dacă intenționați să modificați funcționalitatea temei părinte. În cele mai multe cazuri, o foaie de stil este suficientă, dar dacă tema părinte are mai multe foi de stil, atunci va trebui să creați un fișier functions.php .

Pasul 4: importați mai multe foi de stil (opțional).

Dacă, de exemplu, tema părinte pe care ați selectat-o ​​vine cu mai mult de o foaie de stil, importarea acestora în tema copilului dvs. @import va încetini site-ul dvs. web cu câteva secunde, ceea ce nu este bine. Nu doriți să creșteți timpul de încărcare a paginii site-ului dvs. dacă poate fi evitat cu câteva rânduri de cod.

  1. Navigați la directorul temei copilului și deschideți fișierul functions.php într-un editor de text.
  2. Adăugați următoarele linii de cod în fișierul functions.php sub eticheta de deschidere <?php :

https://gist.github.com/rafaysansari/9535343506d670226f4e

Funcția wp_enqueue_style() folosită în codul de mai sus va importa mai multe foi de stil în tema copilului, fără a încetini site-ul.

Notă: Cele mai bune practici pentru crearea temelor secundare sugerează că ar trebui să le importați întotdeauna folosind codul dat mai sus, indiferent de câte foi de stil are tema dvs. părinte.

Pasul 5: Încărcați tema copilului.

Acum că ați creat cu succes tema copilului, este timpul să o încărcați pe site-ul dvs. WordPress și să o activați.

  1. Comprimați directorul temei copil într-un fișier .zip .
  2. Conectați-vă la panoul de administrare WordPress și navigați la Aspect > Teme .
  3. Faceți clic pe butonul Adăugare nou pe ecranul următor.
Butonul Încarcă tema
Faceți clic pe butonul Încărcați tema.
  • Faceți clic pe butonul Încărcați tema pentru a continua.
  • Încărcați tema copilului
    Găsiți fișierul .zip al temei copil în unitate și încărcați-l.
  • Căutați fișierul .zip al temei copilului și încărcați-l.
  • Odată ce tema copil este încărcată, dați clic pe Activare .
  • De asemenea, puteți încărca tema copil prin clientul dvs. FTP prin copierea directă, inserând fișierul .zip în directorul de teme. Dacă creați o temă copil pentru o altă temă, faceți modificările necesare codului de mai sus.

    Acest tutorial este menit doar să demonstreze cum este creată o temă copil. Am creat o temă copil pentru Sparkling, pe care o puteți descărca direct dacă preferați să nu vă petreceți timp creându-vă propria.

    Personalizarea temei copilului dvs

    Presupunând că totul a decurs conform planificării, atunci când activați tema copil, site-ul dvs. ar trebui să arate la fel ca atunci când este activată tema părinte. Dar stai! Nu este scopul creării unei teme pentru copii pentru a face site-ul tău web să arate diferit?

    În această secțiune, vă vom arăta cum puteți începe să personalizați tema copilului pentru a face modificări.

    Aplicarea stilurilor personalizate

    Deoarece primul fișier (și fișierul obligatoriu) pe care l-am creat a fost , style.css , are sens să începem prin adăugarea de stiluri personalizate la tema copil folosindu-l. Adăugând cod CSS personalizat la foaia de stil, veți putea suprascrie foaia de stil a temei părinte.

    Cu CSS, puteți modifica fiecare aspect de design și stil al temei activate, de la culori și butoane până la dimensiuni și stiluri de font. Dezvoltatorii web cu un adevărat talent pentru CSS modifică întregul aspect al temei copil pentru a o face unică.

    Navigați la Aspect > Editor și adăugați cod CSS direct de acolo.
    Navigați la Aspect > Editor și adăugați cod CSS direct de acolo.

    Tot ce trebuie să faci este să adaugi cod CSS personalizat în partea de jos a fișierului style.css al temei copilului tău și ești gata. Aceia dintre voi care nu doresc să acceseze clientul FTP al site-ului lor de fiecare dată când trebuie făcută o simplă modificare pot naviga la editorul implicit al WordPress ( Aspect > Editor ) și adăuga cod CSS direct de acolo. Navigați la Aspect > Editor și adăugați cod CSS direct de acolo.

    Tot ce trebuie să faci este să adaugi cod CSS personalizat în partea de jos a fișierului cu tema copilului tău și ești gata.

    Tehnici alternative de modificare a temei

    Adăugarea codului CSS la fișierul style.css este cel mai simplu mod de a face modificări în tema copil. Cu toate acestea, dacă doriți să duceți lucrurile la următorul nivel și, probabil, să adăugați o nouă funcționalitate personalizată temei pentru copil, atunci lucrurile devin serioase. Există diferite tipuri de modificări pe care le puteți face (în afară de modificarea elementelor de proiectare), cum ar fi:

    • Adăugați noi funcții în fișierul functions.php . Am creat deja fișierul functions.php pentru tema copilului, așa că tot ce trebuie să faceți acum este să adăugați câteva funcții personalizate în funcție de funcționalitatea pe care doriți să o obțineți. Puteți codifica în PHP sau puteți utiliza funcții native WordPress.
    • Editați fișierele șablon. Dacă style.css și functions.php pur și simplu nu le decupează și mai trebuie să modificați tema, puteți copia și lipi fișierele șablon din tema părinte și le puteți edita în consecință.
    • Adăugați noi fișiere șablon. Dacă ați găsit șabloane care vă plac în altă parte (nu în directorul temei părinte) sau dacă doriți să vă creați propriile șabloane, le puteți adăuga direct la tema copil și mergeți de acolo.

    Puteți fi sigur că știți că site-ul dvs. WordPress va fi ferit de erori dăunătoare, neintenționate, indiferent de metoda(ele) pe care le adoptați pentru a face modificări temei dvs. activate. Dacă, probabil, ceva cu codul merge prost, veți ști exact unde a apărut greșeala și veți putea să o corectați. (Sugestie: este de obicei în ultimele rânduri pe care le-ați adăugat!)

    Unul dintre cele mai bune lucruri despre temele copil este că le permit utilizatorilor să personalizeze pe deplin tema părinte pentru a se potrivi cu marca site-ului lor, ceea ce este util atât pentru afacerile noi, cât și pentru cele consacrate. Și dacă doriți să vă reproiectați complet site-ul mai târziu, pe baza aceleiași teme părinte sau pe o nouă temă părinte, puteți oricând să creați o nouă temă copil și să mergeți de acolo!

    Încheierea

    Temele copil sunt modalitatea recomandată de a face modificări la o temă WordPress. Ei scutesc utilizatorii de a face greșeli potențial dăunătoare în fișierele lor originale și riscă să piardă modificările de fiecare dată când tema se actualizează.

    Am acoperit tot ce trebuie să știți despre temele pentru copii în WordPress, am discutat de ce sunt atât de importante și v-am ghidat printr-un tutorial aprofundat despre cum să vă creați propria temă pentru copii de la zero. Pentru a vă ajuta să începeți să faceți modificări, am încheiat cu o scurtă secțiune despre cum puteți începe personalizarea temei copilului.

    Sunteți de acord că toate modificările de design și funcționalitate ar trebui făcute prin teme pentru copii? Ați reușit să creați o temă copil și să o activați cu succes pe site-ul dvs. WordPress? Ne-ar plăcea să aflăm despre experiența ta, așa că anunțați-ne comentând mai jos!

    Spune-ne dacă ți-a plăcut postarea.