Lovable-ből WordPress: egy projekt valódi témává alakítva

Egy Lovable-ből WordPressbe alakított példa, mindkét végén megnyitható

Minden, ami lent áll, egy általunk ténylegesen lefuttatott konverziót ír le. Az eredeti egy Lovable-alkalmazás: bruce-banner.lovable.app, egy fotós portfólió. Az eredmény a bruce.html2wp.dev, amely WordPressen fut. Az adminfelületére a /wp-admin címen léphetsz be, demo felhasználónévvel és demo jelszóval.

A konverzió öt oldalt és öt bejegyzést készített a bruce-banner témán. Ez belefér az ingyenes csomagba, amely konverziónként legfeljebb öt oldalt alakít át, és nem kell hozzá kulcs. Mielőtt tovább olvasol, nyisd meg a két oldalt egymás mellett. Ez a cikk a kettő közötti különbségről szól, így magad mérheted le.

Még két Lovable-konverzió nyitható meg ugyanígy. Az első: a spark-remix-kindred.lovable.app oldalból a terra.html2wp.dev lett, egy kötöttáru-webshop WooCommerce-en. A második: a bloom-echo-remix.lovable.app oldalból a soria.html2wp.dev lett, egy esküvői fotós oldala. Mindhárom WordPress-adminba a demo / demo adatokkal lépsz be.

Mi kell a gépedre, hogy a Lovable-projektet WordPressre alakítsd

Az építés, a böngészős munka és minden ellenőrzés a gépeden fut. Csak a megépített kimenet megy el a szolgáltatásnak, amely a témát generálja. Ez tehát nem olyan webes szolgáltatás, ahová ZIP-et töltesz fel, és vannak követelményei, amelyekről jó előre tudni:

• Node 20 vagy újabb az építéshez és a helyi szkriptekhez.
• Python 3 a Playwright és a Pillow csomaggal. A Playwright egy valódi böngészőt vezérel, így lesz a React-alkalmazásból HTML.
• Docker a docker compose paranccsal. Ideiglenes WordPresst indít a gépeden, és a konverter ott ellenőrzi a témát, mielőtt te látnád.
• php-cli, mert minden PHP-fájl szintaktikai ellenőrzésen megy át, mielőtt a ZIP-be kerül.
• jq, curl, bash és tar. A cél-WordPress 6.6-os vagy újabb verziójú legyen.

A bővítmény mindezt az első lépésben ellenőrzi, és két listát ír ki. Az első azt mutatja, mit tud magától telepíteni a saját mappáidon belül. A második azt, amiről neked kell döntened: Docker, újabb Node és a Docker elindítása. A második csoportot soha nem telepíti a hátad mögött.

A bővítmény telepítése

A bővítményt kétszer adjuk ki, ügynökönként egyszer. A szkriptek és a verziószám Claude Code-hoz és Codexhez ugyanaz. Válaszd azt, amelyiket használod.

Claude Code

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

Aztán egyszer, egy terminálban:

python3 -m playwright install chromium

Codex

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

Az ingyenes csomaghoz semmi mást nem kell beállítani: se kulcs, se regisztráció, se bankkártya. Ha inkább nem dolgoznál terminálban, ugyanezt a konverziót a html2wp asztali alkalmazásban is lefuttathatod (útmutató képernyőképekkel).

Hogyan kerül a Lovable-projekt a lemezedre

Élő oldal címe nem támogatott bemenet, és ez szándékos. Egy közzétett oldal másolata csak a megjelenített eredményt őrzi meg. Elveszíti azt, amit a forráskód tud: milyen útvonalak léteznek, mik a komponensek, és mit állít elő az építés.

A bemenet ezért egy mappa. A Lovable szinkronizálja a projektedet egy GitHub-repozitóriumba. Kösd össze, klónozd, és a projekt helyben nálad van. Akárhogy is néz ki a Lovable felülete ebben a hónapban, neked a repozitórium kell: ugyanazok a fájlok, amelyekből a Lovable az oldalt építi.

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

Előtte nem kell npm install parancsot vagy építést futtatnod. A konverzió ezt magától elvégzi.

Mondd azt, hogy „convert this project”

Ebben a mappában, nyitott ügynökkel, írd be:

/html2wp:html2wp

convert this project

A Codexben nincs perjeles parancs. Helyette mondd neki: convert this project into a verified WordPress block theme, és magától megtalálja a skillt. Claude Code-dal vagy Codexszel ez a mondat a teljes utasítás. Konfigurációs fájlt nem írsz, és build-parancsot sem választasz.

