html2wp / Blog / Lovable în WordPress
Din Lovable în WordPress: un proiect convertit într-o temă reală
Mutarea unui proiect din Lovable în WordPress e aceeași muncă precum conversia din HTML în WordPress, cu un pas în plus. Un proiect Lovable mai vechi e o aplicație React, deci HTML-ul lui nu conține nimic de convertit: pagina apare abia în browser, după ce rulează JavaScript-ul. Proiectele mai noi (TanStack Start, din mai 2026) își randează paginile pe server, iar html2wp le convertește pe amândouă la fel. Ghidul acesta te duce de la un astfel de proiect la o temă WordPress care poartă codul tău, nu o reconstrucție a lui. Fiecare pas vine dintr-o conversie reală, iar tu poți deschide ambele capete.
Un exemplu din Lovable în WordPress, deschis la ambele capete
Tot ce urmează descrie o conversie pe care am rulat-o cu adevărat. Originalul e o aplicație Lovable: bruce-banner.lovable.app, un portofoliu de fotografie. Rezultatul e bruce.html2wp.dev, care rulează pe WordPress. Poți intra în panoul lui de administrare la /wp-admin cu utilizatorul demo și parola demo.
Conversia a produs cinci pagini și cinci articole pe tema bruce-banner. Asta încape în planul gratuit, care convertește până la cinci pagini per conversie și nu are nevoie de cheie. Deschide ambele site-uri unul lângă altul înainte să citești mai departe. Articolul e despre diferența dintre ele, ca s-o poți măsura singur.
Încă două conversii Lovable sunt deschise la fel. Întâi, spark-remix-kindred.lovable.app a devenit terra.html2wp.dev, un magazin de tricotaje pe WooCommerce. Apoi bloom-echo-remix.lovable.app a devenit soria.html2wp.dev, site-ul unui fotograf de nunți. Pe toate trei, autentificarea în administrarea WordPress e demo / demo.
Ce înseamnă exact „1:1” aici
Codul pe care aplicația Lovable îl construiește în browser e același cod care intră în temă. Nimeni nu îți reconstruiește secțiunile ca widgeturi de page builder, deci nu primești niciodată o aproximare a designului, pagină cu pagină. Fiecare pas de mai jos decurge din asta.
De ce are nevoie calculatorul ca să convertească Lovable în WordPress
Build-ul, munca în browser și toate verificările rulează pe calculatorul tău. Doar rezultatul compilat ajunge la serviciul care generează tema. Nu e deci un serviciu web în care încarci un ZIP și are cerințe pe care e bine să le știi de la început:
- Node 20 sau mai nou pentru build și scripturile locale.
- Python 3 cu pachetele Playwright și Pillow. Playwright conduce un browser real, iar așa devine o aplicație React HTML.
- Docker cu comanda
docker compose. Pornește un WordPress temporar pe calculatorul tău, iar convertorul verifică tema acolo înainte să o vezi. - php-cli, pentru că fiecare fișier PHP trece printr-o verificare de sintaxă înainte să intre în ZIP.
jq,curl,bashșitar. WordPress-ul țintă trebuie să fie versiunea 6.6 sau mai nouă.
Pluginul verifică toate acestea la primul pas și afișează două liste. Prima arată ce poate instala singur în propriile tale foldere. A doua arată ce trebuie să decizi tu: Docker, un Node mai nou și pornirea Docker. Nu instalează niciodată al doilea grup pe la spatele tău.
Docker îi surprinde cel mai mult pe oameni
Alte convertoare nu au nevoie de el, pentru că sar peste acest pas. Aici convertorul instalează tema generată într-un WordPress real și o testează acolo. Pentru asta sunt browserul și containerul. Dacă vrei o unealtă de cinci minute în browser, nu e aceasta.
Instalarea pluginului
Publicăm pluginul de două ori, o dată pentru fiecare agent. Scripturile și numărul versiunii sunt aceleași pentru Claude Code și Codex. Alege-l pe cel pe care îl folosești.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Apoi, o singură dată, într-un terminal:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Pentru planul gratuit nu mai e nimic de configurat: fără cheie, fără înregistrare, fără card. Dacă preferi să nu lucrezi în terminal, poți rula aceeași conversie în aplicația desktop html2wp (un ghid cu capturi de ecran).
Cum aduci proiectul Lovable pe disc
Adresa unui site live nu e o intrare acceptată, și asta intenționat. O copie a unei pagini publicate păstrează doar rezultatul randat. Pierde ce știe codul sursă: ce rute există, care sunt componentele și ce produce build-ul.
Așa că intrarea e un folder. Lovable sincronizează proiectul într-un depozit GitHub. Conectează-l, clonează-l și ai proiectul local. Oricum ar arăta interfața Lovable luna aceasta, depozitul e ce vrei: aceleași fișiere din care Lovable construiește site-ul.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Nu trebuie să rulezi întâi npm install sau un build. Conversia face asta singură.
Spune „convert this project”
În acel folder, cu agentul deschis, scrie:
/html2wp:html2wp
convert this project
Codex nu are comandă cu slash. Spune-i în schimb convert this project into a verified WordPress block theme, iar el găsește singur skill-ul. Cu Claude Code sau Codex, propoziția aceasta e toată instrucțiunea. Nu scrii niciun fișier de configurare și nu alegi o comandă de build.
Flash durează cam 30 de minute, iar Full cam o oră, în funcție de numărul de pagini și de cât de rapid e calculatorul tău. Rulează în mare parte fără supraveghere și raportează unde a ajuns după fiecare pas, deci nu te aștepta la liniște.
Ce se întâmplă cu React-ul când muți Lovable în WordPress
Acesta e pasul pe care îl adaugă un proiect Lovable.
O aplicație Lovable mai veche (React și Vite) are un singur index.html. Body-ul lui e un element gol în care se montează aplicația React, plus un tag de script, deci nu e nimic de convertit. Întâi convertorul compilează proiectul. Apoi un browser real parcurge fiecare rută, în timp ce un recorder urmărește. Rezultatul e HTML static pentru fiecare rută, exact ce are nevoie restul procesului. Un proiect mai nou pe TanStack Start își randează deja paginile pe server; convertorul tot îl compilează și parcurge fiecare rută la fel.
Ce capturează recorderul
- Starea care există doar după rularea JavaScript-ului. Acordeoane deschise, conținutul meniurilor derulante, clase pe care le schimbă un script. Recorderul le stochează ca date pe elemente, iar un mic runtime generic le redă. Nimeni nu le scrie manual din memorie.
- Pragurile de derulare, la pixel. Un header care se schimbă la
scrollY > 40folosește un număr inventat de cineva. Recorderul îl găsește și stabilește exact unde e. O estimare rotunjită ar schimba headerul în momentul greșit, pentru totdeauna. - Relațiile de tip „doar unul poate fi deschis”. Deschizi A, apoi B. S-a închis A? Înregistrarea fiecărui element separat nu poate spune asta, așa că recorderul o testează aparte.
- Animațiile la derulare supraviețuiesc. Recorderul le capturează, iar tema le redă exact ca originalul. Conținutul rămâne vizibil fără JavaScript, un element se ascunde doar cât rulează runtime-ul, iar cu
prefers-reduced-motiontema sare peste animație. Potrivirea 1:1 o măsurăm în repaus, după ce animațiile se termină.
Ce nu falsifică
- Comportamentul pe care nu l-a putut înregistra ajunge pe o listă. Fiecare pagină are lista ei. Citește-o.
Pasul acesta are propria verificare, pentru că nicio verificare ulterioară nu îl poate vedea. Convertorul face captură live fiecărei rute și o compară cu captura statică la lățimi de 1440, 820 și 390 de pixeli. Dacă diferă, pasul pică. Fiecare pas ulterior măsoară de la captură la WordPress, deci un defect făcut aici ar trece de toate.
Revizuirea pe care nu o poți sări
Când verificările automate se termină, conversia nu s-a încheiat încă. Convertorul pune fiecare pagină într-o imagine lângă originalul ei, iar tu le citești pe toate de sus până jos.
Într-o conversie lipsea o secțiune întreagă mai jos pe pagină, iar comparația pe pixeli arăta o diferență de doar 0,4%. Pagina aceea trece verificarea fără secțiune. Prin natura lor, verificările automate nu văd trei tipuri de defecte. Primul e un control care arată perfect, dar nu face nimic. Al doilea e o valoare scrisă direct în cod, preluată din singura pagină din care provine un template. Al treilea e orice apare doar după ce derulezi, dai clic sau trimiți un formular.
Verifică și dacă poți edita conținutul, nu doar dacă arată bine. O pagină poate corespunde la pixel, dar proprietarul tot poate să nu îi poată edita FAQ-ul sau grila de funcții. Am văzut asta live: un acordeon cu cinci întrebări arăta identic, dar niciun editor nu îl oferea. O revizuire care se uita doar la aspect l-a lăsat să treacă. Așa că pentru fiecare pagină întreabă-te dacă poți edita din wp-admin fiecare grup care se repetă și fiecare bloc de text.
Instalarea temei
Folderul proiectului tău primește un ZIP cu tema și, lângă el, CONVERSION-REPORT.md. Nimic altceva. Folderul de lucru cu build-ul stă în afara proiectului, într-un folder de cache, deci depozitul tău rămâne curat. Raportul e excepția, pentru că cititorul lui ești tu. El listează ce a acoperit conversia, ce a găsit revizuirea, fiecare avertisment (inclusiv cele acceptabile) și ce mai e deschis.
În WordPress mergi la Aspect → Teme → Adaugă temă nouă → Încarcă tema, alegi ZIP-ul și îl activezi. Tema e de sine stătătoare. Paginile, blogul, formularele, meniurile, SEO și redirecționările sunt toate propriul ei cod. Nu are nevoie de niciun plugin ca să ruleze și nu vorbește niciodată cu vreun server de-al nostru.
Editarea site-ului după conversia din Lovable în WordPress: trei drumuri
Articolele de blog devin articole WordPress obișnuite, deci le scrii imediat în editorul de blocuri. Textul paginilor rămâne în HTML-ul tău, iar pentru el sunt două opțiuni bune de știut. Una dintre ele e un page builder.
| Drumul | Ce primești | Ce te costă |
|---|---|---|
| Doar tema | Codul tău, neschimbat. Fără plugin, fără dependență, nimic de reînnoit. Articolele trec prin editorul de blocuri. | Fără plugin, textul paginilor se schimbă în HTML. Dacă clientul vrea să-l editeze singur, o face cu Visual Edit (Lite e gratuit). |
| Visual Edit, pluginul nostru | Dai clic pe un titlu direct pe pagină, scrii peste el și salvezi. Editezi texte, imagini, linkuri, formulare și meniuri acolo unde sunt, iar codul rămâne cum era. Lite e gratuit și nu are nevoie de cheie. | E încă un plugin instalat în WordPress. Lite păstrează 10 pași de istoric și nu are chat AI. Pro costă 59 € pe an. |
| Elementor sau alt page builder |
Oricine știe Elementor poate rearanja singur pagina, iar mulți oameni îl știu. Pentru un client care va schimba singur layoutul, această familiaritate are valoare. | Codul e reconstruit ca widgeturi ale builderului, deci nu mai e al tău. După aceea, site-ul nu se mai poate afișa fără Elementor, iar tu moștenești structura, CSS-ul și actualizările lui. |
Dacă faci conversia ca designul să supraviețuiască, un page builder e exact ce îl distruge. Mutarea manuală a unui design într-un builder e pasul după care site-ul nu mai arată ca designul, iar de aceea există acest convertor. Dar dacă designul e doar un punct de plecare și clientul îi va reface oricum jumătate trimestrul viitor, dă-i liniștit Elementor.
Lite sau Pro, dacă alegi Visual Edit
| Lite (gratuit) | Pro | |
|---|---|---|
| Editarea conținutului prin clic | ✓ | ✓ |
| Formulare, meniuri, câmpuri SEO | ✓ | ✓ |
| Editare prin chat AI | – | ✓, cu propria cheie API |
| Exportul temei | – | ✓ |
| Protecția formularelor cu Turnstile | – | ✓ |
| Editarea imaginilor cu AI și animații din imagini | – | ✓ |
| Istoricul editărilor | 10 pași | 300 de pași |
Chatul AI din Pro rulează pe propria ta cheie API. Nu îți vindem tokeni, iar costul folosirii lor îl reglezi direct cu furnizorul tău.
Lovable sau WordPress? Nu trebuie să alegi
De obicei, oamenii pun problema ca pe o alegere între cele două. Pentru un site de conținut nu e nevoie. În Lovable faci repede un design. În WordPress un site trăiește ani de zile și îl editează altcineva. Conversia îl păstrează pe primul și îl mută pe al doilea. Tema rulează pe orice hosting WordPress, deci site-ul nu mai trebuie să stea acolo unde l-ai construit.
Se mută site-ul: paginile, blogul, formularele, meniurile, SEO și redirecționările. Nu se mută aplicația din spatele lui: autentificarea, baza de date și apelurile către propriul tău API. Dacă proiectul tău Lovable e mai ales asta, păstrează-l în Lovable. Un magazin stă la mijloc. Cu o licență Pro, catalogul lui devine WooCommerce, cum s-a întâmplat la Terra Studios.
Cât costă conversia din Lovable în WordPress și ce refuză
Planul gratuit e deschis tuturor, fără cheie și fără înregistrare: trei conversii de câte cinci pagini și cinci rerulări în total. Ambele cifre se numără per adresă IP, deci un birou care împarte o adresă primește o singură alocare pentru toți. Planul gratuit e pentru încercarea uneltei, site-uri personale și lucrări necomerciale.
O licență Pro elimină limita de pagini și face conversiile și rerulările nelimitate. Adaugă și pasul care transformă un magazin în WooCommerce. Acest pas nu există deloc în planul gratuit: aplicația refuză complet o conversie gratuită a unui site cu magazin, în loc să facă doar jumătate din ea. Pro costă 49 € pe lună sau 490 € pe an, iar prețurile sunt pe pagina de prețuri. Cât durează beta, prima plată e cu 30% mai ieftină, iar cheia vine pe email.
Două refuzuri merită știute dinainte. Un proiect React ale cărui rute există doar per înregistrare (/product/:id fără date de randat) e o aplicație web, nu un site de convertit. Convertorul îl refuză deschis în loc să livreze o instanță oarecare a template-ului. Și e o versiune beta: verificările prind majoritatea diferențelor, nu pe toate. De aceea revizuirea pagină cu pagină face parte din proces și nu e o finisare opțională.
Un ghid pas cu pas pentru tot procesul găsești în documentația aplicației html2wp. Cele trei conversii Lovable pe care le poți deschide la ambele capete sunt în exemplul de la începutul articolului.