Saját „gyerek”-sablon készítése

A nyílt blogon egyszer készítettem egy összeállítást családról, gyerekekről szóló WordPress oldalakhoz ajánlott sablonokról, de itt most egészen másról van szó. Azt, amikor egy meglévő sablonból készítesz egy átalakítottat, a WordPress szakzsargon „gyerek” témának (angolul child theme) hívja.

A hivatalos WordPress definíció szerint a „child theme” meghatározása a következő:

„a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme” – azaz „egy sablon, amely örökli egy másik sablon (a szülő sablon) funkcióit, és lehetővé teszi, hogy módosíts vagy hozzáadj a szülő sablon funkcióihoz”.

Ha tehát megtalálod álmaid sablonját, de telepítés után ráébredsz, hogy pár apróságot meg kellene változtatnod benne, de nem akarod magadat azzal fárasztani, hogy a sablon frissítésekor elveszített módosításokat újra és újra begépeld, sokkal okosabb és biztonságosabb is, ha készítesz egy gyereksablont.

Ehhez az első lépés az, hogy a wp-content/themes könyvtárban hozz létre egy alkönyvtárat a saját sablonod nevével. Tehát ha mondjuk a twentyeleven sablont akarod módosítani, és ebből kiindulva akarod létrehozni a saját, mondjuk twentyeleven-plus nevű sablonodat, akkor hozd létre a következő könyvtárat:

/wp-content/themes/twentyeleven-plus

Ahhoz, hogy egy gyereksablon működjön, igazából egyetlenegy mindenképpen kötelező fájlra van szükség, és ez a style.css, azaz a stíluslap. Ezt tehát mindenképpen el kell helyezned a gyereksablonod könyvtárában. A szülősablonnal való összeköttetés megvalósításához pedig egy szabványos fejlécet kell elhelyezned ebben a saját style.css fájlodban:

/*
Theme Name: TwentyEleven-Plus
Theme URI: http://domainneved.hu/
Description: Saját gyereksablon a Twenty Eleven sablonhoz
Author: (a Te neved)
Author URI: http://domainneved.hu/rolam/
Template: twentyeleven
Version: 1.0
*/
 
@import url(“../twentyeleven/style.css”);

A fenti (a kódban „kikommentelt”, azaz megjegyzésként értelmezett) sorok közül kettő mindenképpen kötelező:

Theme Name – ez lesz az a név, amely a Vezérlőpultodon a Megjelenés -> Sablonok menüpontban meg fog jelenni, és ennek pontosan meg kell egyeznie azzal a könyvtárnévvel, amelybe a gyereksablonodat teszed. (A kis- és nagybetűk itt nem számítanak.)

Template – a szülősablon könyvtárneve, ahonnan a gyereksablonod örökli mindazokat a beállításokat, amelyeket a saját gyerekváltozatodban nem írsz felül.

Az összes többi sor opcionális, de azért érdemes kitölteni, mert szintén megjelenik a Vezérlőpulton.

Van viszont a fenti szabványos fejlécben egy olyan sor, amely nem a megjegyzés része, a „@import url(“../twentyeleven/style.css”);” sor. Ez szintén opcionális, de ha biztosra akarsz menni, hogy a gyereksablonod mindent a szülőtől vegyen, amit nem írsz át, akkor érdemes ezt is beilleszteni. Tehát ez a sor mondja meg a WordPressnek, hogy importálja a szülősablon beállításait, hacsak a Te saját style.css fájlod nem rendelkezik másként.

A style.css fájl további részébe írt beállítások pedig felül fogják írni a szülősablon azonos elemeire vonatkozó beállításait. Ha tehát csak a háttérszínt akarod átállítani mondjuk az #e2e2e2 színre, akkor egyetlen sort kell írnod a gyereksablonod style.css fájljába, a body { background: #e2e2e2; } sort; az összes többi beállítást a szülősablonból fogja használni a motor.

Hasonlóan dolgozhatsz a sablonod egyéb fájljaival is, például írhatsz saját page.php fájlt a statikus oldalaid megjelenítésére. Ez esetben a szülősablon page.php-ja helyett a gyereksablonod page.php-ja fogja meghatározni a statikus oldalaid megjelenését.

Ha esetleg további funkciókat akarsz hozzáadni a sablonodhoz, tudnod kell, hogy a functions.php egy kicsit másképp működik – ez nem felülírja az eredeti fájlt, hanem amit a gyereksablonod functions.php fájljába beleírsz, az hozzáadódik a szülősablon functions.php fájljában írt funkciókhoz. A motor először betölti a szülősablon functions.php-ját, majd ha talál ilyen fájlt a gyereksablon alkönyvtárában, akkor az abban található funkciókat hozzáadja az eredetiekhez.

Mindezzel csak éppen megkarcoltuk a gyereksablonok témájának felszínét – ha többet akarsz tudni ezekről, javaslom mindenekelőtt a WordPress saját, részletes dokumentációját (angol nyelven).