Claude Designista WordPressiin: näin muunnat designin teemaksi

Millaisen tuloksen Claude Design antoi sinulle?

Claude tuottaa kahdenlaisia tuloksia, ja kumpikin kulkee eri reittiä. Tarkista ennen aloittamista, kumpi sinulla on, koska se ratkaisee, kauanko muunnos kestää.

Mitä Claude antoi	Mikä se on	Reitti
HTML-artifakti	Itsenäinen .html-tiedosto: koodi, tyylit ja skriptit ovat kaikki sen sisällä.	Tämä artikkeli. Se on jo valmista HTML:ää, juuri sitä syötettä, jota muunnin tarvitsee.
React-artifakti	Komponentti. Sivu ilmestyy vasta JavaScriptin ajon jälkeen, ja sitä ympäröivä HTML on tyhjä elementti, johon sovellus kiinnittyy.	Lovable-opas: samanlainen syöte, sama lisävaihe.

Jos et ole varma, avaa tiedosto ja katso <body>-elementin sisään. Jos näet siellä otsikkosi ja kappaleesi, sinulla on HTML-artifakti ja olet oikeassa paikassa. Kun body on yksi tyhjä <div> ja script-tagi, sinulla on se toinen.

Vie Claude Designista kansioon, kuvat mukaan lukien

Syöte on aina kansio levylläsi. Toiminnassa olevan sivuston osoite ei ole tuettu syöte, ja se on tarkoituksellista. Julkaistun sivun kopio säilyttää vain renderöidyn tuloksen ja menettää sen, minkä lähdetiedosto tietää.

Vie siis design Claudesta (lataa artifakti), luo kansio ja tallenna tiedosto siihen nimellä index.html. Jos design linkittää kuviin, jotka eivät ole tiedoston sisällä, laita ne sen viereen samoihin suhteellisiin paikkoihin, joita koodi odottaa.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

Yksi sivu vai useampi?

Yksi artifakti on yksi sivu, ja yhden sivun sivusto muuntuu ilman ongelmia. Siitä tulee teeman etusivu. Jos haluat sivuston, jossa on Tietoa- ja Yhteystiedot-sivut, pyydä myös ne Claudelta ja tallenna kukin omaksi .html-tiedostokseen samaan kansioon. Tiedostonimillä on väliä: analyysi lukee ne ja ymmärtää tiedoston blog.html tai about.html sen nimestä.

Jos pysyt viidessä tiedostossa tai vähemmässä, koko muunnos mahtuu ilmaisversioon.

Mitä tietokoneesi tarvitsee, kun muunnat Claude Designin WordPressiksi

Lyhyempikin reitti ajetaan koneellasi, eivätkä vaatimukset kutistu. Selain ja väliaikainen WordPress ovat tuloksen tarkistamista varten, eivät sen tuottamista:

• Node 20 tai uudempi ja Python 3 sekä paketit Playwright ja Pillow.
• Docker ja komento docker compose. Se käynnistää tietokoneellesi väliaikaisen WordPressin, ja muunnin asentaa teeman sinne ennen kuin näet sen.
• php-cli, koska jokainen PHP-tiedosto käy läpi syntaksitarkistuksen ennen kuin se menee ZIP-tiedostoon.
• jq, curl, bash ja tar. Kohteena olevan WordPressin on oltava versio 6.6 tai uudempi.

Ensimmäinen vaihe tarkistaa kaiken tämän. Se erottaa sen, mitä se voi asentaa itse omiin kansioihisi, siitä, mistä sinun on päätettävä. Dockeria se ei asenna puolestasi, ellet pyydä.

Aja muunnos Claude Designista WordPressiin

Claude Code

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

python3 -m playwright install chromium

Codex

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

Kirjoita sitten mistä tahansa:

/html2wp:html2wp

convert ./my-site

Kansion polku on koko ohje. Et kirjoita asetustiedostoa etkä valitse rakennuskomentoa. Kirjoita Codexissa convert ./my-site with html2wp. Jos et halua työskennellä päätteessä, voit avata saman kansion html2wp-työpöytäsovelluksessa (opas kuvakaappauksineen).

Flash kestää noin 30 minuuttia ja Full noin tunnin, riippuen sivujen määrästä ja tietokoneesi nopeudesta. Yhden sivun artifakti on lyhyemmässä päässä, mutta tarkistukset ajetaan aina kokonaan, oli syöte miten pieni tahansa.

Mitä se päättää puolestasi ja mitä se kysyy

Ennen kuin se tuottaa mitään, se mittaa tiedostosi. Se listaa sivut ja selvittää, mitkä koodin osat ovat yhteisiä ja mitkä ainutlaatuisia. Se löytää myös design tokenit, kaiken blogin näköisen ja sen, mitkä sivut ovat itsenäisiä. Sitten se kirjaa, mitä aikoo tehdä, ja muuntaa sen suunnitelman mukaan.

