Fra Lovable til WordPress: et projekt konverteret til et rigtigt tema

Et eksempel fra Lovable til WordPress, åbent i begge ender

Alt nedenfor beskriver en konvertering, vi faktisk har kørt. Originalen er en Lovable-app: bruce-banner.lovable.app, en fotoportefølje. Resultatet er bruce.html2wp.dev, der kører på WordPress. Du kan komme ind i dens admin på /wp-admin med brugernavnet demo og adgangskoden demo.

Konverteringen gav fem sider og fem indlæg på temaet bruce-banner. Det passer inden for gratisniveauet, som konverterer op til fem sider pr. konvertering og ikke kræver nogen nøgle. Åbn begge sites side om side, før du læser videre. Artiklen handler om forskellen mellem dem, så du kan måle den selv.

To andre Lovable-konverteringer er åbne på samme måde. Først blev spark-remix-kindred.lovable.app til terra.html2wp.dev, en webshop med strik på WooCommerce. Derefter blev bloom-echo-remix.lovable.app til soria.html2wp.dev, et site for en bryllupsfotograf. På alle tre er login til WordPress-admin demo / demo.

Hvad din computer skal have for at flytte Lovable til WordPress

Bygningen, arbejdet i browseren og alle kontroller kører på din computer. Kun det byggede resultat sendes til tjenesten, der genererer temaet. Det er altså ikke en webtjeneste, hvor du uploader en ZIP, og der er krav, du bør kende fra starten:

• Node 20 eller nyere til bygningen og de lokale scripts.
• Python 3 med pakkerne Playwright og Pillow. Playwright styrer en rigtig browser, og det er sådan, en React-app bliver til HTML.
• Docker med kommandoen docker compose. Den starter et midlertidigt WordPress på din computer, og der tjekker konverteren temaet, før du ser det.
• php-cli, fordi hver PHP-fil får et syntakstjek, før den kommer i ZIP-filen.
• jq, curl, bash og tar. Det WordPress, du installerer på, skal være version 6.6 eller nyere.

Pluginnet tjekker alt dette i det første trin og udskriver to lister. Den første viser, hvad det kan installere selv i dine egne mapper. Den anden viser, hvad du selv skal tage stilling til: Docker, en nyere Node og at starte Docker. Den anden gruppe installerer det aldrig bag din ryg.

Installér pluginnet

Vi udgiver pluginnet to gange, én gang for hver agent. Scriptsene og versionsnummeret er de samme for Claude Code og Codex. Vælg den, du bruger.

Claude Code

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

Derefter, én gang, i en terminal:

python3 -m playwright install chromium

Codex

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

Til gratisniveauet er der intet andet at sætte op: ingen nøgle, ingen tilmelding, intet kort. Vil du helst ikke arbejde i en terminal, kan du køre den samme konvertering i desktopappen html2wp (en guide med skærmbilleder).

Sådan får du dit Lovable-projekt ned på disken

Adressen på et live site er ikke et understøttet input, og det er med vilje. En kopi af en udgivet side beholder kun det renderede resultat. Den mister det, kildekoden ved: hvilke ruter der findes, hvad komponenterne er, og hvad bygningen giver.

Input er derfor en mappe. Lovable synkroniserer dit projekt til et repository på GitHub. Forbind det, klon det, og du har projektet lokalt. Uanset hvordan Lovables brugerflade ser ud denne måned, er det repositoriet, du vil have: de samme filer, som Lovable bygger sitet ud fra.

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

Du behøver ikke køre npm install eller en bygning først. Det gør konverteringen selv.

Sig „konvertér dette projekt“

Skriv i den mappe, med din agent åben:

/html2wp:html2wp

convert this project

Codex har ingen slash-kommando. Sig i stedet convert this project into a verified WordPress block theme til den, så finder den selv skillen. Med Claude Code eller Codex er den sætning hele instruksen. Du skriver ingen konfigurationsfil og vælger ingen byggekommando.

