Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Tvoříme šablonu blogu pro wordpress 5.

  • napsalJaa(c)
  • sekceOstatní
  • kategorieWebdesign
  • znalostiautor předpokládá, že máte přečtené předchozí díly seriálu

26. 12. 2009 v 0:00 3 Tvoříme šablonu blogu pro wordpress 5.

V tomto díle si konečně ukážeme, jak z nakódovaného designu vytvořit funkční šablonu pro wordpress.

Nejdříve bych se vám chtěl omluvit za čekání, tento díl mi trval opravdu dlouho. Doufám, že jste ještě nezapomněli všechno, co jste se dozvěděli v minulých dílech. V dnešním díle už se budeme věnovat pouze wordpressu. K dispozici máte 2 psd soubory k designu (hlavní strana a strana s příspěvkem) a také archiv obsahující hotovou šablonu, abyste nemuseli vše kopírovat či opisovat. (Ke stažení o kousek níž.)

Tvorba šablony

Jak budeme postupovat?

Nejprve je důležité si uvědomit, jak budeme při tvorbě šablony postupovat, čím začneme a co si naopak necháme až na konec.
My budeme postupovat tak, že si nejprve vytvoříme úvodní stranu, kde se nejvíce zaměříme na prvky, které jsou společné pro více různých stránek (hlavička, menu, pravý sloupec a patička). Až budeme mít hotovou úvodní stranu, podíváme se na stránku z příspěvkem a komentáře. Poté budou následovat archivy, kategorie a vyhledávání. Nakonec se zaměříme na opravování chyb, které vznikají tím, že redakční systém je hodně proměnlivý. Zmíním se o konkrétním případu později, vzpomeňte si až uvidíte růžovou hvězdičku v obrázku.

Šablonu budeme tvořit tak, že budeme upravovat soubory standardní šablony (default), která má stejný layout. Tím si práci hodně zjednodušíme, vlastně budeme pouze nahrazovat zdrojový kód šablony za zdrojový kód naší nakódované verze. Co se týče CSS, nejjednodušší je rovnou nakopírovat celé hotové styly z nakódované verze do souboru style.css. Tak jednoduše uvidíme, co už máme hotové (to bude nastylované) a co jsme ještě neupravovali (to se bude chovat jako XHTML bez stylů). Tím máme CSS pro šablonu vyřešené a už se k nim v tomto článku nebudeme vůbec vracet!

(Předpokládám, že máte někde standardní instalaci wordpressu, takže při upravování šablony budete moct zároveň sledovat, jak se jednotlivé změny projeví na výsledné stránce.)

Zde máte seznam všeho, co budete potřebovat:
Ke stažení:
PSD hlavní strany (9MB)
PSD strany s komentáři (10MB)
Archiv se soubory šablony [zip] / [tar.gz] (~300kB)
Odkazy:
Nakódovaná verze z minulého dílu

Může se stát, že v souborech budou nepatrné rozdíly způsobené tím, že jsem někde opravoval malou chybu až po napsání článku. Ale budou to opravdu detaily, nic zásadního.

A pro přehlednost náplň tohoto návodu s odkazy na jednotlivé kapitoly:

1. Úvodní strana + společné prvky
2. Jednotlivý článek + komentáře
3. Archivy, kategorie, vyhledávání
4. Optimalizace pro prohlížeče

Úvodní strana + společné prvky

Odkazy na jednotlivé části této kapitoly:

1. header.php + searchform.php
2. index.php
3. sidebar.php
4. footer.php

header.php + searchform.php

Začneme tedy s úpravami titulní strany. Ze třetího dílu už víme, která soubory šablony k čemu slouží, pro připomenutí ještě zopakuji obrázek:

Nejprve se zaměříme na hlavičku, tedy na soubor header.php. Hlavičku se pokusím vysvětlit co nejpodrobněji, abyste se v tom ze začátku vyznali.
Protože jsou tagy v hlavičce příliš dlouhé, nebudu sem dávat obrázek zdrojového kódu, pouze uvádím odkaz na textovou verzi. V takto úzkém obrázku by se stejně nešlo vyznat. Oproti defaultní šabloně jsme zde neudělali žádné velké změny, pouze jsme předem přidali alternativní soubor stylů pro IE.

Do tohoto souboru patří také ta hlavička, která se nám bude zobrazovat na webu – to bude tedy obrázek hlavičky („logo“), políčko pro vyhledávání a také horní menu. Protože je to první příklad, uvedu všechny 3 kódy, aby bylo jasné, jak budeme při tvorbě postupovat.
Takto vypadá hlavička v podání základní šablony wordpressu (default):

Takto vypadá naše nakódovaná verze z předchozího dílu seriálu:

A takto vypadá výsledný kód v šabloně, kterou tvoříme:

Teď si to můžeme celé projít a vysvětlit si, jak jsme k tomuto výsledku dospěli. Ještě jednou se podíváme na to, jak vypadá šablona default ve výsledku:

Z tohoto obrázku krásně vidíme, co generují jednotlivé funkce, které jsou použity v hlavičce (viz první uvedený kód). Funkce bloginfo() s parametrem „name“ nám generuje název blogu. Ta samá funkce, ale s parametrem „description“ nám generuje podtitul stránky. A nakonec zde máme funkci get_option() s parametrem „home“, která vrací cestu (odkaz) na úvodní stránku, je zde tedy použita v odkazu. Když už víme, co tyto funkce dělají, můžeme je snadno použít (viz 3.kód). Odkaz na titulní stranu nám stačí prakticky jen opsat. Slovo „Bublifuk“ nahradíme pomocí:

A stejně tak nahradíme podtitul „Jenom další neobvyklý weblog“. (Netřeba znovu opisovat, snad je to jasné ze třetího kódu.)

Funkce bloginfo() již není v poslední verzi wordpressu podporována, byla „předělána“ na funkci get_bloginfo(). V použití však není žádný zásadní rozdíl.

Teď již máme ve výsledné šabloně hotovou hlavičku stejně jako v nakódované verzi a můžeme pokračovat s políčkem pro vyhledávání a menu. Formulář pro vyhledávání se nachází v souboru searchform.php a do stránky se vkládá pomocí funkce get_search_for­m(). Takže si vytvoříme div#horni a do něj vložíme tuto funkci.
Teď se podíváme do daného souboru s formulářem. Tento soubor nijak výrazně měnit nebudeme, pouze si přidáme třídy se správným názvem k daným tlačítkům (tedy k tlačítku s textem si přiřadíme class=„hledat“ a k druhému tlačítku class=„odeslat“). Výsledek je opět příliš dlouhý, takže pouze textová verze.

Protože jsme všechny selektory v css definovali pomocí divu #hodni a html prvků, formulář bude naformátovaný tak, jak má být. Jediné, co potřebujeme rozlišit je políčko vyhledávání a tlačítko na odeslání, proto jsme jim přiřadili samostatné třídy.

V grafickém návrhu jsme měli také možnost změny velikosti písma. To ale bohužel není standardní součástí wordpressu, proto to musíme z naší šablony vynechat.

Teď tedy přejdeme k menu. V tomto menu budou jednotlivé stránky, které si uživatel ve wordpressu vytvoří. Proto k vygenerování položek použijeme funkci wp_list_pages(). Nejprve si vytvoříme seznam, kterému přiřadíme identifikátor #menu. Jako první položku si ještě ručně přidáme odkaz na titulní stránku. Ve stejném formátu budeme chtít i další položky. Ty si nastavíme pomocí atributu funkce wp_list_pages(). Ta nám standardně generuje před seznamem nadpis „Pages“ a poté přidává na začátek a na konec seznamu tagy ul. Nadpis tam ale nechceme a tagy pro seznam tam již máme. V manuálu si najdeme, že tyto vlastnosti ovlivňuje atribut „title_li“. Takže pokud použijeme jako atribut funkce „title_li=“ a nezadáme žádnou hodnotu, před ani za seznamem se nám nic nevypíše, funkce nám vygeneruje pouze jednotlivé položky.
Dále si nastavíme pomocí atributu „sort_column“ způsob řazení jednotlivých stránek na hodnotu „menu_order“, tím zajistíme, že si uživatel bude v administraci moct nastavit, v jakém pořadí se mají stránky v menu zobrazovat.
Dalším možným atributem funkce je number, tím lze omezit počet zobrazených stránek v menu (je zde jen na ukázku, v našem případě není nutný). V tuto chvíli máme menu hotové, ještě jednou pro zopakování ukážu:

index.php

Pokračovat budeme v souboru index.php. Tento soubor slouží jako šablona pro úvodní stranu (tedy obvykle výpis nejnovějších článků) a zároveň se do tohoto souboru vkládají jednotlivé části – hlavička, boční sloupec a patička. Teto soubor se také ještě pokusím probrat podrobně, později uvidíte, že šablony pro archivy nebo například vyhledávání je skoro úplně stejná, takže budeme z větší části pouze kopírovat to, co si vytvoříme již nyní. Nejprve na obrázku rozeberu hlavní strukturu souboru (základní šablonu), pod obrázkem poté popíšu podrobněji jednotlivé funkce. Poté si ukážeme, jak soubor předělat na naší šablonu.

Doufám, že jste aspoň trochu pochopili, jak tento soubor funguje. Teď se zkuste podívat na obrázek ještě jednou a zkuste se zamyslet, v jakém případě a kde se vypíše div.navigation?

Věřím, že jste to určitě vymysleli správně. Tento prvek se vypíše, pokud existují nějaké články k vypsání. Prvek už ale není v cyklu while, proto se nejprve vypíšou všechny příspěvky a až nakonec pod nimi se zobrazí.

Když už jsme u tohoto prvku s navigací, podíváme se, co dělají funkce, které prvek obsahuje. Funkce next_posts_link() vypíše text, který zadáme jako parametr a udělá z něj odkaz. Tento odkaz směřuje na stránku se staršími články. (Pokud řadíme články chronologicky a na hlavní straně je vypsáno 5 nejnovějších článků, odkaz povede na články 6–10.) Pokud už žádné starší články nejsou, odkaz se vůbec nevytvoří.
Druhá funkce funguje naprosto stejně, akorát směřuje na novější příspěvky.

Vrátíme se ještě o kousek výše a popíšeme si ty nejdůležitější použité funkce. The_title(), nic složitého, jak už napovídá název – vypisuje nadpis příspěvku. Má dva hlavní atributy (nepovinné), které určují, jaké tagy budou vypsány před a po nadpisu (obvykle by sem patřily nějaké tagy pro nadpis – h2, h3). My ale tyto atributy využívat nebudeme. Další funkce fungují úplně stejně, the_time() vypisuje datum a čas, kdy byl příspěvek uveřejněn. Jako parametr se zadává formát data, shodný s php funkcí date(). Funkce the_author() vypisuje autora článku, žádné parametry nemá. Další funkce jsou pořád stejné, jejich využití lze odhadnout již podle názvu, případně si je můžete dohledat v manuálu. Za zmínku snad ještě stojí the_content(), ta vypisuje článek, případně náhled článku. Má více parametrů, ale využijeme pouze ten první – to je text, který se vypíše, pokud je zobrazen pouze náhled článku (odkazuje na celý článek).

Když jsme se již seznámili se strukturou souboru, můžeme se pustit do předělávání. V naší šabloně jsou 2 základní rozdíly, se kterými se budeme muset vypořádat. První článek na stránce vypisujeme celý, ale u ostatních vypisujeme pouze nadpis. A druhý rozdíl je ten, že pod výpisem článků ještě vypisujeme 5 posledních komentářů. To budeme muset celé vyřešit sami. Celková struktura souboru bude tedy trochu složitější, proto nejprve uvedu ilustrační obrázek s popisky. (Opravu pouze ilustrační, je na něm zobrazena pouze struktura, není zde řešen způsob vypisování článků apod.) Snad není moc zmatený, přehlednější způsob, jak popsat dané části kódu, ale mít zobrazený celý kontext, jsem nevymyslel.

Protože se budu k jednotlivým částem souboru vracet, jednotlivé barevné sekce jsem očísloval. Takže například sekce „výpis nadpisů dalších článků“ je očíslována 1–1–2–2. Kliknutí na sekci vás posune vždy k obrázku.

Viz růžová hvězdička (1–2–1). Toto je případ, o kterém jsem se zmiňoval hned na začátku (druhý odstavec článku). Je to příklad problému, který vzniká tím, že v redakčním systému mohou nastávat různé nečekané situace. Obvykle je na blogu plno článků, ale co se stane, pokud je jen jeden článek, který se na stránce vypíše? To může nastat ve dvou situacích. Můžeme mít na celém blogu pouze jeden (první) článek. Nebo je zde druhá situace – na hlavní straně chceme vypisovat 5 článků, ale máme jich napsáno 6. Dole pod příspěvky se objeví odkaz, který směřuje na starší články. A když na něj klikneme, dostaneme se právě do této situace. První článek se vypíše celý – bez problému. Pod článkem ale následuje odkaz na novější články. Jenže obalové divy nejsou vytvořené (ty se vytváří v sekci 1–1–2–1). A pokud bychom zapomněli tuto podmínku (1–2–1), odkaz na novější články by nebyl vůbec zformátovaný. Co by byl větší problém, byly by zde 2 tagy ukončující divy, které nejsou vůbec otevřené. Ukončily by se nějaké jiné divy a celý layout by byl úplně rozhozený. Proto nikdy nesmíme zapomínat prověřovat každou možnou situaci!

Teď si začneme pomalu doplňovat do jednotlivých sekcí potřebný kód. Začneme výpisem prvního článku, budeme se tedy pohybovat pouze v sekci 1–1–1 (první a poslední řádek vždy opíšu, pro lepší orientaci).

Naposledy ještě uvedu pro představu, jak má asi výsledný kód vypadat. Toto je tedy zdrojový kód z nakódované verze tak, jak jsme jí v minulém dílu vytvořili:

A nyní ho převedeme do šablony wordpressu:

Jak můžete sami vidět, žádná výrazná změna se nekoná, pouze jsme obsahové části nahradili za příslušné php funkce. Myslím, že by zde mělo být vše víceméně jasné, použité funkce jsme si již popsali výše a od základní šablony se lišíme pouze html strukturou a tu jsme již také probrali (v minulém dílu). Ještě připomenu funkci the_permalink(), ta nám vrací cestu (odkaz) k aktuálnímu příspěvku.

Teď se podíváme na výpis dalších článků, budeme se tedy pohybovat v sekci 1–1–2–2. Bude to velmi jednoduché, bude nám stačit vzít hotové řešení z výpisu prvního příspěvku, ale použijeme jen první část – výpis nadpisu, autora a data.

Tím máme vlastně výpis příspěvků vyřešený. Samozřejmě v uvedeném schématu jsem neuváděl všechny potřebné tagy (jako např. stylování odkazů na starší a novější články, vynechal jsem některé obalové divy, takže na ty nesmíme ve výsledku zapomenout). Takže když to dáme všechno dohromady, máme takovýto kód (opět neuvádím obrázek, je toho moc). Když je to takhle celé pohromadě, může v tom být trochu zmatek, než si člověk uvědomí, co přesně kam patří. Proto je dobrá si to patřičně okomentovat a snažit se to aspoň trošku přehledně strukturovat (lepší to mít strukturované více, než se v tom poté nevyznat).

Pod vypsanými příspěvky budou následovat nejnovější komentáře, to už bude trochu zajímavější, protože to budeme muset celé vytvořit sami.

Pro výpis komentářů využijeme funkci get_comments(), která nám vrací zadaný počet komentářů. Jejím parametrem „number=5“ omezíme výpis na 5 nejnovějších komentářů, nemusíme se starat o řazení, protože komentáře jsou automaticky řazeny od nejnovějšího. Tato funkce nám vrací pole, které obsahuje údaje o jednotlivých komentářích. Toto pole si tedy načteme do proměnné $comments.
Pokud tedy nějaké komentáře existují a máme je načtené v dané proměnné, můžeme pomocí cyklu jednotlivé komentáře projít. Využijeme cyklus foreach, který postupně prochází jednotlivé prvky pole. Proměnná $comm bude obsahovat vždy data o jednom komentáři. Proměnná $comm ve skutečnosti obsahuje objekt, ve kterém jsou jednotlivé informace uloženy. Objektové programování je už trošičku složitější, nebudu se ho zde snažit popisovat, to by bylo samo o sobě na celý seriál.

To, jak budeme vypisovat jednotlivé komentáře budete muset spíše vzít jako fakt, než se to snažit nějak více pochopit. Ale pokud chcete pochopit základy objektového programování, můžete se mrknout třeba na seriál PHP v objetí objektů na stránkách root.cz.

Teď si tedy popíšeme vnitřek cyklu:

