Tema copil Wordpress. Cum se creează o temă pentru copii WordPress: instrucțiuni pas cu pas. Editarea altor fișiere șablon

Am eliberat carte noua„Marketingul de conținut în în rețelele sociale: Cum să intri în capul abonaților tăi și să-i faci să se îndrăgostească de marca ta.”

Funcționarea temelor copiilor („fiice”) se bazează pe relația lor cu temele lor parentale („părinții”). Este important să țineți cont de faptul că temele gratuite și plătite sunt inițial părinți, prin urmare, fiica le copiază parametrii și proprietățile și primește, de asemenea, un set standard al funcțiilor sale. În viitor, ținând cont de nevoile unei anumite resurse de internet, setul acestor opțiuni poate fi extins.

Dacă atingem terminologia, atunci despre care vorbim despre o temă specială care capătă semnificația altuia, care acționează ca părinte. De ce sunt create? Pentru a modifica temele WordPress existente și astfel crește numărul acestora.

Care este diferența dintre „fiică”

Tema copil WordPress vă permite să adăugați modificările necesareși ajustări. În continuare ne vom uita la cum să-l creăm, dar înainte de asta ne vom uita la diferențele cheie:

Modificările aduse modificării părinte nu afectează modificarea copilului. De aici rezultă că, după dezvoltare, acestea sunt independente unele de altele.
Derivatul funcționează numai dacă părintele este instalat, iar activarea lui are loc mai târziu.
Filialele sunt legate doar de baza lor și nu sunt interconectate nici cu una, nici cu alta.

Este convenabil să lucrezi?

O temă pentru copii WordPress este o idee grozavă, cu o gamă largă de beneficii. Personal, l-am recomanda ca standard cu produse premium. Să enumeram doar câteva dintre avantaje:

Ele salvează automat ajustările efectuate. Datorită acestui lucru, puteți face ajustări direct la cod, fără riscul ca setările să se piardă sau să se piardă în timpul actualizării.
Lucrul cu ei este o pregătire excelentă pentru a trece la scrierea codului principal pentru variantele părinte.
Flux de lucru îmbunătățit. Cu un singur cadru tematic la dispoziția dumneavoastră, puteți crea site-uri web de diferite complexități și funcționalități.

Deoarece aceasta este o continuare a celei părinte, setul de caracteristici și funcții este identic aici. Componentele principale:

Director (dosarul/locația componentelor fișierului).
„style.css”, unde sunt specificate proprietățile principale și suplimentare.
„functions.php”, unde este scrisă definiția funcțiilor.

Nu există restricții privind adăugarea de șabloane, dar componentele enumerate în obligatoriu sunt prezente în oricare.

Operațiune

„Fiicele” sunt localizate în propriul folder și au „functions.php” și „style.css” separate. Puteți scrie oricând fișiere auxiliare, dar această pereche este responsabilă pentru funcționarea corectă - fără blocări sau probleme.

La utilizarea corectă dintre formatele specificate, puteți edita aproape orice parametri inițiali, inclusiv stilul, elementele de aspect individuale, scripturile etc.

Dispozitivul tematic este similar cu straturile editoriale ale editorilor foto. Dacă un utilizator vă vizitează resursa de internet, o „fiică” se deschide în fața lui, iar apoi opțiunile și stilurile lipsă sunt încărcate de la părinte. În cele din urmă, cea mai mare parte a codului este transmisă de la părinte, dar trebuie modificat pentru a se potrivi cu setările copilului înainte de a putea fi utilizat.

Cum se creează

În primul rând, verificați dacă aveți tot ce aveți nevoie la dispoziție. Și anume, acces la FTP sau la un manager de fișiere, acces deschis la panoul de control WordPress în sine. Asadar, haideti sa începem.

Pasul nr 1. Crearea unei teme pentru copii WordPress

Acesta este un proces destul de simplu. Dacă urmați instrucțiunile în detaliu, orice utilizator îl poate stăpâni.

În primul rând, creăm un folder pentru fiica noastră în directorul standard. Pentru ca directorul să aibă ordine și conținutul să fie sistematizat, este mai bine să denumești folderul după exemplul „Numele părintelui + copilul final”. Pentru comoditate, puteți adăuga numele unui anumit proiect pentru care creăm o temă. Principalul lucru este că numele directorului nu are spații, altfel acest lucru poate duce la erori. Un manager de fișiere sau un client FTP vă va ajuta să creați dosar nou. Astăzi, un astfel de client FTP precum FileZilla s-a dovedit bine.

De exemplu, să luăm drept bază „Twenty Seventeen”, care este familiar pentru mulți. Prefer să lucrez cu Managerul de fișiere, așa că calea mea către folderul creat arată astfel:

Facem următoarele:

Cu siguranță, ești convins că crearea este un proces ușor. Trebuie doar să urmați cu strictețe instrucțiunile și să lucrați cu abordarea corectă.

Pasul nr 2. Setări

Pentru a începe, modifica, completa, adapta „fiica” la solicitările și cerințele site-ului tău, trebuie să faci setările corect. Ne vom ocupa de asta în ordine.

Mai întâi trebuie să configurați aspect.

