html2wp / Blog / Lovable in WordPress
Lovable in WordPress: un progetto convertito in un tema vero
Convertire Lovable in WordPress è lo stesso lavoro che convertire HTML in WordPress, con un passaggio in più. Un progetto Lovable meno recente è un'app React, quindi il suo HTML non contiene niente da convertire: la pagina compare solo nel browser, quando parte il JavaScript. I progetti più nuovi (TanStack Start, da maggio 2026) generano le pagine sul server, e html2wp converte entrambi allo stesso modo. Questa guida ti porta da un progetto del genere a un tema WordPress che contiene il tuo codice, non una sua ricostruzione. Ogni passaggio viene da una conversione reale, e puoi aprire sia l'originale sia il risultato.
Un esempio di Lovable in WordPress, con originale e risultato online
Tutto quello che segue descrive una conversione che abbiamo fatto davvero. L'originale è un'app Lovable: bruce-banner.lovable.app, un portfolio fotografico. Il risultato è bruce.html2wp.dev e gira su WordPress. Puoi entrare nella sua bacheca da /wp-admin con nome utente demo e password demo.
La conversione ha prodotto cinque pagine e cinque articoli sul tema bruce-banner. Rientra nel piano gratuito, che converte fino a cinque pagine per conversione e non richiede chiave. Prima di andare avanti, apri i due siti uno accanto all'altro. Questo articolo parla della differenza tra loro, così puoi misurarla da solo.
Altre due conversioni da Lovable sono aperte allo stesso modo. Prima, spark-remix-kindred.lovable.app è diventato terra.html2wp.dev, un negozio di maglieria su WooCommerce. Poi bloom-echo-remix.lovable.app è diventato soria.html2wp.dev, il sito di un fotografo di matrimoni. Su tutti e tre l'accesso alla bacheca di WordPress è demo / demo.
Cosa significa esattamente “1:1” qui
Il codice che l'app Lovable costruisce nel browser è lo stesso codice che finisce nel tema. Nessuno ricostruisce le tue sezioni come widget di un page builder, quindi non ottieni mai un'approssimazione del design pagina per pagina. Tutti i passaggi qui sotto derivano da questo.
Cosa serve al tuo computer per convertire Lovable in WordPress
La build, il lavoro nel browser e tutti i controlli girano sul tuo computer. Al servizio che genera il tema arriva solo l'output compilato. Quindi non è un servizio web dove carichi uno ZIP, e ha dei requisiti che conviene conoscere subito:
- Node 20 o più recente per la build e gli script locali.
- Python 3 con i pacchetti Playwright e Pillow. Playwright guida un browser vero, ed è così che un'app React diventa HTML.
- Docker con il comando
docker compose. Avvia un WordPress temporaneo sul tuo computer, e il convertitore controlla lì il tema prima che tu lo veda. - php-cli, perché ogni file PHP passa un controllo di sintassi prima di entrare nello ZIP.
jq,curl,bashetar. Il WordPress di destinazione deve avere la versione 6.6 o successiva.
Il plugin controlla tutto questo nel primo passaggio e stampa due elenchi. Nel primo c'è quello che può installare da solo nelle tue cartelle. Nel secondo c'è quello che devi decidere tu: Docker, un Node più recente e l'avvio di Docker. Questo secondo gruppo non lo installa mai alle tue spalle.
Docker è la sorpresa più comune
Gli altri convertitori non ne hanno bisogno, perché saltano questo passaggio. Qui il convertitore installa il tema generato in un WordPress vero e lo testa lì. A questo servono il browser e il container. Se cerchi uno strumento da cinque minuti nel browser, non è questo.
Installa il plugin
Pubblichiamo il plugin due volte, una per ciascun agente. Gli script e il numero di versione sono uguali per Claude Code e Codex. Scegli quello che usi.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Poi, una sola volta, in un terminale:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Per il piano gratuito non c'è altro da configurare: niente chiave, niente registrazione, niente carta. Se preferisci non lavorare nel terminale, puoi fare la stessa conversione nell'app desktop html2wp (una guida con screenshot).
Come portare il tuo progetto Lovable sul disco
L'indirizzo di un sito online non è un input supportato, ed è una scelta voluta. Una copia di una pagina pubblicata conserva solo il risultato renderizzato. Perde quello che sa il codice sorgente: quali route esistono, quali sono i componenti e cosa produce la build.
Quindi l'input è una cartella. Lovable sincronizza il tuo progetto con un repository GitHub. Collegalo, clonalo e avrai il progetto in locale. Comunque appaia l'interfaccia di Lovable questo mese, quello che ti serve è il repository: gli stessi file da cui Lovable costruisce il sito.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Non devi lanciare prima npm install o una build. Lo fa la conversione da sola.
Scrivi “convert this project”
In quella cartella, con l'agente aperto, scrivi:
/html2wp:html2wp
convert this project
Codex non ha un comando slash. Digli invece convert this project into a verified WordPress block theme e troverà la skill da solo. Con Claude Code o Codex, quella frase è tutta l'istruzione. Non scrivi file di configurazione e non scegli un comando di build.
Flash richiede circa 30 minuti e Full circa un'ora, a seconda del numero di pagine e della velocità del tuo computer. Lavora quasi sempre da solo e ti dice a che punto è dopo ogni passaggio, quindi non aspettarti silenzio.
Cosa succede al React quando converti Lovable in WordPress
Questo è il passaggio che un progetto Lovable aggiunge.
Un'app Lovable meno recente (React e Vite) ha un solo index.html. Il suo body è un elemento vuoto in cui si monta l'app React, più un tag script, quindi non c'è niente da convertire. Prima il convertitore compila il progetto. Poi un browser vero percorre ogni route mentre un registratore osserva. Il risultato è HTML statico per ogni route, esattamente quello che serve al resto del processo. Un progetto più nuovo su TanStack Start genera già le pagine sul server; il convertitore lo compila comunque e percorre ogni route allo stesso modo.
Cosa cattura il registratore
- Lo stato che esiste solo dopo l'esecuzione del JavaScript. Accordion aperti, contenuto dei menu a tendina, classi che cambia uno script. Il registratore li salva come dati sugli elementi, e un piccolo runtime generico li riproduce. Nessuno li riscrive a mano a memoria.
- Le soglie di scroll, al pixel. Un header che cambia a
scrollY > 40usa un numero che qualcuno si è inventato. Il registratore lo trova e calcola esattamente dove si trova. Una stima arrotondata cambierebbe l'header nel momento sbagliato, per sempre. - Le relazioni “può restare aperto solo uno”. Apri A, poi B. A si è chiuso? Registrare ogni elemento da solo non basta a saperlo, quindi il registratore lo verifica a parte.
- Le animazioni allo scroll sopravvivono. Il registratore le cattura, e il tema le riproduce esattamente come l'originale. Il contenuto resta visibile senza JavaScript, un elemento si nasconde solo mentre gira il runtime, e con
prefers-reduced-motionil tema salta l'animazione. La corrispondenza 1:1 la misuriamo a riposo, quando le animazioni sono finite.
Cosa non finge
- Ciò che non è riuscito a registrare finisce in un elenco. Ogni pagina ha il suo. Leggilo.
Questo passaggio ha un controllo tutto suo, perché nessun controllo successivo può vederlo. Il convertitore fa uno screenshot di ogni route dal vivo e lo confronta con la sua cattura statica a 1440, 820 e 390 pixel di larghezza. Se sono diversi, il passaggio fallisce. Ogni passaggio successivo misura dalla cattura a WordPress, quindi un difetto nato qui sfuggirebbe a tutti.
La revisione che non puoi saltare
Quando i controlli automatici finiscono, la conversione non è ancora conclusa. Il convertitore mette ogni pagina in un'unica immagine accanto al suo originale, e tu le leggi tutte dall'alto in basso.
In una conversione mancava un'intera sezione più in basso nella pagina, e il confronto dei pixel mostrava una differenza di appena lo 0,4%. Quella pagina passa il controllo senza la sezione. Per loro natura, i controlli automatici non vedono tre tipi di difetto. Primo: un elemento interattivo che sembra perfetto ma non fa niente. Secondo: un valore fisso preso dall'unica pagina da cui è nato un template. Terzo: tutto ciò che compare solo dopo uno scroll, un clic o l'invio di un modulo.
Oltre all'aspetto, controlla anche che i contenuti si possano modificare. Una pagina può coincidere al pixel e il proprietario può comunque non riuscire a modificarne le FAQ o la griglia delle funzioni. L'abbiamo visto dal vivo: un accordion con cinque domande sembrava identico, ma nessun editor lo proponeva. Una revisione che guardava solo l'aspetto l'ha lasciato passare. Quindi per ogni pagina chiediti se da wp-admin puoi modificare ogni gruppo ripetuto e ogni blocco di testo.
Installa il tema
Nella cartella del progetto arrivano uno ZIP del tema e, accanto, CONVERSION-REPORT.md. Nient'altro. La cartella di lavoro con la build sta fuori dal progetto, in una cartella di cache, così il tuo repository resta pulito. Il report è l'eccezione, perché chi lo legge sei tu. Elenca cosa ha coperto la conversione, cosa ha trovato la revisione, ogni avviso (anche quelli accettabili) e cosa resta aperto.
In WordPress vai su Aspetto → Temi → Aggiungi nuovo → Carica tema, scegli lo ZIP e attivalo. Il tema è autonomo. Pagine, blog, moduli, menu, SEO e redirect sono tutti codice suo. Non gli serve nessun plugin per funzionare e non comunica mai con un nostro server.
Modificare il sito dopo aver convertito Lovable in WordPress: tre strade
Gli articoli del blog diventano normali articoli WordPress, quindi li scrivi subito nell'editor a blocchi. Il testo delle pagine resta nel tuo HTML, e per quello ci sono due opzioni da conoscere. Una è un page builder.
| Strada | Cosa ottieni | Cosa ti costa |
|---|---|---|
| Solo il tema | Il tuo codice, invariato. Nessun plugin, nessuna dipendenza, niente da rinnovare. Gli articoli passano dall'editor a blocchi. | Senza plugin, il testo delle pagine si cambia nell'HTML. Se il cliente vuole modificarlo da solo, ci pensa Visual Edit (Lite è gratuito). |
| Visual Edit, il nostro plugin | Clicchi un titolo direttamente nella pagina, scrivi sopra e salvi. Modifichi testi, immagini, link, moduli e menu dove si trovano, e il codice resta com'era. Lite è gratuito e non richiede chiave. | È un plugin in più installato su WordPress. Lite tiene 10 passaggi di cronologia e non ha la chat AI. Pro costa 59 € all'anno. |
| Elementor o un altro page builder |
Chiunque conosca Elementor può riorganizzare la pagina da solo, e sono in molti a conoscerlo. Per un cliente che cambierà il layout da sé, questa familiarità ha valore. | Il codice diventa widget del builder, quindi non è più tuo. Da lì in poi il sito non si visualizza senza Elementor, e ne erediti la struttura, il CSS e gli aggiornamenti. |
Se converti perché il design sopravviva, un page builder è proprio ciò che lo distrugge. Spostare a mano un design in un builder è il passaggio dopo il quale il sito smette di somigliare al design, ed è per questo che esiste questo convertitore. Ma se il design è solo un punto di partenza e il cliente ne rifarà comunque metà il prossimo trimestre, dagli pure Elementor.
Lite o Pro, se scegli Visual Edit
| Lite (gratuito) | Pro | |
|---|---|---|
| Modifica dei contenuti con un clic | ✓ | ✓ |
| Moduli, menu, campi SEO | ✓ | ✓ |
| Modifiche tramite chat AI | – | ✓, con la tua chiave API |
| Esportazione del tema | – | ✓ |
| Protezione dei moduli con Turnstile | – | ✓ |
| Modifica delle immagini con AI e animazioni dalle immagini | – | ✓ |
| Cronologia delle modifiche | 10 passaggi | 300 passaggi |
La chat AI di Pro funziona con la tua chiave API. Non ti vendiamo token, e il costo del loro uso lo regoli direttamente con il tuo provider.
Lovable o WordPress? Non devi scegliere
Di solito la si presenta come una scelta tra i due. Per un sito di contenuti non serve scegliere. Con Lovable fai un design in fretta. In WordPress un sito vive per anni e qualcun altro lo modifica. La conversione tiene la prima cosa e sposta la seconda. Il tema gira su qualsiasi hosting WordPress, quindi il sito non deve più vivere dove l'hai costruito.
Si sposta il sito web: pagine, blog, moduli, menu, SEO e redirect. Non si sposta l'applicazione che c'è dietro: login, database e chiamate alla tua API. Se il tuo progetto Lovable è soprattutto questo, tienilo in Lovable. Un negozio sta a metà strada. Con una licenza Pro il suo catalogo diventa WooCommerce, come è successo per Terra Studios.
Lovable in WordPress: quanto costa la conversione e cosa rifiuta
Il piano gratuito è aperto a tutti, senza chiave e senza registrazione: tre conversioni da cinque pagine ciascuna e cinque riesecuzioni in totale. Entrambi i numeri valgono per indirizzo IP, quindi un ufficio che condivide un indirizzo ha un'unica quota per tutti. Il piano gratuito serve a provare lo strumento, per siti personali e lavori non commerciali.
Una licenza Pro toglie il limite di pagine e rende illimitate conversioni e riesecuzioni. Aggiunge anche il passaggio che trasforma un negozio in WooCommerce. Nel piano gratuito quel passaggio non c'è proprio: l'app rifiuta subito la conversione gratuita di un sito con un negozio, invece di farne metà. Pro costa 49 € al mese o 490 € all'anno, e i prezzi sono nella pagina dei prezzi. Durante la beta il primo pagamento costa il 30% in meno e la chiave arriva via email.
Due rifiuti conviene conoscerli in anticipo. Un progetto React le cui route esistono solo per singolo record (/product/:id senza dati da mostrare) è un'app web, non un sito da convertire. Il convertitore lo rifiuta apertamente invece di consegnare un'istanza a caso del template. E questa è una beta: i controlli trovano la maggior parte delle differenze, non tutte. Per questo la revisione pagina per pagina fa parte del processo e non è una rifinitura facoltativa.
Una guida passo passo all'intero processo è nella documentazione dell'app html2wp. Le tre conversioni da Lovable con originale e risultato online sono nell'esempio all'inizio di questo articolo.