Cum se creează o temă copil WordPress

De obicei, este aproape imposibil să găsești tema perfectă; întotdeauna sunt unele modificări care trebuie făcute. Așadar, de ce să nu iei o temă implicită WordPress drăguță, cum ar fi Twenty Fifteen, și să o faci proprie, astfel încât să arate și să funcționeze așa cum îți dorești? Crearea unei teme pentru copil vă va economisi mult timp și dureri de cap pe drum (credeți-mă).

Pot vorbi din experiență personală. Am „moștenit” un site WordPress în care dezvoltatorul tocmai a spart tema părinte și încă îmi amintesc cât de frustrant a fost faptul că nu am putut actualiza tema de teamă ca aceasta să depășească personalizările care au oferit site-ului funcționalitatea. Nu știam ce era codul original și ce era personalizat, așa că a stat acolo, fără posibilitatea de actualizări.

Totuși, povestea are un final fericit. Eram mai nou pe WordPress la acea vreme, așa că m-a învățat de la început că modificarea unei teme părinte nu era o idee bună. Când site-ul a fost în sfârșit reproiectat, primul lucru a fost să preia personalizările și să le pună într-o temă copil.

O temă copil vă permite să lucrați într-un loc separat, fără ca munca dvs. să fie suprascrisă de o viitoare actualizare a temei părinte. Din punct de vedere tehnic, atunci când creați o temă secundară, creați un set separat de fișiere pe care le puteți utiliza pentru a personaliza tema fără a afecta tema părinte originală. Dacă modificați fișierele unei teme părinte, acele modificări vor fi suprascrise la următoarea actualizare a temei. Aceasta este o problemă importantă, deoarece actualizările pot include modificări ale caracteristicilor, remedieri de erori și măsuri de securitate importante. Este esențial să păstrați tema părinte actualizată și să utilizați o temă secundară pentru orice personalizare.

Bazele temei copilului

Temele copil sunt teme separate pe care le creați și care se bazează pe o temă părinte pentru funcționalitatea de bază. Când utilizați o temă copil, WordPress știe să o facă referire și să caute orice funcționalitate care este inclusă. Acest lucru este grozav deoarece vă permite să modificați numai părțile temei părinților pe care trebuie să le schimbați, făcând din aceasta o modalitate foarte eficientă de a adăuga personalizări la site-ul dvs. WordPress.

Pentru a săpa puțin mai adânc, iată cum funcționează temele copil la nivel de fișier. WordPress verifică dacă un fișier necesar este inclus în tema copil. Dacă este inclus, acel fișier cu temă copil este încărcat. Dacă nu există unul în tema copil, fișierul din tema părinte este încărcat. Singura excepție de la aceasta este fișierul functions.php, în care sunt încărcate atât versiunile părinte, cât și cele secundare. De obicei, există informații cruciale în fișierul functions.php. Dacă WordPress ar încărca doar versiunea temei copil (cu excepția cazului în care ați copiat totul), site-ul nu ar funcționa corect. Din fericire, WordPress încarcă ambele fișiere, așa că nu trebuie să vă faceți griji cu privire la copierea întregului fișier functions.php în tema copilului.

Amintiți-vă, puteți oricând să dezactivați tema copilului și să reveniți la original dacă este necesar. Este totuși o stradă cu sens unic; nu poți dezactiva părintele și te bazezi pe tema copilului.

Dacă adăugați personalizări la o temă WordPress, cel mai bine este să utilizați o temă copil. Ești gata să-ți creezi propriul tău? Acum vom parcurge procesul, pas cu pas.

Crearea unei teme pentru copil

Nu este atât de complex pe cât ar suna să creezi unul. De fapt, din punct de vedere tehnic, tot ce aveți nevoie sunt doar două fișiere: un style.css și un fișier functions.php . Majoritatea temelor pentru copii au mai mult decât atât, dar din punct de vedere tehnic, acestea sunt singurele două necesare.

Pentru a crea o temă copil, trebuie să aveți WordPress instalat împreună cu o temă părinte pe care doriți să o utilizați.

Creați un director de teme

Mai întâi, accesați directorul cu teme și creați un folder pentru noua dvs. temă. Dați-i un nume ușor de recunoscut. Pentru acest exemplu, voi numi tema mea child-example , astfel încât să fie ușor de găsit.

Realizați foaia de stil pentru tema copilului

