Z Lovable do WordPressu: projekt prevedený na skutočnú tému

Ukážka prevodu z Lovable do WordPressu, otvorená na oboch koncoch

Všetko nižšie opisuje konverziu, ktorú sme naozaj spustili. Originál je aplikácia z Lovable: bruce-banner.lovable.app, fotografické portfólio. Výsledok je bruce.html2wp.dev na WordPresse. Do administrácie sa dostaneš cez /wp-admin s menom demo a heslom demo.

Vzniklo päť stránok a päť článkov na téme bruce-banner. To sa zmestí do bezplatnej verzie, ktorá prevedie najviac päť stránok na konverziu a nepotrebuje kľúč. Otvor si oba weby vedľa seba ešte predtým, ako budeš čítať ďalej. Tento článok je o rozdiele medzi nimi a ten si môžeš zmerať sám.

Ďalšie dva prevody z Lovable sú otvorené rovnako. Z spark-remix-kindred.lovable.app vznikol terra.html2wp.dev, obchod s pleteným oblečením na WooCommerce. Z bloom-echo-remix.lovable.app vznikol soria.html2wp.dev, web svadobného fotografa. Prihlásenie do administrácie je všade demo / demo.

Čo potrebuje počítač na prevod Lovable do WordPressu

Zostavenie projektu, práca v prehliadači aj všetky kontroly bežia u teba. Službe, ktorá generuje tému, sa posiela len zostavený výstup. Nie je to webová služba, do ktorej nahráš ZIP, a má požiadavky, ktoré je lepšie poznať hneď:

• Node 20 alebo novší na zostavenie projektu a lokálne skripty.
• Python 3 s balíkmi Playwright a Pillow. Playwright ovláda skutočný prehliadač, a práve tak sa z aplikácie v Reacte stane HTML.
• Docker s príkazom docker compose. Na tvojom počítači sa spustí dočasný WordPress, v ktorom sa téma skontroluje skôr, ako ju uvidíš.
• php-cli, lebo každý PHP súbor prejde kontrolou syntaxe pred zabalením do ZIP.
• jq, curl, bash a tar. Cieľový WordPress musí byť vo verzii 6.6 alebo novšej.

Plugin to všetko overí hneď v prvom kroku a vypíše dva zoznamy. V prvom je to, čo vie nainštalovať sám vo tvojich priečinkoch. V druhom je to, o čom musíš rozhodnúť ty: Docker, novší Node a spustenie Dockeru. Druhú skupinu za teba potajomky neinštaluje.

Inštalácia pluginu

Plugin je zverejnený dvakrát, pre každého agenta zvlášť. Skripty aj číslo verzie sú rovnaké. Vyber ten, ktorý používaš.

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

Potom raz v termináli:

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

Pre bezplatnú verziu už nič ďalšie nenastavuješ. Netreba kľúč, registráciu ani kartu. Ak nechceš pracovať v termináli, rovnakú konverziu spustíš aj v desktopovej appke html2wp (návod so snímkami obrazovky).

Ako dostať projekt z Lovable na disk

Adresa živého webu nie je podporovaný vstup, a to zámerne. Kópia zverejnenej stránky zachová len vykreslený výsledok. Stratí to, čo vie zdrojový kód: ktoré cesty existujú, aké sú komponenty a čo vyjde zo zostavenia.

Vstupom je preto priečinok. Lovable synchronizuje projekt do repozitára na GitHube. Prepoj ho, naklonuj a projekt máš u seba. Nech rozhranie Lovable vyzerá tento mesiac akokoľvek, ide ti o repozitár: o tie isté súbory, z ktorých Lovable web zostavuje.

git clone https://github.com/<ty>/<tvoj-lovable-projekt>.git
cd <tvoj-lovable-projekt>

Príkaz npm install ani zostavenie vopred spúšťať nemusíš. Konverzia to urobí sama.

Povedz „convert this project“

V tomto priečinku, s otvoreným agentom, napíš:

/html2wp:html2wp

convert this project

Codex nemá príkaz s lomkou. Napíš mu convert this project into a verified WordPress block theme a skill si nájde sám. V oboch prípadoch je táto veta celé zadanie. Nepíšeš konfiguračný súbor a nevyberáš príkaz na zostavenie.

