Tvorba WP šablony – 2. díl – Z HTML do WP

19.05.2015 | Tomáš Kocifaj

V minulém díle jsme si ukázali, jak vytvořit základní kostru šablonu společně s nainstalovaný KT Frameworkem. V dnešním díle bychom si ukázali, jak příslušné HTML společně s CSS vzhledem „rozdělit“ do potřebných PHP souborů a vytvořit tak dynamickou šablonu pro WordPress.

Zdroj šablony po dokončení druhého dílu

HTML a CSS šablona

Každý máme nějaký postup, jak stránky nebo šablonu vytvářet. My si vždy připravíme čistou HTML a CSS šablonu, se všemi podstránkami, včetně javascriptu, fontů a jiných utilit, které naše stránky budou potřebovat. Finální HTML pak následně převedeme do WordPress šablony.

Pro ukázku nám však postačí již nějaká vytvořená HTML šablona, kterých je na internetu spoustu. Já jsem například zvolil tento Bootstrap template, který nám pomůže demonstrovat velkou škálu funkcí. Šablonu jsem stáhl, nahrál ji do svého projektu v NetBeans. Pokud to děláte jako já, mělo by to vypadat nějak takto:

HTML a CSS zdroj naší šablony

Začneme si tím, že si zhotovíme úvodní stránku – tedy oživíme soubor index.php. V první řadě si budeme muset ujasnit několik věcí, které budou potřeba zařídit, aby naše stránky korektně pracovali.

  1. Vytvoření hlavičky a patičky, kterou následně budeme všude používat.
  2. Načtení externích zdrojů – JS a CSS soubory.
  3. Rozdělení bloků úvodní stránky do přehlednější struktury.

Vytvoření hlavičky a patičky

Nyní vytvoříme základní kostru – bude se jednat o soubory header,php, index.php (ten již máme vytvořený, ale je zatím prázdný) a footer.php. Otevřeme si náš soubor index.html a postupně z něj vykopíruje určité části. Zbytek kódu nakopírujeme do index.php.

Hlavička (header.php)

V tomto souboru budou zapsané všechny informace a data, které se budou zobrazovat na každé podstránce. Především půjde o informace v tagu <head> a již část samotné stránky. Náš soubor header.php by měl tedy vypadat takto:

Patička (footer.php)

Stejně jako hlavička, i patička budou obsahovat tu část webových stránek, kterou je potřeba opakovat na každé podstránce. V našem případě tedy samotná vzhledová patička a načtení externích zdrojů v podobě javascriptů. Soubor s patičkou bude vypadat nějak takto:

Načtení externích zdrojů do šablony

Pokud se podíváme do HTML šablony do hlavičky uvidíme, jaké zdroje jsou v rámci šablony vyžadovány. V hlavičce vidíme, že šablona načítá celkem 5 CSS souborů. Neměli bychom zapomenou, že javascript by měl být načítán vždy na konci HTML dokumentu. Pokud tedy sjedeme v editoru více dolů, zjistíme, že šablona načítá také několik JS souborů a to celkem 11. Na všechny tyto zdroje nesmíme při vytváření zapomenout.

K tomu, aby nám vše korektně fungovalo budeme muset ještě doplnit některé důležité PHP funkce do header.php a footer.php

Upravená header.php bude vypadat nyní takto

Upravená footer.php bude vypadat nyní takto

Využití komponenty KT Theme Config pro načtení zdrojů

K těmto účelům je připravená komponenta KT Theme Config, která nám pomůže s mnohým nastavení a budeme jí dále ještě velmi aktivně využívat.

Nyní ve složce yours založíme novou složku, kterou pojmenujeme requires a do ní vložíme složku common. Do té poté založíme php soubor, který pojmenujeme kt_theme_setup.inc.php.

Také bude potřeba přesunout všechny naše CSS soubory do složky css, kterou vytvoříme ve složce yours. Naše struktura šablony by měla vypadat nyní takto:

Vytvoření a založení KT Theme Configu

Nezapomeňte, že stejně jako CSS je potřeba dodat i ostatní zdroje – tedy složku JS a v našem případě šablony i FONTS. Stejně jako složku CSS tak vytvoříme složky ostatní a přesuneme do nich potřebné zdroje.

