Wordpress gyerek sablon létrehozása lépésről lépésre

Péter Éva képe



A gyerek sablon létrehozása először nagyon idegennek, bonyolultnak és túlságosan technikainak tűnik, azonban érdemes megbirkózni a feladattal, mert sok későbbi bosszúságtól kíméled meg magad.

Miért fontos egy Wordpress gyereksablon létrehozása?

Mivel a Wordpress is folyamatos fejlesztés alatt áll, és napi szinten érkeznek az újabb és újabb verziók, akármelyik sablonra esik a választásod, szinte biztos, hogy a sablonnak is lépést kell tartania ezekkel a verzió frissítésekkel. Egy sablont kevésbé gyorsan fejlesztenek, mint az eredeti Wordpress rendszert, de előbb-utóbb biztosan számíthatsz egy új verzióra. Ha átírsz valamit egy telepített sablon kódjában, az a sablon frissítésekor sajnos felülírásra kerül, így megeshet, hogy szétesik az oldalad. Azt viszont nem engedheted meg hosszú távon, hogy ne frissítsd, mert akkor a friss Wordpress rendsezrrel nem fog lépést tartani.

Ennek a helyzetnek a megoldására találták ki a gyerek-sablont (child theme). Ugyanis ha 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. Az elején ez nem tűnik olyan nagy jelentőségű dolognak, hiszen, még azt sem tudod, hogyan kell egy sablont CSS kóddal felülírni. De mindig eljön az a pillanat, amikor valamilyen kis részlettel nem vagy elégedett a telepített sablonban, és megkísérled megváltoztatni az eredeti tulajdonságokat.

Hogyan működik egy Wordpress gyereksablon?

A gyerek sablon szoros kapcsolatban áll azzal a sablonnal, amelyből létrehoztad. Csak azokat a változtatásokat, tulajdonságokat tartalmazza, amelyek különböznek a szülő sablon tulajdonságaitól. Ha például CSS-ben átírod a cím-sorok fontméretét, akkor ezt a tulajdonságot a gyerek-sablonból fogja venni a rendszer, de minden mást, beleértve a cím-sor betűinek színét vagy a fonttípusát már az eredeti sablonból veszi. Általában is igaz, hogy a rendszer először megnézi, mi van a gyerek sablonban definiálva, azokat az utasításokat végrehajtja, alkalmazza, és csak ezután fordul a szülő sablon stílus definícióihoz.

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

Először egy bővítmény segítségével hozunk létre gyereksablont, mégpedig a Child Theme Configurator Plugin segítségével. Ezzel a bővítménnyel pillanatok alatt elkészíthetsz egy gyereksablont.

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

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


Child Theme létrehozása Wordpress bővítménnyel

Ezekre figyelj a beállításoknál

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.


Sablon kiválasztása a gyereksablon elkészítéséhez

Válaszd ki, hogy melyik sablonból készüljün a Child Theme

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 egyszerűségre való törekvés annál fontosabb, minél összetettebb honlapot tervezel és építesz.

Alapvetően három dolgot kell megtenned, ha saját gyerek sablont szeretnél.

1 Létre kell hoznod a webhelyeden egy mappát, amelyben a Wordpress gyerek sablonhoz tartozó file-okat tároljuk majd.

2 Létre kell hoznod a gyerek sablon saját stílus definícióit tartalmazó style.css file-t és egy megadott kód-részletet beleírni.

3 Létre kell hoznod a gyerek sablon működését befolyásoló function.php file-t és egy megadott kód-részletet beleírni.





Az első lépés itt is ugyanaz, mint az első módszer esetében. 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. ahhoz, hogy telepített Wordpress honlapod legyen, már szükséged volt a file-ok távoli elérésére, és a tárhely-szolgáltatódtól meg kellett kapnod minden szükséges információt ezzel kapcsolatban. Az ingyenes Filezilla program használatával gyorsan és biztonságosan tudod a honlapodat alkotó file-oket elérni a webszerveren.

Keresd meg a wp-content mappát, majd azon belül a themes könyvtárat. 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 felirat kövesse. Figyelem! Fontos a név konvenció betartása, nem adhatsz tetszőleges nevet a Wordpress gyerek-sablonnak.

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.

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

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.

2Theme URI (nem fontos) - Sablont bemutató oldalra mutató link helye.

3Author (fontos) – A szerző neve. Írd ide a tiédet.

4Author URI (nem fontos) – Weboldalad címe.

5Description (fontos) – Egy rövid leírás, ami a sablon menüben a részletekre kattintva jelenik meg.

6Template (fontos) – A szülősablon nevét kell itt megadni, ügyelve a teljes pontosságra (ahogy a mapparendszerben látod).

