Ezt a bejegyzést nem tart tovább 4 percnél elovasni!
Ha már jobban belemerültél a WordPress világába és elkezded átírni a sablonod fáljait, hogy extrákat tegyél bele vagy éppen ellenkezőleg, neked nem tetsző, számodra használhatatlan dolgokat vegyél ki belőle akkor itt az ideje, hogy megismerkedj a Child theme-el!
Mikor és miért van jelentősége a child theme-nek? Képzeld el, hogy nekiálsz testreszabni a sablonodat. Megváltoztatsz apró de fontos részleteket a kinézetében, átszabod egy kicsit a funkciókat. Órákat sőt napokat töltesz azzal, hogy a sablonod olyan legyen és úgy működjön ahogy azt te szeretnéd. Aztán megérkezik egy frissítés a sablonodhoz. Hurrá! Még jobb lesz! De NEM!
Amikor Child theme nélkül, közvetlenül a sablont szerkeszted a sablon frissítésekor minden addigi munkád elvész. A frissítés egyszerűen felülírja azt.
Pontosan ennek a problémának a megoldására vezették be a WordPressben a Child Theme-t. A lényege, hogy a Child Theme örökli a Parent Theme funkcionalitását és dizájnját. Amennyiben a Parent Theme-nek létezik egy Child Theme-e a WordPress onnan fogja betölteni a fájlokat. Így nyugodtan módosíthatod a sablonod fájljait (a Child Theme-ben) anélkül, hogy frissítéskor a változtatásaid elvesznének!

A Child Theme használatának előnyei

  • Ahelyett, hogy egy ój sablont kellene készítened az alapoktól, használhatsz egy meglévő sablont kiindulópontnak
  • Minden funkcionális előnyét kitudod használni a Parent Theme-nek miközben tetszésed szerint módosíthatod a kinézetét
  • Frissítheted a Parent Theme-t anélkül, hogy elveszítenéd az álltalad végett módosításokat a dizájnon
  • Ha mégsem vagy elégedett a változtatásaiddal csak tiltsd le a Child Theme-t és minden marad a régiben
  • Nagyszerű lehetőség a gyakorlásra, megismerni hogy működnek a sablonok
Egy Child Theme létrehozása pofon egyszerű! Mindössze három dologra van szükség :
  • A Child Theme saját mappájára a WP-CONTENT/THEMES mappában
  • Egy function.php nevű fájlra a Child Theme saját mappájában
  • Egy style.css nevű fájlra szintén a Child Theme saját mappájában

 

Tehát lépésről lépésre a következőt kell tenned

    1. Létrehozol a wp-content/themes könyvtárban egy új mappát a Child Theme-ednek. A mappa neve a következő sémát követi: modjuk az eredeti sablon a twentyfifteen. Így tehát a Child Them-nek ezt a nevet kell adnod twentyfifteen-child. A lényeg, hogy a Child Theme mappa neve mindíg az eredeti sablon neve + -child! Ebbe a mappába fognak kerülni a style.css és a function.php. A style.css amivel a sablonod kinézetét és a function.php amivel a viselkedését tudod megváltoztatni.
    2. A style.css fájl hozzáadása a mappához. Nyiss meg egy egyszerű szövegszerkesztő programot és add a következő sorokat hozzá. Ez a style sheet header. Megadása kötelező! Ennek a pér sor kódnak a segítségével fogja a WordPress megtaláláni és Child Theme-ként kezelni a sablont. Mentsd el a fájlt style.css néven a Child Theme mappájába.

 


/*
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
*/

 

Az egyes sorok jelenése:

  • Theme name
    Ez a név fog megjelenni a sablonok között a WordPress adminisztrációs felületén.
  • Theme URI
    Ez a webcím egy weboldalra vagy egy a sablont bemutató oldalra mutat. Ez vagy az Author’s URI mindenképen legyen megadva különben a Child Theme nem lesz regisztrálva a WordPressben.
  • Description
    Itt adhatsz meg egy rövid leírást a Child Theme-ről ami a sablon menüben fog megjelenni ha a Részletek gombra kattintasz.
  • Author
    Ez a szerző neve – jelen esetben a tiéd.
  • Author URI
    Itt megadhatod a weboldalad címét.
  • Template
    Ennek a mezőnek a megadása kötelező! Itt kell megadni a Parent Theme-et tartalamazó mappa nevét. Vigyázz! A kis és nagybetűk számítanak. Ezt hívják úgy, hogy Case sensitive.
  • Version
    Ez a Child Theme verzió száma. Kezd 1.0 – val.
  • License
    Its adhatod meg a sablonod felhasználási feltételeit. Használhatod a Parent Theme felhasználási feltételeit.
  • License URI
    Ez a webcam ahoy a a sablonod felhasznállási feltételeit részletezed. Használd azt a webcímet ami a Parent Theme-ben van.
  • Tags
    Itt adhatsz címkéket a sablonodhoz, holy segítsen másoknak könnyebben megtalálni a többi WordPress sablon között.
  • Text domain
    Itt adhatsz támogatást a sablonod több nyelvűvé tételéhez.
 
A jó hír, hogy csak akkor kell az összes paramétert megadnod ha a sablonodat publikálni is akarod. Amennyiben csak sajátmagad számára készíted elég ha csak a következő sorokat adod meg. Ezeket kötelező megadni ahoz, hogy a Child Theme-d működjön!!
/*
Theme Name: Twenty Fifteen Child Theme
Description: A child theme of the Twenty Fifteen default WordPress theme
Author: Nick Schäferhoff
Template: twentyfifteen
Version: 1.0.0
*/</div>
<div>

Végül

Add hozzá a Child Theme mappához a function.php fájlt. Csak úgy mint a style.css esetében nyiss meg egy tetszőleges szövegszerkesztőt és mentsd el a mappába function.php néven. De még mielőtt elmented illeszd be a következő kódrészletet :
</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>
Ezt hívjuk enqueuing-nak . Ezzel a kódrészlettel tesszük lehetővé, hogy a Child Theme használhassa a Parent Theme style.css fálját. Így megmarad az eredeti sablon minden kinézetre vonatkozó beállítása és neked csak az általad kívánt módosításokat kell a Child Theme style.css fájljába irnod.
Csak érdekesség képpen. Régebben a Parent Theme style.css fáljának a Child Them style.css fájljába való importálással oldották ezt meg.
</div>
<div>@import url("../twentyfifteen/style.css");</div>
<div>
Ezt a módszert is alkalmazhatod de a WordPress jelenlegi irányzata inkább az első módszert ajánlja.
Ezzel meg is vagy. Ami még hátra van, hogy aktiváld az újjonan létrehozott Child Theme-det. Ehhez menj a WordPress adminisztrációs felületén a Megjelenés -> Sablonok, keresd meg a sablonod és egyszerüen csak klikkelj az aktiválásra.
Találkozunk a következő cikkben!    
 
Happy coding!