No nově založeného souboru kt_theme_setup.inc.php přidáme sadu kódů. Náš soubor by měl nyní obsahovat tyto informace.

Framework sám vytvoří konstanty na cesty pro JS a CSS v rámci šablony. Je ale důležité si uvědomit, že klíč „WPFW“ je použit na základě našeho parametru, který jsme vložili při inicializaci našeho modulu v souboru kt_init.inc.php ve funkci kt_initialize_module();

Dokončení a úprava index.php

Nyní, nám už jen zbývá provést úpravu souboru index.php – ten bychom měli mít zatím úplně prázdný. Vezmeme obsah našeho HTML souboru index.html a vše překopírujeme. Nyní umažeme obsah, který jsme nakopírovali do header.php a nahradíme ho funkci get_header(). Stejnou věc uděláme i v dolní části, kde umažeme stejný obsah jako ve footer.php a nahradíme ho jinou – ale podobnou funkcí – get_footer(). Obě funkce nám zajistí to, že obsah header.phpfooter.php se vloží na potřebné místo naší šablony.

Místo zdlouhavého HTML jsem mezi bloky <section> doplnil pouze tečky pro ukázku struktury souboru index.php. Nyní provedeme to, že si ještě pěkně zpřehledníme náš index.php, aby tam nebylo toho obsahu tolik a my jsme s v tom pěkně vyznali.

V rootu šablony si založíme složku partials a do ní vytvoříme několik souborů. Soubory bychom měli pojmenovat podle funkčních bloků naší šablony, já jsem zvolil tyto názvy:

  • index-slider.php – Zde bude část s úvodním „slidrem“.
  • main-offer-list.php – Přehled hlavní nabídky služeb.
  • recent-works.php – Tady umístíme výpis „referencí“.

Do těchto souborů nyní postupně „vykopírujeme“ HTML obsah našeho souboru index.php dle funkčních bloků, které jsem naznačil. Toto rozdělení do bloků je vždy závislé na tom, jak je Váš design připraven, jak lze funkční bloky rozdělit a jak jste vy nebo kodér HTML připravil.

Můj index.php vypadá nyní takto:

Funkce get_template_part() my vždy vrátí ze složky partials („partials/“) příslušný název souboru, který jsem přidal za lomítko. Do těchto souborů jsem již pouze nakopírovat příslušný obsah HTML. Co to tedy znamená? Neděje se nic jiného, než se na místo, kam jsem zapsal funkci get_template_part() vloží ta část HTML, které je zapsána v souboru, jehož název jsem předal v parametru funkce za lomítkem.

Závěr

V dnešním dílu jsme si udělali základní přípravu úvodní stránky naší šablony. Načetli jsme pomocí komponenty KT Theme Config externí zdroje do šablony. Udělali jsme základní rozdělení HTML do potřebných souborů a šablona nám korektně funguje. Zatím se na ní pouze nezobrazují obrázky, které zatím odkazují na špatnou cestu – to si ale ukážeme příště společně s dalším osazením naší úvodní stránky a dalších potřebných částí.

Podobné články

V minulém díle jsme naší šablonu zhotovili do stavu, kde již máme potřebné prvky ve WordPressu. Nyní bude potřeba zhotovit pro…

Na úvodní stránce nám chybí už jen vytvořit seznam referencí, které chceme prezentovat. K tomu budeme potřebovat vlastní post_type a…

V minulém díle jsme provedli základní vytvoření kostry šablony, načetli jsme do FE externí zdroje, jako jsou obrázky, javascriptové a…

To, proč jsme s tímto projektem začali, byl důvod, že jsme jednotlivé šablony pro WordPress chtěli vytvářet opravdu efektivně, kvalitně…

O autorovi: Tomáš Kocifaj

Tomáš Kocifaj

Tomáš aktivně v oboru tvorby webových stránek podniká už 6. rok. Za tu dobu nasbíral spoustu zkušeností, dovedností a představu o tom, jak by měla práce takového člověka probíhat. Čím by se neměl zdržovat, zatěžovat a podle toho také s kolegou Martinem začal psát tento projekt.



Odebírejte novinky z FW

Sledujte nás!

Tyto stránky využívají Cookies. Používáním těchto stránek vyjadřujete souhlas s používáním Cookies.Zjistit víceOK, rozumím