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

Po měsíční pauze je zde další díl seriálu, v kterém se naučíte vytvořit vlastní šablonu pro WordPress. V minulém díle jme si vytvořili základní kostru naší theme a dnes si ji doplníme o další soubory, pro výpis kategorie, archívu, vyhledávání, stránky 400 a vyhledávacího formuláře. Také si vytvoříme vyhledávací formulář. Takže pojďme na to.

Nejprve shrnutí toho, co jsme si již vytvořili. Máme složku šablony, v které jsou následující soubory:

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

Dnes si do šablony doplníme další soubory. Protože ve functions.php načítáme pomocí enqueue soubory bootstrapu, vytvořili jsme složku assets, kam jsme požadované soubory vložili. V šabloně máme tedy zatím jednu složku a v ní dvě podsložky:

  • assets
    • js
    • css

Screenshot.png

Ještě než se pustíme do vytváření nových souborů, připravíme si screenshot.png, což je obrázek, který reprezentuje šablonu v administraci. Doporučený rozměr je 600 x 450 px, dříve byl standart poloviční, ale s nástupem hd přístrojů doporučuje WordPress tuto velikost. Já jsem vytvořil jednu nádheru :-) , která nám bude muset stačit.

Nové soubory

A už se můžeme pustit do nových souborů, vytvoříme si následující php soubory:

  • 404.php
  • author.php
  • archive.php
  • category.php
  • search.php
  • searchform.php
  • tag.php

Drobná úprava souboru index.php

Než začneme s vytvářením dalších souborů, upravíme si lehce soubor index.php.

  • přidáme divu obalující obsah id primary a třídu content area
  • pridáme nový tag main, obalující obsah stránky
  • napis stránky obalíme tagem header

Stránka 404

První z nich je stránka 404, která se zobrazí, pokud WordPress nenalezne obsah který hledáte. Můžete namítnout, že na to stačí podmínka v šabloně, kterou tam stejně máme. To je sice pravda, ale stránka 404 vám dává možnost vložit například vyhledávací formulář, nebo nasměrovat čtenáře žádoucím směrem, tedy mu nabídnout jiný obsah.

Vytvoříme tedy soubor 404.php a do něj vložíme následující kód:

Archiv.php, category.php a další

Těmto stránkám já osobně říkám „výpisové“, protože se starají s výpis obsahu, který má nějakou společnou vlastnost, například se jedná o články od jednoho autora, z jedné kategorie, či dle vyhledávacího dotazu. Ve valné většině šablon se setkáte s tím, že existuje search.php pro výpis hledání a pak archiv.php, který má na začátku ukrutnou konstrukci, která rozlišuje, zda se jedná o výpis dle měsíce, autora, atd…

Může se zdát, že jsou tedy další soubory zbytečné, ale díky nim můžete šablonu daleko více upravovat pro vaše potřeby. Například v author.php můžete mít na začátku výpisu informace o konkrétním autorovi, dle jeho profilu. A to je určitě zajímavé. Protože jsou však všechny tyto soubory velmi podobné, nebudu je blíže rozebírat, rozdíly uvidíte na první pohled.

Archive.php

Protože jsou zbylé soubory podobné, nebudu je nijak komentovat.

Author.php

Výpis článků od jednoho autora.

Search.php

Výpis vyhledávání

Jak je vidět soubory se v podstatě liší pouze tím, co se vypíše před samotným loopem, tedy titulkem archívu. Na konci výpisu článků je vždy navigace, která umožňuje pohyb mezi stránkami.

Jako poslední soubor dnes vytvoříme searchform.php. Je to v podstatě vyhledávací formulář, který se zobrazuje například v sidebaru. Proč jej však budeme znovu psát, když jej WordPress vykreslí automaticky? Protože se nám můžet hodit, mít jiné html, něž nám WordPress nabídne a tento soubor nám to umožní.

Searchform.php

Závěr

Dnes jsme si tedy rozšířili šablonu o další soubory a v šabloně tedy máme následující části:

  • 404.php
  • archive.php
  • author.php
  • category.php
  • footer.php
  • functions.php
  • header.php
  • index.php
  • screenshot.png
  • search.php
  • searchform.php
  • sidebar.php
  • style.css
  • tag.php

a složky

  • bootstrap
  • images
  • js

Všechny doposud vytvořené soubory jsou dostupné na Gist a jsou označené číslem kapitoly, takže můžete porovnávat změny.

Repositář šablony najdete na GitHubu, ale stav kódu bude odpovídat poslední kapitole návodu : https://github.com/Musilda/dummy-theme

Co bude příště?

V příštím díle vytvoříme single.php a page.php pro výpis detailu stránky a článku, rozšíříme šablonu o podporu náhledových obrázků a připravíme si statickou hlavní stranu.

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. holinaj

    Fakt super, tohle určitě vyzkouším. Šablon je na webu miliarda a přesto mám problém si vybrat. Takhle snad budu spokojen :-)

    Odpověď
  2. Daniel

    Pěkný návod. Chci se pustit do vytváření šablony, protože mám v hlavě představu o jednom projektu. Díky Vám pomalu začínám chápat strukturu wordpressových šablon. Doufám, že ta grafika bude snadno přepsatelná…Abych si to mohl předělat na to co chci. Zatím mám trochu zmatek v tom množství wordpressových funkcí. Rozhodně pokračujte. :)

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

  4. Koumes3

    Zdravím,
    mám dotaz – nevím proč se mi nezobrazí stránka z 404.php. Když nastavím do konceptu všechny příspěvky i stránky, aby nebyly publikované, tak se mi zobrazí chybová hláška z index.php místo ze souboru 404.php.
    Nemusí být něco nastaveno v apache nebo přímo ve WP pro aktivaci chyb?
    Používám localhost na mozille a server XAMPP.

    Děkuji za odpověď

    Odpověď
  5. tom

    Docela mi vadi ze ty ty html kody jsou rozdeleny do nekolika souboru;
    slo by to prece udelat tak ze udelam jednu sablonu html a jednotlive casti oznacim co jsou header co footer atdd.

    Odpověď
    1. Musilda

      Ty jsou obdobné archive.php. V podstatě jsou stejné, takže pro jednoduchou šablonu nejsou potřeba.

      Odpověď
        1. Musilda

          Dobrý den,
          soubor tag.php by měl být stejný jako category.php a ten máte v příspěvku. V kódu se neliší, jen se liší v tom, jaký obsah zobrazují. To je definováno hierarchií šablony.

          Odpověď
  6. Jana

    Zdravím a děkuji za návody.

    Prosím kde najdu čím se liší nebo celý kód souborů category.php a tag.php? Děkuji moc

    Odpověď

Přidejte komentář

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