Lehet, hogy először még kicsit idegennek hangzik ez az egész, de nem szabad megijedni tőle és minden fejlesztés megkezdésekor hozzunk létre egy gyereksablont a későbbi gondok elkerülése érdekében. Ebben a rövid írásban felvázolom, hogy miért is jó neked a gyereksablon (avagy child theme) és hogyan hozd létre. Ha most tanulod a WordPress-t és még zsong a fejed a sok új információtól, akkor nyugodtan használj plugint (bővítményt), ha pedig már rutinosabb vagy, akkor manuálisan is menni fog!

 

Miért fontos a gyereksablon?

 

Ha egy oldalnak nem hozol létre gyereksablont, az a későbbi frissítéseknél megeshet, hogy problémákat fog okozni, vagy végső esetben az is előfordulhat, hogy teljesen kizárod magad az új WordPress verziók frissítésének a lehetőségétől! Ha átírsz valamit egy telepített sablon kódjában, az a frissítésekkor sajnos felülírásra kerülhet, így megeshet, hogy szétesik az oldalad. Amennyiben viszont gyerek sablont használsz, a frissítés csak a szülő sablont fogja érinteni, az általad elvégzett módosítások pedig majd biztonságban pihennek a gyereksablonodban.

Most, hogy már értjük, hogy miért olyan fontos ez a fejlesztésünkhöz, nézzük milyen módon lehet létrehozni a gyereksablont!

 

A kezdők szerencséje: Child Theme Configurator Plugin

 

Child Theme Configurator beállítása

 

Ezzel a bővítménnyel pillanatok alatt elkészíthetsz egy gyereksablont! Mutatom a lépéseket!

A telepítést követően az Eszközöknél a Child Theme menüben fogod megtalálni a plugint!

gyereksablon a menüben

 

Ha erre rákattintottál, akkor a következő képernyőn az általam pirossal bekarikázott elemekre kell odafigyelned!

 

gyereksablon létrehozás

A Select an action menüben a CREATE a new Child Theme kiválasztása után, a 2. menüpontban a már feltelepített sablonokból választhatunk, hogy melyikből szeretnénk gyerek változatot generálni!

 

Ez után az oldal aljára görgetve már csak a nagy zöld gombot kell megnyomni!

 

Fontos a gyereksablon

 

 

Ezután nincs más teendő, mint a Megjelenés/Sablonok menüpontban kiválasztani a megfelelő gyereksablont. A neve az eredeti sablon neve lesz, csak utána lesz egy Child jelző is. Aktiváljuk és már kezdhetjük is benne a munkát!

Gyereksablon létrehozás manuálisan!

 

Ha rá tudunk szánni egy pár perccel többet, akkor érdemes manuálisan létrehozni a gyereksablont. Egyrészt egy fejlesztés alatt célszerű mindig csak azokat a pluginokat letölteni, amelyek valóban szükségesek, hiszen egy nem frissített bővítmény akár biztonsági kockázatot is jelenthet a weboldalunk számára. Továbbá a bővítmények használatában mutatott önmérséklet nagyban csökkenti az oldalon fellépő váratlan hibáknak a lehetőségét, mert bizony megeshet, hogy bár két plugin egyenként kiválóan működik, együtt mégis okoznak valami galibát az oldalon.

 

Az első lépés itt is ugyanaz, válaszd ki és telepítsd azt a sablont, amiben dolgozni szeretnél. Ezt követően FTP elérés segítségével menj fel a weboldalad mapparendszerébe! Kattints a wp-content majd azon belül a themes könyvtárra!

gyereksablon ftp

Remélem Neked nincs itt ilyen sok mappád mint nekem, ahogy láthatod én már létrehoztam néhány gyereksablont előre!

Kattints a mappa létrehozása lehetőségre, és hozd létre az általad kiválasztott sablon gyereksablonját ebbe a könyvtárba úgy, hogy az eredeti sablon nevet egy kötőjel és egy child felírat kövesse!

Mutatom:

gyereksablon elnevezése

A mappába majd fel kell másolnod egy style.css és egy function.php nevű fájlt! Nem elég az üres fájlokat létrehozni, mindkettőbe be kell illeszteni pár sort!

 

Először is nyisd meg az eredeti sablonban található style.css fájlt.

gyereksablon elnevezés

Ha megnyitod, akkor látod, hogy valahogy így néz ki:

fileok amik kellenek a gyereksablonban

Ebből a /* és */ által határolt részt kell átmásolnod a frissen létrehozott style.css-edbe és néhány sort átírni benne!

Ebben az adathalmazban vannak elengedhetetlen illetve kevésbé fontos részek. A gyereksablonod style.css-ében nincs szükség az összes sorra, hacsak nem szeretnéd publikálni a sablonodat. Ha saját felhasználásra készítetted, akkor elegendő csak pár sort kitölteni/módosítani!

Először elmagyarázom a különböző sorok jelentését:

  1. Theme name (fontos) – A WordPress adminisztrációs felületén ez a név fog megjelenni. Célszerű az eredeti név után egy child jelzőt hozzáírni és úgy hagyni!
  2. Theme URI (nem fontos) – Sablont bemutató oldalra mutató link helye.
  3. Author (fontos) – A szerző neve. Írd ide a tiédet!
  4. Author URI (nem fontos) – Weboldalad címe.
  5. Description (fontos) – Egy rövid leírás, ami a sablon menüben a részletekre kattintva jelenik meg.
  6. Template (fontos) – A szülősablon nevét kell itt megadni, ügyelve a teljes pontosságra (ahogy a mapparendszerben látod).
  7. Version (fontos) – A gyereksablonod verziószáma. Célszerű 1.0-át beírni!
  8. License (nem fontos) – Felhasználási feltételek megadásának lehetősége.
  9. License URI (nem fontos) – A weboldal ahol részletezve vannak a felhasználási feltételek.
  10. Tags (nem fontos) – címkéket tudsz megadni, hogy mások megtalálják a sablonodat.
  11. Text domain (nem fontos) – A sablon többnyelvűvé tételéhez adhatsz támogatst.

Esetünkben tehát így kell minimum kinéznie a style.css-nek:

 

/*

Theme Name: Twenty Sixteen Child

Description: A child theme of the Twenty Sixteen default WordPress theme

Author: Péter Évi

Template: twentysixteen

Version: 1.0.0

*/

A function.php fájlba pedig a következő kódot kell beillesztened:

 

</div>

<div><?phadd_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );

}

?>

</div>

<div>

 

Ez azért fontos, mert így tudja a gyereksablon a szülő sablon stíluslapját (is) használni. Így nem kell minden stílust felvinni a gyereksablonba, csak amin módosítani szeretnél.

Az elkészült style.css és a function.php fájlokat tedd a gyereksablonod mappájába, majd menj a WordPress admin felületére, hogy a sablonok között megkeresd a frissen elkészült gyereksablonodat és aktiválás után elkezdhesd benne a munkát! Ahogy láthatod, az új sablonodnál csak a neve látszik, nincs olyan szép borítóképe mint a szülő sablonnak, vagy a pluginnal létrehozott változatoknak. Ha szeretnéd, hogy legyen egy „nyitóképe” a sablonodnak, akkor tedd a gyereksablonod mappájába a screenshot.png nevű fájlt is, amit kimásolsz a szülősablon mappájából, így vizuálisan is jobban elkülönül majd a többi feltelepített sablontól és máris sokkal szebb lesz a végeredmény. Persze ez csak addig érdekes, amíg ki nem választod a sablont használatra, utána valószínűleg már nem lesz ezen a felületen dolgod!

Ennyi az egész! Kétszer-háromszor megcsinálod és már nem is fogod érteni, hogy mi nem volt ezen magától értetődő elsőre is!