Podređena tema je tema koja nasljeđuje funkcionalnost i dizajn druge teme, nazvane "roditeljska" tema. Podređena tema je način na koji programeri WP preporučuju prilagođavanje postojeće teme.
Zašto koristiti dječju temu?
Nekoliko je razloga zašto biste mogli upotrijebiti podređenu temu:
- Ako izravno promijenite temu i ona se ažurira, tada će se vaše promjene jednostavno izgubiti. Korištenjem podređene teme možete biti sigurni da će se vaše promjene zadržati.
- Korištenje dječje teme može ubrzati vrijeme razvoja.
- Korištenje dječje teme dobar je način da naučite proces razvoja WordPress teme.
Kako napraviti WordPress podređenu temu
Podređena tema sastoji se od najmanje jedne mape (direktorij podređene teme) i dvije datoteke (style.css i functions.php) koje ćete morati stvoriti. Dakle, trebat će vam:
- Imenik dječjih tema
- style.css
- funkcije.php
Prvi korak je stvaranje direktorija za podređenu temu, koji će se nalaziti u mapi wp-content / themes. Preporuča se da naziv direktorija podređene teme završava sufiksom "-child" (iako nije potrebno, osobito ako stvarate temu za javnu upotrebu).
Također morate osigurati da u nazivu direktorija za podređenu temu nema razmaka, inače će to uzrokovati pogrešku. Na gornjoj snimci zaslona, naziv naše dječje teme je "twentyfifteen-child", što znači da je nadređena tema Dvadeset i petnaest.
Sljedeći korak je stvaranje tablice stilova za podređenu temu (style.css). Stilska tablica bi trebala početi sa sljedećim meta informacijama:
/ * Naziv teme: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Opis: Twenty Fifteen Child Autor teme: John Doe URI autora: http://example.com Predložak: Twentyfifteen Verzija: 1.0.0 Licenca: GNU General Public License v2 ili noviji URI licence: http://www.gnu.org/licenses/gpl-2.0.html Oznake: svjetlo, tamno, dva stupca, desna traka, responsive-layout, Tekstualna domena spremna za pristupačnost: twenty-fifteen-child * /
Naziv teme: Twenty Fifteen Child URI teme: http://example.com/twenty-fifteen-child/ Opis: Twenty Fifteen Child Theme URI autora: http://example.com Šablon: dvadeset i petnaest Verzija: 1.0.0 Licenca: GNU Opća javna licenca v2 ili novija URI licence: http://www.gnu.org/licenses/gpl-2.0.html Oznake: svijetlo, tamno, dva stupca, desna bočna traka, responzivni izgled, spremno za pristupačnost Domena teksta: dvadeset i petnaest djece |
Važne informacije koje trebate znati o:
- Morat ćete zamijeniti tekst u ovom primjeru na temelju vaše situacije.
- Redak "Predložak" odgovara nazivu direktorija nadređene teme. U našem primjeru, nadređena tema je Twenty Fifteen, tako da redak "Predložak" sadrži "twentyfifteen". U vašem slučaju može postojati druga tema, pa prilagodite tome.
- Uglavnom, stylesheet (style.css) je već dovoljan za stvaranje podređene teme. Međutim, da biste ispravno stavili u red učitavanja stilskih datoteka, potrebna vam je datoteka functions.php (vidi dolje).
Treći i posljednji korak je stavljanje u red roditeljskih i podređenih stilskih datoteka.
Imajte na umu da je prethodna metoda pretpostavljala uvoz roditeljskih stilova pomoću @import direktive. Ovo je sada zastarjela praksa.
Kako pravilno i ispravno učitati stilove
Ispravna metoda za stavljanje roditeljske datoteke stila u red je dodavanje kuka(ili, na engleskom, akcijski) kao funkcija wp_enqueue_scripts.
Ova metoda također pretpostavlja korištenje funkcije wp_enqueue_style () u datoteci child functions.php. Stoga morate stvoriti ovu datoteku u direktoriju s podređenom temom.
Prvi redak podređene datoteke functions.php počinje otvaranjem PHP oznake (
Sljedeći primjer funkcije će raditi ako nadređena tema koristi samo jednu glavnu datoteku style.css koja sadrži sva CSS pravila. Ako vaša tema ima više od jedne .css datoteke (uključujući ie.css, style.css, main.css), tada morate zadovoljiti sve potrebne ovisnosti nadređene teme.
add_action ("wp_enqueue_scripts", "theme_enqueue_styles"); funkcija theme_enqueue_styles () (wp_enqueue_style ("roditeljski stil", get_template_directory_uri (). "/style.css");)
Tipično, tablica stilova podređene teme učitava se automatski. Ako nije, također ćete ga morati staviti u red čekanja. S "roditeljskim stilom" postavljenim kao ovisnost, provjerite jesu li stilovi podređene teme učitani nakon njega.
add_action ("wp_enqueue_scripts", "theme_enqueue_styles"); funkcija theme_enqueue_styles () (wp_enqueue_style ("roditeljski stil", get_template_directory_uri (). "/style.css"); wp_enqueue_style ("child-style", get_stylesheet_directory_uri (). "/style.css", array ("parent-css" " "));)
add_action ("wp_enqueue_scripts", "theme_enqueue_styles"); funkcija theme_enqueue_styles () ( wp_enqueue_style ("roditeljski stil", get_template_directory_uri (). "/style.css"); wp_enqueue_style ("u stilu djeteta", get_stylesheet_directory_uri (). "/style.css", niz ("roditeljski stil") |
Vaša dječja tema sada je spremna za aktivaciju. Prijavite se na administratorsku ploču, a zatim na stranicu Izgled > Teme... Trebali biste vidjeti svoju dječju temu na popisu tema i spremnu za aktivaciju. (Ako je više stranica omogućeno u trenutnoj instalaciji, tada se morate prebaciti na odgovarajuću ploču da biste omogućili temu. Nakon toga se vratite i aktivirajte temu).
Važno: Nakon aktivacije, morate ponovno spremiti svoj izbornik ( Izgled > izbornik ili Izgled > Ugađaj> izbornik) i opcije teme, uključujući pozadinsku sliku, kao i sliku zaglavlja, ako ih daje nadređena tema.
Datoteke predložaka
Ako želite promijeniti više od stilova, postoji način da nadjačate sve datoteke u nadređenoj temi. Da biste to učinili, jednostavno uključite datoteku istog imena u mapu podređene teme. Stoga će se "preklapati" odgovarajuća datoteka u direktoriju nadređene teme kada se stranica učita.
Na primjer, ako želite promijeniti PHP kod za zaglavlje vaše stranice, možete uključiti datoteku header.php u direktorij podređene teme i ta će se datoteka koristiti umjesto header.php nadređene teme.
Također možete uključiti datoteke u podređenu temu koje izvorno nisu bile u nadređenoj. Na primjer, možete stvoriti predložak koji je funkcionalniji od roditeljskog predloška za određenu stranicu ili kategoriju.
Korištenje functions.php
Za razliku od style.css, datoteka functions.php podređene teme ne nadjačava nadređenu kopiju. Naprotiv, to je, takoreći, dodatak njemu (točnije, napunjen je ispred roditeljska kopija).
Dakle, functions.php podređene teme pruža pametan, bezbrižan način za promjenu funkcionalnosti nadređene teme. Recimo da želite svojoj temi dodati PHP funkciju. Najbrži način je otvoriti datoteku functions.php teme i tamo staviti funkciju. Ali to nije baš pametno: sljedeći put kada se tema ažurira, vaša će funkcija jednostavno nestati.
Postoji alternativni način koji ima više smisla: možete stvoriti podređenu temu, dodati joj datoteku functions.php i staviti svoju funkciju u novostvorenu datoteku. Funkcija će od tamo obavljati isti posao, s tom prednošću što neće patiti od budućih ažuriranja nadređene teme. Stoga važna napomena: nemojte kopirati cijeli sadržaj roditeljske datoteke functions.php u istu podređenu datoteku.
Struktura funkcije functions.php je jednostavna: otvara se PHP oznaka na početku, a ispod nje postavljate svoj PHP kod. U ovu datoteku možete postaviti onoliko koda koliko je potrebno. Primjer u nastavku ilustrira rudimentarnu datoteku functions.php koja radi jednu jednostavnu stvar: dodaje link na favicon u oznaku
HTML stranice."." \ n ";) add_action (" wp_head "," favicon_link ");
Savjet za programere tema: činjenica da se functions.php podređene teme prvi učita znači da možete učiniti da korisničke funkcije zamjene funkcije programera, t.j. ako je korisnik stvorio istu funkciju kao i vaša, tada će ona postati glavna. Samo dodajte uvjet:
if (! function_exists ("theme_special_nav")) (funkcija theme_special_nav () (// Učinite nešto.))
U ovom slučaju, podređena tema može zamijeniti roditeljsku PHP funkciju jednostavnim deklariranjem unaprijed.
Uključujući datoteke u vašu dječju temu
Kada trebate uključiti datoteku koja mora biti dio strukture podređene teme, koristite funkciju get_stylesheet_directory (). Budući da je nadređena datoteka style.css zamijenjena podređenom style.css, a ovaj podređeni style.css se nalazi u korijenskoj mapi poddirektorija poddirektorijuma podređene teme, get_stylesheet_directory () pokazat će na direktorij podređene teme, a ne na roditelj.
U nastavku je primjer koji koristi konstrukciju require_once koja ilustrira kako možete koristiti get_stylesheet_directory kada trebate referencirati datoteku pohranjenu u strukturi podređene teme.
zahtijevaju_jednom (get_stylesheet_directory (). "/my_included_file.php");
zahtijevaju_jednom (get_stylesheet_directory (). "/my_included_file.php"); |
Dodatne korisne informacije
Korištenje formata postova
Podređena tema nasljeđuje formate postova definirane u nadređenom. Prilikom izrade podređene teme imajte na umu da će korištenje add_theme_support ("post-formati") nadjačati formate definirane u nadređenoj temi, a ne dodati im.
RTL (zdesna nalijevo) podrška
Za RTL podršku dodajte datoteku rtl.css u svoju dječju temu. Sadrži:
/ * Naziv teme: Twenty Fourteen Child Template: Twentyfourteen * /
Dječja WordPress tema je tema koja proširuje funkcionalnost druge teme, koja se naziva nadređena tema, i omogućuje vam izmjenu ili dodavanje funkcionalnosti nadređenoj temi. Ovaj članak objašnjava kako stvoriti jednostavnu dječju temu i objašnjava što možete učiniti s njom. Twenty Ten se koristi kao primjer nadređene teme, nove zadane teme.
Pažnja! Ako vam se informacije u nastavku čine teško razumljivim, tada možete koristiti relevantniji i brži način za stvaranje podređene teme pomoću dodatka za konfiguraciju dječje teme.
Vrlo je lako stvoriti dječju temu. Stvorite mapu, stavite u nju prikladno napisanu datoteku style.css i dječja tema je spremna! Uz malo razumijevanja HTML-a i, to možete promijeniti vrlo jednostavna dječja tema- mijenjanje izgleda i rasporeda nadređene teme, ali ne mijenjanje njenih datoteka. Na ovaj način, kada se nadređena tema ažurira, vaše promjene se spremaju.
Podređene teme u WordPressu omogućuju vam da izvršite promjene u postojećim temama, i to na način da se takve promjene ne izgube kada se originalna (ili nadređena) tema ažurira. Osim izgleda, dječje teme omogućuju vam promjenu oznake, pa čak i funkcionalnosti nadređene teme, proširujući je tako da odgovara vašim potrebama.
Podrška za dječje teme postoji u WordPressu već duže vrijeme, ali većina korisnika danas radije izravno mijenja kod izvorne teme. U ovom članku ćemo objasniti kako podređene teme funkcioniraju u WordPressu i zašto se podređene teme trebaju koristiti za izmjene postojećih tema.
Što je dječja tema
Podređena tema u WordPressu je tema koja nasljeđuje izgled i dojam i funkcionalnost nadređene (izvorne) teme. Ovo nasljeđivanje omogućuje vam da jednostavno mijenjate i dopunjujete pojedinačne dijelove nadređene teme bez promjene same izvorne teme. S ovim pristupom, ažuriranje nadređene teme neće utjecati na te promjene.
Roditeljska tema može biti bilo koja druga WordPress tema (osim podređenih tema), a da bi podređena tema radila, obje teme moraju biti instalirane, ali dijete mora biti aktivirano.
Kako stvoriti dječju temu
Najjednostavnija podređena tema sastoji se od jedne datoteke style.css koja specificira naziv podređene teme i naziv direktorija nadređene teme. Ista datoteka često upućuje na stilsku tablicu nadređene teme pomoću @import CSS direktive.
Kao primjer, kreirat ćemo podređenu temu, My Child Theme, i koristiti zadanu temu Twenty Twelve kao nadređenu temu.
Prvo, provjerite postoji li nadređena tema - pronađite direktorij twentytwelve u wp-content / themes. Zatim stvorite novi direktorij pod wp-content / themes i nazovite ga my-child-theme. U ovom novom direktoriju stvorite datoteku style.css i zalijepite sljedeće zaglavlje u nju:
/ ** * Naziv teme: My Child Theme * Predložak: dvadeset dvanaest * / @import url ("../ twentytwelve / style.css");
Uz pomoć ovog naslova definirali smo naziv naše nove teme, kao i naznačili nadređenu. Direktiva @import u ovom slučaju učitava sve stilove iz teme Twenty Twelve, na vrhu koje ćemo napraviti promjene. Bez ove direktive, naša podređena tema će naslijediti samo predloške (oznake) nadređene teme, a ne stil.
Nakon toga, vaš direktorij tema trebao bi izgledati otprilike ovako:
Odlaskom na odjeljak Izgled → Teme vidjet ćete da je vaša nova tema već dostupna za aktivaciju.
Ako ga aktivirate i odete na početnu stranicu svoje stranice, vidjet ćete da vaša dječja tema izgleda točno kao standardna tema Twenty Twelve.
Rad sa stilovima
CSS stilovi dječje teme mogu se postaviti izravno u datoteci style.css odmah nakon direktive @import. Na primjer, da biste postavili boju pozadine i boju veza u svojoj temi, dodajte sljedeći kod na kraj stilske tablice:
Tijelo (pozadina: crvena;) a (boja: zelena;)
Dakle, možete promijeniti stilove bilo kojeg elementa nadređene teme, a traženi element možete jednostavno pronaći pomoću alata za razvojne programere u pregledniku Google Chrome ili korištenjem proširenja Firebug za preglednik Firefox.
Rad s predlošcima
Uz podređenu temu, također možete jednostavno mijenjati same predloške nadređene teme. Da biste to učinili, samo trebate stvoriti datoteku u podređenoj temi s istim imenom kao predložak u nadređenoj temi. Na primjer, da biste zamijenili predložak footer.php svojim, stvorite datoteku footer.php u direktoriju podređene teme: