Izrada podređene teme (child theme)

Modul 5: Teme i dodaci · Vrijeme čitanja: 9 minuta

Cilj učenja: Nakon ove lekcije moći ćete izraditi podređenu temu (child theme) i znat ćete kada Vam je potrebna, a kada nije.

Ključni pojmovi: podređena tema (child theme), nadređena tema (parent tema), Template: u style.css, functions.php, wp_enqueue_style, nadjačavanje predloška, theme.json u podređenoj temi, Create Block Theme

Problem koji rješava podređena tema

Zamislite: želite malo drukčije zaglavlje svoje klasične teme, pa zbog toga prilagodite header.php u mapi teme. To funkcionira. Tri tjedna poslije stiže nadogradnja teme koju ste postavili da se instalira automatski (kako i treba, lekcija 7.2). Nadogradnja zamijeni sve datoteke teme, a Vaša je prilagodba nestala.

Podređena tema (child theme) mala je tema koja kaže: "koristi sve od te druge teme (nadređene teme, parent teme), osim onoga što imam ja." Svoje prilagodbe stavljate u podređenu temu. Nadređenu temu i dalje jednostavno ažurirate, a Vaše prilagodbe ostaju.

Kada je potrebna, a kada nije

Podređena tema Vam je potrebna ako želite prilagoditi ili nadopuniti datoteke teme:

• želite drukčiji predložak (kod klasične teme PHP datoteku, kod blok teme HTML predložak);
• želite vlastiti CSS koji je prevelik za CSS polje;
• želite vlastiti PHP kod koji je vezan uz izgled (dodatni format slike, dodatna lokacija izbornika).

Podređena tema Vam nije potrebna ako:

• prilagođavate blok temu u Uređivaču stranice: te prilagodbe se nalaze u bazi podataka i ostaju nakon nadogradnje (lekcija 5.1);
• samo dodajete malo CSS-a putem Dodatni CSS (u Prilagodniku kod klasične teme, ili kod Stilova u Uređivaču stranice);
• želite dodati funkciju koja nema veze s izgledom (obrazac, povezivanje). To spada u dodatak (plugin), kako bi preživjela promjenu teme.

Podređena tema za klasičnu temu

Podređena tema je mapa u wp-content/themes/ s barem jednom datotekom: style.css. Recimo da se Vaša nadređena tema nalazi u wp-content/themes/hoofdthema/. Izradite tada mapu wp-content/themes/hoofdthema-child/ s ovim style.css:

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

