Wordpress

Jak vytvořit a upravit child theme pro WordPress

Co je vlastně cild theme? V podstatě se jedná o šablonu (theme) – potomek (déle už jen child), která dědí vše ze šablony rodičovské (dále už jen parent) a ve které můžeme dělat  veškeré změny, parent šablony se v podstatě skoro ani nedotkneme.

To má velkou výhodu při aktualizaci parent šablony společností, která ji vytvořila. Celkového vzhledu a chování WEBu by se nová verze parent šablony neměla dotknout, protože veškeré změny jsou v child šabloně.

Jeden příklad: Tyto stránky běží také na WordPressu. Web používá volně dostupnou šablonu „Sydney“. Vzhled a chování je upraveno child šablonou Sydneyplus.

V parent šabloně byl pouze vytvořen překlad do češtiny, pomocí pluginu Loco Translate a zaměněny 2 celostránkové obrázky z první stránky. To by nová verze šablony neměla přepsat. Vše ostatní se odehrává v child šabloně Sydneyplus.

Co vše jsem (zatím) udělal

1. Vytvořil strukturu child šablony „Sydneyplus“

sydneyplus
  css
  — bootstrap.min.css
  js
  — bootstrap.min.js
  page-templates
  — left-sidebar.php
  — portfolio.php
  — right-sidebar.php
  post-templates
  — post_nosidebar.php
style.css
footer.php
functions.php
screenshot.png

2. Co je obsahem?

Soubory z child šablony buď doplňují ty z parent šablony, nebo je nahrazují.

  • Ve složce css je bootstrap.min.css, který nahrazuje nekompletní z parent šablony (chyběl v něm třeba class „well“ a další …)
  • Ve složce js je bootstrap.min.js
  • Ve složce page-templates jsou nové dílčí šablony
  • Ve složce post-templates je nová dílčí šablony
  • Dále v kořenovém adresáři jsou style.css, footer.php (nahrazuje originální footer), functions.php

3. Co je ještě změněno proti původní šabloně?

Šablona zobrazuje také portfolio. Proto byl vytvořen „Vlastní typ obsahu“ – Portfolio. Tím se v administrativní sekci otevřelo rozhraní pro zadávání údajů o našem portfoliu prací. Také byla vytvořena nová dílčí šablona portfolio.php viz strom složek výše. Více zde.


Jeden z rozsáhlých návodů jak vytvořit child theme najdete třeba zde.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *