Voiko tekoäly luoda WordPress-kotisivut? Testasimme Claudella – tässä tulokset

Voiko tekoäly luoda WordPress-kotisivut kokonaan itse? Päätimme testata asiaa käytännössä Clauden avulla. Lähtökohta oli yksinkertainen: kollegani pyysi Claudelta hääsivua, ja tulos oli tyylikäs, teemaan sopiva HTML-sivu. Staattisen HTML-sivun voi julkaista helposti lataamalla sen palvelimelle FTP-yhteyden kautta – mutta sisältö jää staattiseksi. Jos haluat muokata sivua jälkikäteen, joudut muokkaamaan suoraan HTML-tiedostoa. Ohjelmointiin perehtymättömälle tämä on usein liikaa.

Päätimme viedä kokeilun askeleen pidemmälle: entä jos Claude generoisi kokonaisen WordPress-teeman, jonka sisältöä voisi muokata WordPressin Gutenberg-editorilla – täysin ilman ohjelmointiosaamista? Tässä artikkelissa kerromme, miten kokeilu sujui.

Mitä WordPress-osaamista tarvitset tähän kokeiluun?

Tätä ohjetta seurataksesi sinun ei tarvitse osata ohjelmointia ollenkaan. WordPressin perusteiden tunteminen on kuitenkin tarpeen – erityisesti Gutenberg-editorin käyttö ja sivujen sisällön muokkaaminen. Jos nämä ovat sinulle tuttuja, saat tästä artikkelista kaiken irti. 

Lauri Kuparinen

Näin Claude generoi WordPress-teeman promptista

Sovin kollegani kanssa, että voisin testiksi generoida digitaalisen markkinoinnin yritykselle sopivat WordPress-kotisivut. Muita vaatimuksia ei sitten ollutkaan ja kirjoitin seuraavanlaisen kehoitteen Claudelle (englanniksi):

“Luo WordPress-teema digitaalisen markkinoinnin toimistolle. Keskity luomaan malli, jossa käyttäjä voi luoda useita sivuja, joka tukee valikoita ja jossa on markkinointitoimistoille sopivia mukautettuja Gutenberg-lohkoja (lohkojen tulisi sijaita editorissa otsikon ”toimisto” alla).”

Näin muokkaat kehotteen omiin tarpeisiisi

Tämä on hyvä pohja tekoälyn kehoitukselle, jota voit muokata omiin tarpeisiisi sopivaksi. Muokattava avainsana kehotteessa on “digitaalisen markkinoinnin toimistolle”, joka kertoo tekoälylle, mikä tulee olemaan sivuston teema ja sisältö. Tekoäly osaa jo pelkästään sen pohjalta tuottaa sivuston graafisen ilmeen. Toinen muokattava avainsana on kehotteen lopussa oleva “toimisto”; siinä kerron tekoälylle, että kun se luo WordPressin sisältöeditoria varten teemaan sopivia, kustomoituja sisältöelementtejä, niin minkä otsakkeen alta uudet elementit löytyvät sisältöeditorissa (oma otsikko helpottaa löytämään ne WordPressin oletusarvoisten sisältöblokkien sekä mallien joukosta). 

Huomaathan myös, että voit lisätä sivuston graafisen ilmeen kuvatiedostona kehotteen liitteeksi ja pyydät tekoälyä etenemään sen mukaan, mikäli graafinen ilme löytyy jo (esim. “Use the UI design provided in the attached image”)!

WordPress-teeman generointi vaatii Clauden maksullisen version

Kirjoitettuani kehotteen ja enteriä painettuani tekoäly alkoi samantien ruksuttamaan ja kertoi minulle kiitettävän yksityiskohtaisesti, mitä se oli milloinkin tekemässä. Hieman yllättäen näyttikin siltä, että Claude otti kerralla ohjeesta vaariin ja oli tekemässä juuri tismalleen sitä, mitä siltä halusinkin. WordPress-kotisivut syntyvät tällä tavoin huomattavasti nopeammin kuin rakentamalla kaikki alusta asti itse (tämä ei varmaankaan useimpien ihmisten kokemuksien pohjalta ole tekoälyn kanssa toimiessa mikään itsestäänselvyys).

Muutaman minuutin jälkeen Claude lopetti työskentelyn kokonaan ilmoitten, että ilmainen keskusteluaika on käytetty ja pääsisin seuraavaksi jatkamaan työskentelyä illemmalla. Tästä päästäänkin projektin ensimmäiseen konkreettiseen vaatimukseen: generoidaksesi WP-teeman sinulla tulee olla maksullinen Clauden lisenssi! Sivun generointi vie sen verran paljon aikaa ja resursseja Claudelta, ettei ilmaisessa versiossa riitä lähimainkaan paukkuja WordPress-teeman generointiin.

