Určitě jste si všimli, že web chiptron.cz právě prošel velkými změnami. Stojím za nimi já, Vláďa Smitka z agentury LYNT. Webům se věnuji už přes 20 let a jsem poměrně aktivní ve WordPress komunitě. Když se Chiptron na sítích ptal, zda by měl přejít na WordPress, nebo na něco jiného, tak jsem se za WP samozřejmě hned přimlouval, protože považuji WordPress za ideální řešení pro tento typ webu. Nakonec jsem ho ve svých volných chvilkách na WP převedl.
V tomto poměrně rozsáhlém článku vám popíšu, jak jsme tento web modernizovali z PHP Fusion, ve kterém byla příprava článků velmi náročná, na WordPress. Zároveň vysvětlím, jak jsme u toho použili AI. Chci ukázat i jak jsem nad celým procesem přemýšlel. Věřím, že článek pomůže nejen tvůrcům obsahu a webů, ale i bastlířům, kteří se chtějí podělit o své projekty a poznatky. Ukazuje, že i s osvědčenými nástroji, jako je WordPress, lze díky dnešním možnostem efektivně vytvořit moderně fungující web – pokud je dobře promyšlený a systematicky postavený.
Proč právě WordPress?
Po Chiptronově dotazu na X nejčastěji padala doporučení buď na WordPress, nebo na staticky generovaný web. WordPress má výhodu v komfortním editoru pro tvorbu obsahu a ohromné možnosti jednoduchého přizpůsobení, když překousnete jeho archaický styl. Nevýhodou je nutnost se o takový web starat, řešit aktualizace a hosting.
Další variantou bylo psát blog na nějaké platformě, jako je Seznam Médium. Osobně se však přikláním k tomu být pánem vlastních dat.
Rychlá demonstrace: Abych ukázal, že WP je ta správná cesta, během půl hodiny jsem vytvořil kompletní kopii webu. Napsal jsem crawler v Pythonu, který obsah vyexportoval do XML, nainstaloval jsem WP s defaultní šablonou TwentyTwentyFive a pomocí WP All Import naimportoval články.
Chiptronovi se líbil vzhled defaultní šablony a klidně by to na ní spustil. Domluvili jsme se, že to ale uděláme pořádně.
.
Analýza: Identifikace problémů původního webu
Před realizací jsem zanalyzoval slabiny původního webu z pohledu uživatelů, vyhledávačů i technické udržitelnosti.
Struktura URL
Starý web nepoužíval hezké odkazy, ale jen ID v URL parametru (např. news.php?readmore=1623). Odkazy byly založeny na ID, což není ideální ani pro SEO, ani pro uživatelskou orientaci, protože ze samotného odkazu není ani náznakem znát, čeho se týká. Bylo jasné, že budu muset vytvořit systém přesměrování ze starých URL na nové.
Duplicitní obsah
Starý web používal 2 typy obsahu: novinky a články (typicky delší návody). Novinky často opakovaly titulek článku a část jeho obsahu. To vytvářelo konkurenční duplicitní obsah a při migraci by vznikla velmi podobná URL jako „/pajeci-pinzeta-ht140-hodi-se-to-do-bastlirske-dilny/“ a „/pajeci-pinzeta-ht140-hodi-se-to-do-bastlirske-dilny-2/„. Tomu bylo potřeba zabránit.
Nevhodné kategorie
Za mnoho let běhu webu původní kategorizace obsahu zastarala a už neplnila svou funkci. Většina článků a novinek tak padala do „mega kategorií“ Hardware nebo Software a naopak v dalších kategoriích bylo jen několik jednotek článků. Potřeboval jsem jasně definovaný nový systém tagů, který by usnadnil navigaci.
Nevyužitý starší obsah
Kvalitní historický obsah byl pro návštěvníka prakticky nedostupný. Chtěl jsem to zlepšit v obou směrech, aby se návštěvníci k zajímavému obsahu dostali, a zároveň, aby starší obsah odkazoval na tematické novější články a vytvářel tak hustší síť interního prolinkování, což je dobré i pro vyhledávače.
Analytika
Na starém webu byl použit Google Analytics 4. To je sice standardní nástroj, ale myslím si, že není úplně lehce uchopitelný pro běžné uživatele. Můj plán byl nahradit ho za Plausible nebo Umami. Tyto nástroje měří bez cookies a poskytují dostatečný přehled o návštěvnosti na jedné stránce tak, aby byl uchopitelný běžným smrtelníkem.
Monetizace
Chtěl jsem také otevřít možnosti drobné monetizace webu do budoucna, například reklamu, affiliate, guest posting, nebo drobný komunitní sponzoring či merch. Výdělek rozhodně není hlavním cílem webu, ale je hezké, když se autorovi pokryjí náklady na hosting a může si dojít na pivo 🙂
Migrace: Technické detaily
Z první demonstrace jsem měl připravený jednoduchý Python skript pro stažení obsahu. Ten nejprve všechny články stáhnul lokálně, uložil je pod jejich ID do HTML a následně z nich generoval XML – to proto, abych během ladění nemusel znova a znova stahovat celý web.
Tento skript jsem vylepšil, aby stahoval nejen články, ale i jejich kategorie, původní URL pro přesměrování, metadata, informace o čtenosti, používal první obrázek článku jako náhledový a správně ošetřil embeddy z Twitter/X.
Původně jsem chtěl použít AI pro extrakci HTML, ale kvůli ne úplně ideální struktuře původního webu bylo rychlejší napsat vlastní parser než AI vysvětlovat všechny výjimky. Při vývoji s AI vidím obecně jako jednu z nejdůležitějších schopností ve správný čas poznat, že hádat se s AI nemá smysl a je třeba přestat být líný a daný kus kódu napsat sám. Protože velkou část mé práce tvoří právě získávání dat z online zdrojů, nebyla to pro mě žádná překážka.
Při zpracování jsem ukládal titulky článků a u novinek kontroloval jejich duplicitu. Duplicitní obsah jsem vyloučil a uložil bokem pro pozdější přesměrování.
Import do WordPressu
Při importu přes WP All Import jsem narazil na problém s externími obrázky, které blokovaly načítání. Servery totiž jen otevřely spojení a nic nevracely. Vyřešil jsem to vlastní PHP funkcí přes hook pmxi_article_data, která externí obrázky před zpracováním „schovala“. Připravil jsem také funkci pro záložní obrázky u článků bez náhledu.
Přesměrování starých URL
Vytvořil jsem soubory news.php a article.php, které emulují původní URL strukturu – najdou článek podle staré URL, která je uložená v post meta, a přesměrují na nové URL, což z velké části zachovává SEO hodnotu. Pro duplicitní novinky jsem vytvořil staticky definovaná přesměrování. Možná na tento systém postupně přejdeme kompletně, aby byla všechna přesměrování centralizovaná.
Nová struktura tagů
Dalším krokem bylo navrhnout novou strukturu tagů. To už byl ideální úkol pro AI. Podle titulků všech článků jsem nechal navrhnout nové tagy. Po ručních úpravách vzniklo 40 hlavních tagů v následujících oblastech:
- Technologie
- Elektronika
- Bastlení a DIY
- 3D tisk
- Software a simulace
- Akce a komunita
- Novinky a zajímavosti
Kategorie ve WordPressu jsme použili na původní rozdělení na články a novinky. Nově jsme k tomu přidali další kategorii Novinky v Eshopech, které jsou specifické a zaslouží si vlastní sekci. Díky tomu mohou všechny tyto články automaticky odkazovat na nejčerstvější tipy.
Využití AI
Nyní byl už čas na web vypustit AI 🙂. Díky umělé inteligenci (nejčastěji model GPT-4.1-mini) jsem ušetřil opravdu mnoho času. S obsahem bylo potřeba provést několik úkolů.
AI dostala komplexní zadání:
- Tagování a kategorizace – návrh nové struktury tagů podle obsahu
- Sumarizace obsahu článků
- Identifikace klíčových entit (NER) – najít, co se v článku řeší za produkty, společnosti, jména a technologie (použijeme později u relevantních článků)
- Zjištění, zda je článek vhodný na to, aby v něm byl odkaz na několik předem vybraných článků na různá témata
- Detekce faktických chyb nebo zastaralých informací
- Doporučení pro rozšíření článků, aby měl větší informační hodnotu
- „Copywriterská“ doporučení, jak článek vylepšit, aby se lépe četl
Většina výstupů se ukázala jako užitečná, pouze „copywriterská doporučení“ byla často příliš obecná, neosobní a opakující se. Data z analýzy jsem následně intergroval i do webu:
Pro tuto operaci jsem připravil rozsáhlý prompt, který obsahoval popis používaných tagů, pravidla pro jejich aplikaci a sumarizace článků určených k prolinkování. Abych minimalizoval náklady, rozdělil jsem komunikaci na dvě části: statický prompt s instrukcemi jsem posílal vždy jako první zprávu (využívá velmi levné cachované input tokeny), samotný obsah článku pak následoval v další zprávě.
Použil jsem model GPT-4.1-mini, který je cenově dostupný a výkonem dostačující. Levnější model GPT-4.1-nano by vyžadoval výrazně podrobnější instrukce a s úkolem by si neporadil tak dobře.
Nechal jsem zpracovat 1600+ článků s náklady drobně přes 3$.
Vytváření interních odkazů
Nyní jsem měl u všech článků jejich AI sumarizaci. To jsem dále využil k tomu, abych celý obsah znovu rozdělil na témata – podobně jako s tagy, ale podrobněji. Vznikla tak stovka dalších tématických okruhů. Zhruba dvacítku jsem vyloučil, protože do ní spadalo minimum článků (například detektory kovů), a ke zbylým jsem nechal najít reprezentativní článek o daném tématu.
S touto přípravou jsem pustil další AI operaci na vytváření interních odkazů. Opět jsem nechal projít všechny články a pokud spadaly do nějakého tématického okruhu, dal jsem AI za úkol vybrat klíčové slovo, na které se následně vytvoří odkaz na reprezentativní článek. Tento úkoly vyšel dalších zhruba 1,5$. Odkazy jsou připravené na případné budoucí hromadné operace, například na změnu jejich cíle na nějaký nový článek.
Výsledky AI analýzy: Celkově AI analyzovala přes 1600 článků a vytvořila více než 2500 interních odkazů s náklady okolo 4,5$, což ukazuje, jak efektivní může být integrace AI do reálných projektů.
AI Automatizace pro nový obsah
Protože výstupy z AI jsou velmi užitečné, část z nich se aplikuje i na nový obsah. Odpoveď z API může trvat desítky vteřin, proto jsem analýzu implementoval pomocí WP Cron, který spouští AI úlohy na pozadí. Autoři tak při ukládání článku nemusí zbytečně čekat na zpracování.
Abych zjednodušil tagování článků, přidal jsem původní jednorázovou funkci na otagování přímo do administrace. Jakmile je článek napsán, stačí tak kliknout na tlačítko a článek se pošle opět modelu GPT-4.1-mini, aby pro něj vybral vhodné tagy.
Prompty, které tyto funkce používají, jsou uživatelsky upravitelné, takže je lze jednoduše ladit a postupně vylepšovat výsledky.
Další zapojení AI je v překladech článků na anglickou variantu webu. Článek lze odeslat pomocí REST-API na další web, kde se opět naplánuje WP Cron a provede se úvodní automatický překlad do angličtiny.
Technické řešení webu
Obsah – tedy nejdůležitější část webu – máme pořešenou, můžeme se tudíž podívat na technickou stránku webu. Chiptronovi se líbila defaultní šablona TwentyTwentyFive. Místo ní jsem ale nakonec použil Bricks Builder. Vzhled jsem ponechal velmi jednoduchý, podobný defaultní šabloně. Z původního webu jsem částečně přenesl jeho barevný nádech.
Dříve jsem býval zarytým odpůrcem podobných builderů. Generovaly složitý kód, ubíraly možnosti vlastních zásahů a zpomalovaly web. Nové nástroje (Oxygen, Bricks) však umí pracovat přímo ze základními HTML elementy a používají CSS třídy a proměnné (když chcete), takže se výsledný kód příliš neliší od toho ručně psaného. Jen na frontendu je samozřejmě více CSS a JS, než byste si napsali sami.
Bricks používám rád, protože mi umožňuje velmi rychle prototypovat, jednoduše přidávat nové části webu, přesouvat je a okamžitě vidět výsledek. Kdybych takto upravoval původní šablonu, spálilo by se dost vývojářského času, i když to nejsou náročné úkoly. To je obzvlášť patrné v případě, kdy se projekt nedělá klasickým postupem s několika koly vymýšlení zadání a návrhů.
Vizuální konzistence a CSS
Abych si práci ještě ulehčil, použil jsem miniaturní CSS framework Fancy Framework, který vygeneruje sadu CSS proměnných pro velikosti písma, spacing a barvičky do Bricks. Tím jsem s minimálním úsilím zajistil konzistentní vzhled a použití fluidní typografie a spacingu (drobné přizpůsobení velikosti okna – na mobilu je tak web automaticky kompaktnější).
Mobilní optimalizace
Pro layout často používám CSS grid, protože umožňuje kompletně přeskládat obsah. Bricks Builder k tomu má i vizuální pomůcku. Na mobilu tak „sidebar“ a blok s „Trendy“ posouvám až do patičky, aby k hlavnímu obsahu nebylo nutné dlouhé scrollování a zároveň byly tyto sekce rozumně ukotvené.
Zmíněné „Trendy“ jsou další na míru připravenou funkcí. Je to redakčně spravovaný seznam zajímavých témat, o kterých blog je. Nenásilně tak nahrazuje složitá menu a úvodní text „Vítejte na mém blogu o elektrotechnice, najdete zde užitečné informace o XY“.
Lepší vyhledávání
Jedním z cílů nového webu bylo zpřístupnit starší články, které byly dříve prakticky nedohledatelné. Proto jsem použil plugin Relevanssi, který zlepšuje vyhledávání a řeší související příspěvky. Ten udržuje vlastní index rozložený na tokeny s váženou relevancí. Do jeho indexu jsem přidal i NER výstup z AI analýzy, integroval český stemmer pro jednoduché skloňování („kniha“ i „knihu“ bere jako stejné slovo), nastavil seznam českých stop slov a vytvořil integraci s Bricks Builder pomocí „Query Loop“.
Konfigurace vyhledávání
Nejvyšší váhu pak má shoda v titulku, dále v samotném obsahu, zvýhodňujeme shodu tagů a přidáváme skóre příspěvkům v posledním roce. Naopak lehce znevýhodňujeme novinky oproti článkům a více znevýhodňujeme novinky v eshopech, protože se v nich typicky řeší široké spektrum produktů a byly by tak často relevantní k většině dotazů.
Uživatelé určitě ocení funkci Live Search. Tu obstarává doplňkový plugin k Relevanssi, který jsem do webu dointegroval.
Věřím, že těmito úpravami jsem zjednodušil návštěvníkům cestu k dalšímu zajímavému obsahu. Podle dat z analytiky to zatím vypadá, že tomu tak opravdu je 🙂
Pluginy a udržitelnost
S cílem dlouhodobé udržitelnosti a minimální administrativní náročnosti jsem se snažil omezil počet použitých pluginů. Často bohužel vídávám WordPress weby s desítkami nainstalovaných pluginů. Aktualizace na některý z pluginů vycházejí prakticky každý den, čímž však extrémně rostou nároky na správu webu. Pokud se ale aktualizace zanedbají, zvyšuje se riziko bezpečnostních chyb. Množství pluginů má samozřejmě negativní vliv i na výkon webu.
Na tomto webu jsem použil následující pluginy:
- Relevanssi – pro vylepšení vyhledávání a určování souvisejících článků (plus jeho LiveSearch a můj český stemmer)
- The SEO Framework – jednoduchý a nenáročný SEO plugin pro nastavování metadat pro vyhledávače a sociální sítě
- WP Super Cache – jednoduchý cachovací plugin pro zvýšení výkonu, který dočasně ukládá statickou podobu článků pro rychlejší načítání
- Performance Lab – plugin od oficiálního WordPress performance týmu pro zlepšování některých výkonnostních aspektů WP na vyzkoušení před tím, než se dostanou do jádra – řeší nám například pohodlné používání moderních obrázkových formátů
- Plausible – integrace analytického nástroje do WP, zpřístupňuje statistiky přímo v administraci
Na webu je přes tisíc řádků vlastního PHP kódu. Mimo výše zmíněných funkcí to jsou další drobné pomůcky, například přidávání obrázků v RSS, automatické čištění názvů nahrávaných souborů nebo integrace s IndexNow pro Bing a Seznam. Odhaduji, že zhruba třetina tohoto kódu je generovaná pomocí AI při psaní v editoru. Aktuálně používám Cursor, který dělá především scaffolding a následné refaktorace. Kdo ve WP někdy ručně definoval vlastní custom post type, tak ví, o čem mluvím 😉
Závěr
Práce na Chiptron.cz byla užitečným připomenutím toho, na co se při tvorbě webů často zapomíná. Většina pozornosti se obvykle věnuje designu a vizuálnímu zpracování, ale skutečná funkčnost webu se odvíjí od méně viditelných aspektů – struktury a propojení obsahu a dlouhodobé udržitelnosti.
AI analýza za 4,50$ zpracovala přes 1600 článků a vytvořila tisíce interních odkazů, což ukázalo, jak můžou moderní nástroje efektivně řešit úkoly, které by dříve zabraly týdny. Zde pomohla s mnoha úkoly, od drobného vývoje, přes klasifikace dat až třeba po pomoc s vytvořením stránky o autorovi pomocí Deep Research.
Web není jen o tom, jak vypadá, ale především o tom, jak dobře plní svou funkci a jak udržitelný je do budoucna. Tohle doufám nový web splňuje a Chiptronovi se v něm bude pohodlně tvořit nový obsah 🙂.