Pentru a face acest lucru, vom face ajustări la „custom.css”, care se află în director. Acest lucru se poate face printr-un client FTP, un obișnuit editor de text, manager de fișiere sau un editor WordPress special ( îl puteți găsi deschizând „Aspect”, apoi „Editor”). Aici veți avea nevoie de cunoștințe minime despre reguli folosind CSS, precum și abilitatea de a verifica elementele site-ului printr-un browser. De exemplu, pentru a schimba culoarea de fundal în „style.css”, scriem următoarea regulă CSS:

Următoarea imagine arată cum se va schimba designul site-ului după ce au fost făcute ajustările. Fundalul a devenit verde deschis:

În acest fel puteți edita orice elemente existente pe site.

2. Lucrul cu funcții.

Utilizarea și lucrul cu „fiice” oferă, de asemenea, avantajul de a putea menține două „functions.php” independente. Să vă reamintim că aceste fișiere sunt folosite pentru a elimina funcții vechi și pentru a adăuga funcții noi. Dacă sunt disponibile, nu trebuie să vă faceți griji cu privire la siguranța sau problemele în funcționarea documentului. Chiar dacă baza este actualizată, aceasta va rămâne neschimbată.

Pentru adaugare noua optiune Noul cod PHP este de asemenea inclus în fișier. De exemplu, codul de mai jos va elimina opțiunea de căutare WordPress.

Servicii speciale pentru a ușura munca dezvoltatorului

Puteți face procesul de creare mai ușor folosind o serie de plugin-uri speciale. Biblioteca WordPress oferă o selecție largă de plugin-uri, dintre care majoritatea sunt gratuite. Utilizarea pluginurilor simplifică foarte mult procesul de dezvoltare. Să ne uităm la cele mai populare plugin-uri.

Copil Themify.

Acesta este cel mai simplu și mai ușor de utilizat plugin cu intuitiv interfață clară. Multe setări aici pot fi făcute cu un clic pe un buton.

2. Tema Copilului Configurat.

Aici puteți crea și o „fiică”, iar acest lucru va dura doar câteva clicuri. Editor CSS Este destul de puternic aici, ceea ce vă permite să configurați funcționalități avansate. Plugin-ul realizează automat identificarea reguli cheie CSS și nu le afectează la editare.

3. _copil Tematica Boilerplate.

Prezentat aici șabloane gata făcute a forma „fiice”. Șablonul este numit simplu - „_child” - și este conceput special pentru a simplifica munca. Șablonul oferă o temă intuitivă și necesită doar să furnizați un link către „părinte”. Probă de acest tip vă permite să creați opțiuni profesionale - 2 fișiere gata făcute au fost deja create aici, standard „functions.php” și „style.css”.

Primul are o funcție specială numită „aa_enqueue_styles()”. Opțiunea vă permite să creați o coadă de foi de stil, unde merg mai întâi cele părinte, iar apoi copiii. Ca urmare, stilul celui din urmă este întotdeauna determinat de primul.

Majoritatea dezvoltatorilor leagă aceste tabele împreună în CSS, dar acest lucru face mai mult rău decât bine. Browserul durează mult timp pentru a încărca site-ul, deoarece trebuie să încărcați mai întâi stilurile din „părinte”, apoi din derivat. Dacă puneți foile de stil separat, sarcina browserului va fi mai ușoară și viteza de încărcare va crește.

Iată codul cu care puteți adăuga această opțiune:

Al doilea fișier are un antet de bază care conține informații speciale. Aceste informații îi permit WordPress să o recunoască ca foaie de stil „copil”. Prin urmare, este deosebit de important să scrieți codul pentru „style.css”:

Să rezumam

Nu contează nivelul tău de competență în programare sau experiența cu WordPress. Crearea unei teme copii WordPress este ușoară și nu există niciun risc ca setările să fie șterse după ieșire. În scris cod mic sau efectuarea de modificări la ceea ce a fost deja scris și realizat actiuni simple cu directorul vă puteți schimba site-ul. Principalul lucru este să urmați instrucțiunile, trecând treptat de la un punct la altul. Nu uitați următoarele: dacă există actualizări pentru „părinte”, „fiica” nu se modifică, această regulă se aplică modificărilor aduse conținutului, setărilor și așa mai departe.

Experimentează, încearcă diverse opțiuniși caută-l pe cel mai bun pentru tine.

Conform statisticilor medii, aproximativ 80% dintre site-uri web folosesc teme de bază WordPress și doar aproximativ 20% folosesc o temă copil. Acest lucru se poate explica prin faptul că majoritatea clienților nu înțeleg ce este tema copilului WordPress sau cred că este dificil de configurat. În tutorialul de astăzi, vom analiza aspectele practice ale creării și utilizării unei teme pentru copii, precum și importanța acesteia.

De ce să folosiți o temă pentru copii

Crearea unei teme secundare în timp ce editați codul temei vă poate economisi mult stres. Temele copil vă permit să faceți modificări fără a afecta codul temei părinte (principale), ușurează actualizarea temei părinte și vă permite să salvați modificările. Puteți oricând să dezactivați tema copilului și să reveniți la cea originală.

Practică

