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
- Jak vytvořit vlastní šablonu pro WordPress 1.díl
- Jak vytvořit vlastní šablonu pro WordPress 2.díl
- Jak vytvořit vlastní šablonu pro WordPress 3.díl
- Jak vytvořit vlastní šablonu pro WordPress 4.díl
- Jak vytvořit vlastní šablonu pro WordPress 5.díl
- Jak vytvořit vlastní šablonu pro WordPress 6.díl
- Jak vytvořit vlastní šablonu pro WordPress 7.díl
- Jak vytvořit vlastní šablonu pro WordPress 8.díl
Až budu mít chvilku, vyzkouším to. Třeba to opravdu funguje :-) Teď vážně – díky za perfektní návod!
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 :-)
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. :)
Konecne neco prehledneho, tesim se na pokracovani.
zajímavý seriál, velká pochvala, zajímalo by mě jak to dopadne ;-) těším se na pokračování
Pingback: Jak vytvořit vlastní šablonu pro WordPress – 2 díl - Musilda.cz
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ěď
Dobrý den,
to úplně netuším, zkusím zjistit, proč tomu tak je.
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.
Zdravim, chybi tady priklady cathegory.php a tag.php
Ty jsou obdobné archive.php. V podstatě jsou stejné, takže pro jednoduchou šablonu nejsou potřeba.
A čím přesně se liší? Typuji, že to bude někde v tom ? Děkuji
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.
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