Lovablesta WordPressiin: html2wp-sovellus vaihe vaiheelta
Tämä opas näyttää, miten muunnat Lovable-projektin WordPressiksi html2wp-sovelluksessa, joka toimii Macilla ja Windowsissa. Et tarvitse päätettä etkä ohjelmointia. Lisäät projektin ZIP-tiedostona, valitset Flashin tai Fullin, ja lopuksi lataat valmiin WordPress-teeman, joka näyttää suunnittelultasi.
Mitä tarvitset Lovable-sivuston muuntamiseen WordPressiksi
- Mac, jossa on Apple silicon (M1 tai uudempi), ja macOS 12 tai uudempi.
- ChatGPT-tili. Muunnoksen tekee oman tilauksesi tekoäly, joten et maksa meille krediiteistä tai tokeneista.
- Lovable-projekti ZIP-tiedostona tai lähdekoodin sisältävänä kansiona. Ohjeet sen hankkimiseen ovat alempana.
- Levytilaa. Jokainen käynnissä oleva muunnos vie useita gigatavuja.
Docker Desktopia ei tarvitse asentaa etukäteen, koska sovellus lataa ja asentaa sen itse tarvittaessa. Ilmaisversio muuntaa kolme sivustoa, kukin enintään viisi sivua, mikä riittää pienen Lovable-sivuston muuntamiseen WordPressiksi. Asiakastöihin, suurempiin sivustoihin ja WooCommerce-kauppaan tarvitset Pro-lisenssin hintasivulta.
html2wp-sovelluksen asennus
Lataa sovellus Macille, avaa DMG-tiedosto ja vedä html2wp Ohjelmat-kansioon. Tässä oppaassa painikkeiden nimet on kirjoitettu täsmälleen niin kuin ne näkyvät näytöllä.
Ympäristön valmistelu
Napsauta sovelluksen asetuksissa (Settings) Prepare environment. Sovellus lataa ja käynnistää tarvittaessa Dockerin ja lataa sitten muunnosympäristön sekä WordPressin ja tietokannan imaget. Ensimmäisellä kerralla tähän menee muutama minuutti. Macisi voi kysyä salasanaasi, ja Docker näyttää lisenssiehtonsa.
Kun kaikki on valmista, sovellus näyttää ”Ready to work” ja painike muuttuu muotoon Repair environment. Tarvitset sitä vain, jos ympäristö myöhemmin rikkoutuu.
Kirjautuminen ChatGPT:llä
Napsauta Connect with ChatGPT. Sovellus näyttää koodin, ja Open sign-in page -painike avaa OpenAI:n sivun. Kirjaudu siellä ChatGPT-tililläsi ja syötä sovelluksen koodi. Kirjoitat salasanasi vain OpenAI:n sivulle, joten sovellus ei näe sitä koskaan.
Kirjautumisen jälkeen valitse Conversion model ja Reasoning effort tai pidä oletukset. Jos sinulla on Pro-lisenssi, syötä avain asetuksissa ja napsauta Save & check. Ilmaisversio ei tarvitse avainta.
Lovable-projektisi sovelluksessa
Sovellus tarvitsee projektin lähdetiedostot, ei toiminnassa olevan sivuston osoitetta. Lovable synkronoi projektin GitHub-repositorioon. Avaa se GitHubissa ja lataa se kohdasta Code → Download ZIP. Projektia ei tarvitse rakentaa eikä npm install-komentoa ajaa, koska sovellus tekee sen itse.
Napsauta sovelluksessa New project (⌘N). Pidä Output-kohdassa HTML WordPress theme ja valitse Import a ZIP, tai Choose a folder, jos olet purkanut projektin. Sovellus työskentelee kopion parissa, joten alkuperäiset tiedostosi pysyvät ennallaan.
Flash vai Full: kaksi tapaa muuntaa Lovable WordPressiksi
Projektinäkymässä valitset, kuinka perusteellisesti sovellus muuntaa Lovable-sivuston WordPressiksi. Flash on oletus: jokainen vaihe ajetaan kerran, ja se kestää noin puoli tuntia. Full ajaa jokaisen tarkistuksen ja yrittää korjata löytämänsä virheet, joten se kestää noin tunnin. Tarkka aika riippuu sivujen määrästä ja Macisi nopeudesta.
Jos et tarvitse WordPressiä, vaihda tyypiksi Astro 5. Sovellus rakentaa silloin staattisen sivuston, ja voit julkaista sen Cloudflare Pagesiin suoraan sovelluksesta.
Miten muunnos etenee
Muunnoksen aikana Overview-välilehti näyttää vaiheet, joiden parissa muunnoslisäosa työskentelee, ja korjaukset, jotka se teki itse. Suurimman osan ajasta se etenee ilman sinua. Olipa Lovable-projekti vanhempi React-sovellus tai uudempi TanStack Start -projekti, sovellus rakentaa sen ensin, avaa sen selaimessa ja tallentaa jokaisen sivun valmiina HTML:nä. Vasta sitten se tekee siitä HTML:stä teeman.
Keskeytä napsauttamalla Stop conversion ja jatka myöhemmin painikkeella Continue. Jos lisäosa pysähtyy johonkin vaiheeseen itse, Repair and continue antaa sen korjata virheen ja jatkaa.
Lovable-sivuston ja WordPress-version vertailu
Compare-välilehti näyttää jokaisen alkuperäisen sivun WordPress-version vieressä työpöytäleveydellä (Desktop · 1440) ja mobiilileveydellä (Mobile · 390), ja eron prosentteina. Käy jokainen sivu itse läpi. Automaattiset tarkistukset löytävät useimmat erot, mutta eivät kaikkia: yhdestä muunnoksesta puuttui kokonainen osio, ja ero oli vain 0,4 %.
Preview-välilehdellä Open website avaa paikallisen WordPress-sivuston, ja WordPress admin avaa sen hallintapaneelin. Jos haluat muuttaa jotain, kirjoita se oikealla olevaan chattiin. Muutos näkyy esikatselussa muutamassa sekunnissa. Napsauta sitten Make release, niin sovellus paketoi teeman täsmälleen sellaisena kuin näet sen esikatselussa.
Lovablesta WordPressiin: teeman vienti
Kun olet muuntanut Lovablen WordPressiksi, valmiit tiedostot ovat Exports-välilehdellä. Napsauta WordPress-teeman vieressä Save ja tallenna ZIP. Sieltä löydät myös raportin muunnoksesta PDF-tiedostona, alkuperäisen projektin ZIP-tiedoston ja Flash-muunnoksen jälkeen Astro 5 -projektin.
Mene WordPressissä kohtaan Ulkoasu → Teemat → Lisää uusi teema → Lataa teema, valitse ZIP ja ota teema käyttöön. Sivut, blogi, lomakkeet, valikot, SEO ja uudelleenohjaukset ovat kaikki osa teemaa ja toimivat ilman lisäosaa.
Jos haluat asiakkaasi muokkaavan tekstejä ja kuvia napsauttamalla suoraan sivulla, lisää Visual Edit -editori. Jos työskentelet mieluummin agentin kanssa päätteessä, Claude Coden ja Codexin lisäosaa käyttävä opas kattaa saman muunnoksen.