/* Vaš vlastiti CSS dolazi ispod. */
.site-header { border-bottom: 3px solid #e8a33d; }

Najvažniji redak je Template:. Tamo stoji naziv mape nadređene teme (ne naziv koji vidite u administraciji). Ako to nije točno (velika slova, crtice), WordPress će kod Izgled > Teme javiti da nadređena tema nedostaje.

Uz to izrađujete functions.php kako biste učitali stylesheetove. Uredan način:

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

Hoće li nadređena tema sama učitati svoj stylesheet, razlikuje se od teme do teme. Pogledajte dokumentaciju svoje nadređene teme; neke traže da u podređenoj temi i sami učitate stylesheet nadređene teme pomoću get_template_directory_uri() . '/style.css'. Ako Vaša web-stranica nakon aktivacije izgleda bez oblikovanja, stylesheet nadređene teme se ne učitava.

Ako želite prilagoditi predložak, kopirajte tu jednu datoteku (na primjer header.php) iz nadređene teme u svoju podređenu temu i prilagodite kopiju. WordPress najprije gleda u podređenoj temi, zatim u nadređenoj. Nemojte kopirati sve datoteke: tada više nećete dobivati poboljšanja iz nadređene teme.

functions.php podređene teme ne zamjenjuje onaj iz nadređene teme, nego se učitava prije njega. Oba se izvršavaju.

Podređena tema za blok temu

Kod blok teme to funkcionira na isti način, s blok datotekama:

• style.css s istim zaglavljem i Template:;
• theme.json: ona se spaja s onom iz nadređene teme, pa u nju stavljate samo ono što želite promijeniti (na primjer paletu boja);
• templates/ i parts/ koji zamjenjuju one iz nadređene teme.

Datoteka functions.php kod blok teme često nije potrebna, jer WordPress stilove iz theme.json učitava sam.

Postoji službeni dodatak (plugin), Create Block Theme, koji iz Uređivača stranice izrađuje podređenu temu za Vas, uključujući Vaše prilagodbe iz baze podataka. Korisno ako ste prilagodili blok temu i te prilagodbe želite zabilježiti u datotekama (na primjer kako biste ih prenijeli na drugu web-stranicu).

Ovako to postavljate na svojoj web-stranici

1. Izradite mapu i datoteke na svom računalu i provjerite naziv mape nadređene teme.
2. Prenesite mapu u wp-content/themes/ pomoću File Managera ili putem SFTP-a. Ili zapakirajte mapu u zip datoteku i prenesite je kod Izgled > Teme > Nova tema > Prenesi temu.
3. Idite na Izgled > Teme. Vaša podređena tema nalazi se u popisu. Aktivirajte je.
4. Provjerite svoju web-stranicu: izbornike i widgete nakon prelaska na podređenu temu možda će trebati ponovno povezati; postavke iz Prilagodnika vrijede po temi, pa ih ponovno postavite ili ih izvezete pomoću dodatka.
5. Nadređena tema mora ostati instalirana. Nemojte je brisati; podređena tema ne radi bez nje.

Ovo je najbolje najprije isprobati u testnom okruženju (staging) (lekcija 8.3), jer promjena teme na prometnoj produkcijskoj web-stranici može kratko izgledati neuredno.

Sažetak

• Podređena tema čuva Vaše prilagodbe datoteka teme izvan nadređene teme, tako da ih nadogradnje ne prepišu.
• Nije Vam potrebna za prilagodbe u Uređivaču stranice ili malo Dodatnog CSS-a; funkcije spadaju u dodatak (plugin).
• Minimalno: mapa sa style.css u kojem Template: točno navodi naziv mape nadređene teme.
• Kopirajte samo one predloške koje zaista prilagođavate; functions.php podređene teme dolazi uz onaj iz nadređene teme, ne umjesto njega.
• Nadređena tema ostaje instalirana i i dalje se ažurira.

Kviz

Zadatak

Zadatak A5.2: Provjera Vaše podređene teme (child theme). Izradite podređenu temu za svoju temu, na svojoj testnoj web-stranici ili u testnom okruženju (staging) (lekcija 8.3), i aktivirajte je. Unesite adresu web-stranice i naziv mape podređene teme. Program dohvaća wp-content/themes/<mapa>/style.css i provjerava: postoji li datoteka, sadrži li Theme Name: i Template:, postoji li i style.css nadređene teme u toj mapi, te upućuje li naslovnica na podređenu temu (znači da je aktivna).

Zadatak D5.2: Što ste prilagodili i zašto? Zabilježite koje se datoteke nalaze u Vašoj podređenoj temi, što ste prilagodili u svakoj datoteci i zašto to nije bilo moguće u Uređivaču stranice, u Dodatnom CSS-u ili u dodatku (pluginu). Potvrdite da je nadređena tema i dalje instalirana i da ima automatske nadogradnje.

Dodatno čitanje

Ovi članci opisuju korake u upravljačkim pločama WebOké; u drugim upravljačkim pločama postupak je sličan.

• DirectAdmin priručnik 11.1: Otvaranje File Manager: mape u Vašem paketu
• DirectAdmin priručnik 11.2: Upload i preuzimanje datoteka
• DirectAdmin priručnik 11.7: Povezivanje s FileZillom (FTP, FTPS i SFTP)
• Child themes (developer.wordpress.org, na engleskom): https://developer.wordpress.org/themes/advanced-topics/child-themes/