Kako napraviti WordPress child temu

Ukoliko iz bilo kog razloga želite da menjate vašu WordPress temu, najbolji način da to radite kroz child temu. Većina modernih tema dolazi sa već kreiranim child temama. Ipak neke teme je nemaju, pa je u tom slučaju potrebno da je sami napravite. To je važno iz više razloga, pa ćemo zato u ovom tekstu objasniti kako napraviti WordPress child temu.

Zašto je dobro koristiti WordPress child temu?

Child tema nasleđuje sve karakteristike parent (vaše glavne) teme. Kada aktivirate child temu umesto parent teme, neće biti nikakve razlike i vaš sajt će izgledati potpuno isto kao i sa parent temom. Razlika je jedino u tome što korišćenjem child teme omogućavate vašem sajtu (temi) da prilikom sledećeg update-a teme sve izmene unutar vaše teme ostanu onakve kako ste ih vi podesili (da ne budu pregažene novim update-om).

Recimo da ste u vašoj parent temi uradili neke izmene u style.css fajlu (margine, padding, boju pozadine, poravnanja..i sl). Prilikom prvog sledećeg uspešnog update-a teme ta podešavanja će biti vraćena na default (podrazumevana) podešavanja, a vaš sajt će izgubiti sve izmene koje ste uneli u style.css glavne teme.

Sa druge strane, ukoliko sve te izmene uradite u child temi, podešavanja koja ste uneli će ostati ista i nakon update-a glavne teme. Zašto je to tako? Pa jednostavno zato što se pomenuti update odnosi samo na glavnu temu i sve izmene se rade samo unutar core fajlova te teme. Ne dotiče child temu, pa podešavanja u njoj ostaju ista i nakon update-a.

Kako radi WordPress child tema?

Child tema je smeštena unutar zasebnog foldera u odnosu na parent temu i ima svoj style.css i functions.php fajl. Možete u nju po potrebi dodati i druge fajlove, ali ova dva fajla su minimum za normalno funkcionisanje child teme.

Koristeći odgovarajuće .css i .php fajlove možete modifikovati gotovo sve što možete raditi inače i sa glavnom temom. Možete menjati stilove, layout, dodavati skripte i slično.

Kada neko poseti vaš web sajt, prvo se učita child tema, a zatim se popunjavaju nedostavjući stilovi i funkcije koristeći delove iz parent teme. Na taj način dobijate željeni dizajn i izmene koje ste definisali u child temi, a da pritom ne menjate core fajlove vaše parent teme.

Kreiranje WordPress child teme

U ovom tekstu ćemo kreirati child temu parent teme pod nazivom Twenty Seventeen. U pitanju je jedna od podrazumevanih WordPress tema koja dolazi sa osnovnom instalacijom WordPress-a.

Kao što već znate WordPress fajlovima pristupamo ili preko FTP-a ili preko cPanel-a, odnosno File Manager-a.

Mi ćemo koristiti cPanel.

• ulogujte se na cPanel i otvorite aplikaciju File Manager
• Idite na folder public_html → wp-content → themes
• kreirajte novi folder unutar ovog foldera. Naša preporuka je da koristite naziv parent teme kojem ćete dodati neki sufiks (npr. -child). U našem primeru mi ćemo kreirati folder pod nazivom twentyseventeen-child

Napomena: Da biste izbegli greške, razmake u nazivu foldera ili fajla zamenite crticama

• unutar novog folders kreirajte style.css fajl. Zatim u njega zalepite sledeći kod:

/*
Theme Name: Twenty Seventeen Child
Theme URL: http://yourdomain.com
Description: Twenty Seventeen Child
Theme Author: Your Name
Author URL: http://yourdomain.com
Template: twentyseventeen
Version: 1.0.0
Text Domain: twentyseventeen-child
*/

• promenite sve vrednosti da odgovaraju vašim podacima. Najvažnije polje je Template jer ono govori WordPress-u koja je parent tema na osnovu koje će biti kreirana child tema. Kada ste izmenili ove podatke sačuvajte fajl i zatvorite ga.
• sada kreirajte još jedan folder pod nazivom functions.php unutar foldera twentyseventeen-child. Nemojte ga popunjavati kodom iz parent teme, jer on mora da ostane zaseban. Umesto toga kopirajte i zalepite sledeći PHP kod:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

