WordPress – tvorba šablony od A do Z – 1.díl – Úvod


S redakčním systémem WordPress pracuji již několik let a můžu říct, že jsem na něm rozjel zatím úspěšně rostoucí a fungující podnikání. Mnoho lidí si myslí, že WordPress je „blogovací“ systém, který má své omezení a rozhodně není vhodný pro komerční využití jako je tvora webových stránek pro firmy, tvorba E-shopu, katalogů a jiných portálů. V tomto seriálu bych Vám chtěl ukázat, že WordPress je přesný opak a jeho autoři vytvořili opravdu redakční systém, kde lze udělat prakticky všechno.

Abych to s tou chválou moc nepřehnal, má i své nevýhody, které já osobě vidím se zápisem některého nastavení přímo do PHP souborů a načítáním mnoha souborů i ve chvílích, kdy je systém nepotřebuje. Je to však cena za jeho univerzálnost a při opravdu velkých projektech bych použil jiné systémy hlavně kvůli rychlosti a bezpečnosti.

Úvod do seriálu

V tomto seriálu budu předpokládat, že čtenář má znalost HTML, CSS a běžné základy PHP. Nebudu se zabývat tím, co je to funkce, echo nebo proč jsem zrovna název příspěvku zapsal do H1. Budu se zaměřovat pouze na redakční systém a s tím spojenou problematiku.

WP Themes – Šablony

Po instalaci WP na server zjistíte, že Vám systém nabízí dvě základní šablony, které toho umí opravdu hodně a mají mnoho funkcí. Můj názor je takový, že jsou naprosto nepotřebné a doporučím Vám je rovnou smazat. Možná, že postupem času se dostanete do stavu, kdy ve funkcích budete plavat jako ryba ve vodě, ale zatím opusťme složitosti a pojďme vytvořit něco praktického a jednoduchého.

Na webové stránce WordPress codexu naleznete přesnou strukturu WP šablony a dozvíte se, kdy se jaký příslušný soubor volá. Postupem času se Vám pokusím představit většinu nejpoužívanějších souborů, až časem přijdete na to, jak to celé funguje a začnete vytvářet vlastní různé kombinace.

Bez čeho se neobejdeme:

header.php

Začátek webové stránky většinou tak, jak jsme naučení z psaní běžných HTML stránek. Header.php může obsahovat i dynamické prvky, které generuje php.

index.php

Tělo stránky a zároveň soubor, který se načte při zadání url adresy webových stránek (pokud tomu není nastaveno jinak, ale o tom později). Je to také první soubor, který se bude volat při zadání url adresy a veškeré soubory se poté načítají přímo do něj.

footer.php

Patička webových stránek, většinou nějaký podpis, sada odkazů nebo jiné náležitosti, které tam tvůrce chce uvádět.

Pokud si myslíte, že je toho málo, tak jste na omylu. Tyto tři soubory nám budou bohatě stačit, abychom vytvořili WP šablonu. Popravdě by nám stačil i index.php, ale to bychom se vraceli o pár let zpět do dob, kdy se vše psalo v html.

Jak by tedy vypadaly základní soubory?

header.php


<!DOCTYPE html>
<html lang="cs">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Nějaký popisek webových stránek" />
	<meta name="keywords" content="sada, klíčovýc, slov, webových, stránek" />
	<meta name="author" content="www.ktstudio.cz">
	<meta name="robots" content="index,follow" />
	<meta name="googlebot" content="index, follow, snippet, archive" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
	<title>Titulek webových strnek</title>
        <?php wp_head(); ?>
</head>

<body>

index.php


<?php get_header(); ?>
<div id="content">
	<h1>Nějaký nadpis na titulní stránce</h1>
	<p>A třeba text na titulní stránce napsaný uživatelem.</p>
</div> 
<?php get_footer(); ?>

Určitě není moc co vysvětlovat, že wordpress funkce get_header() zavolá ve složce se šablonou soubor header.php a vepíše ho při nahrávání stránky do index.php a stejně tak zařídí funkce get_footer() s patičkou, kterou máme uloženou ve footer.php.

footer.php


<?php wp_footer(); ?>
</body> 
</html> 

Vypadá to jednoduše, že? Ano, pro tuto chvíli to skutečně jednoduché je. K tomu, aby nám systém šablonu vůbec uznal, musíme ještě přidat do style.css její název, parametry a jiné údaje. Od té chvíle se nám budou tyto 4 soubory tvářit jako šablona pro WordPressu.

Začátek style.css


/*
Theme Name: Název Vaší šablony
Theme URI: Vyplňuje se v případě, že je umístěna ke stažení
Author: Tomáš Kocifaj
Author URI: http://ktstudio.cz/
Description: Nějaký libovolně dlouhý popisek Vaší šablony
Version: 1.0
License: GNU General Public License
License URI: license.txt
*/

Naše šablona zatím nic neumí, nic nedělá a zobrazí pouze základní text, který je uveden v index.php. Chtěl jsem Vám tím ale demonstrovat, jak málo stačí k tomu, aby šablona začala fungovat. Tím bych chtěl také ukázat, že není dobré kopírovat složité šablony, které jsou k dostání na mnoha serverech a nad tím něco vymýšlet a upravovat. Když už se dokopete k výsledku, tak často nevíte jak, proč a hlavně, máte šablonu plnou „balastu“ který nepoužíváte.

V příštím díle si ukážeme, jak vypsat příspěvky na titulní stránku a tím i WordPress loop, zprovozníme si statické stránky a detaily příspěvku. Naše základní šablona tak dostane první dynamickou podobu.

Tomáš Kocifaj, KTStudio.cz

, ,

  1. #1 Petr 12.10.2013 - 21:49

    Dávám za pravdu a děkuji za jednoduchý a stručný úvod.

  2. #2 Martin 15.10.2013 - 22:50

    Dobrý den,
    děkuji za skvělý návod. Mám jen problém s tím, že se šablona zobrazuje ve WP jako poškozená… nevíte čím to?

  3. #3 Tomáš Kocifaj 16.10.2013 - 04:48

    Zdravím, to může být spoustu důvodů. Doporučím zkontrolovat, zda máte potřebné soubory které uvádím. Zda má style.css definované parametry šablony. Musel bych to asi vidět, takhle mě z hlavy nic nenapadá.

  4. #4 Zdenek 10.1.2014 - 12:52

    Ahoj,
    předem díky za tvoji práci, moc mi to pomáhá v začátcích. Postupuji dle tvého návodu, vše funguje, akorát mám problém se zobrazováním diakritiky. Místo toho mi to háže obdélníčky, nevěděl bys co s tím ?
    Děkuji

  5. #5 Zdenek 10.1.2014 - 12:55

    Už je to vyřešeno, omlouvám se za spam.

  6. #6 Martin 26.1.2014 - 15:51

    Dobrý den, chtěl bych se zeptat, jaký je „nejčistší“ způsob zpřístupnění (vložení) základního (style.css) souboru v jednoduché templatě.
    Mě napadá jedině vložit do souboru header.php následující řádek:
    <link rel="stylesheet" href="“ type=…

    Díky za odpověď a super seriál.
    Martin.

    • #7 Tomáš Kocifaj 26.1.2014 - 20:16

      Zdravím tě,
      je asi na diskuzi, kdo považuje co za čistý způsob a základní šablonu. My osobně vše řešíme pomocí funkce wp_enqueue_script(), která se zabývá loadováním stylů a scriptů do šablony. Je o tom take napsaný celý díl v našem seriálu. Dle WP codexu a mého názoru je to pro WordPress právě ten čistý způsob. Určitě ale není dobré psát pevné cesty, bez použití php funkcí na echovaní cest k souborům.

  7. #8 Martin 26.1.2014 - 21:21

    Díky za odpověď, wp_enqueue_script() jsem se snažil použít (dle vašeho seriálu) hned od začátku, ale bohužel se mi nedařilo dostat style.css do stránky :-( (prvky se prostě nenastylovali). Proto jsem vyzkoušel mnou výše zmiňovaný způsob a ten zabral. Dá se z obsahu souboru functios.php vyčíst, kde by mohla být chyba?
    functions.php:

    Jde mi o to, aby v první vyrenderované stránce (dle template) byl obsažen základní styl z této template (style.css).
    Díky,
    Martin

    • #9 Tomáš Kocifaj 27.1.2014 - 09:27

      Zdravím, ozvi se mi na Skype – kocifaj.t – Rád bych se na to podíval a případně upravil článek o této funkci, pokud je tam něco nejasného.

      Díky !

  8. #10 Martin 16.6.2015 - 17:02

    ahoj Tomáši,
    trochu jsem se ztratil v načítáni toho css do stránky, zde máš uvedeno to základní, vložení do headeru.php link, aby to wp vzal vůbec jako šablonu. Pokud ale do takto načteného style.css dám nějaká pravidla stránka mi to vůbec nezobrazí, ale přitom v editoru šablon ve wp se to zobrazuje. Pokud použiju zmiňované wp_enqueue_script(), tak to načte. Chápu tedy dobře, že jsi ten link na stylopis dal zde do headeru jen proto, aby se to vůbec rozjelo? A můžu ho potom tedy odstranit? díík

Komentáře jsou uzavřeny.