Noh, ei siinä muuta kuin päivittämään tiliä Pro-versioon. Tilin päivitettyäni latasin Clauden uudelleen ja maksullisena käyttäjänä kirjoitin kehoitteen uudestaan Claudeen. Maksulliseen versioon päivitettyäni sain auki myös edistyneemmät kielimallit, joten valitsin pudotusvalikosta “Opus 4.8”-version ja effortiksi (eli karkeasti suomennettuna “työmääräksi”) valitsin korkean, eli “High”:n. Huomaathan, että Claudea ei saa tällä hetkellä suomenkielisellä käyttöliittymällä, joten käyttäjän on tyytyminen englanninkieliseen versioon:

Nyt aloitettuani sivuston generoinnin Pro-lisenssikäyttäjänä homma tulee jatkumaan loppuun asti. Claude kertoo etenemisestään varsin tarkasti, joskin paikoin huonolla suomella sekä englanninkielisillä lauseilla sekoitettuna:

Teeman generointi vie noin 10-15 minuuttia aikaa. Kun teema on generoitu ja valmis, Claude tarjoaa latauslinkin (zip-muodossa) teemaan. Lataa se Download-nappulaa painamalla.

WordPress-teeman asentaminen – vaihe vaiheelta

WordPress-teeman asentaminen – vaihe vaiheelta:

1. Kirjaudu sisään WordPress-sivustosi SpeedZone hallintapaneelin. Sitten kirjaudu sieltä WordPressin hallintaan ja valitse vasemmasta päävalikosta Ulkoasu ja sieltä alavalinta Teemat:

2. Klikkaa otsikon “Teemat” vieressä olevaa “Lisää teema”-nappulaa. Pääset asentamaan juuri luomasi teeman sivustolle. 
3. Valitse Claudesta lataamasi zip-tiedosto ja klikkaa Asenna nyt:

4. Aktivoi asennettu teema ja avaa sivu esikatseluun. 

Mikäli Claude teki työnsä oikein, asennuksen pitäisi mennä vaivatta läpi. Varmista, että juuri asennettu teema on aktiivinen ja mene esikatselemaan sivua:

Kuten kuvasta näkyy, Clauden generoima teema käyttää varsin isokokoista typografiaa ja sinistä huomioväriä nappuloissa. Mutta halusin nähdä, minkälaisia sisältötyyppejä Claude loi teemamme. Loin uuden alasivun WordPressissä ja lisäsin sinne uusia, Clauden generoimia blokkeja:

Ihmetys oli suuri, kun uusia “Agency”-otsakkeen olevia blokkeja ei näy missään, vaikka Claude ylpeänä generointivaiheessa kertoi tismalleen, mitä sisältöjä se oli luonut valmiiksi. Jatkoin väitetysti generoitujen elementtien etsimistä, kunnes huomasin, että Claude oli näemmä katsonut parhaaksi ratkaisuksi generoida sisällöt malleiksi (eng. pattern):

Mallit ovat pitkälti sen näköisiä kuin marketin agencylta voisi odottaa. Elementit ovat myös muokattavissa sisältöjen puolesta (teksti ja kuvat). Claude generoi lopulta 11 mallia teemaan, joita hyödyntää sivustolla. Aloitteleva yritys pystyy varmasti rakentamaan niistä elementeistä toimivan sivuston omilla sisällöillä ja sivuilla.

Miten Claude generoi valmiin sisällön WordPress-teemaan?

Entä jos haluatkin generoida sivun WordPress-teemaan siten, että se generoi sisällöt (tekstit) valmiiksi pohjaan? Kokeilin luoda kollegan hääsivuesimerkin innoittamana oman verkkosivuston suoraan WordPressiin Claudella ja tässä esimerkissä rakennetaan WordPress-kotisivut Claudea hyödyntäen. Kehoitus oli:

“Write me an html template for a wedding themed website, and then convert it to a WordPress theme with editable content blocks (Gutenberg)”

Claude teki työtä käskettyä ja generoi minulle sekä html-tiedoston että WordPress-teeman html-pohjaan perustuen. Claude toden totta loi sivustolle valmiin landing-sivun, jonka päävalikossa löytyivät ankkurilinkit sivulle. Sivun sisältöä muokattiin erillistä pohjaa muokkaamalla valitsemalla WordPressin päävalikosta Ulkoasu -> Editori:

Elementtiä klikkaamalla avautuu WordPressin Gutenberg-editori, joka näyttää sivun rakenteen:

Kuten marketing agency-esimerkissä, Claude generoi hääsivustollekin Malleja Gutenberg-blokkien sijaan (tein myöhemmin pelkän WP-teeman hääsivuista, joissa elementit olivat blokkeja, joten tuntuu olevan vähän sattumaa, missä muodossa Claude generoi sisältöjä).

Valmiiden sisältöjen generointi näyttäisi ensisijaisesti luovan one pager-mallisia toteutuksia Claudella, joka käyttää valmista pohjaa generoitujen Mallien avulla. Hääsivut lienevätkin esimerkkeinä parhaasta päästä sivuista, joita voi Claudella generoida suoraan WordPressiin sisältöjen kera.

Katso hääsivu verkossa täältä!

