html2wp / Dokumentaatio

WordPress-teeman tekeminen HTML:stä html2wp-sovelluksessa

Tämä opas näyttää, miten WordPress-teeman tekeminen HTML:stä onnistuu html2wp-työpöytäsovelluksessa: sovelluksen asennus, ensimmäinen muunnos, mallin valinta, mitä tietokoneeltasi lähtee ja miten muokkaat valmista sivustoa. Muuntaminen agentin kanssa päätteessä kuvataan Claude Coden ja Codexin lisäosan dokumentaatiossa.

Osa yksiEnsimmäinen muunnoksesi

WordPress-teeman tekeminen: sovelluksen asennus

Lataa html2wp-sovellus Macille, jossa on Apple silicon (M1 tai uudempi), tai Windowsille ja asenna se kuten minkä tahansa muun sovelluksen. Windows-versio on vielä Preview-vaiheessa, ja Linux-versio tulee myöhemmin.

Kun avaat sovelluksen ensimmäisen kerran, napsauta ”Prepare environment”. Sovellus lataa silloin kaiken tarvitsemansa. Se tekee tämän vain kerran, ja siihen menee hetki.

Työhönsä sovellus tarvitsee Docker Desktopin, joka on ilmainen ohjelma. Docker ajaa väliaikaista WordPressiä, johon sovellus asentaa teeman ja jossa se tarkistaa sen. Jos sinulla ei ole Dockeria, sovellus lataa sen ja käynnistää asennusohjelman puolestasi. Tietokoneesi voi kysyä matkalla salasanaasi.

Kirjautuminen ChatGPT:llä

Muunnoksen tekee ChatGPT-tilauksesi tekoäly, joten et maksa meille krediiteistä tai tokeneista.

Napsauta sovelluksessa ”Connect with ChatGPT”. Sovellus näyttää 9-merkkisen koodin ja avaa OpenAI:n sivun selaimeesi. Valitse siellä ChatGPT-tilisi tai kirjaudu sisään.

Seuraavaksi sivu pyytää koodia ”päätteestä” ja mainitsee Codex CLI:n. Se on kunnossa: html2wp käyttää Codexia, ja sivun pyytämä koodi on se, joka näkyy sovelluksessa. Liitä se (napsauta koodia sovelluksessa kopioidaksesi sen) ja napsauta ”Continue”. Kirjautumisen jälkeen sovellus päivittää itsensä.

Vain OpenAI näkee salasanasi

Kirjoitat ChatGPT-salasanasi vain OpenAI:n sivulle, eikä sovellus näe sitä koskaan. Älä lähetä koodia kenellekään, ja syötä se vain, kun olet itse aloittanut kirjautumisen.

Uusi projekti: HTML, josta teet WordPress-teeman

Napsauta ”New project” ja valitse sivustosi kansio tai ZIP. Se voi olla export Lovablesta, Boltista tai v0:sta, Claudella tehty design tai pelkkä HTML-sivusto. Sovellus ei hyväksy sivuston osoitetta (URL), koska se tarvitsee tiedostot, joista sivusto on rakennettu.

Sovellus päättelee itse, mikä sivu on etusivu ja mikä blogi, artikkeli tai tuote.

Valitse sitten, mitä haluat saada. Yleensä muunnat HTML:n WordPress-teemaksi Flash- tai Full-tilassa. Jos et tarvitse WordPressiä, valitse sen sijaan Astro 5 -projekti. Se muunnos on lyhyempi, ja voit julkaista valmiin sivuston suoraan sovelluksesta Cloudflare Pagesiin, jossa voit isännöidä sen ilmaiseksi.

Flash vai Full: WordPress-teeman tekeminen kahdella tavalla

Flash on nopea muunnos, ja se on sovelluksen oletus. Jokainen vaihe ajetaan kerran. Valikot, blogi, kauppa ja lomakkeet tunnistetaan ja kytketään heti. Tarkistukset ajetaan myös kerran, ja niiden tulokset löydät raportista. Se kestää noin puoli tuntia ja sopii useimmille sivustoille sekä nopeaan kokeiluun.

Full on perusteellinen muunnos. Se ajaa jokaisen tarkistuksen ja yrittää korjata löytämänsä virheet. Kesto on noin tunti, ja ChatGPT-tilauksesi rajasta kuluu enemmän. Full kannattaa siis monimutkaisemmille sivustoille tai silloin, kun Flash jätti raporttiin paljon hiottavaa.

Kummassakin tilassa WordPress-teeman tekeminen päättyy käyttökelpoiseen teemaan, ja kaikesta jäljelle jääneestä tulee huomautus. Tarkka aika riippuu sivujen määrästä ja tietokoneesi nopeudesta.

Mallin valinta WordPress-teeman tekemiseen

Sovelluksessa valitset tekoälymallin ja päättelytason (Reasoning effort).

  • GPT-6-Luna tasolla Extra high riittää tavallisiin muunnoksiin. Se on edullinen, kuluttaa vähän tilauksesi rajasta ja hoitaa useimmat sivustot itse.
  • GPT-6-Sol tasolla Medium tai High on suosituksemme, kun jotain pitää korjata, esimerkiksi Full-muunnoksessa tai chatin kautta tehtävissä muokkauksissa.
  • GPT-6-Astra on vahvin ja kallein malli. Tavalliseen työhön et tarvitse sitä, mutta se auttaa, kun edes Sol ei ratkaise ongelmaa.

Voit vaihtaa mallia aina, kun mikään muunnos ei ole käynnissä. Jokaisella projektilla voi olla omansa.

WordPress-teeman tarkistus HTML:ää vasten

Kun muunnos valmistuu, sovellus ilmoittaa siitä. Jos jokin ei onnistu, se yrittää ensin korjata sen itse. Kummassakin tapauksessa se luovuttaa aina käyttökelpoisen teeman ja huomautuksen siitä, mitä on hiottava.

Napsauta ”Preview”-välilehdellä ”Open website” ja katso uutta sivustoa selaimessasi. ”Compare”-välilehti näyttää alkuperäisen ja muunnoksen rinnakkain, ja eron prosentteina. Kirjoita chattiin, mikä ei miellytä, niin sovellus korjaa sen. Tallenna sitten valmiit muutokset uudeksi versioksi painikkeella ”Make release”.

Automaattiset tarkistukset löytävät useimmat erot, mutta eivät kaikkia. Käy siis sivut läpi ennen kuin annat teeman asiakkaalle. Teeman ZIP-tiedoston tallennat ”Exports”-välilehdellä ja lataat sen WordPressiin kohdassa Ulkoasu → Teemat → Lisää uusi teema → Lataa teema.

Osa kaksiSen jälkeen

Data ja tietosuoja

Palvelimemme rakentaa teeman. Suurin osa työstä (mittaus, vertailu alkuperäiseen ja korjaukset) tapahtuu kuitenkin tietokoneellasi, ja sitä ohjaa ChatGPT-tilisi tekoäly. OpenAI käsittelee sitä, minkä parissa tekoäly työskentelee, tilisi ehtojen mukaisesti.

Mitä palvelimelle lähetetään

Astro-projektiksi muunnettu sivustosi (sivut, tyylit, skriptit, kuvat ja fontit) sekä tiedot jokaisesta sivusta. Alkuperäistä projektikansiota ja asennettuja kirjastoja (node_modules) ei lähetetä. Lähetetyt tiedot poistetaan automaattisesti 48 tunnin kuluttua. Vain sormenjälki (hash) jää, ja sen ansiosta uudelleenajo lasketaan yhdeksi muunnokseksi.

Tiedostot, joissa on salasanoja ja avaimia

Kirjautumistiedoilta näyttävät tiedostot eivät mene pakettiin lainkaan: .env, avaimet (.pem, .key, id_rsa), .npmrc, .netrc, kansiot .ssh ja .aws tai mikä tahansa tiedosto, jossa on yksityinen avain. Kaiken, minkä sovellus jätti pois, löydät nimeltä raportista.

Tarkistusten tulokset

