Alternativní popisek článku by mohl být: "Aneb co se při prezentaci nepovedlo." Tento článek byl původně prezentací na našem květnovém WordPress Meetupu v Ostravě, kde jsem chtěl živě demonstrovat, jak se dá Claude Code, konkrétně Claude CLI, použít pro zefektivnění práce na WP.
Mou tradicí je, že když mám přednášku, tak živé demo. A když živé demo, tak tradičně něco nefunguje, nebo se něco nepovede, a tentokrát tomu nebylo jinak.
Jak mít CF7 formulář připravený za 5 minut... a nebo ne
Pokud už děláte weby nějakou chvíli, tak oceníte, když se dá něco připravit programaticky. Myslím tím, že namísto naklikávání formuláře v nějakém editoru, kde po jednom naklikáte inputy, pak jim měníte typ, placeholdery a tak dále. Neustále žonglujete mezi myší a klávesnicí a na závěr ještě musíte upravit jejich vzhled proklikáváním všelijakých meníček, oceníte, když nespustíte ruce z klávesnice a pomocí [shortkódů] si nadatlujete kompletní formulář, který pak nastylujete špetkou CSS.
Právě pro tento typ programatického postupu je Contact Form 7 jako dělaný. A kde je jen kód, bez proklikávání myši, tam nám může Claude Code pomoci.
Workflow které jsem chtěl ukázat je následující. Máme web od grafika, ten zpravidla obsahuje i formulář. Pokud jde jen o pixelový formát, nikoliv HTML, tak můžeme udělat toto:
Screenshotnout návrh, případně jeho část → Hodit screenshot do lokální složky → Říct Claude Code, ať mrkne na ten obrázek a připraví nám:
- Responzivní verzi formuláře s CF7 shortkódy
- CSS, které zajistí stejný vzhled jako náš vstupní screenshot + responzivitu napříč různými zařízeními
- Emailovou šablonu s CF7 shortkódy, která ladí se vzhledem webu (není nutná, ale je hezké když ladí s webem)
Jiná část dne jiné limity?
Zkoušel jsem si celý postup ráno v cca 11 hodin. Použil jsem Divi 5, udělal si testovací stránku, vytvořil screenshot celé stránky, hodil ho Claude Code na přechroustání a po pár minutách jsem měl ve složce krásné tři nové soubory: cf7-form.html, cf7-email-template.html a cf7-form.css.
Toto samé jsem chtěl demonstrovat na přednášce zhruba v 18:30 toho samého dne. Pětihodinové okno se restartovalo před zhruba třemi hodinami. Udělám screenshot, napíšu prompt a... Nic... Claude mi vyhodí hlášku že obrázek je moc velký. Zkouším znovu, nic. Nové okno terminálu, nic... Až o 3 hodiny později, doma mě napadlo se zeptat o co go... Limit na obrázek 2000x2000px.
Limit tam ráno v 11 hodin nebyl.
Nicméně, s každou takovou situací se člověk něco naučí. Stejný workflow jsem zkoušel i pár dnů později. V dopoledních hodinách a vše šlapalo bez problémů. Vysvětluji si to tak, že Claude Code nasazuje limity v době, kdy má východní pobřeží USA pracovní hodiny, aby stíhala vykrývat zátěž serverů.
Každopádně ať už použijete celý screenshot webu, nebo jen výseč s formulářem. Chatboti vám dovedou celý proces přípravy CF7čky urychlit a to zásadně. Co mi dříve trvalo třeba půl hodiny, v případě podmíněných polí i mnohem více, dnes s Claude AI to zvládnu do jednotek minut.
Jak se k tomu Claude Code dostanu?
Všiml jsem si při prezentaci, že jsem měl začít spíše od Adama. Až později, když jsme se bavili s dalšími lidmi z Meetupu, mi došlo, že někteří možná nevědí co přesně Claude Code je a jak se k němu můžou dostat. Napíšu proto článek, kde to popíšu.
Pokud zatím využíváte bezplatné modely, tak věřím že zrovna tento úkol, co do náročnosti, zvládnete i v prohlížeči s free tierem Gemini, nebo i ChatGPT.
Jak využíváte AI pro práci s WordPressem vy?
