html2wp / Blog / Z Lovable do WordPressu
Z Lovable do WordPressu: projekt převedený na skutečnou šablonu
Převod projektu z Lovable do WordPressu je stejná práce jako převod HTML do WordPressu, jen s jedním krokem navíc. Starší projekt z Lovable je aplikace v Reactu, takže v jeho HTML není co převádět: stránka se objeví až v prohlížeči, když se spustí JavaScript. Novější projekty (TanStack Start, od května 2026) vykreslují stránky na serveru a html2wp převede oba druhy stejně. Tento návod tě provede cestou od takového projektu k šabloně WordPressu, která nese tvůj kód, ne jeho přestavbu. Každý krok pochází ze skutečné konverze a oba její konce si můžeš otevřít.
Ukázka převodu z Lovable do WordPressu, otevřená na obou koncích
Všechno níže popisuje konverzi, kterou jsme opravdu spustili. Originál je aplikace z Lovable: bruce-banner.lovable.app, fotografické portfolio. Výsledkem je bruce.html2wp.dev, který běží na WordPressu. Do jeho administrace se dostaneš přes /wp-admin s uživatelským jménem demo a heslem demo.
Konverze vytvořila pět stránek a pět článků na šabloně bruce-banner. To se vejde do bezplatné verze, která převede nejvýš pět stránek na konverzi a nepotřebuje klíč. Než budeš číst dál, otevři si oba weby vedle sebe. Tento článek je o rozdílu mezi nimi, takže si ho můžeš změřit sám.
Stejně jsou otevřené ještě dvě další konverze z Lovable. Nejdřív spark-remix-kindred.lovable.app se stal webem terra.html2wp.dev, obchodem s pleteným oblečením na WooCommerce. Pak bloom-echo-remix.lovable.app se stal webem soria.html2wp.dev, webem svatebního fotografa. U všech tří je přihlášení do administrace WordPressu demo / demo.
Co tady přesně znamená „1:1“
Kód, který aplikace z Lovable sestaví v prohlížeči, je tentýž kód, který jde do šablony. Nikdo nepřestavuje tvoje sekce na widgety page builderu, takže nikdy nedostaneš přibližnou kopii designu stránku po stránce. Z toho vychází každý krok níže.
Co potřebuje počítač na převod z Lovable do WordPressu
Sestavení, práce v prohlížeči i všechny kontroly běží na tvém počítači. Do služby, která generuje šablonu, jde jen sestavený výstup. Není to tedy webová služba, do které nahraješ ZIP, a má požadavky, které je dobré znát předem:
- Node 20 nebo novější pro sestavení a lokální skripty.
- Python 3 s balíčky Playwright a Pillow. Playwright ovládá skutečný prohlížeč, a právě tak se z aplikace v Reactu stane HTML.
- Docker s příkazem
docker compose. Spustí na tvém počítači dočasný WordPress a konvertor v něm šablonu zkontroluje dřív, než ji uvidíš. - php-cli, protože každý PHP soubor projde kontrolou syntaxe, než jde do ZIPu.
jq,curl,bashatar. Cílový WordPress musí mít verzi 6.6 nebo novější.
Plugin to všechno ověří v prvním kroku a vypíše dva seznamy. V prvním je to, co dokáže nainstalovat sám ve tvých vlastních složkách. Ve druhém je to, o čem musíš rozhodnout ty: Docker, novější Node a spuštění Dockeru. Druhou skupinu za tvými zády nikdy neinstaluje.
Docker lidi překvapí nejvíc
Jiné konvertory ho nepotřebují, protože tento krok vynechávají. Tady konvertor nainstaluje vygenerovanou šablonu do skutečného WordPressu a otestuje ji v něm. K tomu slouží prohlížeč i kontejner. Pokud chceš pětiminutový nástroj v prohlížeči, tohle není on.
Instalace pluginu
Plugin zveřejňujeme dvakrát, pro každého agenta zvlášť. Skripty i číslo verze jsou pro Claude Code i Codex stejné. Vyber ten, který používáš.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Pak jednou v terminálu:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Pro bezplatnou verzi už nic dalšího nenastavuješ: žádný klíč, žádná registrace, žádná karta. Pokud raději nechceš pracovat v terminálu, stejnou konverzi spustíš i v desktopové aplikaci html2wp (návod se snímky obrazovky).
Jak dostat projekt z Lovable na disk
Adresa živého webu není podporovaný vstup, a to záměrně. Kopie zveřejněné stránky zachová jen vykreslený výsledek. Ztratí to, co ví zdrojový kód: které cesty existují, jaké jsou komponenty a co vznikne sestavením.
Vstupem je proto složka. Lovable synchronizuje tvůj projekt do repozitáře na GitHubu. Propoj ho, naklonuj a projekt máš u sebe. Ať rozhraní Lovable vypadá tento měsíc jakkoli, jde ti o repozitář: o tytéž soubory, ze kterých Lovable web sestavuje.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Nemusíš předem spouštět npm install ani sestavení. Konverze to udělá sama.
Řekni „convert this project“
V té složce, s otevřeným agentem, napiš:
/html2wp:html2wp
convert this project
Codex nemá příkaz s lomítkem. Místo toho mu napiš convert this project into a verified WordPress block theme a skill si najde sám. V Claude Code i v Codexu je tahle věta celé zadání. Nepíšeš žádný konfigurační soubor a nevybíráš příkaz pro sestavení.
Flash trvá zhruba 30 minut a Full zhruba hodinu, podle počtu stránek a výkonu tvého počítače. Většinou běží bez dozoru a po každém kroku hlásí, kde je, takže ticho nečekej.
Co se při převodu z Lovable do WordPressu stane s Reactem
Tohle je krok, který projekt z Lovable přidává.
Starší aplikace z Lovable (React a Vite) má jediný index.html. Jeho tělo tvoří prázdný prvek, do kterého se aplikace v Reactu připojí, a značka skriptu, takže není co převádět. Konvertor proto nejdřív projekt sestaví. Pak skutečný prohlížeč projde každou cestu a záznamník ho přitom sleduje. Výsledkem je ploché HTML pro každou cestu, přesně to, co zbytek procesu potřebuje. Novější projekt na TanStack Start už stránky vykresluje na serveru. Konvertor ho přesto sestaví a projde každou cestu stejně.
Co záznamník zachytí
- Stav, který vznikne až po spuštění JavaScriptu. Otevřené akordeony, obsah rozbalovacích menu, třídy, které mění skript. Záznamník je uloží jako data na prvcích a malý obecný runtime je přehraje. Nikdo je nepíše ručně zpaměti.
- Prahy při scrollování, na pixel přesně. Hlavička, která se mění při
scrollY > 40, používá číslo, které si někdo vymyslel. Záznamník ho najde a zjistí přesně, kde leží. Zaokrouhlený odhad by hlavičku měnil ve špatnou chvíli, a to navždy. - Vztahy „otevřený může být jen jeden“. Otevřeš A, pak B. Zavřelo se A? Záznam každého prvku zvlášť to nepozná, takže to záznamník testuje samostatně.
- Animace při najetí do obrazu přežijí. Záznamník je zachytí a šablona je přehraje přesně jako originál. Obsah je vidět i bez JavaScriptu, prvek se skryje jen tehdy, když běží runtime, a při
prefers-reduced-motionšablona animaci vynechá. Shodu 1:1 měříme v klidu, když animace doběhnou.
Co nepředstírá
- Chování, které nešlo zaznamenat, jde na seznam. Každá stránka má vlastní. Přečti si ho.
Tento krok má vlastní kontrolu, protože žádná pozdější ho nevidí. Konvertor vyfotí každou cestu naživo a porovná ji se statickým záznamem v šířkách 1440, 820 a 390 pixelů. Pokud se liší, krok neprojde. Každý další krok měří od záznamu k WordPressu, takže chyba vzniklá tady by jim všem unikla.
Kontrola, kterou nevynecháš
Když automatické kontroly skončí, konverze ještě není hotová. Konvertor dá každou stránku do jednoho obrázku vedle jejího originálu a ty si každý projdeš odshora dolů.
V jedné konverzi chyběla celá sekce níže na stránce a pixelové porovnání ukázalo rozdíl jen 0,4 %. Taková stránka kontrolou projde i bez té sekce. Tři druhy chyb automatické kontroly ze své podstaty nevidí. První je ovládací prvek, který vypadá dokonale, ale nic nedělá. Druhý je hodnota natvrdo převzatá z jediné stránky, ze které vznikla šablona. Třetí je cokoli, co se ukáže až po scrollování, kliknutí nebo odeslání formuláře.
Kromě vzhledu kontroluj i to, jestli jde obsah upravovat. Stránka může sedět na pixel, a majitel přesto nemusí umět upravit její FAQ nebo mřížku funkcí. Viděli jsme to naživo: akordeon s pěti otázkami vypadal stejně, ale žádný editor ho nenabízel. Kontrola, která se dívala jen na vzhled, ho pustila dál. U každé stránky se proto zeptej, jestli jde každou opakující se skupinu a každý blok textu upravit z wp-admin.
Instalace šablony
Do složky projektu přibude ZIP se šablonou a vedle něj CONVERSION-REPORT.md. Nic jiného. Pracovní složka se sestavením leží mimo tvůj projekt, ve složce cache, takže repozitář zůstane čistý. Výjimkou je zpráva, protože jejím čtenářem jsi ty. Uvádí, co konverze pokryla, co našla kontrola, každé varování (i ta přijatelná) a co ještě zbývá.
Ve WordPressu jdi do Vzhled → Šablony → Přidat novou → Nahrát šablonu, vyber ZIP a aktivuj ho. Šablona stojí sama o sobě. Stránky, blog, formuláře, menu, SEO i přesměrování jsou její vlastní kód. Ke svému běhu nepotřebuje žádný plugin a nikdy nekomunikuje s žádným naším serverem.
Úpravy webu po převodu z Lovable do WordPressu: tři cesty
Články blogu jsou běžné příspěvky WordPressu, takže je píšeš v blokovém editoru hned. Text stránek zůstává v tvém HTML a na jeho úpravy jsou dvě možnosti, které stojí za to znát. Jedna z nich je page builder.
| Cesta | Co získáš | Co tě to stojí |
|---|---|---|
| Jen šablona | Tvůj kód beze změny. Žádný plugin, žádná závislost, nic k obnovování. Články upravuješ v blokovém editoru. | Text stránek se bez pluginu mění v HTML. Pokud ho chce klient upravovat sám, stačí doinstalovat Visual Edit (Lite je zdarma). |
| Visual Edit, náš plugin | Klikneš na nadpis přímo na stránce, přepíšeš ho a uložíš. Text, obrázky, odkazy, formuláře a menu upravuješ tam, kde jsou, a kód zůstane takový, jaký byl. Lite je zdarma a nepotřebuje klíč. | Je to další plugin nainstalovaný ve WordPressu. Lite si pamatuje 10 kroků historie a nemá AI chat. Pro stojí 59 € ročně. |
| Elementor nebo jiný page builder |
Kdo zná Elementor, přeskládá si stránku sám, a takových lidí je hodně. Pro klienta, který bude rozložení měnit sám, má tahle znalost hodnotu. | Kód se přestaví na widgety builderu, takže už není tvůj. Web se pak bez Elementoru nevykreslí a ty zdědíš jeho strukturu, jeho CSS i jeho aktualizace. |
Pokud převádíš proto, aby design přežil, page builder je přesně to, co ho zničí. Ruční přenos designu do builderu je krok, po kterém web přestane vypadat jako design, a právě proto tento konvertor existuje. Pokud je ale design jen výchozí bod a klient ho stejně za čtvrt roku z poloviny předělá, klidně mu Elementor dej.
Lite, nebo Pro, pokud zvolíš Visual Edit
| Lite (zdarma) | Pro | |
|---|---|---|
| Úpravy obsahu klikáním | ✓ | ✓ |
| Formuláře, menu, pole pro SEO | ✓ | ✓ |
| Úpravy přes AI chat | – | ✓, s tvým vlastním API klíčem |
| Export šablony | – | ✓ |
| Ochrana formulářů Turnstile | – | ✓ |
| AI úpravy obrázků a animace z obrázků | – | ✓ |
| Historie úprav | 10 kroků | 300 kroků |
AI chat v Pro běží na tvém vlastním API klíči. Tokeny ti neprodáváme a náklady na jejich použití řešíš přímo se svým poskytovatelem.
Lovable, nebo WordPress? Vybírat nemusíš
Obvykle se to staví jako jedno, nebo druhé. U obsahového webu to tak být nemusí. V Lovable uděláš design rychle. Ve WordPressu web žije roky a upravuje ho někdo jiný. Převod si nechá to první a přesune to druhé. Šablona běží na jakémkoli WordPress hostingu, takže web už nemusí bydlet tam, kde jsi ho postavil.
Přesune se web: stránky, blog, formuláře, menu, SEO a přesměrování. Nepřesune se aplikace za ním: přihlašování, databáze a volání tvého vlastního API. Pokud je tvůj projekt v Lovable hlavně tohle, nech ho v Lovable. Obchod je někde mezi. S licencí Pro se jeho katalog změní na WooCommerce, jako u Terra Studios.
Kolik stojí převod z Lovable do WordPressu a co odmítne
Bezplatná verze je otevřená všem, bez klíče a bez registrace: tři konverze po pěti stránkách a celkem pět opakovaných spuštění. Obě čísla se počítají na IP adresu, takže kancelář se sdílenou adresou má jeden limit pro všechny. Bezplatná verze je na vyzkoušení nástroje, osobní weby a nekomerční práci.
Licence Pro ruší limit stránek a konverze i opakovaná spuštění jsou s ní neomezené. Přidává také krok, který z obchodu udělá WooCommerce. Ten v bezplatné verzi vůbec není: bezplatnou konverzi webu s obchodem aplikace rovnou odmítne, místo aby ji udělala napůl. Pro stojí 49 € měsíčně nebo 490 € ročně a ceny jsou na stránce s ceníkem. Během bety je první platba o 30 % levnější a klíč přijde e-mailem.
Dvě odmítnutí se vyplatí znát předem. Projekt v Reactu, jehož cesty existují jen pro jednotlivé záznamy (/product/:id bez dat k vykreslení), je webová aplikace, ne web k převodu. Konvertor ho otevřeně odmítne, místo aby dodal jednu náhodnou instanci šablony. A tohle je beta: kontroly zachytí většinu rozdílů, ne všechny. Proto je kontrola stránku po stránce součástí procesu, a ne volitelné doladění.
Návod na celý proces krok za krokem je v dokumentaci k aplikaci html2wp. Tři konverze z Lovable do WordPressu, které si můžeš otevřít na obou koncích, jsou v ukázce na začátku tohoto článku.