Generoitu design törmää usein kahteen asiaan:

• Jokainen designvariantti säilytetään. Jos sivuillasi ei ole samaa ylätunnistetta, se ei valitse voittajaa ja litistä muita. Sen sijaan se luo jokaiselle variantille sivupohjan osan ja kytkee jokaisen sivun siihen, jota se oikeasti käytti. Eri Claude-keskusteluista tulevat artifaktit eroavat usein enemmän kuin muistat.
• Tekstisi aaltosulkeet säilyvät. Välivaihe käyttää JSX:n kaltaista muotoa. Muuten tekstissäsi oleva JSON- tai CSS-näyte rikkoisi rakennuksen tai näkyisi sivulla muodossa {. Muunnin käsittelee ne, joten aaltosulkeet pysyvät sivulla aaltosulkeina.

Toistuvat ryhmät, esimerkiksi kortit, asiakaskokemukset tai UKK, tallennetaan kokoelmina eikä kovakoodattuna merkintäkoodina. Siksi voit oikeasti muokata niitä myöhemmin, eivätkä ne vain näytä muokattavilta.

Tarkistus, jota et voi ohittaa

Muunnin asettaa jokaisen sivun yhteen kuvaan alkuperäisen viereen, ja sinä luet jokaisen ylhäältä alas.

Yhdessä muunnoksessa osio alempana sivulla puuttui, ja pikselivertailu näytti eroksi vain 0,4 %, joten se läpäisi tarkistuksen. Numeeriset 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öä. Sivu voi vastata pikselilleen, ja silti kukaan ei voi muokata sen UKK:ta tai ominaisuusruudukkoa wp-administa. Niin on käynyt, ja sen huomasi tämä tarkistus, ei mikään automaattinen.

Muokkaus, kun Claude Design on muunnettu WordPressiksi: teema, Visual Edit vai sivunrakentaja

Kansioosi tulee kaksi tiedostoa: teeman ZIP ja sen vieressä CONVERSION-REPORT.md. Raportti luettelee, mitä muunnos kattoi, mitä tarkistus löysi ja mikä on vielä auki. Asennat sen kuten minkä tahansa WordPress-teeman (Ulkoasu → Teemat → Lisää uusi teema → Lataa teema).

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ä palvelimeemme. Blogiartikkelit kirjoitetaan lohkoeditorissa, mutta sivujen teksti pysyy HTML:ssä. Sivujen muokkaamiseen ilman koodia on kaksi vaihtoehtoa: Visual Edit ja sivunrakentaja.

Sivunrakentaja on hyvä valinta, kun design on vain lähtökohta. Huono se on, kun design on se, mitä toimitat. Jos muunnat, jotta generoitu design säilyy WordPressissä, sen uudelleenrakentaminen widgeteiksi kumoaa syyn, jonka vuoksi aloitit. Mutta jos joku muu tekee asettelun uudelleen ensi neljänneksellä, hänen Elementor-kokemuksensa voi olla arvokkaampi kuin uskollinen design.

Lite vai Pro, jos valitset Visual Editin

Tekoälychat toimii omalla API-avaimellasi. Emme myy sinulle tokeneita, ja niiden kulut maksat palveluntarjoajallesi.

Hinta ja mistä muunnos kieltäytyy

Ilmainen kaikille ilman avainta ja rekisteröitymistä: kolme muunnosta, kukin viisi sivua, ja yhteensä viisi uudelleenajoa. Molemmat määrät lasketaan IP-osoitetta kohden, joten toimisto, jolla on yksi osoite, saa yhden kiintiön. 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 avaa myös vaiheen, joka tekee kaupasta WooCommercen. Se vaihe ei ole koskaan ilmainen: sovellus kieltäytyy kokonaan ilmaisesta muunnoksesta sivustolle, jossa on kauppa, eikä tee siitä puolikasta. Voit ostaa Pron kuukausi- tai vuositilauksena hintasivulta, ja betan aikana ensimmäisestä maksusta saa 30 % alennuksen.

Yksi varaus: tämä on beta. Tarkistukset löytävät useimmat erot, eivät kaikkia. Siksi jokaisen sivun lukeminen alkuperäisen vieressä on osa prosessia eikä valinnaista viimeistelyä. Siksi sinun kannattaa myös muuntaa ensin jotain omaasi ilmaiseksi ja vasta sitten luottaa siihen.

Vaiheittainen opas koko prosessiin on html2wp-sovelluksen dokumentaatiossa. Jos artifaktisi on React, opas Lovablesta WordPressiin kuvaa sen reitin.