Testattuaan teeman sovellus lähettää vain tarkistusten tulokset: mitkä tarkistukset menivät läpi ja mitkä eivät, sivumäärät, suurimman eron alkuperäiseen ja epäonnistuneiden sivujen lyhyet nimet (esimerkiksi ”about”). Se ei lähetä sivuston osoitetta, verkkotunnusta, koodia, tekstiä, kuvakaappauksia, tiedostopolkuja, lisenssiavainta tai sivuston nimeä.

Tarkistukset ajetaan tietokoneesi WordPressiä vastaan, jota palvelimemme ei koskaan näe. Ilman niiden tuloksia palvelin tietäisi vain, ettei muunnos kaatunut. Siksi seuraava muunnos alkaa vasta, kun edellinen on lähettänyt tuloksensa. Sovellus lähettää ne automaattisesti. Koko kuvaus on tietosuojasivulla.

Muokkaus Visual Editillä

HTML:stä WordPress-teemaksi muuntamasi sivusto ei tarvitse toimiakseen lisäosaa. Sivut, blogi, lomakkeet, valikot, SEO ja uudelleenohjaukset ovat kaikki osa teemaa. Uudelleenohjaukset vievät vanhat osoitteet uusiin: vanhan linkin /about.html avaava päätyy osoitteeseen /about/, joten sivusto säilyttää hakusijoituksensa.

Muokkaus napsauttamalla tulee Visual Editistä, WordPress-lisäosasta, jonka lisäät itse. Mitä napsautat, se muuttuu. Mikään sivunrakentaja ei rakenna sivun koodia uudelleen sen alla.

OminaisuusLite (ilmainen)Pro
Tekstit, kuvat ja linkit napsauttamalla✓✓
Lomakkeet, valikot ja SEO-kentät✓✓
Muokkaushistoria10 askelta300 askelta
Tekoälyavustaja (oma OpenRouter-API-avaimesi)–✓
Tekoälykuvanmuokkaus ja animaatiot kuvista–✓
Teeman vienti ja lomakkeiden suojaus Turnstilella–✓

Pro on erillinen vuosilisenssi hintasivulla. Jokainen muunnos, Free tai Pro, linkittää ilmaiseen Lite-versioon. Jos kytket lisäosan pois päältä, sivut näkyvät edelleen ja teema pysyy täysin käyttökelpoisena.

Lisenssi, tilaus, beta

Uudelleenajot

Ilmaisversiossa sinulla on yhteensä 5 uudelleenajoa kaikkien muunnosten kesken, ja Pro-lisenssillä niitä on rajattomasti. Uudelleenajo on sama sivusto lähetettynä uudelleen. Palvelin tunnistaa sen sormenjäljestä (hash), joten se lasketaan uudelleenajoksi eikä uudeksi muunnokseksi.

Tilauksen hallinta ja peruminen

Hallinnoit tilaustasi tilaussivulla. Linkki on sivuston alatunnisteessa ja jokaisessa lisenssisähköpostissa. Paddlen asiakasportaalissa voit perua tilauksen, vaihtaa kortin, ladata laskut ja vaihtaa kuukausittaisen Pron vuositilaukseen. Portaali kirjaa sinut sisään linkillä, joka lähetetään osoitteeseen, jolla ostit, joten salasanaa ei tarvita.

Peruminen estää seuraavan uusiutumisen. Avaimesi toimii maksetun jakson loppuun, ja jokainen muuntamasi teema pysyy sinun. Peruminen ei ole hyvitys: hyvityksiin sovelletaan hyvitysehtoja.

Mitä beta tarkoittaa

html2wp muuntaa oikeita sivustoja, ja sitä käytetään oikeassa työssä. Sovellus vertaa jokaista sivua alkuperäiseen leveyksillä 1440 ja 390 px ja kirjaa jokaisen löytämänsä eron raporttiin. Jos jokin tarkistus jää vajaaksi, saat silti parhaan käyttökelpoisen teeman ja kuvauksen siitä, mitä on vielä hiottava. Käy merkityt sivut läpi ennen kuin lupaat asiakkaalle tuloksen.

Kun löydät virheen itse muuntimesta, ilmoita siitä lisäosan dokumentaation ohjeiden mukaan. Ihminen lukee ilmoituksen, ja korjaukset tulevat palvelun päivityksinä.