În exemplul nostru, vom crea o temă copil pentru tema principală sebweo. În primul rând, trebuie să creăm un folder nou pentru tema copil (să-i spunem sebweo-child, de exemplu). Calea completă de la rădăcina site-ului va fi /wp-content/themes/sebweo-child/ . În noul folder de temă, creați un fișier style.css (singurul fișier necesar) și completați informațiile evidențiate cu comentarii (între /* Și */ ), ca în exemplul de mai jos. Numele temei, URI-ul, Descrierea și Autorul pot fi complet schimbate pentru a se potrivi nevoilor dumneavoastră.

Șablon Com: sebweo Versiunea: 1.0.0 */ @import url("../sebweo/style.css");

Cele mai importante părți ale acestui fișier sunt secțiunile „Șablon:”(identifică tema părinte) și o instrucțiune CSS @import (importă stiluri CSS din tema originală). Asigurați-vă că calea către fișierul CSS principal al temei părinte este corectă și în parametru „Șablon:” Numele temei părinte este corect. Ajustați acest lucru pentru a se potrivi cu numele și căile dvs. Toate aceste date sunt sensibile la majuscule și minuscule! În exemplul nostru, numele temei (și, în consecință, numele folderului cu tema părinte) este scris cu litere mici; dacă utilizați un nume cu majuscule, ar trebui să îl scrieți astfel (de exemplu, Sebweo).

Activarea unei teme pentru copii

După ce ați creat un folder cu temă copil și un fișier style.css, puteți activa noua temă copil. Activarea unei teme copil nu este diferită de activarea unei teme obișnuite: accesați doar Consola WordPress dupa adresa Aspect > Teme (Apariții > Teme), găsiți tema pe care tocmai ați creat-o și activați-o (faceți clic pe butonul Activati pe blocul cu subiectul).

Editarea stilurilor CSS ale temei principale

Deci, am creat o temă pentru copii. Acum, stilurile de pe site arată la fel ca și cu tema originală. Asta pentru că am importat totul Stiluri CSS din tema originală (vă amintiți instrucțiunea @import?). Pentru a edita stiluri, adăugați orice modificări la fișierul CSS al temei copilului folosind instrucțiunea @import. Stilurile dintr-o temă copil au prioritate, deoarece sunt încărcate după stilurile temei principale și astfel le suprascriu.

De exemplu, trebuie să ne schimbăm culoare de fundal site de la #fff la #f5f5f5. Pentru a face acest lucru, putem adăuga codul CSS corespunzător în fișierul sebweo-child/style.css:

Șablon Com: sebweo Versiunea: 1.0.0 */ @import url("../sebweo/style.css"); /* rescrie stilurile temei principale */ body (culoare de fundal: #f5f5f5; )

Salvați fișierul și reîmprospătați site-ul: veți vedea că culoarea de fundal s-a schimbat (presupunând, desigur, că tema principală a folosit o culoare de fundal albă pentru eticheta body).

Editarea fișierului functions.php

Fișierul functions.php este folosit de obicei pentru a conține funcțiile principale ale temei. Când utilizați o temă copil fără acest fișier, aceasta va fi încărcată automat din tema părinte. Dar dacă trebuie să adăugați altele funcții speciale la tema ta, poți face acest lucru creând un nou fișier functions.php în folderul temei copilului tău. Vă rugăm să rețineți că noile funcții vor fi descărcate direct inainte de funcțiile temei părinte. Fișierul functions.php al temei copilului dvs. ar trebui să înceapă cu eticheta. Puteți adăuga codul PHP dorit între aceste etichete.

Editarea altor fișiere șablon

Pe lângă modificările CSS și ale caracteristicilor, puteți face modificări structurale temei dvs. prin ajustare fișiere php-sabloane. Acest lucru ar trebui făcut cu prudență, dar vă permite să personalizați orice parte a temei. Spre deosebire de editarea fișierului functions.php, unde funcțiile temei originale sunt importate automat, atunci când editați fișierele șablon ale unei teme secundare, acestea înlocuiesc complet șabloanele din tema părinte. Fișierul cu tema părinte este ignorat și cel nou (din tema copil) este folosit în schimb. Primul lucru pe care trebuie să-l facem este să recreăm dosar vechiînainte de a începe să-l schimbăm. Pentru a face acest lucru, pur și simplu copiați fișierul șablon din tema părinte și inserați-l în folderul temei secundare. De exemplu, dacă vrem să schimbăm fișierul șablon pentru antetul site-ului (header.php), pur și simplu îl copiem din /wp-content/themes/sebweo/ și îl lipim în /wp-content/themes/sebweo-child/ ( înlocuiește-l cu propriul tău mod!).

WordPress va folosi acum acest fișier în locul celui vechi, deoarece numele și locația lui sunt aceleași. Deci acum putem deschide fișierul dorit în tema copil și facem modificările necesare.

Avantajele și dezavantajele unei teme pentru copii

Beneficiile utilizării unei teme pentru copii WordPress

Actualizare sigură:

O temă copil moștenește automat caracteristicile, stilurile și șabloanele temei părinte. Acest lucru ne permite să facem modificări site-ului folosind teme secundare fără a schimba tema părinte. Când apare o nouă versiune a temei părinte, o puteți actualiza în siguranță, deoarece toate modificările sunt stocate în tema copil.

Usor de extins:

O temă pentru copii vă oferă mai multă flexibilitate fără a scrie cantitate mare cod. Puteți schimba doar selectiv fișierul necesar s șabloane și funcții fără a edita complet alte fișiere șablon. Puteți adăuga funcții noi și multe altele.

Backup:

Când creezi un subiect nou, trebuie să te gândești la toate scenarii posibileși codul acestuia. Cu toate acestea, atunci când lucrați la o temă de copil și ați uitat să scrieți cod specific, atunci funcționalitatea temei părinte vă va fi întotdeauna disponibilă ca copie de rezervă.

Dezavantajele utilizării unei teme pentru copii WordPress

Unul dintre cele mai mari dezavantaje ale utilizării temelor copil este timpul necesar pentru a învăța codul temei părinte.
Un alt dezavantaj este adesea că dezvoltatorii temei părinte pot rescrie complet o caracteristică pe care ați folosit-o în tema copilului sau pot face modificări care distrug complet tema copilului. Din moment ce actualizarea temei este punct-cheie Pentru securitatea site-ului, compatibilitatea cu alte funcții și pluginuri, va trebui să monitorizați modificările semnificative care pot veni odată cu actualizarea.

ÎN următoarea actualizare platformele adaugă mereu noi funcții, îmbunătățesc protecția și apar noi oportunități. Deci, una dintre mai multe posibilități poate fi remarcată după cum urmează unealtă folositoare, Cum . Și aceasta este doar una dintre multele funcții. Și există și altele mai semnificative, de exemplu, tema copilului.

Ce este o temă copil WordPress?

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

Sens: tema copil (CT) este concepută în principal pentru a edita corect tema părinte (cea activată în acest moment). Folosirea acestei metode va salva totul modificările efectuate tema părinte (PT) data viitoare când este actualizată.

Beneficiu: Colosal. Pentru că asta solutie corectaîn orice modificare a RT.

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

Codul WordPress (link de mai sus) intră în detalii descriere pas cu pas pași pentru a crea o temă copil. În esență, nu este nimic complicat aici. Dimpotrivă: totul este foarte simplu. Dar nu toată lumea are dorința de a schimba fișierele (nu le vom judeca - aceasta este o chestiune personală). În astfel de cazuri, există plugin-uri care vor face aproape toată munca pentru tine.

Vom vorbi pe scurt despre această opțiune. În depozit, ca întotdeauna, mare alegere plugin-uri în implementarea soluțiilor la orice problemă. Alegerea mea a căzut pe plugin " Tema copilului cu un singur clic", care va crea o temă copil cu un singur clic.

După activarea modulului „One-Click Child Theme”, accesați fila „Appearance – Child Theme”. Există trei câmpuri de completat pe această pagină:

Cum să lucrezi cu o temă de copil

Când trebuie să editați tema părinte (de exemplu, faceți unele modificări, adăugați bloc nou, ștergeți un bloc etc.), apoi î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 în care trebuie să faceți ceva propriu este copiat din RT și transferat în DT (rețineți că, dacă fișierul se află într-un subdosar al subiectului, atunci creați și același folder în DT). Apoi începeți să lucrați cu el, schimbați-l, adăugați ceea ce aveți nevoie și verificați rezultatul.

Stiluri de design (style.css). Pentru a putea edita stilurile temei părinte direct în tema copil, trebuie mai întâi să le importați prin fișierul style.css sau fișierul functions.php. În caz contrar, modificările nu vor avea loc. Și asta 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ă sau importă, ci este încărcat ca o completare la fișierul părinte. Nu trebuie să-l copiați din RT, doar creați un fișier în DT numit functions.php. Și apoi, în modul obișnuit, îi adăugăm funcțiile de care aveți nevoie. Așa va fi abordarea corectă pentru a modifica și extinde capacitățile 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ă.

Dezvoltatorii WordPress au adăugat posibilitatea de a crea teme copii, acum ai ocazia să-ți faci propria subtemă pe baza celei părinte. Caracteristica Creare temă copil vă permite să schimbați aspectul temei 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 o temă pentru copii

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ă copil WordPress?

Tema copilului se află în folder separatși îi conține propriile dosare stil.cssȘi funcții.php. Dacă este necesar, se poate adăuga fișiere suplimentare, dar fișierele principale ale temei sunt necesare pentru ca aceasta să funcționeze corect.

Folosind adecvat .cssȘi .php fișiere, puteți schimba aproape totul, de la opțiunile de stil și aspect până la scripturile pe care le folosește tema 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, iar 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-l afișa, acesta este modificat în funcție de setările temei copil.

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

Acces la panou Gestionarea 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 standard Teme WordPress wp-conținut/teme. Pentru comoditate și menținerea ordinii în director, este mai bine să creați un folder cu sfârșit -copil după numele subiectului 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 de evitat posibile erori. Pentru a crea un folder nou, utilizați un client FTP sau un Manager de fișiere. Vă recomandăm să utilizați client FTP gratuit FileZilla

În acest tutorial vom folosi File Manager pentru a crea o temă copil bazată pe tema standard Twenty Seventeen, deci calea completă către folder va arăta astfel wp-content/themes/douăzeci și șaptezeci-copil.

Conectați-vă la panoul de control Hostinger și faceți clic pe pictogramă Manager de fișiere.
Accesați folderul în care este instalat WordPress (de obicei public_html), Mai departe wp-conținut → teme.
Faceți clic pe butonul dosar nou, introduceți numele temei copil și faceți clic Crea.

Accesați folderul cu tema copil pe care l-ați creat.
Faceți clic pe butonul Fișier nou , introduce stil.css ca nume de fișier și faceți clic Crea.

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

/* Numele temei: Twenty Seventeen Child Theme 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

Schimbați toate valorile pentru a se potrivi cu domeniul și subiectul 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ți pentru a salva modificările.

Adăugați un fișier funcții.phpîn același director, dar nu lipiți acolo codul din tema părinte, deoarece ar trebui să rămână separat de aceasta. În schimb, creează dosar gol sau adăugați noi funcții .php necesare pentru tema copilului dumneavoastră.
Din tabloul de bord WordPress, accesați Aspect → Temeși apăsați butonul Activati pe tema copilului dvs.

Vizitează-ți site-ul, s-ar putea să vezi că tema nu este afișată destul de 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.

Din tabloul de bord WordPress, accesați Aspect → Editorși selectați fișierul funcții.php.
WordPress are o caracteristică Se încarcă CSS din subiectul părinte. Copie acest cod la dosar funcția.php tema copilului:

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

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

Pasul 2 - Configurarea unei teme pentru copii WordPress

Acum probabil că veți dori să începeți rapid să schimbați aspectul temei copilului dvs. Exact de 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 temelor copilului tău. Pentru a face acest lucru, puteți utiliza un editor de text și un client FTP, un manager de fișiere sau Editor WordPress (Aspect → Editor). De asemenea, aveți nevoie de câteva cunoștințe de bază despre Reguli CSSși capacitatea de a verifica elementele site-ului folosind un browser.

De exemplu, pentru a schimba culoarea fundal, adăugați următoarele Reguli CSS la dosar 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 poate fi folosit și pentru a schimba alte elemente ale site-ului.

Pasul 2.2 - Adăugarea și eliminarea caracteristicilor

Un alt avantaj al folosirii 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 de siguranța acesteia, deoarece nu va fi ștearsă sau modificată după actualizarea temei standard.

Pentru a adăuga noi funcții 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 vă permite să creați o temă completă proiect nou bazat pe tema părinte, fără nicio interferență cu fișierele acesteia. Cu puțin cod și lucrând cu directoare, vă puteți personaliza site-ul cât de mult doriți.

Prieteni, salut tuturor. Mă bucur să vă urez bun venit pe blogul meu. Și astăzi vreau să vorbesc despre crearea unei teme pentru copii WordPress. Astăzi, aceasta este cea mai optimă abordare atunci când creați un site web pe platforma WP.

După cum știți, pentru a crea un site web trebuie să urmați anumiți pași. Și unul dintre acești pași este alegerea unei teme pentru site-ul sau blogul tău. Există o mulțime de subiecte, iar atunci când alegi, trebuie în primul rând să te ghidezi după caracteristici tehnice(validitatea codului, viteza de încărcare, mobilitate, compatibilitate între browsere etc.). Și designul poate fi întotdeauna modificat pentru a se potrivi nevoilor unui anumit proiect.

Ce este o temă pentru copii WordPress

Dar, dacă tema este actualizată în mod regulat, atunci toate modificările pe care le faceți vor fi resetate la setările de bază.

Deci, o temă copil este o copie 100% a temei părinte (tema principală). Orice modificări aduse temei copil se vor reflecta în tema părinte. Cu toate acestea, fișierele cu tema părinte nu se vor schimba. Și tema va fi actualizată ținând cont de modificările dvs.

Cum să creezi o temă pentru copii WordPress

În primul rând, trebuie să înțelegeți structura folderelor de pe site-ul dvs. Adică, după ce ai creat un site pe platforma WordPress, pe server va apărea un folder de teme, care conține foldere cu toate temele instalate implicit și de tine.

În folderul cu teme, lângă tema părinte, va trebui să creați un folder nou cu o temă copil.

Conectați-vă la server. Prin sau prin managerul de fișiere de găzduire, este la discreția dvs.

Deschideți folderele unul câte unul:

folder cu site-ul dvs

folderul cu tema părinte

Lângă folderul cu tema părinte, creați un dosar cu tema secundară. Numele nu contează. Adică, poți atribui orice nume folosind caractere englezești.

Creați un fișier în folderul cu tema copilului stil.css. Acesta este un fișier obligatoriu. El va fi responsabil pentru interacțiunea dintre temele părintelui și copilului.

Configurarea fișierului style.css al temei copil WordPress

Fişier stil.cssîn tema copil trebuie să conțină informații despre tema părinte. Folosind-o, WordPress va înțelege ce subiecte interacționează între ele.

De asemenea, fișierul style.css din tema copil înlocuiește același fișier din tema părinte. Și, prin urmare, este necesar să includeți stiluri din tema părinte.

Asadar, haideti sa începem.

Deschideți fișierul style.css (de obicei creez acest fișier pe computerul meu în Editor de notepad++, iar apoi îl copiez în folderul cu tema copil de pe găzduire).

Lipiți acest cod în fișierul style.css:

/* Numele temei: Numele subiectului (în litere engleze) URI temei: adresa URL Subiecte Descriere: Descrierea subiectului URI autor: URL-ul site-ului dvs. sau despre pagina autorului Șablon: numele subiectului părinte (se face distincția între majuscule și minuscule) Versiune: 1.0.0 */

Iată un exemplu despre cum arată acest cod în noua mea temă.

Vă rugăm să rețineți că câmpurile obligatorii sunt Numele temei și Șablonul. Completați câmpurile rămase la propria discreție.

Acum trebuie să organizați importul de stiluri din tema părinte. Chestia este că, odată ce fișierul style.css apare în tema copil, WP nu încarcă același fișier din tema părinte. Și, ca rezultat, fără stiluri, tema ta va arăta groaznic.

Pentru a conecta stiluri din tema părinte, trebuie să scrieți doar o singură linie de cod:

@import URL("../ folderul cu tema părinte/style.css");

După cum înțelegeți, aceasta este calea condiționată către fișierul de stiluri din tema părinte. De asemenea, puteți specifica calea completă (absolută) către foaia de stil a temei părinte.

Dar după conectarea stilurilor, puteți adăuga propriile stiluri de design. Vă rugăm să rețineți că toate stilurile dvs. suplimentare trebuie să vină după linia de import.

Dar pentru a vedea toate noile modificări, trebuie să deschideți panoul administrativ WordPress și activați tema copil.

Ce fișiere pot fi stocate într-un folder cu temă copil?

În acest folder puteți stoca cel puțin toate fișierele temei părinte. Dar acest lucru nu este deloc necesar. Păstrați numai cele cu care veți lucra. În care vei face modificări. Să ne uităm la câteva exemple.

Fișierul funcției temă functions.php

Dacă stocați acest fișier într-o temă secundară, acesta va fi încărcat în plus față de fișierul principal al temei părinte. Astfel, acest fișier va conține doar îmbunătățirile dvs. în funcționalitate.

Mai mult, trebuie să înțelegeți că toate modificările aduse fișierelor cu tema copil nu se referă doar la îmbunătățiri, ci și la modificări ale funcțiilor și designului temei părinte.

Să spunem, în mine subiect actual A existat întotdeauna o problemă cu titlurile H1 și H2 fiind confuze. Am dezvăluit soluția acestei probleme în . Și în noua mea temă, pot implementa acest lucru prin fișierul functions.php. Doar adăugați acest cod:

Add_filter("tc_site_title_tag", "change_tag"); funcția change_tag() (dacă (!is_single () && !is_page ()) returnează „h1”; if (is_single () || is_page ()) returnează „p”; )

Și totul pentru că noua mea temă este complet construită pe Chei API WordPress.

Fișiere cu tema principală (șablon).

După activarea unei teme copil în panoul de administrare, nu veți putea edita fișierele principale ale temei (single.php, page.php, index.php...). Pentru că pur și simplu nu vor fi acolo.

Pentru ca acestea să apară în panoul de administrare, trebuie pur și simplu să copiați fișierele din folderul părinte în folderul copil.

Fișierele trebuie copiate strict în aceeași locație în care se află în folderul părinte. Adică, astfel încât calea către fișier să difere doar în numele folderelor părinte și copil.

După copierea fișierelor necesare, acestea pot fi editate prin panoul administrativ WP.

Și folosind aceeași schemă, copiați alte fișiere și le editați în tema copil. Fișierele temei părinte vor rămâne neschimbate. Și apoi totul este în mâinile tale.

Acum urmăriți tutorialul video și puteți începe să creați teme pentru copii.

Atât, dragi prieteni, algoritmul simplu pentru crearea temelor pentru copii în WordPress este complet. Încercați, implementați și creați-vă propriile teme. Vreau doar să vă atrag atenția asupra faptului că cel mai bine este să creați o temă copil imediat după instalarea celei părinte. În caz contrar, dacă ați modificat deja tema părinte, atunci tema copilului dumneavoastră nu va fi implementată 100% și poate ajunge strâmbă.

Așa că ne-am hotărât să lucrăm subiect nou, alegeți, creați o temă copil și lucrați cu ea.

Asta e tot pentru astăzi, ne vedem în noile tutoriale video și articole. Și, desigur, dacă aveți întrebări, scrieți în comentarii, vă voi ajuta cu plăcere. iti doresc mult noroc si Să aveți o dispoziție bună!

Abonați-vă la articole noi!

71 de comentarii. la articolul " Cum să creezi o temă pentru copii WordPress”

Busuioc
Foarte subiect interesant. Au apărut imediat câteva întrebări.
1. Maxim, folosirea unei teme copil afectează cumva viteza de încărcare a site-ului?
2. Folosesc un plugin special Function.php pentru a insera cod în fișierele teme. Dacă folosiți în plus o temă copil, de exemplu, pentru micro markup. Este posibil?
3. Dacă copiați toate fișierele din tema părinte, atunci nimic nu se va schimba după actualizarea temei. Dar autorul poate elimina ceva de acolo. Trebuie doar să economisim anumite corzi cod și lăsați restul modificărilor să se întâmple. Este posibil?
- Vasya, salut. O temă pentru copii de fapt împinge granițele în personalizarea temei pentru a se potrivi nevoilor dvs.
  1. Tema copilului nu afectează viteza de încărcare. Totul depinde de tema părinte în sine și de codul pe care îl introducem în tema copil. Dacă toate modificările sunt valide, atunci viteza de încărcare va fi mare. Am testat pe GTmetrix și Pingdom. Principalul lucru este că tema părintelui este agilă.
  2. Funcțiile temei din tema copil sunt în esență toate îmbunătățirile noastre colectate în pluginul Function.php. Deci, puteți folosi în mod liber pluginul și nu vă încurcați cu fișierul de funcție al temei. Ei bine, în consecință, toate micro-markupurile trebuie create într-o temă copil.
  3. Toate fișierele nu trebuie copiate. Doar cele în care facem schimbări. În acest fel fișierele temei părinte rămân originale. Fișierele sunt actualizate ținând cont de îmbunătățirile noastre. Am verificat deja.
Serghei Steklov
Din anumite motive, atunci când actualizez tema Customizr, tema copilului meu se blochează. Și totul din cauza fișierelor editate care se află în folderul inc -> parts. Și anume:
class-content-featured_pages
clasa-conținut-post_navigație
clasa-conținut-glisor
class-footer-footer_main
class-header-header_main
Când șterg aceste fișiere, tema copil cu tema părinte actualizată funcționează bine. Dar acum Customizr 3.3.26 funcționează bine cu copilul meu. Dar de îndată ce încep să-l actualizez pe cel părinte, cel de copil se blochează. Se pare că fișierele de mai sus nu pot fi editate deloc, deoarece versiune noua teme, copiile vechi ale fișierelor pot să nu funcționeze. Nu-mi amintesc exact ce am schimbat la ele. Dar se pare că a eliminat cu siguranță linkul către dezvoltator din subsol, a editat glisorul și altceva. Tema nu este Pro, adică se folosește versiunea gratuită.
Natalia
Fac un al doilea site web pe WP, folosind șabloane gata făcute. Al doilea site este în prezent în Denver, WordPress cu tema de design Storefront. Tema în sine este concepută pentru un magazin online și se integrează cu un plugin Magazin WooCommerce. Problema este că Storefront este deja o temă copil din Twenty Ten. Întrebare: ce să faceți în acest caz - creați o temă copil dintr-una copil? Sau lăsați totul așa cum este? Și ce se va întâmpla dacă în timpul funcționării site-ului pur și simplu NU ACTUALIZAȚI TEMA? Care ar putea fi consecințele (fără actualizări)? Și a doua întrebare: dacă nu actualizați tema, dar actualizați în mod regulat motorul magazinului (WooCommerce), vor exista conflicte fatale în viitor? Vă mulțumesc anticipat pentru răspunsul dumneavoastră!
Tata
Multumesc pentru detalii si informații clare pe subiecte pentru copii. Am facut totul asa cum a fost scris. Am actualizat atât motorul, cât și tema - totul funcționează, cu excepția pluginului wppage. Acum paginile realizate cu acesta sunt afișate ca pagini obișnuite cu bară laterală tema instalată. Cred că trebuie să adăugați template_include undeva pentru paginile wppage. Dar cunoștințele mele clar nu sunt suficiente. Poți să-mi dai un indiciu, Maxim?
Larisa
Maxim, iar eu. Am început să creez teme pentru copii pentru site-uri web și a apărut întrebarea: există teme care nu suportă crearea de teme pentru copii? Am o temă pe domeniul meu de testare în care nu pot activa o temă copil. În acest caz, site-ul se blochează și afișează o eroare 500. Ce poate fi greșit? Am încercat să transfer un fișier style.css și toate folderele și fișierele temei părinte (cu excepția foii de stil părinte) în folderul cu tema copil, încă o eroare la activare și scoaterea site-ului din copia de rezervă. .
- Larisa, acest lucru se întâmplă atunci când o temă copil conține o cale către un folder sau fișier care nu este în tema părinte. Ar trebui să încercați să creați doar un fișier de stil în tema copil fără foldere sau alte fișiere. Când tema este conectată, puteți transfera treptat fișierele necesare și, în cele din urmă, va fi clar ce perturbă funcționarea site-ului.
  În astfel de cazuri lucrez conexiune ftp, copiez fisierul si verific lucrarea. Dacă site-ul nu mai funcționează, atunci motivul este în acest fișier. Îl șterg și site-ul începe să funcționeze. Și aflu motivul, ce este în neregulă cu el.
  - Larisa
    Multumesc pentru idee! Am făcut asta: am creat un folder cu o temă copil și un fișier style.css. Am activat o temă copil din panoul de administrare și am primit un site lipsit de stiluri. Uneori, această imagine apare atunci când conexiunea la Internet este lentă. Am astfel de site-uri pe LAN în timp ce stăpânesc html)))))))))) Tema are o mulțime de setări și widget-uri. Există o specială domeniu pentru crearea propriilor stiluri. Am încercat să copiez întregul CSS al temei părinte în acest câmp, am primit un fel de mizerie de widget-uri (cele de subsol „au urcat” pe widget-urile de antet)... Nu înțeleg de ce stilurile nu sunt conectate corect ... Apropo, această temă are două fișiere cu funcții... Unul dintre ele se află într-un folder suplimentar cu propriul nume.
