WordPress feltelepítve, sablonod kiválasztva és már alig várod, hogy belekezdj a honlapod felépítésébe. Mielőtt azonban belekezdenél, ne felejts el gyereksablont létrehozni. Lehet, most még azt sem tudod mit jelent a WordPress Child Theme, de a cikk végére meg fogod érteni, hogy ezt te sem hagyhatod ki.
Mi az a Child theme?
A hivatalos angol elnevezés Child theme, de gyerek sablon, gyerek téma vagy származtatott sablon elnevezéssel is találkozhatsz.
…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.
Tehát a WordPress korábbi hivatalos meghatározása szerint a Child theme egy olyan sablon, amely örökli egy másik sablon – nevezett szülő sablon – funkcióit, és lehetővé teszi, hogy a szülő sablon funkcióit módosítsd.
Az elnevezések – gyerek sablon és szülő sablon – nem véletlenek, hisz igaz, hogy a gyereksablon különálló, de a fő sablonoddal, azaz a szülő sablonoddal szoros összefüggésben áll. A child theme csak azokat a fájlokat tartalmazza, amelyek a fő sablonodtól eltérőek.
Miért fontos a Child theme használata
Minden weblaptulajdonos életében eljön az a pillanat, amikor valami egyedi kinézetet vagy funkciót szeretne a honlapjába építeni, olyat, amit az általa használt sablon nem tud alapból. Nincs is ezzel probléma, hisz egy hozzáértőnek nem probléma az egyedi kívánságokat kódba foglalni. Fontos azonban, hogy ezeket a kódokat ne közvetlenül a sablonba mentsd el, mert azok a sablon frissítésekor elvesznek.
A Child theme fontosságát a saját bőrömön is megtapasztaltam. Az első honlapomon, amelyhez egy ingyenes alap sablont használtam, szükségem lett egy footer-re, azaz láblécre. Örültem, mint majom a farkának, mikor életem első kódját megírtam, és bementettem a sablonomba. A meglepetés akkor ért, amikor a téma frissítésével a gyönyörű láblécem eltűnt. Ha gyerek sablont használtam volna, ez nem történt volna meg.
Azóta minden oldalamat azzal kezdem, hogy a téma telepítése után azonnal létre is hozom a Child témát. Akkor is, ha semmilyen változtatás nincs tervbe véve, hisz az igények bármikor változhatnak.
Hogyan működik a Child theme?
Leegyszerűsítve úgy kell elképzelni, hogy a WordPress először a gyerek témából nyeri ki az adatokat. Amennyiben valamelyik funkció nem található a gyerek témában, akkor továbbmegy a szülő sablonba. Tehát az általad végzett módosítások azért maradnak meg a szülő sablon frissítése után is, mert minden esetben először a gyerek sablonba elhelyezett kódok kerülnek használatba. Ezért olyan fontos a child theme használata.
Alternatívák, ha nem használsz gyereksablont
- Elfogadod a sablonod korlátait és nem változtatsz rajta semmit.
- Belekódolsz a sablonodba, majd ezután soha nem frissíted, nehogy elvesszen a módosítás. Ez nagyon veszélyes a honlap működése szempontjából.
- Belekódolsz a sablonba, és minden frissítés után újból feltöltöd az egyedi kódokat. Egyrészt időigényes, másrészt számos hiba forrása.
WordPress Child theme létrehozása bővítménnyel
Vannak, akik az egyszerűség és gyorsaság, míg mások a total kontrol hívei. Ha te az első csoportba tartozol, vagy jártasságod sincs a kódok világában, akkor a WordPress Child theme létrehozását neked inkább bővítmény segítségével ajánlom.
Biztonsági mentés
Mielőtt bármibe belekezdenél, készíts biztonsági mentést a honlapodról, ha már van rajta valami tartalom! Hidd el, életet tud menteni. Erre én az UpdraftPlus bővítményt használom.
Child Theme Configurator bővítmény
A Child theme létrehozására bizonyára több WordPress bővítmény is rendelkezésre áll, de én eddig csak a Child Theme Configuratort használtam, így ezt fogom most bemutatni. Pro, azaz fizetős verziója is van, de az ingyenes is bőven elegendő arra, amire használni szeretnénk. Használata gyors és egyszerű.
A WordPress admin felületeden kattints a Bővítmények menüpontra, majd az Új hozzáadása gombra.
A keresőbe írd be a bővítmény nevét, azaz Child theme configurator. Amint betöltődik a keresett plugin, telepítheted, majd be is kapcsolhatod.
- Az Eszközök menüpont alatt megtalálod a Child theme generátort, amibe belépve meg is kezdheted a gyereksablon létrehozását.
- Az első pontban a „Create a new Child Theme” vagyis az Új gyerek sablon létrehozása legyen bejelölve.
- A második pontban a legördülő menüben válaszd ki a sablonod nevét, amihez a gyereksablont létre szeretnéd hozni. Én most a Twenty Twenty sablonhoz fogok gyereksablont készíteni.
- Kattints az Analyze gombra.
Ezek után a sablon alapbeállításain nem kell módosítanod, egyszerűen csak kattints a Create New Child Theme gombra.
Amint elkészült a Child theme, a Sablonok menüpont alatt megtalálod a többi között. Ezek után nincs más dolgod, mint bekapcsolni és elkezdeni felépíteni a honlapodat. A testreszabás ugyanúgy fog történni, mintha az eredeti sablont szerkesztenéd. Semmi különbséget nem fogsz észrevenni.
WordPress Child theme létrehozása kóddal
Ez a módszer azoknak való, akik már némi kód-jártassággal rendelkeznek, vagy nem riadnak vissza a kihívásoktól és mélyebben meg szeretnék ismerni a honlapjuk működését. Ha a sablonodat most telepítetted fel, és még semmilyen tartalom nincs a honlapodon, akkor nem sok veszíteni valód van, bátran vágj bele. A legrosszabb esetben újra kell telepítened a WordPresst, de legalább tanulsz és gyakorolsz.
Egy gyerek sablonnak minimum három összetevőből kell állnia:
- child theme mappa
- style.css
- function.php
Amire szükséged lesz a WordPress Child theme létrehozásakor
- A kiválasztott sablonod legyen feltelepítve
- FTP hozzáférés
- FTP program – pl. FileZilla
- Szövegszerkesztő program, pl. Notepad++
Az FTP hozzáférésről, a FileZilláról és a fájlok FTP-n keresztüli feltöltéséről a DIVI telepítése – FTP-n keresztül cikkemben olvashatsz bővebben.
Child theme mappa létrehozása
Hozz létre egy mappát a számítógépeden, amit nevezz el a következőképpen: sablonodneve-child
Mivel én a Twenty Twenty sablonhoz fogok Child témát készíteni, így az én mappám neve: twentytwenty-child
Style.css létrehozása
- Nyiss meg egy új oldalt a Notepad++ programban
- Másold be a következő kódot
- Mentsd el a korábban létrehozott mappába style.css néven. A név nem lehet más, mert a WordPress máshogy nem fogja felismerni.
/*
Theme Name: Twenty Twenty Child
Description: Twenty Twenty Child Theme
Author: a te neved
Author URI: https://sajatdomain.hu
Template: twentytwenty
Version: 1.0.0
Text Domain: twentytwenty-child
*/- Theme Name: KÖTELEZŐ ELEM
- Template: KÖTELEZŐ ELEM, pontosan meg kell egyeznie a szülő sablon nevével.
- Author: a saját nevedre írd át. Működést nem befolyásoló elem.
- Author URI: a honlapod URL-je. Működést nem befolyásoló elem.
- Version: adj neki egy saját verziószámot. Működést nem befolyásoló elem.
Functions.php létrehozása
- Nyiss meg egy új üres oldalt a Notepad++ programban
- Másold be az alábbi kódot
- Mentsd el a korábban létrehozott mappába functions.php néven.
- Ez azért fontos, mert a gyereksablon így tudja a szülő sablon stíluslapját használni. Így csak azt a stílust kell a gyereksablonba felvenni, amin módosítani szeretnél.
- Az alábbi kód csak akkor működik, ha a szülő sablonod csak egy css fájlt használ. Ha nagyon összetett témát választottál, ami több css fájlt is használ (pl style.css, mobile-style.css stb.), akkor a gyerek sablon létrehozása több ismeretet igényel, amit ebben a bejegyzésben nem részletezek.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}WordPress child theme feltöltése FTP-n keresztül
A Child theme mappádat a style.css és functions.php fájlokkal FTP-n keresztül feltöltöd a WP-content Themes mappájába.
Az FTP-n keresztüli adatfeltöltést a „Divi telepítése FTP-n keresztül” cikkemben részletesen bemutatom.
WordPress Child theme borítókép – nem kötelező
A most létrehozott Child theme a többi sablonod között olyan, mint egy szürke kisegér, hisz a nevén kívül nincs borítóképe, mint az eredeti sablonodnak, vagy a bővítménnyel létrehozott gyereksablonnak. Ha téged ez nem zavar, akkor így is hagyhatod, de nem bonyolult képet menteni hozzá.
Keresd meg a szülő sablon mappájában a screenshot.png fájlt, amit ments be a korábban létrehozott mappába a style.css és a functions.php fájlok mellé. Máris kész a WordPress Child Theme borítóképe.
WordPress Child Theme aktiválása
Az így létrehozott gyereksablon aktiválása semmiben nem különbözik a bővítménnyel létrehozott változattól. Lépj vissza a honlapod admin felületére, ahol a Sablonok menüpont alatt található Child témát be tudod kapcsolni.