Pokud chceme například získat autora komentáře, použijeme syntaxi $comm->comment_author a celé toto jednoduše pomocí příkazu echo vypíšeme. Protože nemáme k dispozici odkaz na příspěvek, který byl komentovaný, musíme si trochu pomoct. Nejprve pomocí funkce get_option() vypíšeme odkaz na root stránek, za něj přidáme „?p=“ a vypíšeme ID příspěvku, které k dispozici máme. Tím získáme odkaz na daný příspěvek.
Získat nadpis článku také nebude úplně jednoduché, budeme potřebovat funkci get_post(), která nám vrací opět objekt s informacemi o daném příspěvku. Jako její atribut je potřeba zadat ID příspěvku, které již získáme jednoduše z proměnné $comm. Takže výraz get_post($comm->comment_post_ID) nám vrátí objekt s daty o příspěvku, my chceme jeho nadpis, takže „přidáme šipku k tomu celému“ a řekneme, že chceme jen nadpis: get_post($comm->comment_post_ID)->post_title. Je to velmi podobné prvnímu příkladu v manuálu funkce get_post(). Nakonec vypíšeme datum, to už je jednoduché. Tím máme komentáře vyřešené.

Tím máme prakticky celý soubor index.php hotový, stačí už nám nakonec jen přidat boční sloupec a patičku. Ještě nesmíme zapomenout uzavřít div#obalka, který jsme si otevřeli v hlavičce. Tento div ještě obsahuje boční sloupec, ale patička v něm už není. Takže dáme vše dohromady a máme celý soubor index.php hotový.

sidebar.php

Jak jsem se již zmiňoval, v tomto souboru se nachází boční sloupec. V něm budeme vypisovat kategorie, archiv, odkazy a případně nějaká další tlačítka (RSS, kontakt atd.).

Podmínka, na kterou zde narážíme testuje to, zda je na blogu povolen sidebar s widgety nebo se používá standardní. Pokud jsou používány widgety, tato podmínka není splněna a následující kód se vůbec neprovádí. V tomto případě si uživatel nastaví sidebar v administraci. My se budeme věnovat tomu základnímu. Jako první budeme vypisovat jednotlivé kategorie článků. Pro vypsání kategorií použijeme funkci wp_list_catego­ries() se třemi atributy. Show_count nastaveno na hodnotu 1 nám nastaví zobrazování počtu článků v kategorii. Atribut title_li nám nastavuje titulek, který se zobrazí před výpisem kategorií, my tam žádný chtít nebudeme, proto necháme hodnotu prázdnou. Poslední použitý atribut depth nám určuje „hloubku“, do které se mají zobrazovat i pořízené kategorie. Nastavením na hodnotu 1 zobrazíme pouze ty hlavní (osobně jsem snad nikdy neviděl, že by si někdo kategorie nějak více strukturovat, přijde mi to dost zbytečné).
Nyní budeme pokračovat výpisem informací, které se budou zobrazovat pouze na hlavní straně a na samostatných stránkách:

První podmínka nám tedy určuje, že se budeme pohybovat pouze na samostatných stránkách. Budeme vypisovat archiv příspěvků, odkazy a blok týkající se registrací a přihlašování uživatelů. Pro výpis archivů použijeme funkci wp_get_archives(). Atributem type určíme, že chceme archiv vypisovat měsíčně a pomocí atributu limit omezíme počet vypsaných položek na 24 (tedy 2 roky nazpět).

Čistě na ukázku jsem zde požil atribut echo, který nám určuje, zda daná funkce rovnou vypíše data nebo je pouze vrátí (přiřadí je do nějaké proměnné, se kterou můžeme nadále pracovat). My s tím už dál nic dělat nechceme, tak proměnnou pouze vypíšeme. Tento atribut funguje prakticky u všech podobných funkcí, někdy může být docela užitečný.

Odkazy se vypisují pomocí funkce wp_list_bookmar­ks(). Pomocí atributů title_before/after nastavíme, že se jednotlivé položky budou zobrazovat jako položky seznamu bez žádných zbytečných tříd a identifikátorů, které jsou tam standardně nastaveny (nastaveny jsou právě v atributech category_befo­re/after, která ponecháme prázdné).
Nakonec si vypíšeme pomocí wp_register() a wp_loginout() uživatelské možnosti. Funkce wp_meta() umožňuje pluginům vkládat data do sidebaru. V dokumentaci wordpressu ale jako jedna z mála vysvětlena není (jen útržkovité informace, nenašel jsem žádnou konkrétní stránku).