Următorul pas, foarte crucial, este crearea foii de stil a temei copilului. Creați un fișier style.css . Rețineți că trebuie să fie numit style.css pentru ca lucrurile să funcționeze corect.

În continuare, va trebui să includeți câteva informații despre tema dvs.

Copiați și inserați acest lucru în style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Acest lucru poate părea foarte mult, dar există într-adevăr doar două care sunt necesare, care sunt Theme Name și Template . Theme Name îi spune WordPress numele temei copil. Template îi spune WordPress ce temă ar trebui să o considere ca temă părinte, ceea ce este foarte important.

Cele mai multe dintre celelalte se explică de la sine, dar există câteva dintre ele care ar putea avea nevoie de puține clarificări. Text Domain și Tags ar putea fi puțin confuze. Text Domain este folosit pentru traducerea șirurilor în scopuri de internaționalizare. Acesta este unic pentru tema dvs. și ar trebui folosit ori de câte ori utilizați funcții de traducere. Există mult mai multe informații în Codex și pot fi găsite în subiectul I18n pentru dezvoltatorii WordPress. Secțiunea Tags este o listă de etichete care sunt specifice temei WordPress. Pentru acest exemplu, m-am uitat la stilul părinte Twenty style.css , am luat etichetele de acolo și le-am pus în tema copil.

Utilizați stilurile parentale

Îți amintești cum caută WordPress mai întâi fișierele cu tema copilului? Momentan, tema copilului funcționează, dar nu pare foarte șlefuită pentru că încă nu ai făcut niciun styling. Dacă îl activați și reîncărcați pagina, va părea puțin dezordonat. Probabil va arata cam asa:

Să reparăm acest lucru, astfel încât să revină la tema părinte și să fie aplicat cel puțin ceva stil. Veți folosi în continuare tema copilului pentru stilul dvs. personalizat, dar mai întâi, să arătăm stilul părinte.

Pentru a ne asigura că încărcați foaia de stil a fișierului părinte, va trebui să o punem în coada de așteptare în tema copil. Veți avea nevoie de un fișier functions.php în tema copil pentru a pune următorul fragment.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Efectuarea unei personalizări CSS

Acum că se afișează stilurile părinte, haideți să schimbăm o parte din CSS pentru personalizarea temei copilului dvs. Pentru acest exemplu, stilarea unui element de fundal pentru conținutul paginii este o modalitate bună de a vedea tema copil în acțiune. A fost stilat alb în tema CSS părinte, dar haideți să-l schimbăm în albastru în tema copilului. Rețineți, stilurile părinte sunt încărcate mai întâi, iar personalizările dvs. vor fi încărcate după, așa că acestea vor fi ceea ce vom vedea.

Dacă sunteți utilizator Chrome, Instrumentele pentru dezvoltatori sunt foarte utile pentru a vedea stilul și experimentarea în browser. Accesați Vizualizare > Dezvoltator > Vizualizare sursă și selectați elementele paginii. Stilurile vor fi afișate în partea dreaptă. Am inspectat articolul care avea o clasă .hentry care are un fundal alb. Am lipit o valoare hexadecimal pentru a o testa mai întâi în browser.

Pentru a face această modificare, deschideți fișierul CSS din tema copil și adăugați informațiile CSS.

După cum puteți vedea, schimbările de stil pot fi făcute cu ușurință în tema copilului.

Modificarea funcționalității temei copilului dvs

Ajustarea stilului este destul de ușoară, dar cum rămâne cu alte lucruri precum antetul, subsolul, bara laterală etc.? Să presupunem că sunt câteva modificări de făcut în subsol. Copiați și inserați subsolul din tema părinte în copil. Fișierul footer.php poate fi deschis în editorul de text la alegere și modificat. Am decis să elimin linia „Proudly powered by WordPress”, așa că am șters-o din fișierul din tema copilului meu. Acesta este acum fișierul pe care WordPress îl va încărca primul, astfel încât acea linie de text nu se va afișa.

Crearea unei teme pentru copii este un obicei bun la care trebuie să intrați atunci când creați teme WordPress. Cu doar câțiva pași simpli, acestea sunt ușor de creat și întreținut. Menținerea personalizărilor separate de temele părinte este bună atât pentru scopuri de organizare, cât și pentru menținerea totul actualizat, ceea ce va scuti o mulțime de bătăi de cap pe drum.