Flash tager omkring 30 minutter og Full omkring en time, afhængigt af antallet af sider og hvor hurtig din computer er. Det kører for det meste uden opsyn og melder efter hvert trin, hvor det er, så forvent ikke stilhed.

Hvad der sker med React, når Lovable flyttes til WordPress

Det er dette trin, et Lovable-projekt tilføjer.

En ældre Lovable-app (React og Vite) har en enkelt index.html. Dens body er et tomt element, som React-appen monteres i, plus et script-tag, så der er intet at konvertere. Først bygger konverteren projektet. Derefter går en rigtig browser gennem alle ruter, mens en optager holder øje. Resultatet er flad HTML pr. rute, præcis det, resten af processen har brug for. Et nyere projekt på TanStack Start renderer allerede sine sider på serveren. Konverteren bygger det alligevel og går gennem alle ruter på samme måde.

Hvad optageren fanger

• Tilstand, der kun findes, efter JavaScript har kørt. Åbne accordions, indholdet i dropdown-menuer, klasser, som et script ændrer. Optageren gemmer dem som data på elementerne, og et lille generisk runtime afspiller dem igen. Ingen skriver dem i hånden efter hukommelsen.
• Grænser for scroll, ned til pixlen. En header, der skifter ved scrollY > 40, bruger et tal, som nogen har fundet på. Optageren finder det og regner præcis ud, hvor det ligger. Et afrundet gæt ville skifte headeren på det forkerte tidspunkt, for altid.
• Forhold af typen „kun én kan være åben“. Du åbner A og så B. Lukkede A? Det kan en optagelse af hvert element alene ikke afgøre, så optageren tester det for sig.
• Animationer ved scroll overlever. Optageren fanger dem, og temaet afspiller dem præcis som originalen. Indholdet forbliver synligt uden JavaScript, et element skjules kun, mens runtimet kører, og med prefers-reduced-motion springer temaet animationen over. Vi måler 1:1-overensstemmelsen i hvile, når animationerne er færdige.

Hvad den ikke forfalsker

• Adfærd, den ikke kunne optage, kommer på en liste. Hver side har sin egen. Læs den.

Dette trin har sin egen kontrol, fordi ingen senere kontrol kan se det. Konverteren tager skærmbilleder af hver rute live og sammenligner dem med sin statiske kopi ved 1440, 820 og 390 pixels bredde. Er der forskel, fejler trinnet. Alle senere trin måler fra kopien til WordPress, så en fejl opstået her ville slippe forbi dem alle.

Gennemgangen, du ikke kan springe over

Når de automatiske kontroller er færdige, er konverteringen ikke slut endnu. Konverteren lægger hver side ind i ét billede ved siden af originalen, og du læser hvert eneste fra top til bund.

I én konvertering manglede en hel sektion længere nede på siden, og pixelsammenligningen viste en forskel på kun 0,4 %. Den side består kontrollen uden sektionen. Automatiske kontroller kan i sagens natur ikke se tre slags fejl. Den første er et element, der ser perfekt ud, men intet gør. Den anden er en værdi, der er hårdkodet fra den ene side, en skabelon kom fra. Den tredje er alt, der først viser sig, når du scroller, klikker eller sender en formular.

Tjek også, om du kan redigere indholdet, og ikke kun, om det ser rigtigt ud. En side kan passe ned til pixlen, og alligevel kan ejeren måske ikke redigere dens FAQ eller dens gitter med funktioner. Det så vi live: en accordion med fem spørgsmål så identisk ud, men ingen editor tilbød den. En gennemgang, der kun så på udseendet, lod den slippe igennem. Spørg derfor for hver side, om du kan redigere hver gentaget gruppe og hver tekstblok fra wp-admin.

Installér temaet