Flash trvá zhruba pol hodiny, Full zhruba hodinu, podľa počtu stránok a výkonu tvojho počítača. Väčšinou beží bez dozoru a po každom kroku hlási, kde je, takže ticho nečakaj.

Čo sa pri prevode Lovable do WordPressu stane s Reactom

Toto je krok, ktorý projekt z Lovable pridáva.

Staršia aplikácia z Lovable (React a Vite) má jeden index.html. Jeho telo tvorí prázdny prvok na pripojenie aplikácie a značka skriptu. Nie je v ňom čo previesť. Projekt sa preto najprv zostaví a skutočný prehliadač prejde každú cestu, zatiaľ čo záznamník sleduje stránku. Výsledkom je ploché HTML pre každú cestu, a presne to zvyšok procesu potrebuje. Novší projekt na TanStack Start vykresľuje stránky už na serveri. Konvertor ho aj tak zostaví a prejde každú cestu rovnako.

Čo záznamník zachytí

• Stav, ktorý vznikne až po JavaScripte. Otvorené akordeóny, obsah rozbaľovacích menu a triedy, ktoré mení skript. Uložia sa ako údaje na prvkoch a prehrá ich malý všeobecný runtime. Nikto ich nepíše ručne spamäti.
• Prahy pri scrollovaní, na pixel presne. Hlavička, ktorá sa mení pri scrollY > 40, má číslo, ktoré si niekto vymyslel. Záznamník ho nájde a dohľadá presnú hodnotu. Zaokrúhlený odhad by hlavičku menil v nesprávnej chvíli navždy.
• Vzťahy „otvorený môže byť len jeden“. Otvoríš A, potom B. Zavrelo sa A? Záznam každého prvku zvlášť to neodhalí, preto sa to skúša osobitne.
• Animácie pri vstupe do obrazu sa nestratia. Záznamník ich zachytí a téma ich prehrá ako originál. Obsah je viditeľný aj bez JavaScriptu, prvok sa skryje až vtedy, keď beží runtime, a pri prefers-reduced-motion sa animácia vynechá. Zhoda 1:1 sa meria v pokoji, keď animácie dobehnú.

Čo nepredstiera

• Nezaznamenané správanie ide na zoznam. Každá stránka má vlastný a ten si prečítaj.

Tento krok má vlastnú kontrolu, lebo žiadna neskoršia ho nevidí. Každá cesta sa odfotí naživo a porovná so statickým záznamom v šírke 1440, 820 a 390 pixelov. Ak sa líšia, krok neprejde. Všetky ďalšie kroky totiž merajú od záznamu po WordPress, takže chyba vzniknutá tu by im unikla.

Kontrola, ktorú nevynecháš

Keď skončia automatické kontroly, konverzia ešte nie je hotová. Každá stránka sa zloží do jedného obrázka vedľa originálu a ty si každý prečítaš zhora nadol.

V jednej konverzii chýbala celá sekcia nižšie na stránke a pixelové porovnanie ukázalo rozdiel len 0,4 %. Taká stránka kontrolou prejde, hoci sekcia chýba. Tri druhy chýb automatické kontroly zo svojej podstaty nevidia. Prvý je ovládací prvok, ktorý vyzerá dokonale a nič nerobí. Druhý je hodnota natvrdo prevzatá z jedinej stránky, z ktorej vznikla šablóna. Tretí je čokoľvek, čo sa ukáže až po scrollovaní, kliknutí alebo odoslaní formulára.

Kontroluj aj to, či sa dá obsah upravovať, nielen to, či sedí vzhľad. Stránka môže sedieť na pixel a majiteľ aj tak nemusí vedieť upraviť jej FAQ či mriežku funkcií. Overili sme si to naživo: akordeón s piatimi otázkami vyzeral rovnako, no žiadny editor ho neponúkal. Kontrola zameraná len na vzhľad ho pustila ďalej. Pri každej stránke sa preto spýtaj, či sa každá opakujúca skupina a každý blok textu dá upraviť z wp-admin.

Inštalácia témy

Do priečinka projektu pribudne ZIP s témou a vedľa neho CONVERSION-REPORT.md. Nič viac. Pracovný priečinok so zostavením je mimo tvojho projektu, v priečinku cache, takže repozitár ostane čistý. Report je výnimka, lebo je písaný pre teba: čo sa previedlo, čo našla kontrola, každé varovanie vrátane prijateľných a čo ešte zostáva.

Vo WordPresse choď na Vzhľad → Témy → Pridať novú → Nahrať tému, vyber ZIP a aktivuj ho. Téma je samostatná. Stránky, blog, formuláre, menu, SEO aj presmerovania sú jej vlastný kód. Na beh nepotrebuje plugin a nikdy nekomunikuje so žiadnym naším serverom.

Úpravy webu po prevode z Lovable do WordPressu: tri cesty

Články blogu sú bežné WordPress články, takže ich píšeš v blokovom editore hneď. Text stránok ostáva v tvojom HTML a na jeho úpravy sú dve možnosti, ktoré stojí za to poznať. Jedna z nich je page builder.

Ak prevádzaš preto, aby dizajn prežil, page builder je presne to, čo ho zničí. Ručný prenos dizajnu do buildera je krok, po ktorom web prestane vyzerať ako dizajn, a práve kvôli tomu tento konvertor vznikol. Ak je dizajn len začiatok a klient o štvrť roka polovicu aj tak prestavia, Elementor mu pokojne daj.

Lite alebo Pro, ak si vyberieš Visual Edit

AI chat v Pro beží na tvojom vlastnom API kľúči. Tokeny ti nepredávame a cenu za ich použitie riešiš priamo so svojím poskytovateľom.

Lovable alebo WordPress? Nemusíš si vyberať

Otázka sa zvyčajne kladie ako jedno alebo druhé. Pri obsahovom webe to tak byť nemusí. V Lovable vznikne dizajn rýchlo, vo WordPresse web žije roky a upravuje ho niekto iný. Prevod si nechá to prvé a presunie to druhé. Téma beží na akomkoľvek WordPress hostingu, takže web už nemusí bývať tam, kde vznikol.

Presunie sa web: stránky, blog, formuláre, menu, SEO a presmerovania. Nepresunie sa aplikácia za ním: prihlasovanie, databáza a volania tvojho vlastného API. Ak je tvoj projekt v Lovable hlavne toto, nechaj ho v Lovable. Obchod je niečo medzi. S licenciou Pro sa jeho katalóg zmení na WooCommerce, ako pri webe Terra Studios.

Koľko stojí prevod Lovable do WordPressu a čo odmietne

Bezplatná verzia je otvorená každému, bez kľúča a registrácie: tri konverzie po piatich stránkach a päť opakovaných spustení spolu. Obe čísla sa rátajú na IP adresu, takže kancelária so spoločnou adresou má jeden limit pre všetkých. Je určená na vyskúšanie, osobné weby a nekomerčnú prácu.

Licencia Pro ruší limit stránok, konverzie aj opakované spustenia sú neobmedzené. Pridáva krok, ktorý z obchodu urobí WooCommerce. Ten v bezplatnej verzii nie je vôbec: bezplatnú konverziu webu s obchodom appka odmietne celú, nie napoly. Pro stojí 49 € mesačne alebo 490 € ročne, ceny sú na stránke s cenami. Počas bety je prvá platba o 30 % lacnejšia a kľúč príde e-mailom.

Dve odmietnutia sa oplatí poznať vopred. Projekt v Reacte, ktorého cesty existujú len pre jednotlivé záznamy (/product/:id bez dát na vykreslenie), je webová aplikácia, nie web na prevod. Odmietne sa otvorene, namiesto toho, aby vyšla jedna náhodná inštancia šablóny. A ide o betu: kontroly zachytia väčšinu odchýlok, nie všetky. Preto je kontrola stránku po stránke súčasťou procesu, nie voliteľné doladenie.

Celý postup krok za krokom je v slovenskej dokumentácii. Tri konverzie z Lovable, ktoré si otvoríš na oboch koncoch, sú v ukážke na začiatku článku.