A Flash körülbelül 30 percig, a Full nagyjából egy óráig tart, az oldalak számától és a géped sebességétől függően. Többnyire felügyelet nélkül fut, és minden lépés után jelzi, hol tart, úgyhogy ne számíts csendre.

Mi lesz a Reacttal, amikor a Lovable-ből WordPress lesz

Ezt a lépést teszi hozzá a Lovable-projekt.

A régebbi Lovable-alkalmazásnak (React és Vite) egyetlen index.html fájlja van. A törzse egy üres elem, amelybe a React-alkalmazás beépül, plusz egy szkriptcímke, így nincs mit átalakítani. A konverter előbb megépíti a projektet. Aztán egy valódi böngésző végigjárja az összes útvonalat, miközben egy rögzítő figyeli. Az eredmény útvonalanként sima HTML, pontosan az, amire a folyamat többi részének szüksége van. Egy újabb, TanStack Start alapú projekt már a szerveren rendereli az oldalakat. A konverter ezt is megépíti, és ugyanúgy végigjárja az összes útvonalat.

Mit rögzít a rögzítő

• Az állapotot, amely csak a JavaScript lefutása után létezik. Nyitott harmonikák, legördülő menük tartalma, szkriptek által módosított osztályok. A rögzítő ezeket adatként tárolja az elemeken, egy kis általános futtatókörnyezet pedig visszajátssza őket. Senki sem írja meg őket fejből, kézzel.
• A görgetési küszöböket, pixelre pontosan. Egy fejléc, amely scrollY > 40 értéknél változik, egy valaki által kitalált számot használ. A rögzítő megtalálja, és pontosan kiszámolja, hol van. Egy kerekített becslés miatt a fejléc mindig rossz pillanatban változna.
• Az „egyszerre csak egy lehet nyitva” kapcsolatokat. Megnyitod az A-t, aztán a B-t. Bezárult az A? Ha minden elemet külön rögzítenénk, ez nem derülne ki, ezért a rögzítő ezt külön teszteli.
• A görgetésre megjelenő animációk megmaradnak. A rögzítő elmenti őket, a téma pedig pontosan úgy játssza vissza, mint az eredeti. A tartalom JavaScript nélkül is látható, egy elem csak addig rejtett, amíg a futtatókörnyezet fut, és prefers-reduced-motion esetén a téma kihagyja az animációt. Az 1:1 egyezést nyugalmi állapotban mérjük, amikor az animációk már lefutottak.

Amit nem hamisít meg

• A viselkedés, amelyet nem tudott rögzíteni, listára kerül. Minden oldalnak saját listája van. Olvasd el.

Ennek a lépésnek saját ellenőrzése van, mert egyetlen későbbi ellenőrzés sem látja. A konverter minden útvonalról élő képernyőképet készít, és összeveti a statikus mentésével 1440, 820 és 390 pixeles szélességen. Ha eltérnek, a lépés elbukik. Minden későbbi lépés a mentéstől a WordPressig mér, így egy itt keletkezett hiba mindegyiken átcsúszna.

Az átnézés, amelyet nem hagyhatsz ki

Amikor az automatikus ellenőrzések véget érnek, a konverziónak még nincs vége. A konverter minden oldalt egy képbe teszi az eredetije mellé, és te mindegyiket végigolvasod fentről lefelé.

Az egyik konverzióban egy teljes szekció hiányzott az oldal lejjebb eső részéről, a pixeles összevetés mégis csak 0,4% különbséget mutatott. Ez az oldal a szekció nélkül is átmegy az ellenőrzésen. Az automatikus ellenőrzések természetüknél fogva háromféle hibát nem látnak. Az első egy vezérlő, amely tökéletesen néz ki, de semmit sem csinál. A második egy érték, amelyet abból az egy oldalból égettek be, amelyből a sablon készült. A harmadik minden, ami csak görgetés, kattintás vagy egy űrlap elküldése után jelenik meg.

Azt is ellenőrizd, hogy szerkeszthető-e a tartalom, ne csak azt, hogy jól néz-e ki. Egy oldal pixelre egyezhet, a tulajdonos mégsem tudja szerkeszteni a GYIK-et vagy a funkciórácsot. Élőben láttuk: egy öt kérdéses harmonika azonosnak tűnt, de egyetlen szerkesztő sem kínálta fel. A csak a megjelenést néző átnézés átengedte. Ezért minden oldalnál kérdezd meg, hogy minden ismétlődő csoportot és minden szövegblokkot szerkeszthetsz-e a wp-adminból.