• sada se ulogujte na wp-admin vašeg sajta (Dashboard) i idite na Appearance → Theme.
• aktivirajte child temu koju ste upravo kreirali. Primetićete da sve izgleda isto kao i dok je bila aktivna vaša parent tema.

Kastomizacija child teme

Da prilagodite vašu child temu željenom izgledu, pre svega morate da poznajete bar osnove CSS-a i kako da radite u Developers tools-u. Verovatno ćete najviše izmena raditi upravo uz pomoć CSS-a.

Evo primera kako možete uraditi neku osnovnu kastomizaciju. Da biste to uradili morate da u vašem Dashboard-u idete na Customize → Additional CSS. Otvoriće vam se polje u koje sada treba da unesete neki CSS kod. Naravno, ovo radite nakon aktivacije vaše child teme.

Promena boje pozadine

Da biste promenili boju pozadine ubacite sledeći CSS kod (za twenty seventeen temu):

.site-content-contain {
background-color: #DEF0F5;
position: relative;
}

Ovim smo promenili boju pozadine u svetlo plavu. Naravno to može biti bilo koja boja po vašem izboru. Menjanje boje radite promenom hex koda koji počinje sa # (u našem slučaju to je #DEF0F5)

Menjanje tipa, veličine i boje fonta

Da biste promenili tip fonta, njegovu veličinu ili boju vaše WordPress child teme na istu lokaciju (Customize → Additional CSS) zalepite sledeći kod:

p {
color: blue;
}
p {
font-family: Georgia;
font-size: 18px;
}

Ovde je očigledno da smo ceo font koji nosi oznaku p za paragraph promenili u Georgia font, veličine 18px i place boje.

Promena Layout-a postova i stranica

Baš kao što možete neka podešavanja parent teme pregaziti dodavanjem CSS koda u child temu, tako isto možete iskoristiti template fajlove da kreirate željeni layout pozivajući template parent teme.

Vaš novi template mora imati isto ime i biti u folderima koji stoje u korelaciji sa originalnim fajlovima. Dobra je praksa da kopirate template parent teme u direktorijum vaše child teme i odatle radite podešavanja.

Glavni template fajlovi se nalaze u glavnom folderu vaše parent teme. Na primer, template izgleda jednog posta je single.php, a template stranice je page.php.

Twenty Seventeen tema deli svoje template-ove u template-parts koji se pozivaju u primarnom template-u korišćenjem funkcije get_template:part(). Na primer, ako želite da editujete page.php, možete započeti tako što ćete locirati deo template-a koji treba da editujete. U našem primeru linija 28 unutar ovog fajla Izgleda ovako:

get_template_part( 'template-parts/page/content', 'page' );

Kako sada da pronađemo ovaj fajl? template-parts/page/ je putanja foldera, dok se content odnosi na karakter u imenu fajla pre crtice, a page nakon crtice.

Kada ovo sada prevedemo u strukturu linka dobijamo da je putanja pomenutog fajla na lokaciji
wp-content/themes/twentyseventeen/template-parts/page/content-page.php.

Dakle, ako želite da menjate layout content-page.php fajla / stranice, treba da je kopirate u folder u kojem se nalazi vaša child tema i smestite ga na sledeću lokaciju (prateći naše dosadašnje primere):

wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php.

Dodavanje i uklanjanje funkcionalnosti

Još jedna važna prednost kreiranja WordPress child teme je mogućnost da napravite zaseban functions.php fajl. Na taj način ćete biti u mogućnosti da korišćenjem PHP koda vašoj temi dodate ili uklonite određene funkcionalnosti.

Na primer, dodavanjem sledećeg koda ćete onemogućiti desni klik u vašoj temi:

function your_function() {
?>

<?php
}
add_action('wp_footer', 'your_function');

Zaključak

Kao što ste mogli da se uverite child tema daje mnogo veću slobodu i sigurnost u radu sa vašom originalnom (parent) temom. Naša je topla preporuka da je koristite / kreirate kada god radite sa WordPress-om.

Nenad Mihajlović