Kannattaako WordPress-teema generoida tekoälyllä? Yhteenveto

Testasimme useamman WordPress-teeman generointia Claudella, ja kokeilun perusteella voidaan tehdä muutamia huomioita. 

• Claude on jättänyt toisinaan kustomoidut mallit ja blokit generoimatta kokonaan, vaikka se väittää tehneensä ne. Pyynnöt tehdä teema uusiksi blokkien ja mallien kanssa ei aina ole toiminut halutulla tavalla.
• Yllä esitetyn demosivuston rajoite on, että kustomoidut elementit eivät noudata niille editorissa määritettyjä leveyssääntöjä, vaan menevät kapeimman leveyden mukaan (max. 740px leveä). Kokeilin laittaa elementit ryhmän sisälle, antaa ryhmälle sekä mallille maksimileveyden, mutta mallit näkyviät silti itsepintaisesti 740px leveydessä.
• Sivuston ulkoasusta tulee sitä parempi, mitä tarkemmat ohjeet Claudelle antaa siitä, minkälaisen ilmeen sivustolle haluaa. Suosittelenkin, että tekee esim. Figmassa UI-mallin sivusta ja lataa Claudeen kehotteen kylkiäiseksi huomautuksen, että seuraa liitteenä ladattua mallia; tekoäly noudattaa annettua suunnitelmaa hyvin tarkkaan värien, typografian ja elementtien osalta.

Muista suojata myös lomakkeet

Kun uusi WordPress-sivusto on pystyssä, kannattaa muistaa myös sen tietoturva – erityisesti sivustolla olevat lomakkeet, kuten yhteydenottolomake. Suojaamattomat lomakkeet houkuttelevat bottien roskapostia, voivat sekoittaa aitoa käyttäjädataa ja altistavat sivuston esimerkiksi kirjautumislomakkeen brute-force-hyökkäyksille. Lomakkeiden suojaamiseen on kaksi yleistä ja ilmaista vaihtoehtoa:

• Cloudflare Turnstile – luo ilmainen Cloudflare-tili, hae Turnstile-widgetille Site Key ja Secret Key, ja asenna WordPressiin esim. Simple CAPTCHA Alternative with Cloudflare Turnstile -lisäosa.
• Google reCAPTCHA (v3) – luo projekti Google reCAPTCHA-hallintapaneelissa, hae avaimet ja asenna esim. Advanced Google reCAPTCHA -lisäosa. Molemmissa tapauksissa lopuksi valitaan, mitkä lomakkeet (esim. yhteydenottolomake, kirjautuminen, rekisteröityminen) halutaan suojata, ja asetukset testataan ennen julkaisua.

Älä unohda päivityksiä

Lomakkeiden suojaamisen lisäksi yksi yleisimmistä WordPress-sivustojen tietoturva-aukoista syntyy vanhentuneista ydinjärjestelmästä, teemoista ja lisäosista. Suuri osa hyökkäyksistä kohdistuu juuri tunnettuihin haavoittuvuuksiin, joihin on jo olemassa korjaus – mutta jota kukaan ei ole asentanut. Tähän on kaksi hyvää lähestymistapaa:

• Automaattiset päivitykset – WordPress tukee automaattisia pienpäivityksiä oletuksena, mutta myös isommat ydinpäivitykset, teemat ja lisäosat voi asettaa päivittymään automaattisesti (esim. wp-config.php-asetuksilla tai lisäosien, kuten Easy Updates Manager, avulla).
• Säännöllinen monitorointi – jos automaattipäivitykset eivät ole vaihtoehto (esim. yhteensopivuusriskien vuoksi), kannattaa ottaa käyttöön seurantatyökalu tai -palvelu, joka ilmoittaa saatavilla olevista päivityksistä ja mahdollisista haavoittuvuuksista, jotta ne voidaan asentaa hallitusti ja testatusti. Kumpi tapa valitaan, tärkeintä on, ettei sivusto jää unohduksiin – vanhentunut WordPress on yksi suurimmista tietoturvariskeistä myös uudella, muuten hyvin rakennetulla sivustolla.

Yhteenvetona voi todeta, että Clauden avulla voi generoida halutun WordPress-teeman nopeasti ja tehokkaasti. Jos tarpeet sivuston sisällön ja toiminnallisuuden osalta eivät ole monimutkaisia, generoitu teema voi hyvinkin riittää tuoreelle yritykselle, jolle verkkosivuston tärkein tehtävä on näyttää hyvältä ja kertoa ylipäätään bisneksen olemassaolosta. Mutta jos tarpeet sivuston toiminnallisuuden suhteen ovat selvästi monimutkaisempia, generoitu teema on siinä tapauksessa ennemmin hyvä pohja jatkokehitykselle, jonka päälle lähteä rakentamaan uusia ominaisuuksia. Näin voidaan toteuttaa laadukkaat WordPress-kotisivut, jotka vastaavat myös vaativampiin liiketoiminnan tarpeisiin.