Larisa
Maxim, codul VP spune că poți crea un fișier functions.php în tema copil, care va fi încărcat în plus față de cea părinte. Puteți scrie directive în el care vor suprascrie directivele din tema părinte. Plus scrie-ți propriile directive. Stilurile temei părinte nu au fost conectate la mine prin import în fișier css. A trebuit să fac asta prin fișierul child functions.php. Transliterarea a fost făcută folosind același fișier. Site-ul este in stare de functionare. Dar! Nu am putut suprascrie funcția de drepturi de autor din subsolul site-ului (există un link către dezvoltator și către WordPress).
- Larisa
  Am eliminat toate drepturile de autor inutile, dar nu prin redefinire, ci pur și simplu am scris o secțiune de cod din funcția temei părinte și am eliminat de acolo condițiile în care apar link-urile. Până acum totul funcționează, dar nu am configurat încă site-ul; este în starea sa clasică, originală.
- Larisa, prin fișierul functions.php al temei copil se fac toate modificările și nu dau greș atunci când tema părinte este actualizată. Dar, funcționează bine pentru temă modernă, unde totul este legat de API.
  Cu drepturi de autor, dacă nu îl puteți schimba individual, atunci trebuie să schimbați totul de mai sus bloc în picioare. Sau puteți copia fișierul subsol într-o temă secundară și puteți modifica drepturile de autor. Este mult mai ușor așa. 😉
Natalia
Da, păcat că am ratat timpul. Am găsit articolul tău târziu.
I-am făcut un blog pentru soțul meu și de fiecare dată când actualizează tema, imaginea antetului și informațiile din subsol dispar. De fiecare dată după o actualizare trebuie să ajustați toate acestea. Din fericire, am toate acestea salvate în căsuța de e-mail și nu trebuie să petrec mult timp pe ele. Dar este enervant.
Acum, dacă trebuie să creez site-uri noi, voi crea imediat o temă copil.
multumesc pentru lecție detaliată. Alexandru
Salut, Maxim!
La inserarea fișierelor modificate cu micro-markup, apar probleme. V-am spus deja că nu sunt foarte fluent în limbajul de programare. De exemplu, la inserarea fișierelor din bara laterală din stânga și din bara laterală din dreapta cu modificări, nu ați indicat cum să le includeți corect în etichete și doar antetul rămâne pe site. Din nou, când inserați o pagină de conținut de clasă cu micro-markup pentru lecțiile dvs., bara din partea dreaptă a paginilor zboară sub cea din stânga. Și nu am găsit nimic clar despre funcții nicăieri - atunci când îl inserați sub orice formă (original sau modificat din lecțiile de micro-markup), site-ul devine inaccesibil. Dar tocmai acesta, după cum am înțeles, este unul dintre elementele principale pentru buna funcționare a unei teme de copil. Restul fișierelor devin normale, doar Yashka înjură la subsol (Google nu): AVERTISMENT: valoarea „© 2016” din câmpul CopyrightYear nu este o valoare numerică validă. Ieșirea mea de articole nu este configurată din pagina principală, așa că, după cum înțelegeți, la editare a trebuit să caut alte numere de rând. Afișarea anunțurilor este, de asemenea, diferită. Nu afișez etichete de categorie, dată și autor – o grămadă de adrese URL cu erori apar în Search Console. În general, am Google și Google, și până la urmă ajung din nou cu tine. Dacă puteți sugera ceva, vă voi fi recunoscător!
Și acest lucru provoacă unele inconveniente. De exemplu, subiectul nu a fost tradus în rusă. Există un singur fișier în folderul de limbi, nepalbuzz.pot. Să spunem că în fereastra de căutare este afișat cuvântul „Căutare...” Vreau să îl schimb în „Căutare...” În fișierul nepalbuzz.pot găsesc următoarea linie, se referă la fișierul inc/default- opțiuni.php. Acolo gasesc si urmatoarea linie.
Dar nu este recomandat să schimbați fișierele din tema părinte.
Am deja creată o temă nepalbuzz-copil copil. Am specificat totul în style.css așa cum era de așteptat.
Și acum vreau să schimb fișierul default-options.php copiat în folderul nepalbuzz-child/inc. Dar pentru ca modificarea să intre în vigoare, va trebui să copiez core.php acolo și să ofer un link către acesta în function.php.
Dar acest core.php conține link-uri către alte fișiere din tema părinte și nepalbuzz-child nu le are. Va trebui să le redirecționez pe toate către subiectul părinte?
Pe scurt, există confuzie cu link-urile.
Ce se întâmplă dacă pur și simplu, fără alte prelungiri, copiați TOT conținutul temei părinte în tema copilului? Vor fi probleme? Se vor schimba fișierele când tema este actualizată? Și este necesar să indicați tema părinte în style.css?
Olga
Buna ziua! Vă rog să-mi spuneți, dacă am făcut deja modificări la tema părinte și doresc să o actualizez, atunci când creez o temă copil, ce fișiere trebuie să mută de la Rt la Dt, astfel încât modificările făcute anterior să fie incluse? Subiect părinte Te-ai pierdut în timpul actualizării?
Si inca o intrebare:
— după instalarea temei pentru copii, site-ul va fi afișat cu o nouă adresă URL pentru copii?