Tvorba vlastní šablony ve WordPressu

Nevyhovují vám nabízené šablony ve WordPressu? A zdají se vám šablony z ThemeForestu upravené pro WordPress hodně drahé? Pak je nejvyšší čas naučit se tvořit šablony sami.

Styly

Všechny šablony jsou uložené v adresáři wp-content/themes ve vaší instalaci WordPressu. Každá šablona má svůj samostatný adresář, ve kterém se musí nacházet soubor style.css obsahující hlavní CSS styl šablony.

Na začátku tohoto souboru se v komentářích uvádí podrobnosti o šabloně, které následně WordPress zobrazuje v nabídce šablon:

Za zmínku stojí zejména Tags, které by měly odpovídat běžně užívaným tagům u jiných šablon, aby (pokud bude moje šablona zveřejněna), ji bylo možné snadno vyhledat podle jejích vlastností. Záhadné pole Text Domain obsahuje název lokalizačního souboru, který bude případně načten, aby bylo možné příslušnou šablonu lokalizovat (viz tag translation-ready).

Všechny cesty k souborům použité v rámci CSS souboru se zapisují relativně vzhledem k poloze souboru style.css, tzn. pokud umístíte obrázky do adresáře wp-content/themes/uzasna/images a styl máte v wp-content/themes/uzasna/styles.css, pak uvnitř odkazujete obrázky jako images/obrazek.png.

Šablony

Kaskádovým stylem lze ovlivnit celou řadu prvků ve standardní šabloně stránky, ale bez úpravy HTML šablony se zřejmě neobejdeme. K tomuto účelu slouží sada souborů v jazyce PHP, které umístíme do stejného adresáře jako CSS styl.

Základní šablonu představuje soubor index.php, který obsahuje popis samotné šablony pro situace, kdy neexistuje žádný bližší popis (např. pro vzhled speciálních stránek apod.). Uvnitř souboru je možné uvádět přímo HTML kód proložený PHP značkami vyvolávající vnitřní funkce WordPressu. Příkladem takového volání může být zobrazení názvu aktuální stránky pomocí

Pokud neodkážeme ze základní šablony na použití hlavičky a patičky pomocí speciálních šablonových souborů, vygeneruje nám WordPress začátek a konec stránky podle svého, což nám nejspíš nebude vyhovovat. Z tohoto důvodu je obecná struktura index.php následující:

a kód pro hlavičku umístíme do souboru header.php a pro patičku do footer.php. V hlavičkové části nezapomene zadefinovat příslušné hlavičky (charset, viewport, klíčová slova, popis, titulek, autora, faviconu, připojit CSS styl apod.). Uvnitř šablon se na obrázky, JavaScripty a CSS soubory odkazujeme pomocí funkce WordPressu vracející cestu do adresáře šablon:

Cyklus zobrazování příspěvků

Poslední podstatná část hlavního šablonového souboru index.php je zajištění zobrazení obsahu stránky nebo seznamu příspěvků, což zajistí několik funkcí WordPressu posuzujících, zda na stránce jsou příspěvky (seznam příspěvků) nebo jeden příspěvek nebo obsah jedné stránky. Základní cyklus by mohl obsahovat např.

Přičemž pokud je třeba zobrazit jeden příspěvek nebo obsah stránky, je možné se rozhodnout podle funkce is_page() takto:

Ve variantě stránky je zobrazen pouze obsah, ve variantě příspěvku jsou formátovány jednotlivé části příspěvku (autor, titulek, datum příspěvku a jeho obsah). Možnosti WordPressu ve stylování jednotlivých příspěvků jsou zde značné.

Pro vytvoření jednoduché šablony (bez komentářů, sidebarů, menu apod.) nám tyto znalosti zcela postačí.