Nakonec přidáme jen nějaké statické informace (statické – myšleno, že jsou přímo v kódu a není na ně žádné políčko v administraci) a některá tlačítka. RSS má v sobě samozřejmě wordpress zabudovaný, takže tohle tlačítku můžeme rovnou oživit pomocí funkce bloginfo() s atributem rss2_url.
Žádné další informace v bočním sloupci nemáme, takže se můžeme vrhnout na patičku.

footer.php

Patičku odbudeme velmi rychle, protože v ní nic negenerujeme, veškerý text je v ní napsán ručně. Takže je to pouze obyčejný html kód a ten už máme probraný z minulého dílu.

Jednotlivý článek + komentáře

Nyní se budeme zabývat stránkou, která je věnována konkrétnímu článku (tedy dostaneme se sem po kliknutí na nadpis článku) a komentářům ke článku. Tato šablony se nachází v souboru single.php a komentáře v souboru comments.php. Nejvíce se budeme věnovat zobrazení komentářů, protože vypsání příspěvku bude prakticky totožní s vypisováním prvního příspěvku na hlavní straně.

Jak jsem již avizoval, stránka se velmi podobá souboru index.php, akorát vypisujeme pouze jediný příspěvek. První změna nastává až u funkce comments_templa­te(), která načítá soubor comments.php, kterému se nyní budeme věnovat.

V minulém dílu jsme si komentáře do HTML nekódovali – takže tady bude i něco málo nového v HTML kódu a v CSS, ale nebylo zde nic složitého, tak snad nebude potřeba se tím zabývat. CSS týkající se komentářů jsou v souboru se styly na řádkách 306~400, tak si to zkuste projít sami, kdyby bylo něco nejasného, napište do komentářů.

Takže jdeme na komentáře. Pokud jste si ještě nestáhli na začátku psd s touto stránkou, můžete se podívat tady na náhled. Na úvod souboru je pár řádek php kódu, které se týkají bezpečnosti (zda je příspěvek chráněn heslem a zda se někdo nepokouší načíst soubor přímo – mimo systém šablony), s tím nebudeme nic dělat.

Na začátek vypíšeme nadpis, který obsahuje počet komentářů a název článku.

Funkce comments_number() umožňuje naformátovat výpis pro žádný, jeden a více komentářů. Sice nám to gramaticky v češtině nestačí, ale vypadá to aspoň o trochu lépe. Funkce cancel_commen­t_reply_link() generuje odkaz, který slouží ke smazání komentáře, který jste právě napsali.

Pokud mohou psát komentáře pouze registrovaní uživatelé, zkontrolujeme, jestli je uživatel přihlášený. Pokud není, vypíšeme chybu. Pokud je uživatel přihlášený nebo pokud jsou komentáře dostupné pro všechny, můžeme začít vypisovat formulář.

Pokračujeme tedy za předpokladu, že uživatel může vkládat komentáře. Nejprve zjistíme, zda je uživatel přihlášen. Pokud není, vypíšeme políčka s přezdívkou, e-mailem a www adresou. Je zbytečné popisovat jednotlivá políčka, stačí vědět k čemu jsou a jak je použít. Php kód u políček pouze zkoumá, zda nemá předvyplnit nějakou hodnotu a jestli je políčko povinné.
Dále budeme vypisovat pole pro text komentáře, to už vypíšeme vždy, nezáleží, jestli je nějaký uživatel přihlášený nebo ne.

Pokud je v komentářích povolné HTML, můžeme zobrazit povolené tagy, které nám vypíše funkce allowed_tags(). V našem případě jsem to nechal zakomentované. Poté již vypíšeme pole pro komentář a konečně také tlačítko pro odeslání komentáře. Řádek s php kódem do_action(„com­ment_form“, $post->ID) umožňuje pluginům upravovat vzhled komentářů. S tím nic dělat nebudeme. Nakonec ukončíme úplně první podmínku, kdy jsme zkoumali, zda je povoleno přidávat komentáře nebo ne.

Následovat bude výpis již přidaných komentářů. Ve výpisu komentářů se setkáme s dalším typem problému při tvoření šablony. Problém bude spočívat v tom, že nám nebude vyhovovat HTML struktura výpisu komentářů. Wordpress formátuje jednotlivé komentáře úplně mimo systém šablon a do šablony vrací komentář již kompletně s HTML tagy. To by nám ale neumožnilo udělat komentáře přesně podle naší představy, proto si budeme muset pro komentáře definovat vlastní funkci v souboru functions.php. Teď si projdeme zbytek souboru comments.php a k této funkci se vrátíme záhy.

První podmínkou testujeme, zda se mají nějaké komentáře vypsat nebo ne. Pokud se nějaké vypisují, použijeme funkci wp_list_comments(), ke které se vrátím po tomto odstavci. Pokud žádné komentáře k příspěvku nejsou, testuje se ještě jedna podmínka. Komentáře k příspěvku mohou být úplně zakázány nebo ještě nebyly žádné komentáře napsány. V každém případě vypíšeme příslušnou hlášku. Na konec už jen ukončíme podmínky a ukončíme div.comments a div.cl-in.

Teď se tedy vrátíme k samotnému vypisování komentářů, ke kterému jsme použili následující kód: (pouze opisuji řádek z předchozího obrázku)

Jak jsem se již zmiňoval, výpis funkce wp_list_commen­ts() nám nevyhovuje. Proto použijeme atribut callback, pomocí kterého si definujeme vlastní funkci, která se použije namísto této funkce. Funkce se bude jmenovat tutorials_komen­tare() a nadefinujeme jí v souboru functions.php. Příklad takové funkce je uveden přímo v manuálu funkce wp_list_commen­ts(), takže nám hodně pomůže tuto funkci zkopírovat a pouze si jí pozměnit podle potřeby. Ono by to samozřejmě ani nešlo celé vymyslet jen tak z hlavy. Funkcí si popíšeme vzhled jednoho komentáře, wordpress už jí sám použije na každý komentář, takže nemusíme používat žádný cyklus. Protože jsem nenašel žádný způsob, jak očíslovat komentáře uvnitř funkce, ještě před jejím zavoláním jsme si definovali proměnnou $i a přiřadili jí hodnotu 1. Tuto proměnnou u každého komentáře vypíšeme a potá jí zvětšíme o jedničku, takže každý komentář bude očíslovaný. Nejprve se podívejte na hotovou funkci, poté si popíšeme jednotlivé části. První řádky kódu patří pouze definici funkce a inicializaci potřebných proměnných. Také zde určíme, že proměnní $i je globální (tedy že se vyskytuje i mimo tuto funkci). Teď už se podíváme na jednotlivé části:

Pro výpis dat zde používáme funkci printf(), to je základní funkce php, která umožňuje formátovaný výstup. I když jsme ve vlastní funkci, máme stále k dispozici všechny funkce wordpressu, takže výpis komentáře bude velmi podobný všem předchozím příkladům. V tagu strong budeme vypisovat naší proměnnou $i, tedy číslo komentáře. Poté budeme vypisovat přezdívku autora komentáře pomocí funkce get_comment_au­thor_link(). Poté pomocí comment_author_ur­l() vypíšeme www stránky uživatele a nakonec vypíšeme datum a čas. Poté ještě vypíšeme odkaz na upravení (vypíše se pouze přihlášeným uživatelům) a poznámku, pokud komentář čeká na schválení.

Dále vypíšeme avatar pomocí funkce get_avatar() a komentář pomocí funkce get_comment(). Do odstavce p.reply budeme vypisovat reakce na komentáře. K tomu slouží funkce comment_reply_lin­k(). Atributy této funkce jsou trochu složitější, takže se s nimi nebudeme zabývat, jediné co si v nich nastavíme je text „reagovat“, který slouží jako reakce na komentáře.

Tím máme dodělané komentáře i celou stránku s článkem a můžeme se vrhnout na zbylé šablony.

Archivy, kategorie, vyhledávání, samostatné stránky a další

Pro výpis archivů a kategorií slouží soubor archive.php. Struktura tohoto souboru je úplně stejná, jako u souboru index.php. Jediný rozdíl bude v tom, že přidáme nadpis nad výpis příspěvků. Na celý soubor se můžete podívat tady, my si popíšeme pouze rozdíl od souboru index.php:

Projdeme si jen tu první podmínku, ostatní jsou úplně stejné. Pokud chceme procházet archiv nějaké kategorie, funkce is_category() vrátí true a vypíše se příslušný nadpis s názvem kategorie. Úplně stejně to funguje u ostatních nadpisů. Po nadpisu následuje výpis příspěvků, jak jsem již říkal, ten jen okopírujeme ze souboru index.php. Takže při kliknutí na kategorii se zobrazí nadpis a pod tím bude následovat první příspěvek, který se vypíše celý. Dále bude výpis pouze nadpisů dalších příspěvků.