Din projektmappe får en ZIP med temaet og ved siden af den CONVERSION-REPORT.md. Intet andet. Arbejdsmappen med bygningen ligger uden for dit projekt, i en cachemappe, så dit repository forbliver rent. Rapporten er undtagelsen, fordi dens læser er dig. Den oplister, hvad konverteringen dækkede, hvad gennemgangen fandt, hver advarsel (også de acceptable) og hvad der stadig er åbent.

Gå i WordPress til Appearance → Themes → Add New → Upload Theme (Udseende → Temaer → Tilføj nyt → Upload tema), vælg ZIP-filen, og aktivér den. Temaet står på egne ben. Sider, blog, formularer, menuer, SEO og omdirigeringer er alt sammen dets egen kode. Det kræver intet plugin for at køre og taler aldrig med nogen af vores servere.

Redigering af sitet efter skiftet fra Lovable til WordPress: tre veje

Blogindlæg bliver almindelige WordPress-indlæg, som du skriver i blokeditoren med det samme. Teksten på siderne bliver i din HTML. Vil du redigere den uden kode, er der to muligheder, der er værd at kende. Den ene er en sidebygger.

Konverterer du, for at designet skal overleve, er en sidebygger netop det, der ødelægger det. At flytte et design ind i en sidebygger i hånden er det trin, hvorefter sitet holder op med at ligne designet, og det er derfor, denne konverter findes. Men er designet kun et udgangspunkt, og vil kunden alligevel bygge halvdelen om næste kvartal, så giv dem bare Elementor.

Lite eller Pro, hvis du vælger Visual Edit

AI-chatten i Pro kører på din egen API-nøgle. Vi sælger dig ikke tokens, og du betaler for forbruget direkte til din udbyder.

Lovable eller WordPress? Du behøver ikke vælge

Det fremstilles som regel som enten-eller. For et indholdssite behøver det ikke være sådan. I Lovable laver du hurtigt et design. I WordPress lever et site i årevis, og en anden redigerer det. Konverteringen beholder det første og flytter det andet. Temaet kører på ethvert WordPress-webhotel, så sitet behøver ikke længere bo der, hvor du byggede det.

Det, der flytter, er websitet: sider, blog, formularer, menuer, SEO og omdirigeringer. Det, der ikke flytter, er applikationen bag det: login, databasen og kald til dit eget API. Er dit Lovable-projekt mest det, så behold det i Lovable. En webshop ligger midt imellem. Med en Pro-licens bliver dens katalog til WooCommerce, som det skete for Terra Studios.

Hvad konverteringen fra Lovable til WordPress koster, og hvad den afviser

Gratisniveauet er åbent for alle, uden nøgle og uden tilmelding: tre konverteringer på fem sider hver og fem nye kørsler i alt. Begge tal gælder pr. IP-adresse, så et kontor, der deler én adresse, får én kvote til alle. Gratisniveauet er til at prøve værktøjet, personlige sites og ikke-kommercielt arbejde.

En Pro-licens fjerner sidegrænsen og gør konverteringer og nye kørsler ubegrænsede. Den tilføjer også det trin, der gør en webshop til WooCommerce. Det trin findes slet ikke i gratisniveauet: appen afviser helt en gratis konvertering af et site med en webshop i stedet for at lave halvdelen af den. Pro koster 49 € om måneden eller 490 € om året, og priserne står på prissiden. Under betaen er den første betaling 30 % billigere, og nøglen kommer på e-mail.

To afvisninger er værd at kende på forhånd. Et React-projekt, hvis ruter kun findes pr. post (/product/:id uden data at rendere), er en webapp, ikke et site at konvertere. Konverteren afviser det åbent i stedet for at levere én tilfældig udgave af skabelonen. Og dette er en beta: kontrollerne fanger de fleste forskelle, ikke dem alle. Derfor er gennemgangen side for side en del af processen og ikke en valgfri finpudsning.

En guide til hele processen trin for trin står i dokumentationen til html2wp-appen. De tre Lovable-konverteringer, du kan åbne i begge ender, står i eksemplet i starten af artiklen.