Från Lovable till WordPress: ett projekt konverterat till ett riktigt tema

Ett exempel på konvertering från Lovable till WordPress, öppet i båda ändar

Allt nedan beskriver en konvertering som vi faktiskt har kört. Originalet är en Lovable-app: bruce-banner.lovable.app, en fotoportfolio. Resultatet är bruce.html2wp.dev, som körs på WordPress. Du kommer in i dess admin via /wp-admin med användarnamnet demo och lösenordet demo.

Konverteringen gav fem sidor och fem inlägg i temat bruce-banner. Det ryms i gratisnivån, som konverterar upp till fem sidor per konvertering och inte kräver någon nyckel. Öppna båda sajterna sida vid sida innan du läser vidare. Den här artikeln handlar om skillnaden mellan dem, så du kan mäta den själv.

Ytterligare två Lovable-konverteringar är öppna på samma sätt. Först blev spark-remix-kindred.lovable.app till terra.html2wp.dev, en butik för stickade plagg på WooCommerce. Sedan blev bloom-echo-remix.lovable.app till soria.html2wp.dev, en bröllopsfotografs sajt. På alla tre är inloggningen till WordPress admin demo / demo.

Vad din dator behöver för att konvertera Lovable till WordPress

Bygget, arbetet i webbläsaren och alla kontroller körs på din dator. Bara det byggda resultatet skickas till tjänsten som genererar temat. Det här är alltså inte en webbtjänst där du laddar upp en ZIP-fil, och den har krav som du bör känna till från början:

• Node 20 eller nyare för bygget och de lokala skripten.
• Python 3 med paketen Playwright och Pillow. Playwright styr en riktig webbläsare, och det är så en React-app blir HTML.
• Docker med kommandot docker compose. Det startar ett tillfälligt WordPress på din dator, och konverteraren kontrollerar temat där innan du ser det.
• php-cli, eftersom varje PHP-fil går igenom en syntaxkontroll innan den hamnar i ZIP-filen.
• jq, curl, bash och tar. WordPress som temat ska till måste vara version 6.6 eller nyare.

Pluginet kontrollerar allt detta i första steget och skriver ut två listor. Den första visar vad det kan installera själv i dina egna mappar. Den andra visar vad du måste bestämma: Docker, en nyare Node och att starta Docker. Ingenting i den andra gruppen installeras bakom din rygg.

Installera pluginet

Vi publicerar pluginet två gånger, en gång för varje agent. Skripten och versionsnumret är desamma för Claude Code och Codex. Välj det du använder.

Claude Code

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

Sedan, en gång, i en terminal:

python3 -m playwright install chromium

Codex

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

För gratisnivån finns inget mer att ställa in: ingen nyckel, ingen registrering, inget kort. Om du hellre inte arbetar i en terminal kan du köra samma konvertering i skrivbordsappen html2wp (en guide med skärmbilder).

Så får du ditt Lovable-projekt till din disk

Adressen till en publicerad sajt är inte ett indata som stöds, och det är avsiktligt. En kopia av en publicerad sida behåller bara det renderade resultatet. Den förlorar det som källkoden vet: vilka routes som finns, vilka komponenterna är och vad bygget producerar.

Indata är därför en mapp. Lovable synkar ditt projekt till ett GitHub-repositorium. Koppla det, klona det, så har du projektet lokalt. Hur Lovables gränssnitt än ser ut den här månaden är det repositoriet du vill ha: samma filer som Lovable bygger sajten av.

git clone https://github.com/<you>/<your-lovable-project>.git
cd <your-lovable-project>

Du behöver inte köra npm install eller ett bygge först. Det gör konverteringen själv.

Skriv ”convert this project”

Skriv det här i mappen, med din agent öppen:

/html2wp:html2wp

convert this project

