Jak vytvořit vlastní šablonu pro WordPress – 2 díl

Musilda

11 roky ago

Po několika dnech jsme zpět u seriálu, ve kterém vytvoříme vlastní responsivní WordPress šablonu. V minulém díle jsme si vysvětlili jak šablona postupuje při řazení souborů a které soubory potřebujeme. Dnes si připravíme všechny základní soubory, jenž nám umožní vytvořit již funkční základ šablony.

Ve složce themes vytvoříme novou složku, kterou nazveme dummy-theme (název je zcela na vás). V této složce vytvoříme další, které nazveme assets a v ní podsložky images (složky pro obrázky), js (složka pro javascriptové soubory) a css.

Použití Bootstrap pro základ WordPress šablony

Budeme používat Bootstrap pro responsivní design, protože nám umožní přeskočit vytváření stylů a responzivního gridu. Přestože jeho použití může být omezující, nám urychlí vývoj. Stáheneme si jeho kompilovanou verzi, která je ke stažení zde stáhnout Bootstrap.

Soubory potřebné pro Bootstrap uložíme do složek assets/css a assets/js, tak jak jsou uloženy ve staženém zipu. V případě, že se rozhodnete ve složkách udělat například assets/css/bootstrap a css soubory vložit tam, musíte na to myslet při linkování ze souboru functions.php.

Vytvoření prvních souorů šablony

V editoru si následně vytvoříme první soubory. Osobně používám Sublime(alternativou může být například Visual Studio Code), protože jsem na něj zvyklý.

Vytvoříme si následující prázdné soubory:

functions.php
header.php
footer.php
sidebar.php
style.css
index.php

které uložíme do složky šablony. Nyní si začneme vytvářet strukturu.

Header.php

Do tohoto souboru vložíme následující kód:

V sekci head jsme vytvořili hlavičku html dokumentu a použili funkci wp_head pro vytvoření hooku.
Následují divy, které budou tvořit tělo šablony. V těchto divech již jsou třídy, které Bootstrap využívá pro responsivitu. Row je div, jenž obaluje nějaký obsah. Container je třída s definovanou šířkou a je zarovnaná na střed. Touto třídou jsme vlastně vymezili šířku obsahu a jeho umístění doprostřed obrazovky.

Dále pokračujeme vytvořením titulku stránky a description, které se budou zobrazovat v hlavičce stránky.
Poslední je vložení menu pomocí wp_nav_menu, což je funkce, která umožňuje vytvořit místo pro menu, konfigurovatelné z administrace WordPressu. Samotné menu musíme ještě aktivovat ve functions.php, jak si ukážeme níže.
Poslední řádek souboru obsahuje začátek divu, který ukončíme ve footer.php a opět obsahuje třídu Bootstrapu, protože musíme odstranit levý margin u prvního divu v obsahu. Pokud se chcete dozvědět více, přečtěte si Bootstrap Grid System – jak funguje Bootstrap není součástí tohoto návodu. Důležité je, že to funguje.

Footer.php

Vytvoříme soubor footer.php, který je opak header.php a celou šablonu uzavírá. Do souboru vložíme následující kód:

První div uzavírá ten, kterým jsme otevřeli na konci header.php, bez uzavření by se nám to celé rozsypalo. Pomocí date(), home_url() a bloginfo() vytvoříme patičku, která se nám bude aktualizovat podle toho, kam šablonu nasadíme a nemusíme nic upravovat. Následně zavoláme wp_footer() a ukončíme html dokument. Footer.php máme nyní připravený.

Index.php

V tuto chvíli si připravíme tělo šablony, soubor index.php, který bude připraven pro výpis příspěvků.

Na začátku souboru načteme header pomocí get_header(), vytvoříme divy col-8 a col-4, čímž rozdělíme obsah na dvě třetiny a třetinu, do třetinové části načteme sidebar pomoci get_sidebar(). Nakonec vložíme footer.php pomocí get_footer().

Samotný obsah vypíšeme pomocí if have_post, což je část označovaná jako loop. WordPress zobrazuje články, nebo stránky, podle toho co se má v danou chvíli zobrazovat, pokud se nic nenalezne, vypíše se not found. Uvnitř loopu použijeme tři funkce, a to the_title() pro název postu, the_permalink() pro odkaz na post a the_excerpt(), který vypíše zkrácenou část postu. Pokud bychom do šablony později nepřidali soubory single.php a page.php, museli bychom použít the_content(), což vypíše celý obsah článku.

Sidebar.php

Nyní vytvoříme sidebar

V tomto souboru nejprve zjistíme, zda je aktivní definovaný sidebar a pokud ne, zobrazíme defaultní kód. Mnoho šablon má takto připraven třeba poslední komentáře, poslední příspěvky a vyhledávací formulář.
Použil jsem pouze vyhledávácí formulář, aby se nám sidebar zobrazil, i když nebude aktivní.
Pozn.: předchozí verze skriptu obsahovala chybu, kterou jem 31.12.2018 opravil.

Functions.php

Tento soubor se někdy nazývá magickým souborem. Pomocí něj můžete ovlivňovat vše co na obrazovce objeví a my si do něj vložíme tři funkce.
V první zaregistrujeme místo pro Primary menu a přidáme šabloně podporu pro náhledové obrázky a další.
Druhou definujeme sidebar a tvar pro widgety.
Třetí načteme pomocí wp_head hooku externí scripty a styly. Jsou to styly Bootstrapu

Funkce rozebírat nebudu, je to myslím jasné, jen připomenu, že pomocí enqueue načítáme soubory Bootstrapu a scritpy, které vyžaduje, bez toho by nám responsivní šablona nefungovala. Kdo neví jak funguje enqueue doporučuji přečíst tento článek.

Style.css

Poslední soubor, který potřebujeme, je style.css, do kterého budeme zapisovat styly šablony. Na počátek souboru vložíme následující kód:

Tento kód identifikuje šablonu a bez něj se vám ji nepodaří nainstalovat. Nejdůležitější je Theme name, podle kterého si pak v administraci šablonu najdete. Zatím soubor necháme kromě tohoto kódu prázdný, vzhledem k tomu, že jsme vložili css soubor Bootstrapu, základní styly šablona převezme.

Úplně nakonec musíme vytvořit png obrázek, může být i jen jedna barva, nazveme jej screenshot a vložíme do složky. Velikost obrázku by měla být 600px x 450px, což je doporučená velikost pro kvalitní zobrazení i na HD přístrojích.

Tím jsme dokončili základní kostru šablony a pokud ji nyní aktivujeme, měla by již fungovat. V příštím díle začneme doplňovat složku o soubory single.php, page.php, archiv.php a další. Přestože jsme to dnes vzali letem světem, bylo to nutné pro vytvoření základu, z kterého budeme dále vycházet.

Pokud jste minuli předchozí díl, doporučuji také přečíst První díl seriálu

Návod byl aktualizován k 5.1.2019