Vodnik za WordPress child teme

Kaj je WordPress child tema

Child tema (podrejena tema) v WordPressu je tema, ki podeduje funkcionalnost, stile in datoteke predlog (template) od druge teme, ki se imenuje parent (nadrejena) tema. Child tema vam omogoča spreminjanje oblikovanja in funkcionalnosti spletnega mesta brez neposrednega spreminjanja datotek nadrejene teme. Zakaj je to pomembno? Zato ker se ob posodobitvi nadrejene teme vse vaše spremembe v njenih datotekah izbrišejo in vrnejo na privzeto stanje.

Predstavljajte si ta scenarij: kupili ste premium WordPressovo temo, prilagodili stile CSS, dodali custom funkcije v functions.php, spremenili datoteke predlog. Mesec dni kasneje avtor teme objavi posodobitev z varnostnimi popravki. Posodobite temo in - vse vaše prilagoditve so izginile. Vse morate narediti znova od začetka. S child temo ta težava ne obstaja, saj se vaše spremembe shranjujejo v ločenih datotekah, ki se med posodobitvijo ne dotikajo.

Zakaj uporabiti child temo

Obstaja več ključnih razlogov za uporabo child tem namesto neposrednega spreminjanja nadrejene teme.

Varne posodobitve

To je primarni razlog. WordPress teme se redno posodabljajo z varnostnimi popravki, popravki napak in novimi funkcionalnostmi. Brez child teme imate dve slabi izbiri: posodobite temo in izgubite vse prilagoditve ali pa teme ne posodobite in spletno mesto izpostavite varnostnim ranljivostim. S child temo nadrejeno temo posodobite brezskrbno, saj so vaše spremembe varne v child temi.

Organizacija kode

Child tema jasno loči vaše prilagoditve od originalne kode teme. Ko gledate datoteke child teme, natančno vidite, kaj ste spremenili glede na originalno oblikovanje. To olajša razhroščevanje, dokumentacijo in sodelovanje z drugimi razvijalci. Če nekaj ne deluje pravilno, lahko preprosto izbrišete datoteko iz child teme in se vrnete na originalno obnašanje nadrejene teme.

Učenje in eksperimentiranje

Child tema je varen prostor za učenje razvoja WordPressa. Lahko eksperimentirate s CSS, PHP in datotekami predlog brez strahu, da boste pokvarili spletno mesto. Če gre kaj narobe, deaktivirate child temo in spletno mesto se vrne na originalni videz z nadrejeno temo. To je še posebej uporabno za začetnike, ki se šele učijo razvoja WordPressa.

Ustvarjanje child teme korak za korakom

Ustvarjanje child teme je preprost postopek, ki zahteva le dve datoteki. Tukaj je podroben vodnik.

Korak 1: Ustvarjanje imenika

V imeniku wp-content/themes/ ustvarite novo mapo za child temo. Do datotek dostopate prek cPanel File Manager-ja ali prek FTP. Konvencija poimenovanja je ime-nadrejene-teme-child. Na primer, če uporabljate temo "flavor", ustvarite mapo "flavor-child". To ni obvezno, a olajša prepoznavanje child teme. Ime mape mora biti edinstveno med vsemi temami na spletnem mestu.

Korak 2: Ustvarjanje datoteke style.css

V imeniku child teme ustvarite datoteko style.css z naslednjim komentarjem v glavi (header): Theme Name (obvezno - edinstveno ime vaše child teme), Template (obvezno - ime imenika nadrejene teme, točno tako, kot se mapa imenuje), Version, Description in Author. Polje Template je kritično - ujemati se mora natančno z imenom mape nadrejene teme. Če je nadrejena tema v mapi flavor, mora biti Template flavor. Napaka v tem polju pomeni, da child tema ne bo delovala.

Korak 3: Ustvarjanje datoteke functions.php

V child temi ustvarite functions.php in dodajte funkcijo, ki naloži (enqueue) stile nadrejene teme. To je nujno, da child tema podeduje oblikovanje nadrejene teme. Uporabite wp_enqueue_style() znotraj funkcije, pripete na akcijski kavelj (action hook) wp_enqueue_scripts. Naložite parent-style z get_template_directory_uri() za pot do nadrejene teme in child-style z get_stylesheet_directory_uri() za pot do child teme, pri čemer je parent-style odvisnost (dependency), da se naloži za njim.

Korak 4: Aktivacija

Pojdite v skrbniško nadzorno ploščo WordPressa, Appearance → Themes, in aktivirajte svojo child temo. Videti bi morali enako spletno mesto kot prej - vse stile in funkcionalnosti nadrejene teme. Če spletno mesto izgleda popolnoma drugače (brez stilov), preverite, ali je functions.php pravilno naložil (enqueue) parent stile in ali je glava Template v style.css pravilna.

Prilagajanje child teme

Zdaj ko imate funkcionalno child temo, lahko začnete s prilagajanjem.

Prilagoditve CSS

Svoje spremembe CSS dodajte v datoteko style.css child teme. Ker se child tema naloži ZA nadrejeno temo, imajo vaši stili prednost (načelo kaskade pri CSS). Na primer, če želite spremeniti barvo naslova, dodajte pravilo v child style.css in to bo prepisalo (override) stil iz nadrejene teme. Uporabite orodja Developer Tools v brskalniku (F12), da prepoznate točne selektorje CSS, ki jih morate spremeniti.