A téma telepítése

A projekt mappádba egy téma-ZIP kerül, mellé pedig a CONVERSION-REPORT.md. Semmi más. A munkamappa az építéssel a projekteden kívül, egy gyorsítótár-mappában van, így a repozitóriumod tiszta marad. A jelentés a kivétel, mert az olvasója te vagy. Felsorolja, mit fedett le a konverzió, mit talált az átnézés, minden figyelmeztetést (az elfogadhatókat is), és hogy mi van még nyitva.

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éma önállóan megáll. Az oldalak, a blog, az űrlapok, a menük, a SEO és az átirányítások mind a saját kódjában vannak. A futáshoz nem kell bővítmény, és soha nem kommunikál egyetlen szerverünkkel sem.

Az oldal szerkesztése, miután a Lovable-projektből WordPress lett: három út

A blogbejegyzések szokásos WordPress-bejegyzések, így azonnal a blokkszerkesztőben írod őket. Az oldalak szövege a HTML-edben marad, és a szerkesztésére két lehetőséget érdemes ismerni. Az egyik egy page builder.

Ha azért alakítasz át, hogy a dizájn megmaradjon, egy page builder pontosan azt teszi tönkre. A dizájn kézi átvitele egy builderbe az a lépés, amely után az oldal már nem úgy néz ki, mint a dizájn, és ezért létezik ez a konverter. Ha viszont a dizájn csak kiindulópont, és az ügyfél a következő negyedévben úgyis átépíti a felét, nyugodtan add neki az Elementort.

Lite vagy Pro, ha a Visual Editet választod

A Pro AI-csevegése a saját API-kulcsodon fut. Tokent nem adunk el neked, a használat költségét közvetlenül a szolgáltatóddal rendezed.

Lovable vagy WordPress? Nem kell választanod

Általában vagy-vagy kérdésként teszik fel. Egy tartalmi oldalnál ennek nem kell így lennie. A Lovable-ben gyorsan készítesz dizájnt. A WordPressben egy oldal évekig él, és valaki más szerkeszti. A konverzió az elsőt megtartja, a másodikat átviszi. A téma bármilyen WordPress-tárhelyen fut, így az oldalnak már nem kell ott élnie, ahol építetted.

Ami átkerül, az a weboldal: oldalak, blog, űrlapok, menük, SEO és átirányítások. Ami nem kerül át, az a mögötte lévő alkalmazás: bejelentkezés, adatbázis és a saját API-d hívásai. Ha a Lovable-projekted főleg ebből áll, maradj vele a Lovable-ben. A webshop a kettő között van. Pro licenccel a katalógusa WooCommerce lesz, ahogy a Terra Studiosnál.

Mennyibe kerül a Lovable-projekt átalakítása WordPressre, és mit utasít el

Az ingyenes csomag mindenkinek nyitva áll, kulcs és regisztráció nélkül: három konverzió, egyenként öt oldallal, és összesen öt újrafuttatás. Mindkét szám IP-címenként számít, így egy közös címet használó iroda egyetlen keretet kap mindenkinek. Az ingyenes csomag kipróbálásra, személyes oldalakra és nem kereskedelmi munkára való.

A Pro licenc megszünteti az oldalkorlátot, a konverziók és újrafuttatások száma pedig korlátlan lesz. Hozzáadja azt a lépést is, amely a webshopot WooCommerce-re alakítja. Ez a lépés az ingyenes csomagban egyáltalán nincs benne: webshopos oldal ingyenes konverzióját az alkalmazás teljesen elutasítja, ahelyett hogy félig elvégezné. A Pro havi 49 € vagy évi 490 €, az árak az árak oldalán vannak. A béta alatt az első fizetés 30%-kal olcsóbb, a kulcs pedig e-mailben érkezik.

Két elutasításról érdemes előre tudni. Az a React-projekt, amelynek útvonalai csak rekordonként léteznek (/product/:id, megjeleníthető adat nélkül), webalkalmazás, nem átalakítandó oldal. A konverter nyíltan elutasítja, ahelyett hogy a sablon egyetlen véletlen példányát szállítaná. És ez béta: az ellenőrzések a különbségek többségét elkapják, de nem mindet. Ezért az oldalankénti átnézés a folyamat része, nem opcionális csinosítás.

A teljes folyamat lépésről lépésre a html2wp alkalmazás dokumentációjában van. A három, mindkét végén megnyitható Lovable-konverziót a cikk elején lévő példában találod.