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).

Oszd meg Te is:

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ezek is érdekesek lehetnek számodra: 

Iratkozz fel hírlevelünkre!

Javasolt eszközök:

Banner250x250.png
Elementor Pro
Generatepress Logo White Asset
GeneratePress
Divi 4.0
Divihello
Prémium támogatás és ajándék Divi licence
Adatvedelem.png
ADATVÉDELEM minta
Aszf.png
Webshop ÁSZF minta

“Saját “gyerek”-sablon készítése” bejegyzéshez 4 hozzászólás

  1. Szia Móni!

    Szerettem volna egy gyereksablont csinálni … köszönöm már van 3 nagykorú :-)… nem arra gondoltam.
    Szóval ehhez nem értek. Ez van 🙂

    A gyereksablonba egy wp-e-commerce webáruházat kívánok elhelyezni, amit majd a szülősablonba akarok élesíteni… ha minden klappol.

    A gépem a következőt írta ki:
    “Sérült Sablon
    A következő sablonok hiányosak. A sablonoknak rendelkeznie Kell EGY stíluslappal es EGY sablonmintával.
    Név Leírás
    Polírozott-plus Hiányzó / hibás stíluslap.”

    Te vagy a hibás, olyan jó ötleteid vannak… 🙂

    • Olyat nem lehet csinálni, hogy a gyereksablonba elhelyezel valamit és utána élesíted az eredetiben. A WP pont fordítva működik, a tartalom ugyanaz, a sablonokat meg váltogathatod.

      Szerintem Te nem gyereksablont akarsz létrehozni, hanem egy aloldalt, egy alkönyvtárat, ahová telepítesz egy másik WP-t és abban teszteled a webáruházadat. Az teljesen más eset.

Szólj hozzá!

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..