Crearea unei teme pentru copii WordPress. De ce aveți nevoie de o temă pentru copii WordPress

Următoarea actualizare a platformei adaugă întotdeauna noi funcții, îmbunătățește protecția și aduce noi funcții. Deci, una dintre mai multe posibilități poate fi remarcată un instrument atât de util precum . Și aceasta este doar una dintre multele caracteristici. Și există altele mai semnificative, de exemplu, o temă de copil.

Ce este o temă copil WordPress?

Nu aș vrea să aprofundez acest subiect, având în vedere că site-ul oficial are un manual bun în limba rusă (). Voi spune doar câteva cuvinte despre beneficiile unei teme de copil și despre ce este aceasta.

Sens: o temă copil (DT) este destinată în principal editării corecte a temei părinte (cea care este activată în prezent). Utilizarea acestei metode va salva toate modificările aduse temei părinte (PT) data viitoare când aceasta este actualizată.

Beneficiu: Colosal. Deoarece aceasta este decizia corectă în orice modificare a RT.

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

Codexul WordPress (link de mai sus) are o descriere detaliată, pas cu pas, a modului de a crea o temă copil. De fapt, nu este nimic complicat aici. Mai degrabă, dimpotrivă: totul este foarte simplu. Dar nu toată lumea are dorința de a se încurca cu fișierele (nu le vom condamna - aceasta este o chestiune personală). Într-un astfel de caz, există pluginuri care vor face aproape toată munca pentru tine.

Vom discuta pe scurt despre această opțiune. Depozitul, ca întotdeauna, are o selecție mare de pluginuri pentru a implementa soluții la orice problemă. Alegerea mea a căzut pe plugin " Tema copil cu un clic”, care va crea o temă copil cu un singur clic.

După activarea modulului „One-Click Child Theme”, accesați fila „Appearance - Child Theme”. Această pagină conține trei câmpuri de completat:

Cum să lucrezi cu o temă de copil

Când trebuie să editați tema părinte (de exemplu, să faceți unele modificări, să adăugați un bloc nou, să ștergeți un bloc etc.), atunci în scopul păstrării sau chiar al securității, cel mai bine este să faceți acest lucru printr-o temă copil.

Fișiere tematice. Un fișier este copiat din RT, în care doriți să faceți ceva propriu, și transferat în DT (rețineți că dacă fișierul se află într-un subfolder al temei, atunci creați și același folder în DT ). Apoi începeți să lucrați cu el, schimbați, adăugați ceea ce aveți nevoie și verificați rezultatul.

Stiluri de design (style.css). Pentru a putea edita stilurile unei teme părinte direct într-o temă copil, acestea trebuie mai întâi importate prin fișierul style.css sau fișierul functions.php. În caz contrar, nu vor avea loc modificări. Și se face așa:

CSS @import