7Version (fontos) – A gyereksablonod verziószáma. Célszerű 1.0-át beírni.

8License (nem fontos) – Felhasználási feltételek megadásának lehetősége.

9License URI (nem fontos) – A weboldal ahol részletezve vannak a felhasználási feltételek.

10Tags (nem fontos) – címkéket tudsz megadni, hogy mások megtalálják a sablonodat.

11Text domain (nem fontos) – A sablon többnyelvűvé tételéhez adhatsz támogatást.

Esetünkben tehát így kell minimum kinéznie a style.css-nek (a Theme Name és a Template a saját Wordpress sablonodnak megfelelően átnevezendő):

 
/*
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 azzal a változtatással, hogy a parent-style helyére a saját szülő sablonod egyedi megnevezését kell behelyettesítened:

 
<?php
<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>

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. (A régi módszer az volt, hogy a gyerek sablon stílus definíció file-jába tettük be a szülő sablon stíluslapjára vonatkozó import utasítást: @import url(“szülő sablon mappa rendszere/style.css”); ez azonban lassabb betöltődést eredményez). A fenti kód csak akkor működőképes, ha a szülő sablonodat egyetlen stíluslap segítségével valósították meg. Általában azonban NEM ez a helyzet. Az összetettebb sablonokhoz általában több, egymástól függő .css file is tartozhat, azonban ebben az esetben kicsit bonyolultabb kódot kell a php file-ba másolni, hogy ezeket a függőségeket is jól kezelje a rendszer.

 
<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // Például 'twentyfifteen-style' , ha a Twenty Fifteen sablont használod szülő sablonként

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
</div>

Az elkészült style.css és a function.php fájlokat másold 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. Le is töltheted a style.css és a function.php file-okat a gyerek sablonodhoz, de ne felejtsd el testre szabni őket és átírni a megfelelő részeket a saját szülő sablonodnak megfelelően. NEM használhatod fel őket ilyen formában közvetlenül.


style.css template file Wordpress gyerek sablon készítéshez.


function.php template file Wordpress gyerek sablon készítéshez.

Ha már módosítottál egy sablont, és így szeretnél gyerek-sablont készíteni utólag, akkor sincs veszve minden. A Wordpress eredeti, angol nyelvű leírásában a gyerek sablonokról ennek a folyamatnak a lépéseit is megtalálod.

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!

A profi sablon készítő cégek gyerek sablont is biztosítanak a termékeiknek. A ThemeGrill Wordpress gyerek sablonjai letölthetőek a honlapjukról, még az ingyenes sablonok esetében is. Ha népszerű, ismert sablont használsz, akkor érdemes rákeresni, nincs-e a neten már letölthető gyerek sablon változata. A vásárolt sablonok esetében a profizmus jele, ha biztosítják a gyerek sablont is a termékükhöz. Ilyenkor a sablon telepítésekor már látnod kell az egyértelműen megismerhető gyerek-sablont is és csak aktiválnod kell, ahogyan az az Avada esetében a képen is látható.

Ha még új vagy a Wordpress-ben, néz meg hogyan kapcsolhatóak a Google online marketing eszközei a Wordpress honlapodhoz.

Új hozzászólás

CAPTCHA
Bizonyítsd be, hogy nem vagy robot!
  _  __  ____           __     __  _   _        
| |/ / | _ \ __ __ \ \ / / | | | | __ __
| ' / | |_) | \ \ / / \ \ / / | |_| | \ \/ /
| . \ | __/ \ V / \ V / | _ | > <
|_|\_\ |_| \_/ \_/ |_| |_| /_/\_\
Enter the code depicted in ASCII art style.

Kocsis Kata

programtervező matematikus, webdesign oktató
Kocsis Kata, programtervező matematikus, webdesign oktató

Életem legfantasztikusabb döntése volt a sok kompromisszummal terhelt alkalmazotti lét feladása. Nagyon büszke vagyok négy éve alapított saját cégünkre, ami az én szememben életforma, hivatás, közösség és gyönyörű célok együttese. A Kreatív Webdesign Tanfolyamok nem egyszerűen online tanfolyami termékek a számomra. A szaktudáson, a tapasztalaton túl olyan értékeket is szeretnék közvetíteni, amelyek a mai társadalomban hiánycikknek számítanak. A vizuális kultúra és igényesség fejlesztése, a művészet és az alkotás becsempészése a hétköznapokba, az együttműködésben rejlő erő megtapasztalása azoknak a hallgatóknak is nagyon sokat adhat, akikből végül nem is lesz webdesigner.

Melyik témák érdekelnek a legjobban?

* kötelező mezők



Ezek a témák érdekelnek

Go to top