Codex har inget snedstreckskommando. Säg i stället convert this project into a verified WordPress block theme, så hittar den skillen själv. Med Claude Code eller Codex är den meningen hela instruktionen. Du skriver ingen konfigurationsfil och väljer inget byggkommando.

Flash tar ungefär 30 minuter och Full ungefär en timme, beroende på antalet sidor och hur snabb din dator är. Konverteringen körs mestadels utan tillsyn och rapporterar var den är efter varje steg, så räkna inte med tystnad.

Vad som händer med React när Lovable blir WordPress

Det här är steget som ett Lovable-projekt lägger till.

En äldre Lovable-app (React och Vite) har en enda index.html. Dess body är ett tomt element som React-appen monteras i, plus en script-tagg, så det finns inget att konvertera. Först bygger konverteraren projektet. Sedan går en riktig webbläsare igenom varje route medan en inspelare tittar på. Resultatet är platt HTML per route, precis vad resten av processen behöver. Ett nyare projekt på TanStack Start renderar redan sina sidor på servern. Konverteraren bygger det ändå och går igenom varje route på samma sätt.

Vad inspelaren fångar

• Tillstånd som bara finns efter att JavaScript har körts. Öppna dragspelsmenyer, innehåll i rullgardinsmenyer, klasser som ett skript ändrar. Inspelaren sparar dem som data på elementen, och en liten generisk runtime spelar upp dem igen. Ingen skriver dem för hand ur minnet.
• Scrolltrösklar, på pixeln. En header som ändras vid scrollY > 40 använder ett tal som någon hittade på. Inspelaren hittar det och räknar ut exakt var det ligger. En avrundad gissning skulle ändra headern vid fel tillfälle, för alltid.
• Relationer av typen ”bara en kan vara öppen”. Du öppnar A, sedan B. Stängdes A? Att spela in varje element för sig kan inte avgöra det, så inspelaren testar det separat.
• Animationer vid scrollning finns kvar. Inspelaren fångar dem, och temat spelar upp dem precis som originalet. Innehållet förblir synligt utan JavaScript, ett element döljs bara medan runtimen körs, och med prefers-reduced-motion hoppar temat över animationen. Vi mäter 1:1-matchningen i vila, när animationerna är klara.

Vad den inte fejkar

• Beteende som inte gick att spela in hamnar på en lista. Varje sida har sin egen. Läs den.

Det här steget har en egen kontroll, eftersom ingen senare kontroll kan se det. Konverteraren tar en skärmbild av varje route live och jämför den med sin statiska kopia i bredderna 1440, 820 och 390 pixlar. Om de skiljer sig fallerar steget. Varje senare steg mäter från kopian till WordPress, så ett fel som uppstår här skulle slinka förbi dem alla.

Granskningen du inte kan hoppa över

När de automatiska kontrollerna är klara är konverteringen inte över än. Konverteraren lägger varje sida i en bild bredvid sitt original, och du läser var och en uppifrån och ner.

I en konvertering saknades en hel sektion längre ner på sidan, och pixeljämförelsen visade en skillnad på bara 0,4 %. Den sidan klarar kontrollen utan sektionen. Automatiska kontroller kan till sin natur inte se tre sorters fel. Det första är en kontroll som ser perfekt ut men inte gör något. Ett annat fel är ett värde som är hårdkodat från den enda sida som en mall kom från. Det tredje är allt som visar sig först när du scrollar, klickar eller skickar ett formulär.

Kontrollera också att du kan redigera innehållet, utöver att det ser rätt ut. En sida kan matcha på pixeln, och ändå kan ägaren sakna möjlighet att redigera dess FAQ eller dess rutnät med funktioner. Vi såg det live: ett dragspel med fem frågor såg identiskt ut, men ingen redigerare erbjöd det. En granskning som bara tittade på utseendet släppte igenom det. Fråga därför för varje sida om du kan redigera varje upprepad grupp och varje textblock från wp-admin.

Installera temat

Din projektmapp får en tema-ZIP och bredvid den CONVERSION-REPORT.md. Inget annat. Arbetsmappen med bygget ligger utanför ditt projekt, i en cachemapp, så att ditt repositorium förblir rent. Rapporten är undantaget, eftersom det är du som läser den. Den listar vad konverteringen omfattade, vad granskningen hittade, varje varning (även de godtagbara) och vad som fortfarande är öppet.

I WordPress går du till Utseende → Teman → Lägg till nytt → Ladda upp tema, väljer ZIP-filen och aktiverar den. Temat klarar sig på egen hand. Sidor, blogg, formulär, menyer, SEO och omdirigeringar är dess egen kod. Det behöver inget plugin för att köras och pratar aldrig med någon av våra servrar.

Redigera sajten efter konverteringen från Lovable till WordPress: tre vägar

Blogginlägg blir vanliga WordPress-inlägg, som du skriver i blockredigeraren direkt. Texten på sidorna ligger kvar i din HTML. Vill du redigera den utan kod finns två alternativ som är värda att känna till. Ett av dem är en sidbyggare.

Om du konverterar för att designen ska överleva är en sidbyggare precis det som förstör den. Att flytta en design till en byggare för hand är steget efter vilket sajten slutar likna designen, och det är därför den här konverteraren finns. Men om designen bara är en utgångspunkt och kunden ändå bygger om hälften av den nästa kvartal, ge dem Elementor.

Lite eller Pro, om du väljer Visual Edit

AI-chatten i Pro körs på din egen API-nyckel. Vi säljer inga tokens till dig, och kostnaden för att använda dem gör du upp direkt med din leverantör.

Lovable eller WordPress? Du behöver inte välja

Det brukar framställas som antingen eller. För en innehållssajt behöver det inte vara så. I Lovable gör du en design snabbt. I WordPress lever en sajt i åratal och någon annan redigerar den. Konverteringen behåller det första och flyttar det andra. Temat körs på vilket WordPress-webbhotell som helst, så sajten behöver inte längre bo där du byggde den.

Det som flyttas är webbplatsen: sidor, blogg, formulär, menyer, SEO och omdirigeringar. Det som inte flyttas är applikationen bakom: inloggning, databasen och anrop till ditt eget API. Om ditt Lovable-projekt mest består av det, behåll det i Lovable. En butik hamnar mittemellan. Med en Pro-licens blir dess katalog WooCommerce, som för Terra Studios.

Vad konverteringen från Lovable till WordPress kostar och vad den nekar

Gratisnivån är öppen för alla, utan nyckel och utan registrering: tre konverteringar med fem sidor vardera och fem omkörningar totalt. Båda siffrorna räknas per IP-adress, så ett kontor som delar en adress får en gemensam kvot för alla. Gratisnivån är till för att testa verktyget, för privata sajter och för icke-kommersiellt arbete.

En Pro-licens tar bort sidgränsen och gör konverteringar och omkörningar obegränsade. Den lägger också till steget som gör om en butik till WooCommerce. Det steget finns inte alls i gratisnivån: appen nekar en gratis konvertering av en sajt med butik helt och hållet, i stället för att göra hälften av den. Pro kostar 49 € i månaden eller 490 € om året, och priserna finns på prissidan. Under betan är första betalningen 30 % billigare, och nyckeln kommer via e-post.

Två nekanden är bra att känna till i förväg. Ett React-projekt vars routes bara finns per post (/product/:id utan data att rendera) är en webbapp, inte en sajt att konvertera. Konverteraren nekar det öppet i stället för att leverera en slumpmässig instans av mallen. Och det här är en beta: kontrollerna fångar de flesta skillnader, inte alla. Därför är granskningen sida för sida en del av processen och inte en valfri finputsning.

En steg-för-steg-guide till hela processen finns i dokumentationen för html2wp-appen. De tre Lovable-konverteringarna som du kan öppna i båda ändar finns i exemplet i början av artikeln.