Nová šablona mého webu za tři dny: Claude psal, já vybíral

Tento můj web www.elvisek.cz roky běžel na šabloně, kterou už nikdo nepodporoval, a na hromadě pluginů. WordPress šablonu jsem v životě nedělal. Za tři dny jsem měl vlastní a nasazenou na produkci, a sám jsem na ní strávil asi čtvrt hodiny. Popisuju, jak to probíhalo, co vzniklo a kde to drhlo.

Výchozí stav: web, na který se nechce sahat

Web běží na WordPressu léta. Šablona, na které stál, už dlouho neměla podporu, a co v ní chybělo, jsem postupně doplňoval pluginy. Výsledek: web byl pomalý.

Zvažoval jsem i přechod na statický web, ale nakonec jsem dal WordPressu ještě šanci. Jeden pokus o novou šablonu už jsem v minulosti rozjel a nedotáhl. Tentokrát jsem začal od nuly a s jasnou podmínkou: co dělaly pluginy, má být přímo v šabloně.

Nejdřív plán, potom kód

Pořadí jsme si určili hned na začátku:

1. záloha souborů a databáze,
2. načíst starou šablonu, ať Claude vidí, z čeho vycházíme,
3. projít web a všechny pluginy,
4. sepsat plán,
5. až pak stavět.

K plánu jsem přidal pár pravidel: tmavý režim, Google Analytics jen se souhlasem a s vlastní jednoduchou cookie lištou, komentáře zůstávají a databáze se uklidí od dat po starých pluginech. Šablona má běžet lokálně, tedy žádné online funkce, pokud nejsou nutné. Nápady ze staré šablony, které se do první verze nevešly, šly do wishlistu na později.

Moje práce: vybírat z variant

Claude připravil několik návrhů vzhledu a já si vybral variantu „Magazín“: nadpis s mottem, vodorovné menu, velký hlavní článek a pod ním menší dlaždice.

Stejně to pak šlo další dny, když byl na to čas. Claude se zeptal, nabídl dvě až čtyři možnosti s krátkým popisem a já klikl. Které sítě do sdílení? Kopírovat odkaz, LinkedIn, Facebook. Kam profily? Ikony do patičky. Jak hledat? Výsledky rovnou pod polem během psaní. Nejčastější zprávy ode mě byly „ok“, „hoď to do gitu“ a „co máme dál“.

Proto těch 15 minut. Psaní kódu, ladění CSS ani čtení dokumentace WordPressu na mě nezbylo. Commit a tag dělám sám, takže poslední slovo, co jde ven, mám pořád já.

Co vzniklo

Šablona ElvisEK je dělaná na dlouhé návody s ukázkami kódu, kterých je tu většina:

• světlý a tmavý režim (podle systému, nebo ručně v patičce) a volba šířky stránky,
• dlaždice rubrik v hlavičce, které se při rolování složí do lišty, a hamburger menu na mobilu,
• rychlé hledání: po dvou znacích se pod polem ukážou články,
• obsah článku z nadpisů, bloky kódu se zvýrazněním, čísly řádků a tlačítkem Kopírovat,
• obrázky jednotně na 800 px a prohlížeč obrázků se šipkami,
• štítek „Aktualizováno“ u zrevidovaných návodů, související články, sdílení a sbalené komentáře,
• písma i zvýrazňovač kódu přímo na webu.

Druhá půlka je plugin ElvisEK Core. Funguje nezávisle na šabloně a nahradil sedm pluginů: omezení pokusů o přihlášení, bezpečnostní hlavičky, sitemap, převod obrázků do WebP rovnou při nahrání, aktualizace z GitHubu a stránku Údržba webu (přehled databáze, nepoužité obrázky, rozbité odkazy, úklid revizí, …).

Tlačítko Kopírovat pro AI zkopíruje článek jako Markdown, takže ho stačí vložit do Clauda nebo ChatGPT a ptát se. Každý článek má navíc Markdown verzi na adrese končící .md.

Jak se to dostává na web

Kód je ve veřejném repozitáři a vydání vypadá takhle:

git commit -m "0.9.2: obrázek v článku lze zarovnat na střed"
git tag v0.9.2
git push && git push --tags

Tag spustí GitHub Action, ta postaví ZIP šablony i pluginu a WordPress si novou verzi najde sám v Aktualizacích ve Worspressu. Proto Claude při každé změně zvedá číslo verze, jinak by si web aktualizace nevšiml. Odtud těch 40 verzí za tři dny. Lokálně běží WordPress v Dockeru, takže se dá všechno zkusit dřív, než to jde ven.

Úklid starého obsahu

Nová šablona sama nestačila. Staré články byly psané ve starém editoru, a tak je Claude převedl do bloků a 940 bloků zkontroloval, jestli je editor načte bez chyb. Starší obrázky sjednotil na WebP včetně odkazů v článcích a staré adresy přesměroval, aby nic nevedlo do prázdna.

Předtím udělal zálohu souborů i databáze přímo na hostingu. A jedno pravidlo jsme drželi celou dobu: Claude na produkci nic nemaže. Co je ke smazání, přesune do karantény mimo web a smažu to já.

Kde to drhlo

• Cache na hostingu. Změna byla nasazená, ale web pořád ukazoval starou verzi. Teď Claude po každé úpravě cache promaže a zkontroluje živou stránku.
• Úklid nepoužitých obrázků. Do karantény spadly i dva obrázky, které se v článcích používaly. Vrátili jsme je a karanténa se tím zaplatila.
• Drobnosti vzhledu. Omezení výšky hlavičky zúžilo obrázek a rozbalovací hledání na mobilu přetékalo z obrazovky. Oprava zabrala pár minut, ale bez kontroly očima by prošly.

Claude teď píše i články

Claude má na webu vlastní účet v roli šéfredaktora. Přes API ukládá články jen jako koncepty a publikuju je já. Takhle vznikl třeba článek o tom, jak mi Claude Code sestříhal video z Kefalonie, a takhle vznikl i tenhle.

Co si z toho beru

Neumět to není důvod to nemít. WordPress šablonu jsem nikdy nedělal a teď mám vlastní. Moje práce byla říct, co chci, vybírat z návrhů a kontrolovat výsledek.

Plán a záloha napřed. Nejdřív jsme prošli web a pluginy, teprve pak vznikla první řádka kódu. Díky tomu bylo jasné, co šablona musí umět a co může zmizet.

Méně pluginů, méně starostí. Sedm pluginů je teď jeden vlastní, o kterém vím, co dělá.