html2wp / Blogi / Lovablesta WordPressiin
Lovablesta WordPressiin: projektista oikea teema
Lovable-projektin muuntaminen WordPressiksi on sama työ kuin HTML:n muuntaminen, mutta siinä on yksi lisävaihe. Vanhempi Lovable-projekti on React-sovellus, joten sen HTML:ssä ei ole mitään muunnettavaa: sivu ilmestyy vasta selaimessa, kun JavaScript ajetaan. Uudemmat projektit (TanStack Start, toukokuusta 2026 alkaen) renderöivät sivunsa palvelimella, ja html2wp muuntaa molemmat samalla tavalla. Tämä opas vie sinut sellaisesta projektista WordPress-teemaan, joka sisältää koodisi eikä sen uudelleenrakennusta. Jokainen vaihe on oikeasta muunnoksesta, ja voit avata sen molemmat päät.
Esimerkki Lovablesta WordPressiin, molemmat päät auki
Kaikki alla kuvaa muunnosta, jonka oikeasti ajoimme. Alkuperäinen on Lovable-sovellus: bruce-banner.lovable.app, valokuvausportfolio. Tulos on bruce.html2wp.dev, joka toimii WordPressissä. Sen ylläpitoon pääset osoitteessa /wp-admin käyttäjätunnuksella demo ja salasanalla demo.
Muunnos tuotti viisi sivua ja viisi artikkelia teemaan bruce-banner. Se mahtuu ilmaisversioon, joka muuntaa enintään viisi sivua muunnosta kohden eikä vaadi avainta. Avaa molemmat sivustot rinnakkain ennen kuin luet eteenpäin. Tämä artikkeli käsittelee niiden eroa, joten voit mitata sen itse.
Kaksi muuta Lovable-muunnosta on avoinna samalla tavalla. Ensin spark-remix-kindred.lovable.app muuttui sivustoksi terra.html2wp.dev, neulekaupaksi WooCommercessa. Sitten bloom-echo-remix.lovable.app muuttui sivustoksi soria.html2wp.dev, hääkuvaajan sivustoksi. Kaikissa kolmessa WordPressin ylläpidon tunnukset ovat demo / demo.
Mitä ”1:1” tässä tarkalleen tarkoittaa
Koodi, jonka Lovable-sovellus rakentaa selaimessa, on sama koodi, joka menee teemaan. Kukaan ei rakenna osioitasi uudelleen sivunrakentajan widgeteiksi, joten et koskaan saa suunnittelusta sivu sivulta tehtyä likiarvoa. Jokainen alla oleva vaihe seuraa tästä.
Mitä tietokoneesi tarvitsee, kun muunnat Lovablen WordPressiksi
Rakennus, selaintyö ja kaikki tarkistukset ajetaan koneellasi. Vain rakennettu tulos menee palveluun, joka tuottaa teeman. Tämä ei siis ole verkkopalvelu, johon lähetät ZIP-tiedoston, ja sillä on vaatimuksia, jotka sinun kannattaa tietää etukäteen:
- Node 20 tai uudempi rakennusta ja paikallisia skriptejä varten.
- Python 3 ja paketit Playwright ja Pillow. Playwright ohjaa oikeaa selainta, ja niin React-sovelluksesta tulee HTML:ää.
- Docker ja komento
docker compose. Se käynnistää tietokoneellesi väliaikaisen WordPressin, ja muunnin tarkistaa teeman siellä ennen kuin näet sen. - php-cli, koska jokainen PHP-tiedosto käy läpi syntaksitarkistuksen ennen kuin se menee ZIP-tiedostoon.
jq,curl,bashjatar. Kohteena olevan WordPressin on oltava versio 6.6 tai uudempi.
Lisäosa tarkistaa kaiken tämän ensimmäisessä vaiheessa ja tulostaa kaksi listaa. Ensimmäinen näyttää, mitä se voi asentaa itse omiin kansioihisi. Toinen näyttää, mistä sinun on päätettävä: Docker, uudempi Node ja Dockerin käynnistys. Toista ryhmää se ei koskaan asenna selkäsi takana.
Docker yllättää ihmiset eniten
Muut muuntimet eivät tarvitse sitä, koska ne ohittavat tämän vaiheen. Tässä muunnin asentaa tuotetun teeman oikeaan WordPressiin ja testaa sen siellä. Sitä varten ovat selain ja kontti. Jos haluat viiden minuutin työkalun selaimeen, tämä ei ole se.
Lisäosan asennus
Julkaisemme lisäosan kahdesti, kerran kummallekin agentille. Skriptit ja versionumero ovat samat Claude Codelle ja Codexille. Valitse se, jota käytät.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Sitten kerran päätteessä:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Ilmaisversioon ei tarvitse asettaa muuta: ei avainta, ei rekisteröitymistä, ei korttia. Jos et halua työskennellä päätteessä, voit ajaa saman muunnoksen html2wp-työpöytäsovelluksessa (opas kuvakaappauksineen).
Miten saat Lovable-projektisi levyllesi
Toiminnassa olevan sivuston osoite ei ole tuettu syöte, ja se on tarkoituksellista. Julkaistun sivun kopio säilyttää vain renderöidyn tuloksen. Siitä katoaa se, minkä lähdekoodi tietää: mitkä reitit ovat olemassa, mitkä komponentit ovat ja mitä rakennus tuottaa.
Siksi syöte on kansio. Lovable synkronoi projektisi GitHub-repositorioon. Yhdistä se, kloonaa se, ja projekti on paikallisesti koneellasi. Näyttipä Lovablen käyttöliittymä tässä kuussa miltä tahansa, haluat juuri repositorion: samat tiedostot, joista Lovable rakentaa sivuston.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Sinun ei tarvitse ajaa ensin npm install-komentoa tai rakennusta. Muunnos tekee sen itse.
Sano ”convert this project”
Kirjoita siinä kansiossa, agentti avoinna:
/html2wp:html2wp
convert this project
Codexissa ei ole kauttaviivakomentoa. Sano sille sen sijaan convert this project into a verified WordPress block theme, niin se löytää skillin itse. Claude Codessa tai Codexissa tämä lause on koko ohje. Et kirjoita asetustiedostoa etkä valitse rakennuskomentoa.
Flash kestää noin 30 minuuttia ja Full noin tunnin, riippuen sivujen määrästä ja tietokoneesi nopeudesta. Se etenee enimmäkseen ilman valvontaa ja kertoo jokaisen vaiheen jälkeen, missä mennään, joten älä odota hiljaisuutta.
Mitä Reactille tapahtuu, kun Lovable muunnetaan WordPressiksi
Tämän vaiheen Lovable-projekti tuo mukanaan.
Vanhemmassa Lovable-sovelluksessa (React ja Vite) on yksi index.html. Sen body on tyhjä elementti, johon React-sovellus kiinnittyy, sekä script-tagi, joten muunnettavaa ei ole. Ensin muunnin rakentaa projektin. Sitten oikea selain käy läpi jokaisen reitin tallentimen seuratessa. Tuloksena on valmista HTML:ää reittiä kohden, juuri sitä, mitä prosessin loppuosa tarvitsee. Uudempi TanStack Start -projekti renderöi sivunsa jo palvelimella. Muunnin rakentaa senkin ja käy jokaisen reitin läpi samalla tavalla.
Mitä tallennin tallentaa
- Tilan, joka on olemassa vasta JavaScriptin jälkeen. Avatut haitarit, pudotusvalikoiden sisällöt, skriptin muuttamat luokat. Tallennin tallentaa ne datana elementteihin, ja pieni yleinen runtime toistaa ne. Kukaan ei kirjoita niitä käsin muistin varassa.
- Vierityskynnykset pikselin tarkkuudella. Ylätunniste, joka muuttuu kohdassa
scrollY > 40, käyttää jonkun keksimää lukua. Tallennin löytää sen ja selvittää tarkalleen, missä se on. Pyöristetty arvaus muuttaisi ylätunnisteen väärällä hetkellä, aina. - ”Vain yksi voi olla auki” -suhteet. Avaat A:n, sitten B:n. Sulkeutuiko A? Kunkin elementin tallentaminen erikseen ei kerro sitä, joten tallennin testaa sen erikseen.
- Vieritysanimaatiot säilyvät. Tallennin tallentaa ne, ja teema toistaa ne täsmälleen kuten alkuperäinen. Sisältö pysyy näkyvissä ilman JavaScriptiä, elementti piiloutuu vain runtimen ajon ajaksi, ja asetuksella
prefers-reduced-motionteema ohittaa animaation. Mittaamme 1:1-vastaavuuden levossa, kun animaatiot ovat päättyneet.
Mitä se ei teeskentele
- Käyttäytyminen, jota se ei pystynyt tallentamaan, menee listalle. Jokaisella sivulla on omansa. Lue se.
Tällä vaiheella on oma tarkistuksensa, koska mikään myöhempi tarkistus ei näe sitä. Muunnin ottaa jokaisesta reitistä kuvakaappauksen elävänä ja vertaa sitä staattiseen tallenteeseensa 1440, 820 ja 390 pikselin leveydellä. Jos ne eroavat, vaihe epäonnistuu. Jokainen myöhempi vaihe mittaa tallenteesta WordPressiin, joten tässä syntynyt vika livahtaisi niiden kaikkien ohi.
Tarkistus, jota et voi ohittaa
Kun automaattiset tarkistukset päättyvät, muunnos ei ole vielä ohi. Muunnin asettaa jokaisen sivun yhteen kuvaan alkuperäisen viereen, ja sinä luet jokaisen ylhäältä alas.
Yhdessä muunnoksessa kokonainen osio alempana sivulla puuttui, ja pikselivertailu näytti eroksi vain 0,4 %. Sivu läpäisee tarkistuksen ilman osiota. Automaattiset tarkistukset eivät luonteensa vuoksi näe kolmenlaisia vikoja. Ensimmäinen on säädin, joka näyttää täydelliseltä mutta ei tee mitään. Toinen on arvo, joka on kovakoodattu siltä yhdeltä sivulta, josta sivupohja tuli. Kolmas on kaikki, mikä näkyy vasta vierityksen, napsautuksen tai lomakkeen lähetyksen jälkeen.
Tarkista myös, voitko muokata sisältöä, eikä vain, näyttääkö se oikealta. Sivu voi vastata pikselilleen, ja silti omistaja ei ehkä pysty muokkaamaan sen UKK:ta tai ominaisuusruudukkoa. Näimme tämän livenä: viiden kysymyksen haitari näytti identtiseltä, mutta mikään editori ei tarjonnut sitä. Pelkkään ulkonäköön katsonut tarkistus päästi sen läpi. Kysy siis jokaisen sivun kohdalla, voitko muokata jokaista toistuvaa ryhmää ja jokaista tekstilohkoa wp-administa.
Teeman asennus
Projektikansioosi tulee teeman ZIP ja sen viereen CONVERSION-REPORT.md. Ei mitään muuta. Työkansio rakennuksineen on projektisi ulkopuolella välimuistikansiossa, joten repositoriosi pysyy siistinä. Raportti on poikkeus, koska sen lukija olet sinä. Siinä luetellaan, mitä muunnos kattoi, mitä tarkistus löysi, jokainen varoitus (myös hyväksyttävät) ja mikä on vielä auki.
Mene WordPressissä kohtaan Ulkoasu → Teemat → Lisää uusi teema → Lataa teema, valitse ZIP ja ota se käyttöön. Teema toimii itsenäisesti. Sivut, blogi, lomakkeet, valikot, SEO ja uudelleenohjaukset ovat kaikki sen omaa koodia. Se ei tarvitse toimiakseen lisäosaa eikä ota koskaan yhteyttä palvelimiimme.
Sivuston muokkaus, kun Lovable on muunnettu WordPressiksi: kolme reittiä
Blogiartikkeleista tulee tavallisia WordPress-artikkeleita, joten kirjoitat niitä lohkoeditorissa heti. Sivujen teksti pysyy HTML:ssäsi, ja sitä varten on kaksi vaihtoehtoa, jotka kannattaa tuntea. Toinen niistä on sivunrakentaja.
| Reitti | Mitä saat | Mitä se sinulle maksaa |
|---|---|---|
| Pelkkä teema | Koodisi muuttumattomana. Ei lisäosaa, ei riippuvuutta, ei mitään uusittavaa. Artikkelit kirjoitetaan lohkoeditorissa. | Ilman lisäosaa sivujen teksti muutetaan HTML:ssä. Jos asiakas haluaa muokata sitä itse, Visual Edit hoitaa sen (Lite on ilmainen). |
| Visual Edit, meidän lisäosamme | Napsautat otsikkoa suoraan sivulla, kirjoitat sen päälle ja tallennat. Muokkaat tekstejä, kuvia, linkkejä, lomakkeita ja valikoita siellä, missä ne ovat, ja koodi pysyy ennallaan. Lite on ilmainen eikä vaadi avainta. | Se on yksi lisäosa lisää WordPressissä. Lite säilyttää 10 askeleen historian, eikä siinä ole tekoälychattia. Pro maksaa 59 € vuodessa. |
| Elementor tai muu sivunrakentaja |
Kuka tahansa Elementoria osaava voi järjestellä sivun uudelleen yksin, ja osaajia on paljon. Asiakkaalle, joka muuttaa asettelua itse, tuo tuttuus on arvokasta. | Koodi rakennetaan uudelleen widgeteiksi, joten se ei ole enää sinun. Sen jälkeen sivusto ei näy ilman Elementoria, ja perit sen rakenteen, CSS:n ja päivitykset. |
Jos muunnat, jotta suunnittelu säilyy, sivunrakentaja on juuri se, mikä sen tuhoaa. Suunnittelun siirtäminen rakentajaan käsin on vaihe, jonka jälkeen sivusto lakkaa näyttämästä suunnittelulta, ja siksi tämä muunnin on olemassa. Mutta jos suunnittelu on vain lähtökohta ja asiakas rakentaa siitä puolet uudelleen ensi neljänneksellä joka tapauksessa, anna hänelle Elementor.
Lite vai Pro, jos valitset Visual Editin
| Lite (ilmainen) | Pro | |
|---|---|---|
| Sisällön muokkaus napsauttamalla | ✓ | ✓ |
| Lomakkeet, valikot, SEO-kentät | ✓ | ✓ |
| Muokkaus tekoälychatilla | – | ✓, omalla API-avaimellasi |
| Teeman vienti | – | ✓ |
| Turnstile-lomakesuoja | – | ✓ |
| Tekoälykuvanmuokkaus ja animaatiot kuvista | – | ✓ |
| Muokkaushistoria | 10 askelta | 300 askelta |
Pron tekoälychat toimii omalla API-avaimellasi. Emme myy sinulle tokeneita, ja niiden käytön kulut maksat suoraan palveluntarjoajallesi.
Lovable vai WordPress? Sinun ei tarvitse valita
Tämä esitetään yleensä joko–tai-valintana. Sisältösivustolle sen ei tarvitse olla. Lovablessa teet suunnittelun nopeasti. WordPressissä sivusto elää vuosia, ja joku muu muokkaa sitä. Muunnos säilyttää ensimmäisen ja siirtää toisen. Teema toimii missä tahansa WordPress-hostingissa, joten sivuston ei enää tarvitse asua siellä, missä rakensit sen.
Siirtyvä osa on verkkosivusto: sivut, blogi, lomakkeet, valikot, SEO ja uudelleenohjaukset. Siirtymätön osa on sen takana oleva sovellus: kirjautuminen, tietokanta ja kutsut omaan API:isi. Jos Lovable-projektisi on enimmäkseen sitä, pidä se Lovablessa. Kauppa on näiden välissä. Pro-lisenssillä sen tuoteluettelosta tulee WooCommerce, kuten Terra Studiosille kävi.
Mitä Lovablen muuntaminen WordPressiksi maksaa ja mistä se kieltäytyy
Ilmaisversio on kaikille avoin ilman avainta ja rekisteröitymistä: kolme muunnosta, kukin viisi sivua, ja yhteensä viisi uudelleenajoa. Molemmat määrät lasketaan IP-osoitetta kohden, joten yhteistä osoitetta käyttävä toimisto saa yhden kiintiön kaikille. Ilmaisversio on työkalun kokeiluun, henkilökohtaisiin sivustoihin ja ei-kaupalliseen työhön.
Pro-lisenssi poistaa sivurajan ja tekee muunnoksista ja uudelleenajoista rajattomia. Se tuo myös vaiheen, joka tekee kaupasta WooCommercen. Tätä vaihetta ei ole ilmaisversiossa lainkaan: sovellus kieltäytyy kokonaan ilmaisesta muunnoksesta sivustolle, jossa on kauppa, eikä tee siitä puolikasta. Pro maksaa 49 € kuukaudessa tai 490 € vuodessa, ja hinnat ovat hintasivulla. Betan aikana ensimmäinen maksu on 30 % halvempi, ja avain tulee sähköpostiin.
Kaksi kieltäytymistä kannattaa tietää etukäteen. React-projekti, jonka reitit ovat olemassa vain tietuekohtaisesti (/product/:id ilman renderöitävää dataa), on verkkosovellus eikä muunnettava sivusto. Muunnin kieltäytyy siitä avoimesti eikä toimita yhtä satunnaista sivupohjan esiintymää. Ja tämä on beta: tarkistukset löytävät useimmat erot, eivät kaikkia. Siksi sivu sivulta -tarkistus on osa prosessia eikä valinnaista viimeistelyä.
Vaiheittainen opas koko prosessiin on html2wp-sovelluksen dokumentaatiossa. Kolme Lovable-muunnosta, jotka voit avata molemmista päistä, ovat tämän artikkelin alun esimerkissä.