WordPress child theme (gyerek sablon) létrehozása

Amikor az általunk használt kinézetet frissítik a fejlesztők, azt a frissítést érdemes feltelepíteni a weboldalunkra is, hiszen lehet, hogy funkcionálisan, vagy éppen biztonság (sok weboldalt az elavult kinézet miatt tudnak feltörni) terén fejlesztettek valamit. Hogy ne váljon elavulttá a weboldalunk, ezeket ajánlott telepíteni.

Ennek azonban nagy hátránya az, hogy a kinézetben eszközölt változtatások – pl.: css, funkciók, nyelvi fájlok – elveszhetek, sőt szinte (néhány kivétel van, illetve körülményes módon meg lehet akadályozni az adatvesztéssel járó plusz fejlesztői munkát) minden esetben el is vesznek.

A megoldás: gyerek kinézet (child theme)

Pontosan ezért találták ki a WordPress fejlesztői az ún. child theme-t, azaz gyerek kinézetet. Ez technikailag egy új WordPress kinézet, amelynek minden eleme a szülő kinézetből származtatható.

Nem kell megijedni, nem az ördögtől való dolog a gyerek kinézet létrehozása, pár egyszerű lépés szükségeltetik hozzá.

Child-theme

Mi is az a gyerek kinézet (child theme)?

A gyerek kinézet/child theme annyiban tér el a szülő kinézettől, amennyit a szülő kinézethez képest változtatunk rajta (és két kivételtől eltekintve csak ennyiből, a módosításokból áll az egész gyerek kinézet), amely változtatásokat „fizikailag” a child theme/gyerek kinézet könyvtárában tárolunk. Ezekről lesz szó részletesebben lejjebb, példával illusztrálva.

Hogyan működik a gyerek kinézet (child theme)?

A child theme/gyerek kinézet úgy működik, hogy a WordPress mindig először onnan próbálja kinyerni az éppen lekért adatokat, funkciókat, és csak akkor – de akkor onnan – a szülő kinézetből, ha a child theme-ben/gyerek kinézetben nincs olyan, amely az éppen lekért adathoz tartozik. Azaz ha a szülő kinézethez képest van változtatás a gyerek kinézetben, akkor a weboldalon úgy fog megjelenni, és nem a szülő kinézet által meghatározott módon.

A gyerek kinézetek használatának legnagyobb előnye

A child theme/gyerek kinézet használatakor bátra(bba)n frissíthetjük a weboldalunk szülő kinézetét, jó eséllyel nem fognak elveszni a CSS-ben eszközölt változtatások, plusz funkcionális fejlesztések, hiszen azok a gyerek kinézetben vannak, nem a szülő kinézetben. Azért frissítés előtt érdemes egy biztonsági mentést készíteni a weboldalról, mert child theme/gyerek kinézet használata esetén is felléphet működési zavar a weboldalon, amennyiben a szülő kinézet nagy arányú eltérést tartalmaz annak korábbi verziójától és/vagy child theme/gyerek kinézetétől. A fentieken túl gyorsítja a fejlesztési időt a gyerek kinézet használata.

Gyors példa az előzőre:

Ha a gyerek kinézet tartalmaz egy footer.php-t, akkor a szülő kinézet footer.php fájlja helyett ez fog megjelenni/betöltődni a weboldal alján. Azaz – mivel a weboldal működéséhez a szülő kinézet footer.php-ja nem kell – a szülő kinézet frissítése nem fogja befolyásolni a footer.php megjelenését, mert annak módosításai a gyerek kinézetben vannak.

Hogyan készítsünk gyerek kinézetet az általunk használt kinézethez?

Sok fizetős kinézetnél a letöltött csomagban van child theme mappa is. Ha nem vagy ilyen szerencsés, akkor kövesd az alábbi útmutatót!

Hogyan?

Egyszerű lesz, pár lépés!

  1. Gyerek sablon mappájának létrehozása
  2. style.css létrehozása
  3. functions.php létrehozása

Nézzük lépésről-lépésre:

1. Gyerek sablon mappájának létrehozása

Érdemes olyan nevet adni a mappának, amely megegyezik a szülő kinézet mappájának nevével, hozzáadva a „child” karaktersorozatot. Pl.: a „core” nevű kinézet gyerek sablonjának a könyvtárneve legyen „corechild”. Ebbe a mappába kell beletenni az alábbi módon létrehozott style.css és functions.php fájlokat.

2. style.css létrehozása

child-stlye-css

(kód letöltése)

