Gyerek sablon (child theme) létrehozása

[Ezt a cikket 3 perc elolvasni.]

Nagyon sokszor lesz szükségünk arra, hogy belenyúljunk a sablonunkba és módosítsunk egyes fájlokat valamint funkciókat, azonban az összes egyéni változtatásunkat elveszítjük egy frissítés telepítése során, ez pedig több, mint bosszantó. Ennek a problémának a kiküszöbölésére vezették be a WordPress fejlesztői az úgynevezett “gyerek sablonokat” (angolul child theme). Ha létezik a szülő sablonnak egy származtatott, “gyerek” variánsa, akkor a WordPress először onnan próbálja meg betölteni a fájlokat (tehát ha van egy header.php a szülő sablon és a gyerek sablon könyvtárában is, akkor mindig a child mappában lévő header.php kerül betöltésre, ez pedig tartalmazhatja az egyéni módosításainkat úgy, hogy nem kell hozzányúlnunk a szülő sablon fájlrendszeréhez). Így már bátran felülírhatjuk a szülő sablon fájljait, tehát nyugodtan frissíthetünk és a saját módosításaink elvesztésétől se kell tartanunk.

Szerencsére a folyamat nem bonyolult így bárki számára könnyedén végrehajtható.

Ebben a példában az alapértelmezett twentyfifteen sablonnal dolgozunk és első lépésként létre kell hoznunk egy új mappát a “wp-content/themes” könyvtárban, mégpedig “twentyfifteen-child” néven. A lényeg a “-child” utótag, ez előtt pedig mindig az aktív témánk neve szerepeljen. Ebbe az újonnan létrehozott mappába fognak kerülni az egyéni módosításaink, azonban ahhoz, hogy a szülő-gyerek kapcsolat működhessen még végre kell hajtanunk két lépést.

Hozzunk létre a “twentyfifteen-child” könyvtárban egy style.css fájlt a következő tartalommal:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

Ne felejtsük el átírni a megfelelő részeket, ha más témával dolgozunk.

A régi módszer szerint itt el kellene helyezni egy CSS import szabályt és ezzel betölteni a szülő sablon fő stíluslapját (style.css), azonban ehelyett ma már inkább a lentebb olvasható megoldás az ajánlott (persze az @import továbbra is működik).

Hozzunk létre ugyanitt egy “functions.php” fájlt a következő tartalommal:

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

Ez a funkció gondoskodik róla, hogy a gyerek sablon örökölje és betöltse a szülő stíluslapját.

A style.css és a functions.php létrehozása után készen is vagyunk, aktiválhatjuk a gyerek témánkat a vezérlőpulton keresztül, innentől kezdve pedig minden egyéni módosítást ide helyezzünk el (tehát ha a page.php fájlt kell szerkesztenünk, akkor mentsük le a szülő sablon könyvtárából a fájlt, módosítsuk, majd töltsük fel a gyerek sablon könyvtárába).

Szinte az összes megvásárolt prémium sablon tartalmaz gyerek témát, így ilyen esetben nem is kell a létrehozással bajlódni, elég csak feltölteni a szülő és gyerek mappát és aktiválni a child témát. Az ingyenes sablonok esetében legtöbbször sajnos nem kényeztetnek el minket ezzel (sem), de ne sajnáljuk az időt és mindig készítsünk gyerek témát, mert nagyon sok idegeskedéstől kíméljük meg magunkat, ha előre gondolkodunk.

Ha tetszik, mutasd meg másoknak is: