Jak se tvořila WP šablona pro web s více jak 20 let starými články?

Možná přemýšlíte, kolik obsahových webů je starších více než 20 let a stále fungují. Na jednom se právě nacházíte. Historie Intervalu sahá až do minulého století. Za tu dobu vzniklo několik tisíc článků, které byly napsány v různých publikovacích systémech. Tím posledním je WordPress, na kterém Interval běží již spoustu let.

Zadání práce

Dlouhá léta se zabývám tvorbou šablon do WordPressu. Nedělám žádné mainstreamové šablony, které bych prodával na různých portálech co nejvíce lidem. Vytvářím šablony na míru. Co nejčistější, nejrychlejší, bez zbytečných pluginů (byť často nějaké rozšíření použiji taky, někdy opravdu nemá smysl vynalézat kolo). Interval neměl být výjimkou. Chtěli jsme moderní, přehledný a čistý web, ve kterém bude správně fungovat i stávající obsah.

Kolegové připravili kompletní HTML šablonu. Máme o tom také zajímavý článek. Ono to zní taky dost jednoduše, ale opak je pravdou. Obrovské množství hodin práce spousty lidí, včetně grafika a kódera, který převedl grafický návrh do čisté statické HTML šablony. Styly jsou napsané v SCSS, javascriptu byla pouze trocha. Já dostal jednoduché zadání – převeď tuto šablonu do WordPressu.

Na co bylo potřeba dát si pozor a s čím bylo potřeba počítat?

• Na správné rozměry obrázků;
• různé typy obsahu;
• záludnost ve formě TOC (table of contents – obsah článku) – o tomto se rozepíšu;
• chybějící prvky od kódera;
• překopírovat některé PHP funkce ze staré šablony (které se do ní psaly na pevno);
• otestovat co nejdříve článků, zdali se zobrazují dobře;
• s tím, že jako každý web, i tento musel být vytvořen co nejrychleji!

Prvotní vývoj

Pro každý web si vytvořím GIT repozitář, rozjedu si čistou instalaci WordPressu na lokální doméně, nakopíruju si svůj „skeleton“ (připravená defaultní šablona se všemi mými funkcemi, které při vývoji webu používám). Tento web ještě není postavený na frameworku Bedrock, který je mimochodem úžasný, často ho používám a brzy o něm také napíšu článek.

Jelikož pracuji na existujícím webu a nedělám vše úplně od nuly, musel jsem si z aktuální produkční verze Intervalu stáhnout databázi, všechny nainstalované pluginy, starou šablonu a nahrané obrázky. To se řekne lehce, protože obrázků na Intervalu je za ty roky opravdu velké množství. Stáhl jsem si tedy pro lokální testování pouze soubory nahrané v roce 2022 a 2023. Po této přípravě jsem aktualizoval URL adresy v databázi tak, aby mi web fungoval lokálně, nastavil jsem správné přístupy ve wp-config.php a pustil se do práce.

Jedním z prvních kroků je očištění skeleton šablony, definování si post typů (v tomto případě to je jednoduché – máme pouze výchozí post typy), propojení ACF a vytvoření stránky s globálním nastavením. Souběžně s tímto jsem smazal několik nepotřebných pluginů, které dělaly věci, které v nové šabloně nepotřebujeme nebo jdou napsat jednoduše přímo jako součást šablony.

Z HTML kódu dodaného kóderem jsem jako první napojil do WP celou hlavičku – stylopisy, scripty a samotnou strukturu. Stejným způsobem jsem připravil i patičku. Nastavil jsem si do šablony, že chci využívat funkcionalitu menu, vytvořil pozici widgetů a zkusil web spustit. Vše fungovalo! Viděl jsem bílou stránku, ale po zobrazení zdrojového kódu jsem viděl správně vypsanou HTML hlavičku a patičku.

Vývoj obsahu

Vždy postupuji tak, že si rozdělím, která část šablony se využívá na všech stránkách – jedná se typicky o hlavičku, ve které je logo, menu a vyhledání; a patičku, ve které je třeba spodní menu, copyright text a logo. Po dokončení tohoto „nutného zla“ (generování menu do předem dané HTML struktury je někdy fakt radost) jsem pokračoval na hlavní stránce.

Stránku jsem si rozdělil na několik částí a vždy vytvářím z opakujících se prvků komponenty. Tudíž třeba, pro dlaždici s příspěvkem vytvořím komponentu components/post-item.php, kterou používám napříč webem opakovaně. To vždy urychlí spoustu práce, šablona se stává čistější, přehlednější a dají se rychle tvořit nové podstránky a prvky s využitím již existujících komponent.

Pro nastavování hlavní stránky jsem použil plugin ACF, na kterém většinu šablon stavím. V nastavení se dá zvolit, jaký článek se má zobrazovat jako featured (hlavní), z jakých kategorií se mají na hlavní stránce zobrazovat články a také je možné nastavit jejich počet.

Udělat výpisy příspěvků, vyhledávání, archiv a detail autora už bylo celkem snadné, právě z důvodu využití komponent. Vytvoření vlastního stránkování ve WordPressu je také oříšek, ale řešitelný (to by bylo na celý článek).

Pro widgety jsem udělal několik widget area – pro detail příspěvku, homepage a detail kategorie. Zatím podporuje jen blok s reklamou a tagcloud, který budeme nahrazovat (shodli jsme se, že tagcloud je již takový přežitek).

Detail příspěvku

Nejsložitější částí šablony byl samotný detail příspěvku. Jak jsem již zmiňoval, web je hodně starý, obsah byl tvořen různými publikačními systémy, tudíž bylo potřeba dosáhnout toho, aby se obsah článků zobrazoval konzistentně.

Jedna věc je ta, jak vypadá nakódovaná šablona od kódera s testovacími daty, druhá věc je realita. Dlouhé nadpisy článků, tabulky uprostřed článků, které zasahovaly až ven z obsahu. Nepoužití výchozích stylů pro pozicování obrázků, nenastavení maximální šířky obrázku a tak dále. Najednou ten článek nevypadá tak hezky, jako v pěkně uhlazeném návrhu.

Na komentáře se zapomnělo. Na šabloně pracovalo spoustu lidí, ale komentářová sekce se úplně zapomněla vyřešit. Tudíž proběhlo základní nastylování komentářů tak, aby nepůsobily rušivě a je v plánu dodělání komentářů v novém designu tak, aby vše vypadalo hezky a konzistentně.

Table of contents

Šablona obsahovala v návrhu po pravé straně TOC (table of contents) – takový seznam kapitol pro snažší orientaci ve článku. Jenže, jak to udělat? Použití pluginu bylo nereálné, kvalita by byla pochybná a byl by zázrak, kdyby vše fungovalo a zároveň zapadlo do našeho nového designu. Aby to někdo zadával ručně, to je spousta práce a u tisíců článků by to někdo musel doplnit. To také nepřicházelo v úvahu.

Automatika – podle nadpisů článku. Jenže jak na to? Články jsou staré, jak jsem již zmiňoval. Autoři používají různé velikosti nadpisů. Někdo použije klidně několikrát nadpis úrovně 1, což je i z pohledu SEO špatně. Někdo používá nadpisy H4 a H5. Muselo přijít sjednocení. Automaticky.

Nejdříve bylo potřeba provést sjednocení tagů:

• nahrazení všech H1 tagů za H2;
• nahrazení všech H4, H5 tagů za tagy H3;
• pokud v obsahu článku není žádný tag H2, převedeme všechny tagy H3 na H2.

Poté nastupuje funkce preg_replace_callback(), která pracuje s HTML obsahem článku. Načte všechny H2 a H3 nadpisy, vygeneruje k nim element id="", do kterého vypíše slug (skrze odkazování – kotvy). Následně si si všechny nadpisy ukládá do dočasného pole a vytvoří celou strukturu obsahu článku, kterou následně vypíše v levé části stránky.

Tolik práce a přitom taková maličkost, co?

Velikost obrázků

Rád bych ještě zmínil plugin Fly Dynamic Image Resizer, který je skvělým pomocníkem pro práci s obrázky a jejich rozměry. Samozřejmě jsem nastavil nové rozměry přímo v sekci Média ve WP a vytvořil si custom image size v kódu šablony, ale pro nějaké atypické rozměry, které nejsou u všech článků, se tohle rozšíření hodí. Využijí to ale jen ti lidé, kteří pracují přímo s kódem šablony, pro běžné užití plugin není vhodný.

Automatický dark mode

Při čtení článku návštěvník jistě ocení připravený noční režim (dark mode), který se dá přepnout ikonou v hlavičce stránky. Pro ty uživatele, kteří mají dark mode nastavený v telefonu nebo počítači, se automaticky noční režim nastaví. K tomu mi pomohla jednoduchá funkce, kterou jsem našel jak jinak, než na Stackoverflow. Bylo potřeba myslet na to, že návštěvník může chtít dark mode vypnout, takže pomocí cookies ukládám aktuální nastavení, které má větší prioritu než automatická detekce z uživatelova zařízení.

Testování a ladění

Nezanedbatelný objem práce zabralo testování a ladění webu. Procházel jsem namátkově různé články od roku 1999 až po rok 2023, hledal chyby, rozpadlé části, chybějící styly a vše postupně opravoval.

Web byl vystaven na testovací doméně a prozkoušen od několika kolegů či známých, jejichž připomínky jsem taktéž zapracoval.

Spuštění webu

Spuštění webu proběhlo velice rychle, v neděli v nočních hodinách bez větších komplikací. Na server se nahrála nová šablona, aktivovala se. Vyplnilo se globální nastavení, web jsem otestoval a věřil, že bude vše v pořádku.

Kdybych web dělal dnes znovu, postupoval bych v určitých věcech trochu jinak (což je řekl bych zcela běžné), ale vše v pořádku funguje, šablona je přehledná, verzovaná v GITu. Procházení webu je rychlé, máme automatický příjemný dark mode a myslím si, že je web celkově přehledný a funkční.

V komentářích vám rád odpovím na jakýkoliv dotaz či podnět.