/* Numele temei: child-my-theme Descriere: Tema copilului

Funcţie

Add_action("wp_enqueue_scripts", "my_theme_enqueue_styles"); funcția my_theme_enqueue_styles() ( wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); )

funcții.php spre deosebire de cele anterioare, nu se modifică și nu este importată, ci este încărcată ca adaos la fișierul părinte. Nu trebuie să fie copiat din RT, doar creați un fișier în DT numit functions.php. Și apoi în modul obișnuit pentru noi să adăugăm funcțiile de care aveți nevoie. Astfel, va exista o abordare corectă a modificării și extinderii caracteristicilor temei părinte.

Inclusiv fișiere dintr-o temă copil. Pentru a conecta fișiere de la DT, trebuie să utilizați anumite funcții care indică calea corectă.

Inspirat de un articol despre habré, am decis să-mi creez propria versiune de creare a unei teme pentru copii în WordPress, deoarece există o mulțime de text și explicații despre habré. Eu, ca persoană care nu mă consider un mare profesionist în programarea pe WordPress, voi încerca să spun totul pe scurt și la obiect.

Dacă te uiți la WordPress pentru a doua oară și ai căzut într-o capcană cu o actualizare a temei pentru a treia oară, citește mai departe.

Deci, pentru ce sunt temele pentru copii? Am răspuns deja parțial la această întrebare. Cu o anumită frecvență, se găsesc găuri (din punct de vedere al securității) în nucleul, pluginurile și temele WordPress. De regulă, băieții deștepți implicați în dezvoltarea temelor, a pluginurilor și a CMS-ului însuși lansează actualizări. Toate personalizările dvs. dispar în momentul în care instalați aceste actualizări. Devine deosebit de rău într-o situație cu o temă profund modificată. Foarte deplorabil - în lipsa unei copii de rezervă.

Pentru a nu pierde toate modificările, este mai bine să nu le faceți în fișierele principale ale temei.

Am reușit să găsesc în coșurile WordPress cu o versiune veche a temei Twenty Twelve. O voi folosi ca exemplu.

1. Creați un folder cu temă copil:

mkdir wp-content/themes/twentytwelve-child

2. Pentru ca tema să funcționeze, aveți nevoie de două fișiere:

• stil.css
• funcții.php

Să le creăm:

atingeți wp-content/themes/twentytwelve-child/style.css
atingeți wp-content/themes/twentytwelve-child/fnctions.php

3. Numele temei este setat în style.css. Setul minim de cod pentru style.css:

/* Numele temei: Twenty Twelve Child Șablon: twentytwelve Autor: echipa WordPress Versiune: 1.0 Domeniu text: twentytwelve-child */ @import url("../twentytwelve/style.css")

Ultima linie încarcă stilurile din tema părinte.

În acest moment, tema apare în lista de teme din zona de administrare WordPress și arată astfel:

Copiați screenshot.png din tema părinte, astfel încât imaginea să apară. Îl poți edita dacă vrei:

cp wp-content/themes/twentytwelve/screenshot.png wp-content/themes/twentytwelve-child/

Acum lista de subiecte arată astfel:

După aceea, tema poate fi activată și chiar va funcționa.

Rămâne să adăugați toate fișierele modificate în folderul cu tema copil. Chestia este că WordPress dă prioritate scripturilor/fișierelor din folderul cu tema copil față de fișierele/scripturilor din tema părinte. Dacă vreunul dintre fișiere nu se găsește în folderul temei copil, acesta este preluat din tema părinte.

Tema implicită arată astfel:

Să-l modificăm puțin pentru claritate. Am copiat fișierul header.php din tema părinte, am schimbat afișarea meniului din acesta (deasupra titlului) și am eliminat afișarea descrierii blogului. În același timp, header.php original a rămas neatins. A ieșit așa:

După cum putem vedea, header.php din folderul cu tema copil a funcționat.

Ambuscadă numai cu stiluri. Dacă declarați un nou stil de afișare, cum ar fi lățimea unei zone de text în fișierul style.css al unei teme secundare, acesta nu va funcționa.

Pentru ca acesta să funcționeze, trebuie să creați o foaie de stil separată și să o includeți:

atingeți wp-content/themes/twentytwelve-child/custom.css

Introduceți codul de pe spoiler.site în el:

Site (marja: 0 automat; lățime maximă: 90%; depășire: ascuns; )

Din păcate, directiva @import url funcționează o singură dată în fișierul style.css, deci a doua foaie de stil nu poate fi inclusă.

În WordPress, stilurile sunt activate folosind funcția wp_enqueue_style() din fișierul functions.php.

Creați prima funcție personalizată în funcțiile.php al temei copil care va returna folderul sau uri-ul temei copil:

Funcția get_child_template_directory_uri() ( return dirname(get_bloginfo("stylesheet_url")); )

După aceea, putem folosi în siguranță get_child_template_directory_uri() în alte funcții personalizate.

Acum includem custom.css:

Funcția child_styles() ( wp_enqueue_style("twentytwelve-child-style", get_child_template_directory_uri() . "/custom.css"); ) add_action("wp_enqueue_scripts", "child_styles",12);

Dacă este necesar, puteți copia linia și adăuga alte fișiere CSS. Totul va funcționa.

Nu cred că trebuie să explic de ce fișierul functions.php ar trebui să înceapă cu

Apropo, numărul din add_action() determină prioritatea. 12 este cea mai tare acțiune, se înțelege că stilurile care au fost conectate folosindu-l vor avea prioritate față de cele standard din tema mamă.

Prin analogie cu stilurile, puteți adăuga și alte caracteristici, fără opțiunea de a le pierde la actualizare.

Nu voi mai dezvălui mai departe. Adăugați toate fișierele care au fost editate în folder, includeți toate fișierele css necesare și actualizați cât doriți.

(Vizitat de 1 223 de ori, 1 vizite astăzi)

Dezvoltatorii WordPress au adăugat posibilitatea de a crea teme copii, acum aveți posibilitatea de a vă crea propria subtemă pe baza părintelui. Funcția Creare temă copil vă permite să schimbați aspectul unei teme părinte și apoi să salvați tema modificată separat, fără a o afecta pe prima. În acest ghid, veți afla ce este o temă copil WordPress și cum să creați o temă copil în WordPress.

Pentru ceutilizați tema copilului

O temă copil vă permite să modificați tema părinte în funcție de dorințele dvs. Principalul avantaj al acestei caracteristici este că puteți face modificări la o temă copil fără a afecta părintele sau orice altă temă care o folosește ca bază.

Cum funcționează o temă pentru copii WordPress

O temă copil se află într-un folder separat și conține propriile fișiere stil.cssȘi funcții.php. Este posibil să adăugați fișiere suplimentare dacă este necesar, dar fișierele de bază ale temei sunt necesare pentru ca aceasta să funcționeze corect.

Folosind cel adecvat .cssȘi .php fișiere, puteți schimba aproape totul, de la opțiunile de stil și aspect la scripturile pe care le folosește o temă copil.

O temă copil poate fi comparată cu straturi din orice editor de imagini. Când un vizitator vă vizitează site-ul, tema secundară este încărcată mai întâi, apoi sunt incluse stilurile și caracteristicile lipsă din tema părinte. Ca urmare, utilizatorul primește cea mai mare parte a codului de la tema părinte, dar înainte de a fi afișat, acesta este modificat în funcție de setările temei copil.

Înainte de a începe acest ghid, veți avea nevoie de următoarele:

• Accesarea tabloului de bord WordPress
• Acces la (recomandat) sau

Pasul 1 – Crearea unei teme pentru copii în WordPress

Procesul de creare a unei teme pentru copil este destul de simplu și poate fi realizat cu ușurință urmând cu atenție acest ghid.

Trebuie să creați un folder pentru tema copil în directorul implicit de teme WordPress wp-conținut/teme. Pentru comoditate și pentru a menține ordinea în director, este mai bine să creați un folder cu sfârșit -copil după numele temei părinte. Dacă doriți, puteți adăuga numele unui anumit proiect. Rețineți că numele directorului nu trebuie să conțină spații pentru a evita posibile erori. Utilizați un client FTP sau un Manager de fișiere pentru a crea un folder nou. Vă recomandăm să utilizați clientul FTP gratuit FileZilla

În acest tutorial vom folosi Managerul de fișiere pentru a crea o temă copil bazată pe tema implicită Twenty Seventeen, astfel încât calea completă către folder va arăta astfel wp-content/themes/twentyseventeen-child.

1. Conectați-vă la panoul de control Hostinger și faceți clic pe pictogramă Manager de fișiere.
2. Navigați la directorul în care este instalat WordPress (de obicei public_html), Mai departe wp-conținut → teme.
3. Faceți clic pe butonul dosar nou, introduceți un nume pentru tema copil și faceți clic Crea.

1. Introduceți folderul cu tema copil creat.
2. Faceți clic pe butonul Fișier nou, introduce stil.css ca nume de fișier și faceți clic Crea.