Prepisovanje predlog (template override)

WordPress uporablja hierarhijo predlog za določanje, katero datoteko uporabi za prikaz strani. Child tema lahko prepiše katero koli datoteko predloge iz nadrejene teme tako, da ustvari datoteko z istim imenom. Na primer, če želite spremeniti videz posamezne objave v blogu, kopirajte single.php iz nadrejene teme v child temo in jo spremenite. WordPress bo samodejno uporabil različico iz child teme. POMEMBNO: kopirajte celotno datoteko, ne le dela, ki ga spreminjate, saj datoteka child teme popolnoma nadomesti različico parent.

Posebnosti functions.php

Za razliko od datotek predlog, kjer child tema nadomesti parent, se functions.php iz child teme naloži PRED functions.php nadrejene teme. To pomeni, da sta obe datoteki aktivni hkrati. To je uporabno, saj lahko dodate nove funkcije brez kopiranja celotnega functions.php nadrejene teme. A bodite previdni - če definirate funkcijo z istim imenom kot v nadrejeni temi (in nadrejena uporablja preverjanje if(!function_exists())), bo imela vaša različica prednost.

Dodajanje novih datotek predlog

Poleg prepisovanja obstoječih datotek predlog lahko child tema doda popolnoma nove. Na primer, ustvarite lahko custom predlogo strani (page template), ki v nadrejeni temi ne obstaja. Dodajte datoteko PHP s komentarjem Template Name na vrhu in na voljo bo kot možnost v urejevalniku WordPressa, ko ustvarjate novo stran. To je močan način za dodajanje specifičnih postavitev (layout) za pristajalne strani, strani portfelja ali druge custom potrebe.

Napredne tehnike

Odstranjevanje akcij in filtrov nadrejene teme

Včasih želite odstraniti funkcionalnost iz nadrejene teme namesto dodati novo. Uporabite remove_action() in remove_filter() v functions.php child teme, da odstranite kavlje (hook), ki jih je registrirala nadrejena tema. To zahteva poznavanje točnega imena funkcije, kavlja in prioritete iz nadrejene teme. Preglejte izvorno kodo nadrejene teme, da najdete te informacije. Opomba: remove_action() mora biti poklican, potem ko je akcija registrirana - uporabite kavelj after_setup_theme s kasnejšo prioriteto.

Prepisovanje predlog WooCommerce

Če uporabljate WooCommerce, lahko child tema prepiše datoteke predlog WooCommerce tako, da znotraj child teme ustvari imenik woocommerce/. Na primer, za prilagoditev videza strani izdelka kopirajte content-single-product.php iz wp-content/plugins/woocommerce/templates/ v wp-content/themes/vasa-child-tema/woocommerce/ in jo spremenite. WooCommerce bo samodejno uporabil vašo različico.

Uporaba child teme z urejevalniki strani (page builder)

Če uporabljate Elementor, Divi ali drug page builder, je child tema še vedno priporočena. Page builder hrani vsebino v podatkovni bazi, zato ni odvisen od datotek predlog, vendar naj bodo prilagoditve CSS, custom funkcije PHP in spremembe glave/noge (header/footer) v child temi. Večina priljubljenih tem (Astra, GeneratePress, OceanWP) ima uradne child teme, ki so na voljo za prenos na spletnem mestu avtorja teme.

Pogoste napake in kako se jim izogniti

• Napačna glava Template: Template se mora natančno ujemati z imenom imenika nadrejene teme. Že razlika v velikih/malih črkah lahko povzroči težavo.
• Manjkajoče nalaganje (enqueue) parent stilov: Brez pravilnega nalaganja child tema ne bo podedovala oblikovanja nadrejene teme in spletno mesto bo izgledalo pokvarjeno.
• Kopiranje preveč datotek: Ne kopirajte vseh datotek iz nadrejene teme v child temo. Kopirajte SAMO datoteke, ki jih dejansko spreminjate. Preveč kopij pomeni, da za te datoteke ne boste dobivali posodobitev iz nadrejene teme.
• Pozabljena oznaka PHP: functions.php se mora začeti z oznako <?php. Brez nje WordPress datoteke ne bo prepoznal kot PHP in jo bo ignoriral.
• Urejanje child teme namesto Customizer-ja: Za preproste spremembe (barve, pisave, postavitev) uporabite WordPress Customizer, ki shranjuje nastavitve v podatkovni bazi. Child temo uporabite za strukturne spremembe, ki jih Customizer ne pokriva.

Zaključek

WordPress child teme so bistveno orodje za vsakogar, ki prilagaja videz ali funkcionalnost svojega spletnega mesta. Ustvarijo se v 5 minutah (dve datoteki), ščitijo vaše prilagoditve pred posodobitvami nadrejene teme in nudijo organiziran način za upravljanje custom kode. Ne glede na to, ali spreminjate le nekaj pravil CSS ali ustvarjate kompleksne prepise predlog, vedno uporabite child temo. Pri BeoHostingu vam lahko naša podpora pomaga z ustvarjanjem in konfiguracijo child teme za vaše WordPress spletno mesto, tako da lahko varno prilagajate oblikovanje brez strahu pred izgubo sprememb.