Podređena tema je tema koja nasljeđuje funkcionalnost i dizajn druge teme, koja se zove "roditeljska" tema. Podređena tema je način na koji WP programeri preporučuju prilagođavanje postojeće teme.
Zašto koristiti dječju temu?
Postoji nekoliko razloga zašto biste možda željeli koristiti dječju temu:
- Ako promijenite temu direktno i ona se ažurira, onda će vaše promjene jednostavno biti izgubljene. Koristeći podređenu temu, možete biti sigurni da će vaše promjene postojati.
- Korištenje dječje teme može ubrzati vrijeme razvoja.
- Korištenje dječje teme je dobar način da naučite proces razvoja WordPress teme.
Kako napraviti WordPress podređenu temu
Podređena tema se sastoji od najmanje jednog foldera (direktorij podređene teme) i dva fajla (style.css i functions.php) koje ćete morati da kreirate. Dakle, trebat će vam:
- Direktorij dječjih tema
- style.css
- functions.php
Prvi korak je kreiranje direktorija za podređenu temu, koji će se nalaziti u folderu wp-content / themes. Preporučljivo je da ime direktorija podređene teme završava sufiksom “-child” (iako nije potrebno, posebno ako kreirate temu za javnu upotrebu).
Također morate osigurati da u nazivu direktorija za podređenu temu nema razmaka, inače će to uzrokovati grešku. Na slici iznad, naziv naše dječje teme je "twentyfifteen-child", što znači da je roditeljska tema Dvadeset i petnaest.
Sljedeći korak je kreiranje 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 Theme Autor: John Doe Autor URI: http://example.com Šablon: 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, dvije kolone, desna traka, responsive-layout, Tekstualni domen spreman 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 General Public License v2 ili novija URI licence: http://www.gnu.org/licenses/gpl-2.0.html Oznake: svjetlo, tamno, dvije kolone, desna bočna traka, responzivni izgled, spremno za pristupačnost Domena teksta: twenty-fifteen-child |
Važne informacije o kojima biste trebali znati:
- Morat ćete zamijeniti tekst u ovom primjeru na osnovu vaše situacije.
- Red “Predložak” odgovara imenu roditeljskog direktorija teme. U našem primjeru, nadređena tema je Twenty Fifteen, tako da linija “Template” sadrži “twentyfifteen”. Možda postoji druga tema u vašem slučaju, pa prilagodite tome.
- U osnovi, stylesheet (style.css) je već dovoljan za kreiranje podređene teme. Međutim, da biste pravilno stavili u red učitavanja stilskih datoteka, potrebna vam je datoteka functions.php (pogledajte ispod).
Treći i posljednji korak je stavljanje u red nadređenih i podređenih stilskih datoteka.
Imajte na umu da je prethodna metoda pretpostavljala uvoz roditeljskih stilova koristeći @import direktivu. Ovo je sada zastarjela praksa.
Kako pravilno i ispravno učitati stilove
Ispravan metod za stavljanje roditeljske datoteke stila u red je dodavanje kuka(ili, na engleskom, akcija) kao funkcija wp_enqueue_scripts.
Ova metoda također pretpostavlja korištenje funkcije wp_enqueue_style () u datoteci child functions.php. Stoga morate kreirati ovu datoteku u direktoriju s podređenom temom.
Prvi red datoteke child 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, lista stilova podređene teme se automatski učitava. Ako nije, također ćete morati da ga stavite u red čekanja. Sa “parent-style” postavljenim kao zavisnost, pobrinite se da se stilovi podređene teme učitavaju nakon nje.
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 je sada spremna za aktivaciju. Prijavite se na admin panel, a zatim na stranicu Izgled > Teme... Trebali biste vidjeti svoju dječju temu na listi tema i spremnu za aktiviranje. (Ako je multisite omogućeno u trenutnoj instalaciji, tada se morate prebaciti na odgovarajući panel da biste omogućili temu. Nakon toga se vratite i aktivirajte temu).
Bitan: Nakon aktivacije, potrebno je ponovo sačuvati svoj meni ( Izgled > Meni ili Izgled > Tune> Meni) i opcije teme, uključujući pozadinsku sliku, kao i sliku zaglavlja, ako ih daje nadređena tema.
Fajlovi šablona
Ako želite promijeniti više od stilova, postoji način da zaobiđete sve datoteke u nadređenoj temi. Da biste to učinili, jednostavno uključite datoteku istog imena u folder 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 vaše podređene teme, a ovaj fajl će se 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 kreirati predložak koji je funkcionalniji od roditeljskog predloška za određenu stranicu ili kategoriju.
Korištenje functions.php
Za razliku od style.css, fajl functions.php podređene teme ne zamenjuje nadređenu kopiju. Naprotiv, to je, takoreći, dodatak njemu (tačnije, učitano je front 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 da otvorite datoteku functions.php teme i stavite funkciju tamo. Ali ovo nije baš pametno: sljedeći put kada se tema ažurira, vaša funkcija će jednostavno nestati.
Postoji alternativni način koji ima više smisla: možete kreirati podređenu temu, dodati joj functions.php datoteku i staviti svoju funkciju u novokreirani fajl. Funkcija će odatle obavljati isti posao, uz prednost što neće patiti od budućih ažuriranja nadređene teme. Otuda važna napomena: nemojte kopirati ceo sadržaj roditeljskog fajla functions.php u isti podređeni fajl.
Struktura funkcije functions.php je jednostavna: otvarajući PHP tag na početku, a ispod toga postavljate svoj PHP kod. U ovu datoteku možete postaviti onoliko koda koliko je potrebno. Primjer ispod ilustruje rudimentarnu datoteku functions.php koja radi jednu jednostavnu stvar: dodaje link za 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, tj. ako je korisnik kreirao istu funkciju kao i vaša, tada će ona postati glavna. Samo dodajte uslov:
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 deklarisanjem unaprijed.
Uključujući fajlove u vašu dječju temu
Kada trebate uključiti datoteku koja mora biti dio strukture podređene teme, koristite funkciju get_stylesheet_directory (). Pošto je nadređena datoteka style.css zamijenjena podređenom style.css, a ovaj podređeni style.css se nalazi u korijenskom folderu poddirektorijuma poddirektorijuma podređene teme, get_stylesheet_directory () će pokazivati na direktorij podređene teme, a ne na roditelj.
Ispod 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.
require_once (get_stylesheet_directory (). "/my_included_file.php");
require_once (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. Kada kreirate podređenu temu, 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 vašoj dječjoj temi. Sadrži:
/ * Naziv teme: Twenty Fourteen Child Template: Twentyfourteen * /
Podređena WordPress tema je tema koja proširuje funkcionalnost druge teme, koja se naziva nadređena tema, i omogućava vam da modifikujete ili dodate funkcionalnost nadređenoj temi. Ovaj članak objašnjava kako kreirati jednostavnu dječju temu i objašnjava šta 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, onda možete koristiti relevantniji i brži način za kreiranje podređene teme pomoću dodatka za konfiguraciju dječje teme.
Vrlo je lako kreirati dječju temu. Kreirajte folder, stavite u njega odgovarajuće napisanu datoteku style.css i dječja tema je spremna! Uz malo razumijevanja HTML-a i, ovo 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 čuvaju.
Podređene teme u WordPress-u vam omogućavaju da napravite promjene u postojećim temama, i to na takav način da se takve promjene ne izgube kada se originalna (ili nadređena) tema ažurira. Pored izgleda, podređene teme vam omogućavaju da promijenite oznaku, pa čak i funkcionalnost nadređene teme, proširujući je tako da odgovara vašim potrebama.
Podrška za dječje teme postoji u WordPress-u već duže vrijeme, ali većina korisnika danas i dalje radije radi direktno izmjene koda izvorne teme. U ovom članku ćemo objasniti kako podređene teme funkcionišu u WordPress-u i zašto se podređene teme trebaju koristiti za izmjene postojećih tema.
Šta je dječja tema
Podređena tema u WordPressu je tema koja nasljeđuje izgled i osjećaj i funkcionalnost roditeljske (originalne) teme. Ovo nasljeđivanje vam omogućava da lako modificirate i dopunjujete pojedinačne dijelove nadređene teme bez promjene same originalne teme. S ovim pristupom, ažuriranje nadređene teme neće utjecati na ove 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 kreirati dječju temu
Najjednostavnija podređena tema sastoji se od jedne datoteke style.css koja specificira ime podređene teme i ime direktorija nadređene teme. Ista datoteka često referencira stilove nadređene teme koristeći @import CSS direktivu.
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 kreirajte novi direktorij pod wp-content / themes i nazovite ga my-child-theme. U ovom novom direktoriju kreirajte datoteku style.css i zalijepite sljedeće zaglavlje u nju:
/ ** * Naziv teme: My Child Theme * Šablon: 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 šablone (oznake) nadređene teme, a ne stil.
Nakon toga, vaš direktorij tema bi trebao izgledati otprilike ovako:
U odeljku Izgled → Teme videćete da je vaša nova tema već dostupna za aktivaciju.
Ako je aktivirate i odete na početnu stranicu vaše stranice, vidjet ćete da vaša dječja tema izgleda potpuno kao standardna tema Twenty Twelve.
Rad sa stilovima
CSS stilovi dječje teme mogu se postaviti direktno u style.css datoteci odmah nakon @import direktive. Na primjer, da biste postavili boju pozadine i boju veza u svojoj temi, dodajte sljedeći kod na kraj liste stilova:
Telo (pozadina: crvena;) a (boja: zelena;)
Na taj način možete promijeniti stilove bilo kojeg elementa nadređene teme, a traženi element možete lako pronaći pomoću alata za programere u pregledniku Google Chrome ili korištenjem Firebug ekstenzije za Firefox pretraživač.
Rad sa šablonima
Sa podređenom temom, također možete lako mijenjati same predloške nadređene teme. Da biste to učinili, samo trebate kreirati 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, kreirajte datoteku footer.php u direktoriju vaše dječje teme: