Lovable-ből WordPress: lépésről lépésre a html2wp alkalmazásban
Ez az útmutató megmutatja, hogyan alakítasz át egy Lovable-projektet WordPressre a html2wp alkalmazásban. Nem kell hozzá terminál, és programozni sem kell. Hozzáadod a projektet ZIP-ként, kiválasztod a Flash vagy a Full módot, a végén pedig letöltesz egy kész WordPress-témát, amely úgy néz ki, mint a dizájnod.
Mi kell ahhoz, hogy a Lovable-projektet WordPressre alakítsd az alkalmazásban
- Apple chipes Mac (M1 vagy újabb) és macOS 12 vagy újabb.
- ChatGPT-fiók. A konverziót a saját előfizetésedben lévő AI végzi, így nekünk nem fizetsz kreditekért vagy tokenekért.
- A Lovable-projekt ZIP-ként vagy a forráskódot tartalmazó mappaként. Lent leírjuk, hogyan szerezd meg.
- Szabad hely a lemezen. Minden futó konverzió több GB-ot foglal.
A Docker Desktopot nem kell előre telepítened, mert az alkalmazás szükség esetén maga tölti le és telepíti. Az ingyenes csomag három oldalt alakít át, egyenként legfeljebb öt oldallal, és ez elég egy kis Lovable-oldal WordPressre alakításához. Ügyfélmunkához, nagyobb oldalakhoz és WooCommerce-bolthoz Pro licenc kell az árak oldaláról.
A html2wp alkalmazás telepítése
Töltsd le az alkalmazást Macre, nyisd meg a DMG-fájlt, és húzd a html2wp-t az Alkalmazások mappába. Ebben az útmutatóban a gombok neve pontosan úgy szerepel, ahogy a képernyőn látod.
A környezet előkészítése
Az alkalmazás Settings (Beállítások) részében kattints a Prepare environment gombra. Az alkalmazás szükség esetén letölti és elindítja a Dockert, aztán betölti a konverziós környezetet, valamint a WordPress- és az adatbázis-képfájlokat. Első alkalommal ez néhány percig tart. A Mac kérheti a jelszavadat, a Docker pedig megmutatja a licencfeltételeit.
Ha minden kész, az alkalmazás kiírja: „Ready to work”, a gomb pedig Repair environment lesz. Erre csak akkor van szükséged, ha a környezet később elromlik.
Belépés ChatGPT-fiókkal
Kattints a Connect with ChatGPT gombra. Az alkalmazás mutat egy kódot, az „Open sign-in page” gomb pedig megnyitja az OpenAI oldalát. Ott lépj be a ChatGPT-fiókoddal, és írd be a kódot az alkalmazásból. A jelszavadat csak az OpenAI oldalán adod meg, így az alkalmazás soha nem látja.
Belépés után válaszd ki a „Conversion model” (konverziós modell) és a „Reasoning effort” (gondolkodási szint) értékét, vagy hagyd az alapbeállítást. Ha van Pro licenced, írd be a kulcsot a beállításokban, és kattints a Save & check gombra. Az ingyenes csomaghoz nem kell kulcs.
A Lovable-projekted az alkalmazásban
Az alkalmazásnak a projekt forrásfájljai kellenek, nem az élő oldal címe. A Lovable egy GitHub-repozitóriumba szinkronizálja a projektet. Nyisd meg a GitHubon, és töltsd le a Code → Download ZIP menüponttal. A projektet nem kell megépítened, és npm install parancsot sem kell futtatnod, mert ezt az alkalmazás maga elvégzi.
Az alkalmazásban kattints a New project (⌘N) gombra. Az „Output” résznél hagyd meg a HTML WordPress theme beállítást, és válaszd az Import a ZIP lehetőséget, vagy a „Choose a folder” gombot, ha kicsomagoltad a projektet. Mivel az alkalmazás egy másolaton dolgozik, az eredeti fájljaid változatlanok maradnak.
Flash vagy Full: a Lovable átalakítása WordPressre
A projekt képernyőjén választod ki, milyen alaposan alakítsa át az alkalmazás a Lovable-oldalt WordPressre. A Flash az alapértelmezett: minden lépés egyszer fut le, és körülbelül fél óráig tart. A Full minden ellenőrzést lefuttat, és megpróbálja kijavítani a talált hibákat, ezért nagyjából egy óráig tart. A pontos idő az oldalak számától és a Maced sebességétől függ.
Ha nincs szükséged WordPressre, állítsd a típust Astro 5-re. Az alkalmazás ekkor statikus oldalt épít, amelyet közvetlenül az alkalmazásból tehetsz közzé a Cloudflare Pages szolgáltatáson.
Hogyan zajlik a konverzió
Konverzió közben az „Overview” (Áttekintés) lap mutatja, milyen lépéseken dolgozik a konverziós bővítmény, és milyen javításokat végzett magától. Többnyire nélküled fut. Akár régebbi React-alkalmazás a Lovable-projekt, akár újabb TanStack Start projekt, az alkalmazás előbb megépíti, megnyitja egy böngészőben, és minden oldalt kész HTML-ként ment el. Csak ezután alakítja a HTML-t témává.
Szüneteltetéshez kattints a Stop conversion gombra, aztán a „Continue” gombbal folytasd. Ha a bővítmény magától megáll egy lépésnél, a Repair and continue gombbal kijavíttathatod vele a hibát, és továbbmegy.
A Lovable-oldal összevetése a WordPress-változattal
A Compare (Összevetés) lap az eredeti minden oldalát a WordPress-változat mellett mutatja, asztali szélességen (Desktop · 1440) és mobilszélességen (Mobile · 390), a különbséggel százalékban. Minden oldalt nézz át magad. Az automatikus ellenőrzések a legtöbb különbséget elkapják, de nem mindet: az egyik konverzióban egy teljes szekció hiányzott, a különbség mégis csak 0,4% volt.
A Preview lapon az „Open website” gomb megnyitja a helyi WordPress-oldalt, a „WordPress admin” pedig a vezérlőpultját. Ha módosítanál valamit, írd be a jobb oldali csevegésbe. A változás néhány másodpercen belül megjelenik az előnézetben. Aztán kattints a Make release gombra, és az alkalmazás pontosan úgy csomagolja be a témát, ahogy az előnézetben látod.
A téma exportálása: a Lovable-projektből WordPress lett
Amikor a Lovable-projektből WordPress lett, a kész fájlok az Exports lapon vannak. A WordPress-téma mellett kattints a „Save” gombra, és mentsd el a ZIP-et. Itt találod a konverziós jelentést PDF-ként, az eredeti projekt ZIP-jét, és Flash konverzió után egy Astro 5 projektet is.
A WordPressben menj a Megjelenés → Témák → Új hozzáadása → Téma feltöltése menübe, válaszd ki a ZIP-et, és aktiváld a témát. Az oldalak, a blog, az űrlapok, a menük, a SEO és az átirányítások mind a téma részei, és bővítmény nélkül működnek.
Ha azt szeretnéd, hogy az ügyfeled közvetlenül az oldalon kattintva szerkessze a szövegeket és a képeket, add hozzá a Visual Edit szerkesztőt. Ha inkább egy ügynökkel dolgozol a terminálban, ugyanezt a konverziót az útmutató a Claude Code- és Codex-bővítménnyel írja le.