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

V tomto článku bych chtěl začít se seriálem, v kterém si projdeme celým procesem tvorby šablony pro redakční systém WordPress. Na českém internetu lze nalézt několik článků, nebo seriálů, které tvorbu šablony popisují. Většinou však nejdou do větší hloubky, omezují se na stručný popis a složitější problémy je nutno řešit na anglicky psaných webech, nebo v Codexu WordPressu.

Budu se snažit napsat vše co si myslím, že je pro vytvoření šablony důležité a podstatné. Další věcí, díky které by měl být tento seriál odlišný od jiných, je, že pro vytvoření theme využijeme bootstrap a šablona tak bude responsivní. Takže vzhůru do nitra WordPressu.

Soubory důležité pro vytvoření šablony

Přestože se může zdát, že pro vytvoření šablony bude stačit několik souborů, většinou se dočtete, že stačí header.php, index.php, footer.php a style.css, tak pro vytvoření plnohodnotné a funkční šablony to stačit nebude.

Budeme potřebovat následující soubory:

  • 404.php – stránka, která se zobrazí, pokud stránka neexistuje
  • archive.php – stránka zobrazí výpis archivních příspěvků, většinou dle data
  • author.php – stránka zobrazí výpis archivních příspěvků vybraného autora
  • category.php – stránka zobrazí výpis archivních příspěvků vybrané kategorie
  • footer.php – patička stránky
  • functions.php – soubor s funkcemi šablony
  • header.php – hlavička stránky
  • index.php
  • page.php – detail stránky (page)
  • search.php – stránka zobrazí výpis příspěvků odpovídajících vyhledávání
  • searchform.php – vyhledávací formulář – umožňuje přepsání defaultního
  • sidebar.php – postranní pannel šablony
  • single.php – detail příspěvku (post)
  • style.css – soubor se styly šablony
  • tag.php – stránka zobrazí výpis archivních příspěvků vybraného tagu

Jak vidíte, celkem máme 15 souborů, aby jste pochopili, kdy a v jakém pořadí je WordPress zobrazuje, popíšeme si hierarchii šablony.

Template hierarchy – neboli hierarchie souborů v šabloně

Pokud načtete jakoukoliv webovou stránku, která funguje na WordPressu, systém postupuje následovně:

  1. Načte se soubor functions.php a provedou se, nebo zaregistrují funkce, pokud v souboru nějaké jsou.
  2. Zavolá se header.php, který obsahuje hlavičku stránky, tedy vše mezi tagy HEAD a horní část šablony, která se na na jednotlivých podstránkách opakuje, tedy logo, menu, možná nějaký slider
  3. Zavolá se soubor, v kterém je výpis obsahu stránky, může to být index.php, single.php, category.php, nebo page.php, zkrátka soubor obsahující obsah. Podle hierarchie šablony, určí WordPress, který soubor se zobrazí.
  4. Načte se footer.php, v kterém je patička webu.

Samotná hierarchie šablony určuje, kdy a za jakých podmínek se zobrazí který soubor. Pokud se jedná o výpis článků z kategorie, následuje po sobě header.php, category.php a footer.php. Protože header.php a footer.php se stále opakují, budeme se zabývat jen soubory zobrazující obsah stránky.

WordPress vždy hledá soubor, který patří k danému stavu a teprve poté, pokud jej nenajde, hledá další v pořadí a nakonec zobrazí index.php. V pořadí důležitosti jsou soubory řazeny podle relevance názvu.

Příklad:

Klikli jsme na odkaz na stránku kontakt. WordPress nejprve zjistí, že se jedná o stránku, tedy page a prohledá adresář, zda obsahuje soubor page-kontakt.php, pokud jej nenajde, hledá soubor page-idstranky.php (page-4.php například), pokud jej nenajde, vyhledá page.php a vypíše obsah dle této šablony. V případě, že nenajde ani page.php, zobrazí index.php.

Kdy se která šablona zobrazí

Mohou existovat následující možnosti:

Error 404 page

Stránka, na kterou chcete jít, neexistuje. Je tedy zobrazen soubor 404.php, kde by mělo být napsáno nějaké upozornění a uživateli nabídnuta další možnost. O tom, jak je důležitá stránka 404 pro uživatelskou přívětivost webu, je napsáno mnoho článků. Pokud 404.php neexistuje, zobrazí se index a info o tom, že nebyl nalezen žádný post.

Search result page

Pokud zadáte do vyhledávacího formuláře nějaký dotaz, hledá WordPress soubor search.php, kde vypíše obsah, který odpovídá dotazu. Pokud jej nenajde, zobrazí index.php.

 Archive page

Archívní stránka, je jakákoliv stránka s výpisem článků, kromě index.php. Po zjištění, že se jedná o archív, určuje WordPress o jaký jde.

Může jít o následující archívy a protože postup, jakým řadí systém soubory jasný, budu jej uvádět v číslovaném seznamu bez dalšího vysvětlování. Místo proměnných si dosaďte odpovídající názvy, například $taxonomy je název taxonomie, $slug je část url odpovídající postu.

Custom Taxonomy Archive

Archív vlastní taxonomie, nyní nepotřebujeme, uvádím pro úplnost.

  1. taxonomy-$taxonomy-$term.php
  2. taxonomy-$taxonomy.php
  3. taxonomy.php
  4. archive.php
  5. index.php

Category Archive

Výpis příspěvků v kategorii.

  1. category-$slug.php
  2. category-$id.php
  3. category.php
  4. archive.php
  5. index.php

Tag Archive

Výpis příspěvků obsahující vybraný tag.

  1. tag-$slug.php
  2. tag-$id.php
  3. tag.php
  4. archive.php
  5. index.php

Author Archive

Výpis příspěvků vybraného autora.

  1. author-$slug.php
  2. author-$id.php
  3. author.php
  4. archive.php
  5. index.php

Date Archive

Výpis příspěvků vybraného data.

  1. date-$slug.php
  2. date-$id.php
  3. date.php
  4. archive.php
  5. index.php

Custom Post Type Archive

Výpis příspěvků dle vybraného custom post type. Zatím nepotřebujeme, uvádím pro úplnost.

  1. archive-$posttype.php
  2. archive.php
  3. index.php

 Singular page

Samostatná stránka. Zde se to liší dle toho, zda jde o post, nebo page.

Post:

  1. single-post.php
  2. single.php
  3. index.php

Page:

  1. page-$slug.php
  2. page-$id.php
  3. page.php
  4. index.php

Celou hierarchii, jsem trochu zjednodušil, pro naše potřeby to zatím stačí, pokud si chcete prohlédnout kompletní graficky znázorněnou posloupnost šablony, můžete na Codexu WordPressu zde, věřím, že pokud jste si první díl přečetli, snadno graf pochopíte.

Budu se těšit u druhého dílu, kdy začneme vytvářet první soubory šablony.

Návod byl aktualizován k 5.1.2019

Seriál: Jak vytvořit vlastní šablonu pro WordPress

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

14 Comments

  1. Pingback: Jak vytvořit vlastní šablonu pro WordPress – 2 díl | Musilda.cz

  2. Zdeněk Štuksa

    Dobrý den
    Mám straou šablonu do WordPressu. Myslíte, že by jste ji dokázala předělat do nové verze wordpressu. Mockrát děkuji za informaci. Těším se na možnou spolupráci

    Odpověď
    1. Musilda

      Dobrý den

      to bych dokázal, ale v tuto chvíli jsem natolik vytížen, že nejdříve koncem ledna.

      Odpověď
  3. IKI

    Chtěl bych se zeptat jak Vytvoření šablony pro určitou stránku > když dám nová stránka a tam je vložit jinou šablonu.

    Děkuji.

    Odpověď
  4. Michal

    zdravim,
    nahrál jsem si do worldpressu novou šablonu, ale hodila mi chybu : Fatal error: Call to undefined function wp_get_theme() in C:\ComplexWeb­Server\http_doc­s\wordpress\wp-content\themes\af­fi\inc\customi­ze.php on line 6 …. když zadám cestu k worldpressu naskočí mi hned tato chyba, takže se nemůžu přihlásit do administrace worldpressu. dík za rad co s tím

    Odpověď
  5. Pavel

    Chtěl bych se zeptat autora, jaký má názor na rychlost načítání webu v případě, pokud bych stavěl web(y) na WP tím stylem, že budu mít jeden jediný soubor index.php a v něm budu řešit v podstatě vše, co se týká jednotlivých typů POSTů – tedy category, single, 404 apod. Protože dle Template Hiearchie stejně všechny případy vykreslení skončí u index.php. Díky tomuto řešení by mě tedy zajímalo, zda testy, zda POST je category nebo category-slug nebo archive … jinak index.php a v něm bych testoval v podstatě to, co dělá WP, tedy zda je POST toho či onoho typu .. mají/hrají roli ve výsledku při rychlosti načtení stránky.. Doufám, že si rozumíme :-)

    Odpověď
  6. Musilda

    Nemyslím si, že by to bylo vhodné z hlediska přehlednosti toho souboru. Pokud by do něj includovaly další soubory s funkcemi, tak je to stejně jedno. Na rychlost to větší vliv mít nebude, pokud tedy nebudeme řešit milisekundy. Rychlost nejvíce ovlivňuje velikost stránky.

    Odpověď
  7. Martin

    Dobrý den.Potřeboval bych vytvořit šablonu vč.vloženého eshopu ve wordpressu.Najde se prosím někdo?Spěchá 724313069 p.Maleňák Děkuji

    Odpověď
  8. Pingback: Vytváření vlastních šablon ve WordPressu – Firemní web a internetový obchod

  9. Pingback: Jak vytvořit vlastní šablonu pro WordPress – 3 díl - Musilda.cz

Přidejte komentář

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