A fentiekből a Theme Name és Template mezők kitöltése kötelező, és mindegyiket érdemes valós, személyre szabott adatokkal kitölteni! Figyelem! Ha a kinézet neve nagybetűt tartalmaz, akkor a gyerek sablonban is így szerepeljen, így kell rá hivatkozni!!

3. functions.php létrehozása

child-functions

(kód letöltése)

A szülő kinézet css-ének betöltése a gyerek sablonba:

A fentieken túl érdemes (nem mindegyik kinézet igényli) elhelyezni egy kódsort vagy a style.css, vagy a functions.php fájlokban, hogy a szülő kinézet stíluslapját örökölje és betöltse a gyerek sablon is. Ennek két módja van.

A régi módszer, picit lassabb betöltődést eredményez:
A style.css fájlban helyezzük az alábbi kód kinézetspecifikusan módosított verzióját:

@import url(“../core/style.css”);
Természetesen több css importálására is van lehetőség, amennyiben ez szükséges.

Az új módszer:
A functions.php fájlban helyezzük el az alábbi kódot:

20160829-functions-php3

(kód letöltése)

Több css importálása esetén a codex.wordpress.org/Child_Themes oldalon leírtak szerint kell eljárni.

A fentiek után a hagyományos módon lehet a gyerek kinézetet telepíteni és aktiválni. Előfordulhat, hogy a Megjelenés => Menük alatt újra be kell állítani ilyenkor a menüt, valamint lehetséges, hogy a kinézet beállításait és ismét meg kell határozni. Olyan kinézeteknél, ahol a kinézet beállításainak exportálására van lehetőség, érdemes ezzel élni, majd a gyerek kinézet aktiválásakor elveszett beállításokat vissza lehet importálni. A gyerek kinézet aktiválása előtt is érdemes egy biztonsági mentést készíteni a weboldalról.

Aktiválás utána minden, a szülő kinézetben eszközölendő változtatást a gyerek sablonban helyezzünk el. Ha pl. a footer.php-ban szeretnénk módosítani, akkor a szülő könyvtár footer.php fájlját másoljuk át a gyerek kinézet mappájába, és ott szerkesszük. Ha a szülő kinézet módosítandó fájlja egy almappában van, akkor a gyerek kinézetben is hozzuk létre az almappát, és abba másoljuk át a fájlt. Természetesen új egyedi oldalsablonokat és egyéb dolgokat tartalmazó php fájlokat is elhelyezhetünk a gyerek kinézet könyvtárában.

Fontos!
get_template_ fügyvénycsalád a szülő kinézet mappájára vonatkozik, míg a get_stylesheet_ függvénycsalád a gyerek kinézet mappájára.

Pl.:

20160829-linkek

Az első link a kinézet mappájából veszi a képet, míg a második a gyerek kinézet mappájából.
(a fenti két kód premium.wpmudev.org oldalról származik)

A fentieken túl érdemes egy screenshot.png-t és nyelvi fájlokat elhelyezni a gyerek sablonban.

Videón a fentiek, és azok kiegészítése.

Tartalomjegyzék:

  • Hogyan veszik el a módosítás kinézet frissítéskor, ha nincs child theme?
  • Hogyan kell létrehozni gyerek kinézetet (mappa, style.css, functions.php, stb.), és hogyan kell aktiválni?
  • Hogyan ne veszítsd el a gyerek kinézet aktiválásakor az addigi beállításokat? (azért készíts egy biztonsági mentést a művelet előtt!)
  • Hogyan veszi át a gyerek kinézet a szülő css-ét? Hogyan lehet azt felülírni?
  • A kinézetben lévő php fájlok módosítása, és gyerek kinézetben történő tárolása.
  • Hogyan használd a gyerek kinézet functions.php fájlját?
  • Kinézet frissítés, gyerek sablon mellett.
  • További példák, hogy mit és hogyan lehet/érdemes a gyerek kinézettel.

WordPress gyerek kinézet létrehozás, használat – videó:


Cikkértesítő

Ha nem szeretnél lemaradni az új cikkekről, akkor iratkozz fel az értesítőre!

“WordPress child theme (gyerek sablon) létrehozása” bejegyzéshez 6 hozzászólás

Szólj hozzá!


WordPress segítséget keresel?

Kérj díjmentes árajánlatot!

Főbb szolgáltatásaim: weboldal/webáruház készítés, megújítás, fejlesztés, gyorsítás, karbantartás, hibajavítás, oktatás, stb.