Stejný bude i soubor search.php, u něj akorát uvedeme nadpis „Výsledky vyhledávání“. Zbytek bude opět jen výpis příspěvků, stejný jako na indexu nebo u kategorií.

Podobně vytvoříme soubor se vzhledem jednotlivých stránek – page.php. Stránka ve wordpressu je vlastně jen příspěvek, který má vlastní odkaz a neřadí se do kategorií a do archivů. Co se týče vzhledu, tak na ní není nic zvláštního. Takže jí vytvoříme také stejně, jako třeba index.php, akorát zde bude pouze jeden příspěvek.

Ve složce se vzhledem je ještě několik souborů, kterým jsme se zatím nevěnovali. Jde o soubory 404.php, archives.php a links.php. Soubor 404.php slouží k zobrazování chyby 404, pokud není na webu něco nalezeno. Archives.php slouží jako úvodní stránka do archivů, links.php je stránka s odkazy. Všechny tři stránky budou velmi jednoduché a také si budou velmi podobné. 404:

Na stránku pouze vložíme hlavičku, boční sloupec a patičku a základní HTML konstrukci stejnou, jako na ostatních stránkách. Poté jen vypíšeme jako nadpis chybu a vložíme políčko pro vyhledávání. Zbylé dvě stránky vyřešíme úplně stejně jednoduše, jen zaměníme obsah (pouze zkopírujeme příslušnou část ze souborů základní šablony). Je to opravdu jednoduché, takže snad není potřeba více rozepisovat.

Hotovo. Tím máme opravdu celou šablonu téměř hotovou, teď už nám zbývá jen optimalizace pro prohlížeče a bude to vše.

Optimalizace pro prohlížeče

Nakonec to ještě chce zkontrolovat, jak stránka vypadá v jednotlivých prohlížečích. Firefox, Opera, Safari i Chrome se tváří v pořádku, takže jako vždy to zbude na IE. IE6 jsem už vzdal, takže to budu optimalizovat pouze pro IE7 a 8. V každém se to chová trochu jinak, takže budeme muset vytvořit 2 další styly, které přidáme do hlavičky. Jeden už jsme si tam preventivně vytvořili, tak ještě přidáme ten druhý.

Soubor styl-ie7 bude pouze pro IE7, styl-ie bude nastaven pro IE7 a novější verze. V IE7 se špatně zobrazuje blok s autorem a datem článku a také je zde několik detailů, které layout nijak nerozhodí, ale stojí za opravu. Takže soubor styl-ie7:

Plus ještě doladěno pár detailů. Soubor styl-ie:

Tím prohlašuji šablonu za hotovou. Ten konec jsem trochu zkrátil, jednak už mi došly síly, druhak to tak daleko stejně nikdo nedočte :) Ale ono je to opravdu pořád dokola, zvlášť u těch souborů s archivem a hledáním není vůbec nic nového. Takže se nemá cenu opakovat a nudit vás ještě víc:)

Doufám, že se mi povedlo na tomto konkrétním příkladu šablony aspoň trochu vysvětlit šablonovací systém wordpressu a snad si z toho i něco odnesete. Pokud vám něco není jasné, nebojte se ozvat v komentářích, pokud budu vědět, rád poradím nebo něco dovysvětlím.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #3
  • Neregistrovaný kolemjdoucí
  • 30. July 2014 | 12:09
  • Skupina: Neregistrovaní

Nefungují Vám obrázky :-(

  • #2
  • Radek P.
  • 21. June 2012 | 10:42
  • Skupina: Neregistrovaní

U výpisu komentářů na úvodní stránce bych kód upravil následujícím způsobem:
<?php if($comments = get_comments(array('number'=>5,'status'=>'approve'))): ?>
Je totiž blbost vypisovat 5 posledních komentářů, když mezi nimi mám i neschválené

  • #1
  • jirkaha
  • 6. April 2012 | 18:07
  • Skupina: Neregistrovaní

Super, díky za článek a za seriál. Pomohlo mi to vyznat se v šablonách, už pracuji na tvorbě své vlastní :)

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi