Izdelava podrejene teme (child theme)

Modul 5: Teme in vtičniki · Čas branja: 9 minut

Učni cilj: Po tej lekciji boste znali izdelati podrejeno temo (child theme) in boste vedeli, kdaj jo potrebujete in kdaj ne.

Ključni pojmi: podrejena tema (child theme), nadrejena tema (parent), Template: v style.css, functions.php, wp_enqueue_style, prepisovanje predloge, theme.json v podrejeni temi, Create Block Theme

Težava, ki jo rešuje podrejena tema (child theme)

Recimo, da želite glavo svoje klasične teme nekoliko spremeniti in zato prilagodite header.php v mapi teme. Deluje. Tri tedne pozneje izide posodobitev teme, ki jo samodejno namestite (kot je prav, lekcija 7.2). Posodobitev zamenja vse datoteke teme in Vaša prilagoditev izgine.

Podrejena tema (child theme) je majhna tema, ki pove: "uporabi vse od tiste druge teme (nadrejene teme, parent), razen tega, kar imam sama." Svoje prilagoditve shranite v podrejeno temo. Nadrejeno temo še naprej običajno posodabljate, Vaše prilagoditve pa ostanejo.

Kdaj jo potrebujete in kdaj ne

Podrejeno temo potrebujete, če želite prilagoditi ali dopolniti datoteke teme:

• če želite spremeniti predlogo (pri klasični temi datoteko PHP, pri temi z bloki predlogo HTML);
• če želite lasten CSS, ki je prevelik za polje za CSS;
• če želite lastno kodo PHP, ki spada k videzu (dodatna velikost slike, dodatna lokacija menija).

Podrejene teme ne potrebujete, če:

• prilagajate temo z bloki v Urejevalniku spletišča: te prilagoditve so shranjene v podatkovni zbirki in preživijo posodobitev (lekcija 5.1);
• samo dodajate malo CSS prek Dodatnega CSS (v Prilagojevalniku pri klasični temi ali pri Slogih v Urejevalniku spletišča);
• želite dodati funkcijo, ki nima nič opraviti z videzom (obrazec, povezava). Ta spada v vtičnik, da preživi menjavo teme.

Podrejena tema za klasično temo

Podrejena tema je mapa v wp-content/themes/ z vsaj eno datoteko: style.css. Recimo, da je Vaša nadrejena tema v wp-content/themes/hoofdthema/. Ustvarite mapo wp-content/themes/hoofdthema-child/ s to datoteko style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Lastne prilagoditve za example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Spodaj je Vaš lastni CSS. */
.site-header { border-bottom: 3px solid #e8a33d; }

Najpomembnejša vrstica je Template:. Vanjo spada ime mape nadrejene teme (ne ime, ki ga vidite v skrbništvu). Če se to ne ujema natančno (velike črke, vezaji), WordPress pri Videz > Teme javi, da nadrejena tema manjka.

Poleg tega izdelate functions.php, da naložite slogovno datoteko. Pravilen način:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Ali nadrejena tema sama nalaga svojo slogovno datoteko, je odvisno od teme do teme. Preverite dokumentacijo svoje nadrejene teme; nekatere zahtevajo, da v podrejeni temi tudi sami naložite slogovno datoteko nadrejene teme z get_template_directory_uri() . '/style.css'. Če Vaše spletno mesto po aktivaciji deluje brez oblikovanja, slogovna datoteka nadrejene teme ni naložena.

Če želite prilagoditi predlogo, kopirajte to eno datoteko (na primer header.php) iz nadrejene teme v svojo podrejeno temo in prilagodite kopijo. WordPress najprej pogleda v podrejeno temo, nato v nadrejeno. Ne kopirajte vseh datotek: s tem ne boste več prejemali izboljšav nadrejene teme.

functions.php podrejene teme ne nadomesti tistega iz nadrejene teme, ampak se naloži pred njim. Oba se izvedeta.

Podrejena tema za temo z bloki

Pri temi z bloki deluje enako, z datotekami blokov:

• style.css z enako glavo in Template:;
• theme.json: ta se združi s tisto iz nadrejene teme, zato vanjo vnesete samo to, kar želite spremeniti (na primer barvno paleto);
• templates/ in parts/, ki nadomestijo tiste iz nadrejene teme.

Datoteka functions.php pri temi z bloki pogosto ni potrebna, saj WordPress sloge iz theme.json naloži sam.

Obstaja uradni vtičnik, Create Block Theme, ki iz Urejevalnika spletišča izdela podrejeno temo za Vas, vključno z Vašimi prilagoditvami iz podatkovne zbirke. Uporaben je, če ste prilagodili temo z bloki in želite te prilagoditve zapisati v datoteke (na primer da jih prenesete na drugo spletno mesto).

Tako jo postavite na svoje spletno mesto

1. Izdelajte mapo in datoteke na svojem računalniku ter preverite ime mape nadrejene teme.
2. Naložite mapo v wp-content/themes/ z Upraviteljem datotek ali prek SFTP. Lahko pa mapo stisnete v zip datoteko in jo naložite pri Videz > Teme > Nov dodatek teme > Naloži temo.
3. Pojdite na Videz > Teme. Vaša podrejena tema je med njimi. Aktivirajte jo.
4. Preverite svoje spletno mesto: menije in pripomočke boste morda morali po preklopu na podrejeno temo ponovno povezati; nastavitve iz Prilagojevalnika veljajo za vsako temo posebej, zato jih nastavite znova ali jih izvozite z vtičnikom.
5. Nadrejena tema mora ostati nameščena. Ne odstranite je; podrejena tema brez nje ne deluje.

To najprej storite v testnem okolju (staging) (lekcija 8.3), saj je lahko menjava teme na prometnem živem spletnem mestu nekaj časa neurejena.

Povzetek

• Podrejena tema (child theme) shrani Vaše prilagoditve datotek teme zunaj nadrejene teme, tako da jih posodobitve ne prepišejo.
• Ne potrebujete je za prilagoditve v Urejevalniku spletišča ali malo Dodatnega CSS; funkcije spadajo v vtičnik.
• Minimalno potrebujete: mapo z datoteko style.css, v kateri Template: natančno navaja mapo nadrejene teme.
• Kopirajte samo predloge, ki jih dejansko prilagajate; functions.php podrejene teme se izvede poleg tistega iz nadrejene teme.
• Nadrejena tema ostane nameščena in se še naprej posodablja.

Kviz

Naloga

Naloga A5.2: Preverite svojo podrejeno temo (child theme). Izdelajte podrejeno temo za svojo temo, na testnem spletnem mestu ali v testnem okolju (staging) (lekcija 8.3), in jo aktivirajte. Vnesite naslov spletnega mesta in ime mape podrejene teme. Program bo zahteval wp-content/themes/<mapa>/style.css in preveril: datoteka obstaja, v njej sta navedena Theme Name: in Template:, datoteka style.css nadrejene teme v tisti mapi prav tako obstaja, domača stran pa se sklicuje na podrejeno temo (torej je aktivna).

Naloga D5.2: Kaj ste prilagodili in zakaj? Zapišite, katere datoteke so v Vaši podrejeni temi, kaj ste prilagodili v vsaki datoteki in zakaj tega ni bilo mogoče narediti v Urejevalniku spletišča, v Dodatnem CSS ali v vtičniku. Označite, da je nadrejena tema še vedno nameščena in ima vklopljene samodejne posodobitve.

Dodatno branje

Ti članki opisujejo korake v nadzornih ploščah WebOké; v drugih nadzornih ploščah delujejo podobno.

• Priročnik DirectAdmin 11.1: Odpiranje upravitelja datotek: mape v Vašem paketu
• Priročnik DirectAdmin 11.2: Nalaganje in prenos datotek
• Priročnik DirectAdmin 11.7: Povezovanje s FileZilla (FTP, FTPS in SFTP)
• Child themes (developer.wordpress.org, angleško): https://developer.wordpress.org/themes/advanced-topics/child-themes/