1. Lipiți următorul cod în fișier:

/* Numele temei: Twenty Seventeen Child Tema URL: http://hostinger-tutorials.ru/twentyseventeen-child/ Descriere: Twenty Seventeen Child Theme Autor: John Doe Autor URL: http://hostinger-tutorials.ru Șablon: twentyseventeen Versiune: 1.1 Domeniu text: twentyseventeen-child */ CSS personalizat merge după această linie

1. Schimbați toate valorile pentru a se potrivi cu domeniul și tema dvs. Cele mai importante domenii sunt ȘablonȘi Numele temei, deoarece îi spun WordPress pe ce temă părinte se bazează tema copilului tău. Apoi, faceți clic salva pentru a salva modificările.

1. Adauga fisier funcții.phpîn același director, dar nu lipiți acolo codul din tema părinte, deoarece trebuie să rămână separat de aceasta. În schimb, creați un fișier gol sau adăugați noi funcții .php după cum este necesar pentru tema copilului dumneavoastră.
2. Din tabloul de bord WordPress, accesați Aspect → Temeși apăsați butonul Activati pe tema copilului dvs.

1. Accesați site-ul dvs., puteți vedea că tema nu este afișată corect (ca în imaginea de mai jos). Nu intrați în panică, asta se datorează faptului că fișierul funcții.php nu încărcă încă CSS din tema părinte.

1. Din tabloul de bord WordPress, accesați Aspect → Editorși selectați fișierul funcții.php.
2. WordPress are capacitatea de a încărca CSS dintr-o temă părinte. Copiați acest cod într-un fișier funcții.php tema copilului:

1. Clic Actualizați fișierulîn partea de jos a paginii pentru a salva modificările.
2. Vizitați din nou site-ul dvs. Acum CSS-ul este încărcat și tema copilului arată la fel cu tema părinte.

După cum puteți vedea, procesul de creare a unei teme pentru copil este destul de simplu dacă aveți abordarea corectă și urmați ghidul nostru pas cu pas.

Pasul 2 — Configurarea unei teme pentru copii WordPress

Acum probabil că doriți să începeți să schimbați aspectul temei copilului dvs. cât mai curând posibil. Exact pentru asta ai creat-o, nu?

Pasul 2.1 - Personalizarea aspectului temei copilului dvs

Pentru a personaliza aspectul temei, trebuie să editați fișierul CSS personalizatîn directorul de teme pentru copil. Pentru a face acest lucru, puteți utiliza un editor de text și un client FTP, un manager de fișiere sau editorul WordPress. (Aspect → Editor). De asemenea, aveți nevoie de cunoștințe de bază despre regulile CSS și de abilitatea de a inspecta elementele site-ului folosind un browser.

De exemplu, pentru a schimba culoarea de fundal, adăugați următoarele reguli CSS la fișier stil.css:

