De tijden zijn veranderd in WordPressland. Als je een tijd geleden een eenvoudige en betaalbare WordPresssite wilde maken had je drie keuzes. Gaan voor een gratis, maar uitgekleed thema, een gratis versie van een pagebuilder of met heel veel moeite zelf een thema in elkaar zetten. Dat kan natuurlijk lang niet iedereen zo’n thema programmeren. Tegenwoordig heb je echter de mogelijkheid om AI modellen in te zetten voor het programmeren van WordPress thema’s. Het inzetten van kunstmatige intelligentie voor programmeren heet met een Engels woord vibe coding. Het komt erop neer dat het programmeren van een WordPress thema tegenwoordig kan met natuurlijk geschreven Nederlands. Dat is een revolutionaire ontwikkeling als je het mij vraagt.
Deze site
Het is de tweede keer binnen een jaar dat ik mijn persoonlijke blog opnieuw heb opgebouwd. Gebruikte ik eerst een ingewikkelde pagebuilder, nu heb ik mijn eigen thema gemaakt voor deze website. Voor nu vind ik dat het via AI bouwen van een thema nog niet kan voor hele ingewikkelde WordPress websites, maar wel voor een eenvoudige persoonlijke blog als deze. Je kunt de site dan mooier maken dan met een gratis thema. Helemaal gratis is vibecoding van een WordPress website echter niet. De methode die ik gebruikt heb kost een maand chatgpt plus of 1 maand Google AI Pro on te kunnen werken met het AI model van Google, Gemini, allebei zo rond de €20.
De methode die ik gekozen heb is via Chatgpt en de tot nu toe gratis tool Google Stitch. In Google Stitch kun je een prompt opgeven om een design te maken voor je website. Dat design is dan echter nog geen werkend WordPress thema. Om dat te kunnen doen moet je gebruik maken van Visual Studio code. Dat programma is gratis te downloaden en in Visual Studio code kun je een plug-in downloaden die je kunt verbinden met een Chatgpt account om zo gebruikte kunnen maken van het codeermodel codex 5.4. De plug-in maakt het mogelijk om via simpele nederlandse zinnen te komen tot een wordpress thema, nadat je het design eerst hebt ontworpen in Google stitch en de HTML code hebt gekopieerd. Je geeft dan een prompt op als, ‘ maak een modern WordPress thema van de bestanden in dit project, zorg ervoor dat het voldoet aan moderne design standaarden. Uiteraard kan de pompt uitgebreider, maar dit zal al genoeg zijn om HTML en CSS bestanden om te zetten in een wordpress thema. Google Stitch levert er ook een screenshot bij van de website en als je die in je project map doet dan ‘weet’ chatgpt wel wat ermee moet gebeuren om datzelfde design als in Google stitch te bereiken of iets wat er heel veel op lijkt.
Daarna is een kwestie van brompts schrijven die kleine foutjes uit de code gaan halen. Op deze manier heb ik deze website kunnen bouwen. Let echter wel op, ook in betaalde versies van Chatgpt zijn limieten verbonden aan het aantal prompts wat je kunt opgeven. Het is dus slim om een zo uitgebreid mogelijke prompt te schrijven in een keer. Dit zou je ook kunnen laten doen door het gratis model van chatgpt. Een vrij simpel antwoord op een chat kost namelijk nauwelijks tokens dus je kunt beter eerst op die manier een duidelijk plan te hebben voor je website en dat dan later uitbouwen. Op die manier bespaar je tijd en past het genereren van je website binnen het goedkoopste plan van Chatgpt.
Wondermiddel?
Nee, vibecoding is geen wondermiddel om heel snel te komen tot een website. Het vergt namelijk oefening om de juiste prompt te gebruiken om voor elkaar te krijgen wat je wil. Het kan zijn dat je toch een paar uur bezig bent met het genereren van een goede website, zelfs aan de hand van een stitch design. Vaak ” begrijpt’ het ai model niet meteen wat je voor ogen hebt en daarnaast is enige kennis van webdesign wel handig om te weten wat je het codex model moet vragen. Daarnaast moet je weten wat de bestandstructuur is van een wordpress thema om te kunnen snappen of het codex model doet wat jij vraagt. Mensen moeten ook snappen dat een AI model in principe helemaal niets weet. Het is alleen ‘ getraind’ met een hoop data om zo makkelijker te kunnen voorspellen wat er na een bepaalde prompt moet gebeuren. Woorden als begrijpen en trainen zijn eigenlijk niet van toepassing op een ai model maar de analogie is wel begrijpelijk omdat wat er precies gebeurd wanneer een bepaald model wordt aangeroepen niet in een aantal zinnen of woorden is uit te leggen. Juist omdat het tasten in het duister is wat er precies gebeurt moet je altijd kritisch blijven op de code die wordt geschreven, zodoende moet je er iets vanaf weten om bijvoorbeeld te weten dat je inderdaad een website aan het bouwen bent in plaats van je harde schijf te laten formatteren. Ai is dan ook vooral in te zetten als een manier om tijd te besparen, niet om als volledige vervanging te dienen voor het fenomeen webdesign.
Toekomst
Ga ik in de toekomst vaker AI gebruiken om een wordpress thema en website in elkaar te zetten? Ik verwacht van wel, al denk ik dat ik voor bepaalde projecten toch nog een pagebuilder nodig zal hebben. Al was het alleen maar omdat ik geen programmeur ben en ik mijn prompts dus niet als zodanig kan opstellen. Daar ontbreekt het mij aan kennis over PHP, HTML en CSS als hobbyist. Ik vond dit echter wel een interessant experiment.
