Gyermek sablon (child theme) készítése

Modul 5: Sablonok és bővítmények · Olvasási idő: 9 perc

Tanulási cél: E lecke végén Ön képes lesz gyermek sablont (child theme) készíteni, és tudni fogja, mikor van rá szükség, és mikor nincs.

Kulcsfogalmak: gyermek sablon (child theme), szülő sablon (parent theme), Template: a style.css fájlban, functions.php, wp_enqueue_style, sablonminta felülírása, theme.json egy gyermek sablonban, Create Block Theme

A probléma, amit a gyermek sablon megold

Tegyük fel, hogy szeretné kicsit módosítani a klasszikus sablonja fejlécét, ezért módosítja a header.php fájlt a sablon mappájában. Ez működik. Három héttel később érkezik egy frissítés a sablonhoz, amelyet automatikusan telepíteni hagy (ahogy az a helyes, lásd: 7.2. lecke). A frissítés lecseréli a sablon összes fájlját, és az Ön módosítása eltűnik.

A gyermek sablon (child theme) egy kis sablon, amely azt mondja: "használj mindent a másik sablonból (a szülő sablonból, parent theme), kivéve amit én magam adtam hozzá." Az Ön módosításai a gyermek sablonban kerülnek elhelyezésre. A szülő sablont ettől még nyugodtan frissítheti, a módosításai megmaradnak.

Mikor van rá szükség, és mikor nincs

Gyermek sablonra akkor van szükség, ha egy sablon fájljait szeretné módosítani vagy kiegészíteni:

• egy sablonmintát (klasszikus sablonnál egy PHP-fájlt, blokk sablonnál egy HTML-sablonmintát) szeretne másképp;
• saját CSS-t szeretne, amely túl nagy a CSS-mezőhöz;
• saját PHP-kódot szeretne, amely a megjelenéshez kapcsolódik (például egy extra képméret, egy extra menühely).

Nincs szükség gyermek sablonra, ha:

• egy blokk sablont módosít a Webhely szerkesztőben: ezek a módosítások az adatbázisban tárolódnak, és egy frissítést is túlélnek (5.1. lecke);
• csak egy kis CSS-t ad hozzá a További CSS segítségével (a Testreszabóban klasszikus sablon esetén, vagy a Stíluslapoknál a Webhely szerkesztőben);
• egy funkciót szeretne hozzáadni, amelynek semmi köze a megjelenéshez (egy űrlap, egy kapcsolat). Ez egy bővítménybe való, hogy egy sablonváltást is túléljen.

Gyermek sablon klasszikus sablonhoz

A gyermek sablon egy mappa a wp-content/themes/ könyvtárban, amely legalább egy fájlt tartalmaz: style.css. Tegyük fel, hogy a szülő sablon a wp-content/themes/hoofdthema/ mappában van. Ekkor hozzon létre egy wp-content/themes/hoofdthema-child/ mappát a következő style.css tartalommal:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Egyéni beállítások az example.com oldalhoz
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Az Ön egyéni CSS kódja az alábbiakban található. */
.site-header { border-bottom: 3px solid #e8a33d; }

A legfontosabb sor a Template:. Itt a szülő sablon mappájának a neve szerepel (nem az a név, amelyet az admin felületen lát). Ha ez nem egyezik pontosan (nagybetűk, kötőjelek), a WordPress a Megjelenés > Sablonok oldalon jelzi, hogy a szülő sablon hiányzik.

Ezenkívül hozzon létre egy functions.php fájlt a stíluslapok betöltéséhez. A helyes módja ennek:

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

Hogy a szülő sablon betölti-e saját stíluslapját, az sablononként eltérő. Nézze meg a szülő sablon dokumentációját; egyes sablonok azt kérik, hogy a gyermekben is töltse be a szülő stíluslapját a get_template_directory_uri() . '/style.css' kóddal. Ha a weboldala aktiválás után formázás nélkül jelenik meg, akkor a szülő stíluslapja nem töltődött be.

Ha egy sablonmintát szeretne módosítani, másolja át az adott fájlt (például header.php) a szülőből a gyermek sablonjába, és módosítsa a másolatot. A WordPress először a gyermek sablonban keres, utána a szülőben. Ne másolja át az összes fájlt: akkor ugyanis a szülő javításait és fejlesztéseit már nem kapja meg.

A gyermek sablon functions.php fájlja nem váltja fel a szülőét, hanem azt megelőzően töltődik be. Mindkettő lefut.

Gyermek sablon blokk sablonhoz

Blokk sablonnál ugyanúgy működik, blokkfájlokkal:

• style.css ugyanazzal a fejléccel és Template: sorral;
• opcionálisan egy saját theme.json: ez összevonódik a szülő fájljával, tehát csak azt kell belerakni, amit meg szeretne változtatni (például a színpalettát);
• opcionálisan sablonminták a templates/ és parts/ mappákban, amelyek felváltják a szülő megfelelő fájljait.

A functions.php blokk sablon esetén gyakran nem szükséges, mivel a WordPress maga tölti be a stílusokat a theme.json fájlból.

Van egy hivatalos bővítmény, a Create Block Theme, amely a Webhely szerkesztőből kiindulva elkészít Önnek egy gyermek sablont, beleértve az adatbázisban lévő módosításait is. Hasznos, ha módosított egy blokk sablont, és ezeket a módosításokat fájlokban szeretné rögzíteni (például hogy átvigye őket egy másik weboldalra).

Így állítja be a weboldalán

1. Hozza létre a mappát és a fájlokat a saját számítógépén, és ellenőrizze a szülő sablon mappájának nevét.
2. Töltse fel a mappát a wp-content/themes/ könyvtárba a Fájlkezelő segítségével vagy SFTP-n keresztül. Vagy csomagolja a mappát zip fájlba, és töltse fel a Megjelenés > Sablonok > Új sablon > Sablon feltöltése menüpontban.
3. Lépjen a Megjelenés > Sablonok menüpontba. A gyermek sablonja ott fog megjelenni. Aktiválja.
4. Ellenőrizze a weboldalát: a menüket és widgeteket gyermek sablonra váltáskor esetleg újra kell csatolni; a Testreszabóban lévő beállítások sablononként érvényesek, tehát azokat újra be kell állítania, vagy exportálnia kell egy bővítmény segítségével.
5. A szülő sablonnak telepítve kell maradnia. Ne törölje, a gyermek sablon nélküle nem működik.

Ezt lehetőleg először egy tesztkörnyezetben (staging) tegye meg (8.3. lecke), mert a sablonváltás egy forgalmas élő weboldalon némi zűrzavart okozhat.

Összefoglalás

• A gyermek sablon a szülő sablonon kívül őrzi meg a sablonfájlokon végzett módosításait, így a frissítések nem írják felül azokat.
• Nincs rá szükség a Webhely szerkesztőben végzett módosításokhoz vagy egy kis További CSS-hez; a funkciók egy bővítménybe valók.
• A minimum: egy mappa style.css fájllal, amelyben a Template: pontosan a szülő sablon mappáját nevezi meg.
• Csak azokat a sablonmintákat másolja, amelyeket valóban módosít; a gyermek sablon functions.php fájlja a szülőé mellé kerül, nem helyette.
• A szülő sablon megmarad, és továbbra is frissítve lesz.

Kvíz

Feladat

A5.2 feladat: A gyermek sablonjának ellenőrzése. Készítsen gyermek sablont a sablonjához, a tesztoldalán vagy tesztkörnyezetben (staging) (8.3. lecke), és aktiválja. Adja meg a weboldal címét és a gyermek sablon mappájának nevét. A program lekéri a wp-content/themes/<mappa>/style.css fájlt, és ellenőrzi: a fájl létezik, van benne Theme Name: és Template: sor, a szülő sablon style.css fájlja is létezik az adott mappában, és a kezdőlap a gyermek sablonra hivatkozik (tehát az aktív).

D5.2 feladat: Mit módosított, és miért? Jegyezze fel, mely fájlok találhatók a gyermek sablonjában, mit módosított az egyes fájlokban, és miért nem lehetett ezt a Webhely szerkesztőben, a További CSS-ben vagy egy bővítményben megoldani. Pipálja ki, hogy a szülő sablon még telepítve van, és van automatikus frissítése.

További olvasnivaló

Ezek a cikkek a WebOké paneljeiben bemutatott lépéseket írják le; más panelekben hasonlóan működnek.

• DirectAdmin útmutató 11.1: A Fájlkezelő megnyitása: a csomagban található könyvtárak
• DirectAdmin útmutató 11.2: Fájlok feltöltése és letöltése
• DirectAdmin útmutató 11.7: Kapcsolódás FileZillával (FTP, FTPS és SFTP)
• Child themes (developer.wordpress.org, angol nyelven): https://developer.wordpress.org/themes/advanced-topics/child-themes/