Site-content-contain (culoarea de fundal: #d5ffa0; poziție: relativă; )

Mai jos este cum va arăta site-ul dvs. după efectuarea modificărilor.

Acest proces este aplicabil și pentru modificarea altor elemente ale site-ului.

Pasul 2.2 - Adăugarea și eliminarea caracteristicilor

Un alt beneficiu al utilizării unei teme copil este capacitatea de a avea fișiere separate funcții.php, care, ca și pluginurile, sunt folosite pentru a adăuga (sau elimina) anumite funcții. Având un dosar funcții.phpîntr-o temă copil, puteți fi sigur că nu va fi ștearsă sau modificată după actualizarea temei implicite.

Pentru a adăuga noi caracteristici temei dvs., adăugați codul PHP necesar în fișier funcții.php tema copilului tău. De exemplu, acest cod va dezactiva funcția de căutare WordPress:

Funcția disable_search($query, $error = true) ( ​​​​dacă (is_search()) ( $query->is_search = false; $query->query_vars[s] = false; $query->query[s] = false ; / / la eroare dacă ($eroare == adevărat) $interogare->is_404 = adevărat; ) ) add_action("parse_query", "disable_search"); add_filter("get_search_form", create_function("$a", "return null;"));

Concluzie

O temă copil WordPress oferă posibilitatea de a crea un proiect complet nou bazat pe tema părinte, fără nicio modificare a fișierelor sale. Cu puțină manipulare a codului și a directoarelor, vă puteți personaliza site-ul așa cum doriți.

Temele copil din WordPress vă permit să faceți modificări temelor existente și în așa fel încât astfel de modificări să nu se piardă la actualizarea temei originale (sau părinte). Pe lângă aspect, temele pentru copii vă permit să schimbați aspectul și chiar funcționalitatea temei părinte, extinzându-l la propriile nevoi.

Suportul pentru temele pentru copii în WordPress există de mult timp, dar majoritatea utilizatorilor de astăzi preferă să facă modificări direct codului temei sursă. În acest articol, vom explica cum funcționează temele pentru copii în WordPress și de ce ar trebui folosite temele pentru copii pentru a face orice modificări temelor existente.

Ce este o temă de copil

O temă copil din WordPress este o temă care moștenește aspectul și senzația unei teme părinte (originale). O astfel de moștenire face ușoară schimbarea și completarea anumitor părți ale temei părinte fără a schimba tema originală în sine. Cu această abordare, actualizarea temei părinte nu va afecta astfel de modificări.

Tema părinte poate fi orice altă temă WordPress (cu excepția temelor copil), iar pentru ca tema copil să funcționeze, ambele teme trebuie să fie instalate, dar copilul trebuie activat.

Cum se creează o temă pentru copil

Cea mai simplă temă copil constă dintr-un singur fișier style.css care specifică numele temei copil și numele directorului temei părinte. Același fișier face referire adesea la foaia de stil a temei părinte folosind directiva CSS @import.

De exemplu, vom crea o temă copil numită My Child Theme și vom folosi tema implicită Twenty Twelve ca temă părinte.

În primul rând, asigurați-vă că tema părinte există - găsiți directorul twentytwelve în wp-content/themes . Apoi creați un director nou în wp-content/themes și numiți-l my-child-theme . În acest director nou, creați un fișier style.css și inserați următorul titlu în el:

/** * Numele temei: Tema copilului meu * Șablon: twentytwelve */ @import url("../twentytwelve/style.css");

Cu ajutorul acestui titlu, am determinat numele noii noastre teme și am indicat și părintele. Directiva @import în acest caz încarcă toate stilurile din tema Twenty Twelve, pe deasupra cărora ne vom face modificările. Fără această directivă, tema noastră copil va moșteni doar șabloanele (markup) ale temei părinte, nu și stilul.

După aceea, directorul dvs. de teme ar trebui să arate cam așa:

Când accesați Aspect → Teme, veți vedea că noua dvs. temă este deja disponibilă pentru activare.

Dacă îl activați și navigați la pagina dvs. de pornire, veți vedea că tema copilului dumneavoastră arată exact ca tema implicită Twenty Twelve.

Lucrul cu stiluri

Stilurile CSS ale temei secundare pot fi setate direct în fișierul style.css imediat după directiva @import. De exemplu, pentru a seta culorile de fundal și de legătură în tema dvs., adăugați următorul cod la sfârșitul foii de stil:

Corp ( fundal: roșu; ) a ( culoare: verde; )

Astfel, puteți schimba stilurile oricăror elemente ale temei părinte și puteți găsi cu ușurință elementul necesar folosind instrumentele de dezvoltare din browserul Google Chrome sau folosind extensia Firebug pentru browserul Firefox.

Lucrul cu șabloane

Cu ajutorul unei teme pentru copil, puteți modifica cu ușurință și șabloanele temei părinte în sine. Pentru a face acest lucru, trebuie doar să creați un fișier în tema copil cu același nume ca șablonul din tema părinte. De exemplu, pentru a înlocui șablonul footer.php cu al dvs., creați un fișier footer.php în directorul cu tema copilului: