{"id":66315,"date":"2026-07-22T15:20:06","date_gmt":"2026-07-22T13:20:06","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=66315&#038;preview=true&#038;preview_id=66315"},"modified":"2026-07-28T11:38:04","modified_gmt":"2026-07-28T09:38:04","slug":"wordpress-ai","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/","title":{"rendered":"AI-integratie en WordPress: een diepgaande analyse van de architectuur en een praktijkvoorbeeld"},"content":{"rendered":"<p>V\u00f3\u00f3r <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/\">WordPress 7.0<\/a> moest elke <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai-plugins\/\">plugin die AI-features toevoegde<\/a> zelf een API-sleutel opvragen en beheren om met een AI-provider te kunnen communiceren.<\/p>\n<p>Dat kostte onnodig veel code en onderhoud. Je nam zware SDK-bibliotheken van providers op in je plugins en schreef cURL-verzoeken die per provider verschilden.<\/p>\n<p>Met de native <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/#integration-with-ai\">AI-integratie in WordPress 7.0<\/a> is die versnippering verleden tijd. WordPress heeft nu \u00e9\u00e9n centraal scherm waarin je de inloggegevens van verschillende AI-providers instelt, plus een nieuwe PHP-API. Daarmee stuur je prompts, instructies, mediabestanden en datastructuren door, terwijl WordPress Core de verzoeken afhandelt.<\/p>\n<p>De nieuwe architectuur levert zowel sitebeheerders als plugin-ontwikkelaars flinke voordelen op.<\/p>\n<p>Beheerders stellen AI niet langer per plugin apart in. Vanaf WordPress 7.0 installeer en activeer je je connector-plugins, voer je je API-sleutels in in het Connectors-scherm en zijn ze meteen beschikbaar voor elke plugin met AI-features op je site. Je houdt het AI-gebruik bij, wisselt van model of trekt de toegang van een provider voor alle plugins in met \u00e9\u00e9n klik.<\/p>\n<p>Voor plugin-ontwikkelaars is de winst n\u00f3g groter: betere gegevensbeveiliging, overdraagbare code en een stuk minder <a href=\"https:\/\/kinsta.com\/nl\/blog\/schaalbare-groei-bureaus\/#technical-debt\">technische schuld<\/a>.<\/p>\n<p>Tijd om de nieuwe AI-architectuur van WordPress van dichtbij te bekijken.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>De drie lagen van de WordPress AI-architectuur<\/h2>\n<p>Je WordPress-sites zijn tegenwoordig standaard klaar voor AI. Niet met kant-en-klare AI-features, maar met de basis waarop je AI-functionaliteit bouwt.<\/p>\n<p>De nieuwe architectuur bestaat uit drie lagen:<br \/>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>AI-connector<\/h3>\n<p>V\u00f3\u00f3r <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-7-0\/\">WordPress 7.0<\/a> had elke plugin met AI-features een eigen systeem nodig om je API-sleutels op te slaan en te beheren. Je inloggegevens stonden hardcoded in de plugin of werden beheerd via een custom instellingenpagina. Geen van beide is een prettige manier om met gevoelige gegevens om te gaan.<\/p>\n<figure id=\"attachment_211404\" aria-describedby=\"caption-attachment-211404\" style=\"width: 1462px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-211404\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/06\/connectors-screen.png\" alt=\"Het Connectors-scherm\" width=\"1462\" height=\"1404\"><figcaption id=\"caption-attachment-211404\" class=\"wp-caption-text\">Het centrale AI Connectors-scherm in het WordPress-dashboard.<\/figcaption><\/figure>\n<p>In \u00e9\u00e9n centraal scherm stel je al je AI-providers in. Dat levert een paar duidelijke voordelen op voor het beheer van je site.<\/p>\n<p>Voor beheer en beveiliging is het grootste voordeel dat je je providers \u00e9\u00e9n keer instelt in het Connectors-scherm en er daarna geen omkijken meer naar hebt, hoeveel plugins er ook gebruik van maken. Moet je je API-sleutels wijzigen? Dan werk je ze in \u00e9\u00e9n keer bij in het Connectors-scherm, in plaats van plugin voor plugin.<\/p>\n<p>Centrale opslag van inloggegevens maakt je site ook veiliger: gevoelige gegevens liggen niet langer verspreid over plugins van derden die slecht geschreven of onbetrouwbaar kunnen zijn.<\/p>\n<p>Daarnaast wordt je code overdraagbaar. Je plugins hoeven niet te weten welke AI-provider je gebruikt, want de nieuwe architectuur trekt authenticatie los van de pluginlogica. Wissel je van AI-provider, dan blijft je plugin gewoon werken zonder dat je \u00e9\u00e9n regel code aanpast.<\/p>\n<p>De echte doorbraak zit erin dat sitebeheerders meerdere connectors tegelijk kunnen instellen. Stuurt een plugin een verzoek, dan kiest WordPress zelf de meest geschikte AI-provider en het meest geschikte model voor het antwoord, op basis van de <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/24\/introducing-the-ai-client-in-wordpress-7-0\/#ai-model-preferences\" target=\"_blank\" rel=\"noopener noreferrer\">configuratie van de plugin<\/a> en de mogelijkheden van de beschikbare modellen.<\/p>\n<h3>AI Client<\/h3>\n<p>Waar het Connectors-scherm de configuratie van AI-providers regelt, geeft de <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/24\/introducing-the-ai-client-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">AI Client<\/a> ontwikkelaars de tool om met AI-modellen te werken.<\/p>\n<p>Het is een native interface die de communicatie met AI-modellen standaardiseert via de globale functie <code>wp_ai_client_prompt()<\/code> en een vaste set PHP-methoden.<\/p>\n<h4>Minder technische schuld<\/h4>\n<p>Voor ontwikkelaars zit het grootste voordeel in minder technische schuld en minder afhankelijkheden. V\u00f3\u00f3r WordPress 7.0 betaalde je voor AI-features een hoge prijs in onderhoud. Je bundelde SDK&#8217;s van derden (zoals de offici\u00eble bibliotheken van <a href=\"https:\/\/developers.openai.com\/api\/docs\/libraries\" target=\"_blank\" rel=\"noopener noreferrer\">OpenAI<\/a> of <a href=\"https:\/\/platform.claude.com\/docs\/en\/api\/client-sdks\" target=\"_blank\" rel=\"noopener noreferrer\">Anthropic<\/a>) en hield doorlopend de versies in de gaten. Dat maakte je plugin zwaar en compatibiliteitsproblemen waarschijnlijk.<\/p>\n<p>Daar kwamen nog eens veel regels code bij voor de netwerklogica en het parsen van antwoorden. Die code was bovendien providerspecifiek: wisselde je van AI-provider, dan herschreef je de complete netwerklaag van je plugin.<\/p>\n<p>De AI Client haalt dat probleem bij de wortel weg door het zware werk naar WordPress Core te verplaatsen. Je code wordt volledig providerneutraal: je schrijft je instructies \u00e9\u00e9n keer en WordPress vertaalt ze naar het &#8216;dialect&#8217; van het model.<\/p>\n<h4>Intelligente modelselectie<\/h4>\n<p>Een sterk punt van de fluent interface van de AI Client is dat je voorkeursmodellen instelt met de methode <code>using_model_preference()<\/code>, beschikbaar via de builderfunctie <code>wp_ai_client_prompt()<\/code>. Daarmee geef je een geordende lijst met modellen op voor de specifieke taak van je plugin. De code hieronder vraagt bijvoorbeeld tekstgeneratie aan met drie voorkeursmodellen:<\/p>\n<pre><code class=\"language-php\">$text_result = wp_ai_client_prompt( 'Convert the following transcript into a concise, blog-ready draft.' )\n\t-&gt;using_model_preference(\n\t\t'gemini-2.5-flash',\n\t\t'claude-3-5-sonnet',\n\t\t'gpt-4o'\n\t)\n\t-&gt;generate_text();<\/code><\/pre>\n<p>WordPress kijkt naar de providers in het Connectors-scherm, loopt de modellen uit je plugincode af en pakt de eerste connector die ook op de site beschikbaar is. Is geen van je opgegeven modellen beschikbaar onder de actieve Connectors, dan negeert WordPress je voorkeurslijst en valt het terug op het eerste compatibele model dat op de site is ingesteld.<\/p>\n<p>Zo blijft je plugin werken, ook als de sitebeheerder overstapt naar een andere AI-provider.<\/p>\n<h3>AI-provider<\/h3>\n<p>Een AI-provider is het bedrijf dat de large language models (LLM&#8217;s) die we dagelijks gebruiken bezit, traint en host. OpenAI, Google Gemini en Anthropic zijn de bekendste AI-providers waarvoor WordPress 7.0 aparte connectors ondersteunt, maar ontwikkelaars kunnen ook zelf extra custom providers registreren.<\/p>\n<p>Roept je plugincode de methode <code>generate_text()<\/code> aan, of een andere generatiemethode, dan bundelt WordPress de gegevens en stuurt die via het endpoint van de connector naar de AI-provider. Achter de schermen gebeurt dit:<\/p>\n<ul>\n<li>Allereerst ontvangt de AI-provider de invoertekst plus eventuele mediabestanden (de payload).<\/li>\n<li>De provider verwerkt het verzoek en past daarbij eventuele systeeminstructies toe.<\/li>\n<li>Vervolgens genereert hij de output, als vrije tekst of als JSON-object.<\/li>\n<li>Ten slotte stuurt hij de output via een HTTP-respons terug naar WordPress.<\/li>\n<\/ul>\n<p>Elke provider biedt een breed scala aan modellen met verschillende mogelijkheden, snelheden en prijzen. Denk hierbij aan modellen die alleen tekst verwerken, multimodale modellen die naast een tekstprompt ook mediabestanden (audio, afbeeldingen, video) accepteren, en modellen voor specifieke taken zoals het genereren van afbeeldingen of spraak-naar-tekst.<\/p>\n<figure id=\"attachment_211411\" aria-describedby=\"caption-attachment-211411\" style=\"width: 1718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-211411\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/06\/gemini-3-models.png\" alt=\"De Gemini 3-modellen\" width=\"1718\" height=\"1534\"><figcaption id=\"caption-attachment-211411\" class=\"wp-caption-text\">De Gemini 3-modellenfamilie van Google.<\/figcaption><\/figure>\n<p>Welke modellen beschikbaar zijn op een WordPress-site hangt dus af van de AI-providers die je instelt in het Connectors-scherm. Je plugin bepaalt niet welke provider er wordt gebruikt.<\/p>\n<h2>De functie wp_ai_client_prompt() van dichtbij<\/h2>\n<p>Met de functie <code>wp_ai_client_prompt()<\/code> communiceren plugins op een gestandaardiseerde manier met AI-modellen: geen externe bibliotheken, geen providerspecifieke configuratie en geen handmatige HTTP-verzoeken in je code.<\/p>\n<p>Je schrijft je code \u00e9\u00e9n keer, waarna WordPress het zware werk overneemt en je instructies vertaalt naar het &#8216;dialect&#8217; van elk model.<\/p>\n<p>De functie geeft een instantie terug van de <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_ai_client_prompt_builder\/\" target=\"_blank\" rel=\"noopener noreferrer\">klasse <code>WP_AI_Client_Prompt_Builder<\/code><\/a>, met een fluent interface van methoden die je aan elkaar koppelt om je prompt op te bouwen. De klasse wordt <a href=\"https:\/\/core.trac.wordpress.org\/browser\/tags\/7.0\/src\/wp-includes\/ai-client\/class-wp-ai-client-prompt-builder.php#L33\" target=\"_blank\" rel=\"noopener noreferrer\">als volgt beschreven<\/a>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Fluent builder for constructing AI prompts, returning WP_Error on failure.\n *\n * This class provides a fluent interface for building prompts with various\n * content types and model configurations. It wraps the PHP AI Client SDK's\n * PromptBuilder and adds WordPress-specific behavior including WP_Error\n * handling instead of exceptions, snake_case method naming, and integration\n * with the Abilities API.\n *\n * Only the generating methods will return a WP_Error, to not break the fluent\n * interface. As soon as any exception is caught in a chain of method calls,\n * the returned instance will be in an error state, and all subsequent method\n * calls will be no-ops that just return the same error state instance. Only\n * when a generating method is called, the WP_Error will be returned.\n *\/<\/code><\/pre>\n<p><code>wp_ai_client_prompt()<\/code> voert zelf geen HTTP-verzoek uit. De functie maakt een <code>WP_AI_Client_Prompt_Builder<\/code>-object aan en geeft dat terug. Meer dan 50 configuratiemethoden vullen de private eigenschappen van dat object via een <a href=\"https:\/\/en.wikipedia.org\/wiki\/Fluent_interface\" target=\"_blank\" rel=\"noopener noreferrer\">fluent interface<\/a>, waardoor de code goed leesbaar en makkelijk te schrijven blijft.<\/p>\n<p>Een greep uit de methoden die je het vaakst zult gebruiken:<\/p>\n<ul>\n<li><code>with_text()<\/code>: Voegt tekst toe aan het huidige bericht.<\/li>\n<li><code>with_file()<\/code>: Voegt een bestand toe aan het huidige bericht.<\/li>\n<li><code>with_history()<\/code>: Voegt berichten uit de gespreksgeschiedenis toe.<\/li>\n<li><code>using_model_preference()<\/code>: Stelt de voorkeursmodellen in, in de volgorde waarin ze worden ge\u00ebvalueerd.<\/li>\n<li><code>using_system_instruction()<\/code>: Stelt de systeeminstructie in.<\/li>\n<li><code>using_max_tokens()<\/code>: Stelt het maximale aantal te genereren tokens in.<\/li>\n<li><code>using_temperature()<\/code>: Stelt de temperatuur voor de generatie in.<\/li>\n<li><code>using_top_p()<\/code>: Stelt de top-p-waarde voor de generatie in.<\/li>\n<li><code>using_top_k()<\/code>: Stelt de top-k-waarde voor de generatie in.<\/li>\n<li><code>as_output_file_type()<\/code>: Stelt het type uitvoerbestand in.<\/li>\n<li><code>as_json_response()<\/code>: Configureert de prompt voor een JSON-respons.<\/li>\n<li><code>is_supported_for_text_generation()<\/code>: Controleert of de actieve configuratie tekstgeneratie ondersteunt.<\/li>\n<li><code>is_supported_for_image_generation()<\/code>: Controleert of de actieve configuratie het genereren van afbeeldingen ondersteunt.<\/li>\n<li><code>is_supported_for_text_to_speech_conversion()<\/code>: Controleert of de actieve configuratie tekst-naar-spraak ondersteunt.<\/li>\n<li><code>is_supported_for_video_generation()<\/code>: Controleert of de actieve configuratie het genereren van video&#8217;s ondersteunt.<\/li>\n<li><code>generate_text()<\/code>: Genereert een tekstresultaat op basis van de prompt.<\/li>\n<li><code>generate_image()<\/code>: Genereert een afbeelding op basis van de prompt.<\/li>\n<li><code>convert_text_to_speech()<\/code>: Zet tekst om in spraak.<\/li>\n<li><code>generate_speech()<\/code>: Genereert spraak op basis van de prompt.<\/li>\n<li><code>generate_video()<\/code>: Genereert een video op basis van de prompt.<\/li>\n<\/ul>\n<p>Bekijk de <a href=\"https:\/\/github.com\/WordPress\/wordpress-develop\/blob\/7.0\/src\/wp-includes\/ai-client\/class-wp-ai-client-prompt-builder.php#L33\" target=\"_blank\" rel=\"noopener noreferrer\">broncode van WordPress Core<\/a> voor de volledige lijst met methoden.<\/p>\n<p>Stel dat je een audiobestand nauwkeurig wilt transcriberen. Dan gebruik je de functie zo:<\/p>\n<pre><code class=\"language-php\">$transcription_builder = wp_ai_client_prompt( $prompt )\n\t-&gt;with_file( $audio_base64, $mime_type )\n\t-&gt;using_temperature( 0.1 );\n\nif ( ! $transcription_builder-&gt;is_supported_for_text_generation() ) {\n\t\/\/ No configured provider supports the current prompt configuration.\n\treturn new WP_Error(\n\t\t'no_supported_model',\n\t\t'No configured AI model can process this request. Configure a provider in Settings &gt; Connectors.',\n\t\tarray( 'status' =&gt; 400 )\n\t);\n}\n\n$transcript = $transcription_builder-&gt;generate_text();<\/code><\/pre>\n<p>Wat deze code doet:<\/p>\n<ul>\n<li><code>$prompt<\/code>: de string met je belangrijkste instructies.<\/li>\n<li><code>with_file()<\/code>: schakelt de multimodale mogelijkheden van de interface in. In het voorbeeld hierboven geven we de binaire audio door als Base64-string, samen met het bijbehorende MIME-type.<\/li>\n<li><code>using_temperature()<\/code>: bepaalt hoe deterministisch het antwoord is. Een lage waarde (0,1) houdt het model dicht bij de audio, een hogere waarde geeft meer creatieve vrijheid. Combineer deze methode met <code>using_top_p()<\/code> (top probability) voor meer controle over de output.<\/li>\n<li><code>is_supported_for_text_generation()<\/code>: controleert of de actieve connectors voldoen aan de eisen van de huidige prompt, v\u00f3\u00f3rdat je resources besteedt aan een netwerkverzoek.<\/li>\n<li><code>generate_text()<\/code>: de afsluitende methode van de fluent interface. Die stuurt het samengestelde HTTP-verzoek naar de actieve provider en geeft de gegenereerde tekst terug, of een <code>WP_Error<\/code>-object als het misgaat.<\/li>\n<\/ul>\n<p>Samengevat: we sturen de AI-provider een tekstprompt met een audiobestand, zetten de temperatuur laag voor een zo deterministisch mogelijk resultaat, controleren of de actieve configuratie tekstgeneratie ondersteunt en halen de transcriptie uit het antwoord van de AI.<\/p>\n<p>Met een tweede prompt sturen we het ruwe transcript terug naar de AI, voor een antwoord in de vorm van een JSON-object:<\/p>\n<pre><code class=\"language-php\">$structured_json = wp_ai_client_prompt(\n\t\"Convert the following transcript into a concise, blog-ready draft in American English.\\n\" .\n\t\"Return JSON with a post title and body sections.\\n\" .\n\t\"Each section must have: heading, level (2 or 3), and paragraphs (array).\\n\" .\n\t\"If useful, include bullet_points (array) for short actionable lists.\\n\" .\n\t\"Use short, clear headings and readable paragraph text.\\n\\n\" .\n\t\"Transcript:\\n\" . $transcript\n)\n\t-&gt;using_system_instruction( \"You are a professional WordPress content editor. Always write in American English (use appropriate spelling, grammar, and conventions for that language variant).\" )\n\t-&gt;using_temperature( 0.4 )\n\t-&gt;as_json_response( $schema )\n\t-&gt;generate_text();<\/code><\/pre>\n<p>In deze tweede prompt gebruiken we extra methoden om andere mogelijkheden van de API te benutten:<\/p>\n<ul>\n<li><code>using_system_instruction()<\/code>: bepaalt de context en de rol van het model, en scheidt de persona (&#8216;een professionele WordPress-contentredacteur&#8217;) duidelijk van de data.<\/li>\n<li><code>using_temperature( 0.4 )<\/code>: zet de temperatuur hoger dan bij de transcriptie, zodat het model een rijkere woordenschat gebruikt en vlottere content produceert.<\/li>\n<li><code>as_json_response()<\/code>: dwingt het model een JSON-string terug te geven die overeenkomt met de structuur uit je <code>$schema<\/code>-variabele. Handig als je content voorbereidt voor Gutenberg.<\/li>\n<\/ul>\n<p>Met output in JSON haal je losse velden eruit en koppel je die programmatisch aan native Gutenberg-blokken, met standaard WordPress-functies.<\/p>\n<p>Een uitgebreider overzicht van de AI Client vind je in de dev note <a href=\"https:\/\/make.wordpress.org\/core\/2026\/03\/24\/introducing-the-ai-client-in-wordpress-7-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">&#8216;Introducing the AI Client in WordPress 7.0&#8217;<\/a>.<\/p>\n<h2>Zet een audiobestand met AI om in Gutenberg-ready content<\/h2>\n<p>Nu de drie lagen van de WordPress AI-architectuur duidelijk zijn, zetten we ze in een praktijkvoorbeeld. In dit deel bouw je de kernlogica van een plugin die uit een audiobestand rechtstreeks een goed opgebouwd conceptartikel genereert.<\/p>\n<p>De toepassingen zijn breed. Denk hierbij aan een volledig artikel op basis van een kort spraakbericht uit je berichtenapp, of aan een interview dat je met je telefoon hebt opgenomen en laat transcriberen.<\/p>\n<p>Voor deze functionaliteit bouw je een custom plugin. De standaardbestanden en het volledige registratieproces slaan we hier over; voor de basis van plugin-ontwikkeling kun je terecht bij <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/\">andere tutorials<\/a> op de Kinsta-blog of bij de <a href=\"https:\/\/make.wordpress.org\/cli\/handbook\/how-to\/how-to-create-custom-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">offici\u00eble documentatie van WordPress.org<\/a>.<\/p>\n<p>We richten ons op de kernlogica waarmee je plugin met je AI-provider communiceert. De volledige plugin kun je bekijken en downloaden in <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\" target=\"_blank\" rel=\"noopener noreferrer\">deze GitHub-repository<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>De voorbeeldplugin in deze tutorial is gebouwd op WordPress 7.0 en werkt niet op oudere versies van het CMS.<\/p>\n<\/aside>\n\n<h3>Wat deze plugin doet<\/h3>\n<p>Ga om te beginnen naar de <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub-projectpagina<\/a> en download het ZIP-bestand van de plugin. Log daarna in op je WordPress 7.0-dashboard en upload het via <strong>Plugins<\/strong> &gt; <strong>Add plugin <\/strong>&gt; <strong>Upload plugin<\/strong>. Zodra de plugin is ge\u00efnstalleerd en geactiveerd, kun je deze tutorial volgen.<\/p>\n<p>De <strong>AI Content Builder-plugin<\/strong> voegt een custom instellingenzijbalk toe, die je opent via het icoon rechtsboven in de blokeditor. In die zijbalk zit een uploadveld voor audiobestanden en een schakelaar waarmee je de AI de huidige artikeltitel laat overschrijven.<\/p>\n<figure id=\"attachment_211625\" aria-describedby=\"caption-attachment-211625\" style=\"width: 1612px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-211625\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/06\/ai-content-builder-sidebar.png\" alt=\"De zijbalk van AI Content Builder\" width=\"1612\" height=\"1054\"><figcaption id=\"caption-attachment-211625\" class=\"wp-caption-text\">De AI Content Builder-plugin voegt een custom instellingenzijbalk toe aan de blokeditor.<\/figcaption><\/figure>\n<p>De knop <strong>Upload Audio<\/strong>\u00a0opent de media-uploader van WordPress. Daar upload je een nieuw audiobestand of kies je een bestaand bestand uit je mediabibliotheek.<\/p>\n<figure id=\"attachment_211626\" aria-describedby=\"caption-attachment-211626\" style=\"width: 1560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-211626\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/06\/select-or-upload-media.png\" alt=\"De WordPress-mediabibliotheek\" width=\"1560\" height=\"1328\"><figcaption id=\"caption-attachment-211626\" class=\"wp-caption-text\">Selecteer of upload audiobestanden in de WordPress-mediabibliotheek.<\/figcaption><\/figure>\n<p>Zodra het audiobestand is geladen, stuurt de knop <strong>Generate Content <\/strong>een asynchroon verzoek naar je actieve AI-provider.<\/p>\n<figure id=\"attachment_211627\" aria-describedby=\"caption-attachment-211627\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-211627\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/06\/generate-content-button.png\" alt=\"De zijbalk van de plugin\" width=\"1616\" height=\"1062\"><figcaption id=\"caption-attachment-211627\" class=\"wp-caption-text\">De zijbalk van de plugin met de actieve knop &#8216;Generate Content&#8217;.<\/figcaption><\/figure>\n<p>De afbeelding hieronder toont het conceptartikel dat de AI in een paar seconden genereerde.<\/p>\n<figure id=\"attachment_211628\" aria-describedby=\"caption-attachment-211628\" style=\"width: 1612px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-211628\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/06\/ai-generated-post-content.png\" alt=\"Door AI gegenereerde markup\" width=\"1612\" height=\"1336\"><figcaption id=\"caption-attachment-211628\" class=\"wp-caption-text\">Een netjes opgemaakt conceptartikel, door de AI gegenereerd uit een ruw audiobestand.<\/figcaption><\/figure>\n<p>De resulterende content is opgebouwd uit native Gutenberg-blokken: alinea&#8217;s, koppen en lijsten.<\/p>\n<figure id=\"attachment_211629\" aria-describedby=\"caption-attachment-211629\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-211629\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/06\/post-content-in-code-editor.png\" alt=\"Goed gestructureerde markup in de code-editor\" width=\"1616\" height=\"1396\"><figcaption id=\"caption-attachment-211629\" class=\"wp-caption-text\">Goed gestructureerde markup in de code-editor van WordPress.<\/figcaption><\/figure>\n<p>Nu de logica van de plugin.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Deze plugin is speciaal voor deze tutorial gemaakt en dient alleen ter illustratie. Gebruik hem niet in een productieomgeving.<\/p>\n<\/aside>\n\n<h3>Wat je nodig hebt voor deze plugin<\/h3>\n<p>Dit heb je nodig om een WordPress-plugin te bouwen die via de nieuwe AI-architectuur je artikelcontent genereert:<\/p>\n<ul>\n<li>WordPress 7.0+<\/li>\n<li>Een API-sleutel van een AI-provider met een model dat spraak naar tekst omzet. In ons voorbeeld gebruiken we Google AI.<\/li>\n<li>Je favoriete IDE. Voor deze plugin gebruikten we VS Code.<\/li>\n<li>Gedegen kennis van ontwikkelen voor WordPress en Gutenberg, REST-API&#8217;s, PHP en JavaScript.<\/li>\n<\/ul>\n<p>Node.js, buildprocessen of externe bibliotheken heb je niet nodig: de plugin draait volledig op de native API&#8217;s van WordPress Core. Het resultaat is een lichte, veilige plugin zonder technische schuld.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Vanwege de lengte richten de volgende paragrafen zich alleen op de code die de communicatie met de AI Client regelt en de door AI gegenereerde content verwerkt. De rest van de code staat volledig gedocumenteerd in de <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\/tree\/35ef318c10768969e235c89617a59cc4b6b38eb4\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub-repository<\/a>.<\/p>\n<\/aside>\n\n<h3>Structuur van de plugin en minimale WordPress-versie<\/h3>\n<p>De AI Content Builder-plugin bestaat uit twee bestanden:<\/p>\n<ul>\n<li><code>ai-content-builder.php<\/code><\/li>\n<li><code>editor.js<\/code><\/li>\n<\/ul>\n<p>De minimaal vereiste WordPress-versie is 7.0. Zet dat dus goed in de header van de plugin:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: AI Content Builder\n * Description: Gutenberg sidebar plugin that uploads audio and generates post content using the WordPress 7.0 AI Client.\n * Version: 1.0.0\n * Requires at least: 7.0\n * Requires PHP: 8.0\n * Author: Your Name\n * License: GPL-2.0-or-later\n * Text Domain: ai-content-builder\n *\/<\/code><\/pre>\n<p>Met dat op zijn plek kijken we naar het bouwproces van een plugin met AI-features voor WordPress.<\/p>\n<h3>De datastroom van de plugin<\/h3>\n<p>Voordat we de code in duiken, eerst de route die de data aflegt: van de WordPress-backend (de blokeditor) naar de PHP-server en de AI-provider, en weer terug.<\/p>\n<p><a href=\"#register-api-endpoint\">1. Van browser naar server: asynchrone REST-call<\/a>: de browser stuurt de audio-ID naar het custom REST-endpoint van de plugin. Om te voorkomen dat de interface blokkeert, registreren we een REST-endpoint dat asynchrone verzoeken naar de PHP-server toestaat.<\/p>\n<p><a href=\"#first-ai-pass\">2. Eerste AI-ronde: spraak-naar-tekst<\/a>: de server vangt het verzoek op, haalt de audio uit de database en vraagt de AI Client om de ruwe transcriptie.<\/p>\n<p><a href=\"#second-ai-pass\">3. Tweede AI-ronde: content structureren<\/a>: de server stuurt de ruwe transcriptie terug naar de AI Client, met het verzoek er een gestructureerd JSON-object van te maken.<\/p>\n<p><a href=\"#block-generation\">4. Data invullen en blokken genereren<\/a>: het JavaScript (JS) ontvangt het gestructureerde JSON-object, normaliseert het en koppelt de velden aan native Gutenberg-blokken.<\/p>\n<p>Hieronder de logica achter elke fase.<\/p>\n<h3 id=\"register-api-endpoint\">1. Een custom API-endpoint registreren<\/h3>\n<p>De eerste stap in de <strong>AI Content Builder-plugin<\/strong> is het registreren van een API-endpoint. Dat is essentieel, omdat het AI-model seconden tot zelfs minuten bezig kan zijn met het verwerken van de audio en het genereren van een antwoord. <strong>Met een REST-endpoint verstuur je asynchrone verzoeken vanuit de bedieningselementen in de zijbalk, zodat de interface niet blokkeert.<\/strong><\/p>\n<p>Een custom API-endpoint laat je bovendien veilige AI-calls doen zonder inloggegevens bloot te geven, via het ingebouwde authenticatiesysteem van WordPress.<\/p>\n<p>De logica voor het registreren en initialiseren van het endpoint staat in het PHP-bestand van de plugin, in de klassemethoden <code>init()<\/code> en <code>register_rest_routes()<\/code>.<\/p>\n<pre><code class=\"language-php\">public static function init(): void {\n\n\t\/\/ Register the custom REST endpoint used by the sidebar JS.\n\tadd_action( 'rest_api_init', array( __CLASS__, 'register_rest_routes' ) );\n\n\t...\n}<\/code><\/pre>\n<p>Door de aanroep aan de hook <code>rest_api_init<\/code> te koppelen, registreert de plugin de route pas wanneer er een REST API-verzoek binnenkomt. Dat scheelt onnodige vertraging bij het laden van pagina&#8217;s.<\/p>\n<p>Routes configureer je met de methode <code>register_rest_routes()<\/code>, zoals in de code hieronder:<\/p>\n<pre><code class=\"language-php\">public static function register_rest_routes(): void {\n\tregister_rest_route(\n\t\tself::REST_NAMESPACE,\n\t\tself::REST_ROUTE,\n\t\tarray(\n\t\t\t'methods'             =&gt; WP_REST_Server::CREATABLE, \/\/ Alias for POST.\n\t\t\t'callback'            =&gt; array( __CLASS__, 'handle_generate_request' ),\n\t\t\t'permission_callback' =&gt; static function (): bool {\n\t\t\t\t\/\/ Reject unauthenticated or insufficiently privileged requests early.\n\t\t\t\treturn current_user_can( 'edit_posts' );\n\t\t\t},\n\t\t\t'args'                =&gt; array(\n\t\t\t\t'audio_id' =&gt; array(\n\t\t\t\t\t'type'     =&gt; 'integer',\n\t\t\t\t\t'required' =&gt; true,\n\t\t\t\t),\n\t\t\t),\n\t\t)\n\t);\n}<\/code><\/pre>\n<p>Wat deze methode doet:<\/p>\n<ul>\n<li>De <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/\" target=\"_blank\" rel=\"noopener noreferrer\">functie <code>register_rest_route()<\/code><\/a> heeft drie parameters: de namespace van de route, de route zelf en een configuratie-array.<\/li>\n<li><code>WP_REST_Server::CREATABLE<\/code> is een alias voor de POST-methode en zorgt voor maximale compatibiliteit met de interne architectuur van WordPress.<\/li>\n<li><code>permission_callback<\/code> is een anonieme functie die de toegang beperkt tot ingelogde gebruikers die hun eigen artikelen mogen aanmaken en bewerken. Bij ongeautoriseerde toegang blokkeert WordPress het verzoek v\u00f3\u00f3r verwerking en geeft het automatisch een <a href=\"https:\/\/kinsta.com\/nl\/blog\/fout-401\/\">401 Unauthorized<\/a>&#8211; of <a href=\"https:\/\/kinsta.com\/nl\/blog\/403-forbidden-foutmelding\/\">403 Forbidden-fout<\/a> terug.<\/li>\n<li><code>args<\/code> is een optionele array met extra parameters waarmee je het API-antwoord bijstuurt. Je geeft er onder meer mee aan welke data het verzoek aan het endpoint moet teruggeven.<\/li>\n<li><code>audio_id<\/code> is een array met parameters die het vereiste datatype vastlegt. Is de waarde geen geheel getal of ontbreekt hij, dan stopt de REST API de uitvoering met een foutmelding.<\/li>\n<\/ul>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Meer over <a href=\"https:\/\/developer.wordpress.org\/rest-api\/extending-the-rest-api\/routes-and-endpoints\/\" target=\"_blank\" rel=\"noopener noreferrer\">routes en endpoints<\/a> lees je in de offici\u00eble documentatie.<\/p>\n<\/aside>\n\n<p>Tot slot moet de zijbalk van de editor weten waar de data naartoe gaat. Daarvoor gebruik je de functie <code>wp_localize_script()<\/code> binnen de methode <code>enqueue_editor_assets()<\/code>.<\/p>\n<pre><code class=\"language-php\">public static function enqueue_editor_assets(): void {\n\t...\n\n\twp_localize_script(\n\t\t'ai-content-builder-editor',\n\t\t'AICBData',\n\t\tarray(\n\t\t\t'restPath' =&gt; '\/' . self::REST_NAMESPACE . self::REST_ROUTE,\n\t\t\t'nonce'    =&gt; wp_create_nonce( 'wp_rest' ),\n\t\t)\n\t);\n}<\/code><\/pre>\n<ul>\n<li>De <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/\" target=\"_blank\" rel=\"noopener noreferrer\">functie <code>wp_localize_script()<\/code><\/a> koppelt normaal gesproken data aan een geregistreerd script voor een JavaScript-variabele. Hier gebruiken we hem om data van PHP naar JavaScript door te geven via het globale object <code>AICBData<\/code>.<\/li>\n<li><code>restPath<\/code> is het adres van het endpoint. Door het hier op te geven, hoef je het niet hardcoded in je JavaScript-bestand te zetten.<\/li>\n<li><code>nonce<\/code> stelt een beveiligingstoken in om <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_create_nonce\/\" target=\"_blank\" rel=\"noopener noreferrer\">ongeautoriseerde toegang te voorkomen<\/a>.<\/li>\n<\/ul>\n<h3 id=\"first-ai-pass\">2. Via de AI Client tekst uit een audiobestand halen<\/h3>\n<p>Het hart van de plugin is de methode <code>handle_generate_request()<\/code>. Die voert een reeks taken uit, van beveiligingscontroles tot het genereren van de artikelcontent die in de blokeditor wordt geplaatst.<\/p>\n<p>Eerst controleert de methode of de AI Client beschikbaar is en of AI-ondersteuning niet is uitgeschakeld op de site.<\/p>\n<pre><code class=\"language-php\">public static function handle_generate_request( WP_REST_Request $request ) {\n\tif ( ! function_exists( 'wp_ai_client_prompt' ) ) {\n\t\treturn new WP_Error(\n\t\t\t'ai_client_unavailable',\n\t\t\t'WordPress AI Client is not available. This plugin requires WordPress 7.0+.',\n\t\t\tarray( 'status' =&gt; 500 )\n\t\t);\n\t}\n\n\tif ( function_exists( 'wp_supports_ai' ) && ! wp_supports_ai() ) {\n\t\treturn new WP_Error(\n\t\t\t'ai_disabled',\n\t\t\t'AI support is disabled on this site.',\n\t\t\tarray( 'status' =&gt; 403 )\n\t\t);\n\t}\n\t...\n}<\/code><\/pre>\n<p>Gaat er iets mis, dan geven de controles respectievelijk een 500 of een 403 terug.<\/p>\n<p>Het volgende codeblok doet dit:<\/p>\n<ul>\n<li>haalt de ID van het audiobestand uit het verzoek<\/li>\n<li>controleert of die ID een positief geheel getal is<\/li>\n<li>controleert het bestandstype<\/li>\n<li>haalt het MIME-type op<\/li>\n<li>leest de bestandsinhoud en codeert die in Base64<\/li>\n<\/ul>\n<pre><code class=\"language-php\">$audio_id = absint( $request-&gt;get_param( 'audio_id' ) );\nif ( ! $audio_id ) {\n\treturn new WP_Error( 'invalid_audio_id', 'Invalid audio ID.', array( 'status' =&gt; 400 ) );\n}\n\n$attachment = get_post( $audio_id );\nif ( ! $attachment || 'attachment' !== $attachment-&gt;post_type ) {\n\treturn new WP_Error( 'audio_not_found', 'Audio attachment not found.', array( 'status' =&gt; 404 ) );\n}\n\n$mime_type = (string) get_post_mime_type( $audio_id );\nif ( 0 !== strpos( $mime_type, 'audio\/' ) ) {\n\treturn new WP_Error( 'invalid_audio_type', 'Attachment must be an audio file.', array( 'status' =&gt; 400 ) );\n}\n\n$audio_path = get_attached_file( $audio_id );\nif ( ! $audio_path || ! file_exists( $audio_path ) ) {\n\treturn new WP_Error( 'audio_path_missing', 'Audio file path not found on server.', array( 'status' =&gt; 404 ) );\n}\n\n$audio_bytes = file_get_contents( $audio_path );\nif ( false === $audio_bytes ) {\n\treturn new WP_Error( 'audio_read_failed', 'Unable to read audio file.', array( 'status' =&gt; 500 ) );\n}\n\n$audio_base64 = base64_encode( $audio_bytes );<\/code><\/pre>\n<figure id=\"attachment_211767\" aria-describedby=\"caption-attachment-211767\" style=\"width: 1594px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-211767\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/06\/mime-type-error.png\" alt=\"Foutmelding bij een ongeldig bestandstype\" width=\"1594\" height=\"1190\"><figcaption id=\"caption-attachment-211767\" class=\"wp-caption-text\">Bij een ongeldig bestandstype krijg je een foutmelding<\/figcaption><\/figure>\n<p>Het binaire bestand is nu een string die je naar de AI Client kunt sturen. Tijd om de tekst eruit te halen:<\/p>\n<pre><code class=\"language-php\">$output_language = self::get_output_language();\n\n$transcription_builder = wp_ai_client_prompt(\n\t\"Transcribe this voice note accurately into $output_language. Return plain text only.\"\n)\n\t-&gt;with_file( $audio_base64, $mime_type )\n\t-&gt;using_temperature( 0.1 );\n\nif ( ! $transcription_builder-&gt;is_supported_for_text_generation() ) {\n\treturn new WP_Error(\n\t\t'no_supported_model',\n\t\t'No configured AI model can process this request. Configure a provider in Settings &gt; Connectors.',\n\t\tarray( 'status' =&gt; 400 )\n\t);\n}\n\n$transcript = $transcription_builder-&gt;generate_text();<\/code><\/pre>\n<p>Wat de code hierboven doet:<\/p>\n<ul>\n<li><code>get_output_language()<\/code> is een statische methode die elders in het script is gedefinieerd en de locale van de site teruggeeft. (Zie <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\/blob\/35ef318c10768969e235c89617a59cc4b6b38eb4\/ai-content-builder.php#L135\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a>.)<\/li>\n<li><code>wp_ai_client_prompt()<\/code> initialiseert een nieuw verzoek met de hoofdprompt.<\/li>\n<li><code>with_file()<\/code> geeft de AI Client door dat we een multimodaal verzoek sturen en accepteert de bestandsinhoud in Base64 plus het MIME-type.<\/li>\n<li><code>using_temperature()<\/code> bepaalt hoe deterministisch het antwoord is. We zetten de waarde laag voor een getrouwe transcriptie van de audio.<\/li>\n<li>De methode <code>is_supported_for_text_generation()<\/code> controleert of de AI-provider tekst kan genereren op basis van de aangeleverde data. Ondersteunt de provider geen multimodale invoer, dan stopt de plugin met een foutmelding.<\/li>\n<li>De methode <code>generate_text()<\/code> start het HTTP-verzoek.<\/li>\n<\/ul>\n<h3 id=\"second-ai-pass\">3. De audiotranscriptie omzetten naar gestructureerde content<\/h3>\n<p>Met het transcript in handen gaat de plugin opnieuw naar de AI-provider, nu voor een gestructureerd JSON-antwoord. Daarvoor defini\u00ebren we eerst een array die het JSON-formaat beschrijft.<\/p>\n<pre><code class=\"language-php\">$schema = array(\n\t'type'       =&gt; 'object',\n\t'properties' =&gt; array(\n\t\t'title'    =&gt; array( 'type' =&gt; 'string' ),\n\t\t'sections' =&gt; array(\n\t\t\t'type'  =&gt; 'array',\n\t\t\t'items' =&gt; array(\n\t\t\t\t'type'       =&gt; 'object',\n\t\t\t\t'properties' =&gt; array(\n\t\t\t\t\t'heading'    =&gt; array( 'type' =&gt; 'string' ),\n\t\t\t\t\t'level'      =&gt; array(\n\t\t\t\t\t\t'type' =&gt; 'integer',\n\t\t\t\t\t),\n\t\t\t\t\t'paragraphs' =&gt; array(\n\t\t\t\t\t\t'type'  =&gt; 'array',\n\t\t\t\t\t\t'items' =&gt; array( 'type' =&gt; 'string' ),\n\t\t\t\t\t),\n\t\t\t\t\t'bullet_points' =&gt; array(\n\t\t\t\t\t\t'type'  =&gt; 'array',\n\t\t\t\t\t\t'items' =&gt; array( 'type' =&gt; 'string' ),\n\t\t\t\t\t),\n\t\t\t\t),\n\t\t\t\t'required'   =&gt; array( 'heading', 'level', 'paragraphs' ),\n\t\t\t),\n\t\t),\n\t),\n\t'required'   =&gt; array( 'title', 'sections' ),\n);<\/code><\/pre>\n<p>Met deze structuur geeft de AI een JSON-object terug met een titel en een array met secties. Elke sectie bevat een kop, een kopniveau, minstens \u00e9\u00e9n alinea en opsommingstekens.<\/p>\n<p>Nu het schema staat, configureren we het tweede verzoek aan de AI Client:<\/p>\n<pre><code class=\"language-php\">$structured_json = wp_ai_client_prompt(\n\t\"Convert the following transcript into a concise, blog-ready draft in $output_language.\\n\" .\n\t\"Return JSON with a post title and body sections.\\n\" .\n\t\"Each section must have: heading, level (2 or 3), and paragraphs (array).\\n\" .\n\t\"If useful, include bullet_points (array) for short actionable lists.\\n\" .\n\t\"Use short, clear headings and readable paragraph text.\\n\\n\" .\n\t\"Transcript:\\n\" . $transcript\n)\n\t-&gt;using_system_instruction( \"You are a professional WordPress content editor. Always write in $output_language (use appropriate spelling, grammar, and conventions for that language variant).\" )\n\t-&gt;using_temperature( 0.4 )\n\t-&gt;as_json_response( $schema )\n\t-&gt;generate_text();\n\nif ( is_wp_error( $structured_json ) ) {\n\treturn $structured_json;\n}<\/code><\/pre>\n<p>De belangrijkste punten uit deze code:<\/p>\n<ul>\n<li><code>using_system_instruction()<\/code> definieert de persona van het model.<\/li>\n<li><code>using_temperature( 0.4 )<\/code> zet de temperatuur hoger, waardoor de AI meer creatieve ruimte krijgt en vlottere, rijkere tekst produceert.<\/li>\n<li><code>as_json_response( $schema )<\/code> laat de client het antwoord in een gestructureerd formaat leveren.<\/li>\n<li>De plugin stopt zodra er een fout optreedt.<\/li>\n<\/ul>\n<p>De volgende stap is het decoderen en opschonen van de data.<\/p>\n<pre><code class=\"language-php\">$structured = json_decode( (string) $structured_json, true );\n\nif ( ! is_array( $structured ) ) {\n\treturn new WP_Error(\n\t\t'invalid_ai_json',\n\t\t'Could not parse structured AI response.',\n\t\tarray( 'status' =&gt; 500 )\n\t);\n}\n\n$normalized = self::normalize_structured_post( $structured );\n\nif ( '' === $normalized['title'] && empty( $normalized['sections'] ) ) {\n\treturn new WP_Error(\n\t\t'empty_structured_content',\n\t\t'The AI provider returned empty structured content.',\n\t\tarray( 'status' =&gt; 500 )\n\t);\n}<\/code><\/pre>\n<p>In de code hierboven:<\/p>\n<ul>\n<li>De functie <code>json_decode()<\/code> zet de JSON-string om in een associatieve PHP-array.<\/li>\n<li>Klopt de JSON niet, dan geeft de controle daarna een 500-statuscode terug met een duidelijke foutmelding.<\/li>\n<li>De statische methode <code>normalize_structured_post()<\/code> schoont de output van de provider op en normaliseert die, v\u00f3\u00f3rdat hij naar JavaScript gaat (zie de definitie van deze functie op <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\/blob\/35ef318c10768969e235c89617a59cc4b6b38eb4\/ai-content-builder.php#L476\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a>).<\/li>\n<\/ul>\n<p>Daarna hoef je de output alleen nog aan JavaScript door te geven om er native Gutenberg-blokken van te maken.<\/p>\n<h3 id=\"block-generation\">4. Gutenberg-ready output genereren<\/h3>\n<p>De volgende stap koppelt de JSON-output aan native Gutenberg-blokken. Dat gebeurt aan de clientkant, in het bestand <code>editor.js<\/code>.<\/p>\n<p>Selecteert de gebruiker een audiobestand, dan draait <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\/blob\/35ef318c10768969e235c89617a59cc4b6b38eb4\/editor.js#L342\" target=\"_blank\" rel=\"noopener noreferrer\">deze code<\/a>:<\/p>\n<pre><code class=\"language-javascript\">function AIContentBuilderSidebar() {\n\n\tconst [ audioId, setAudioId ] = useState( 0 );\n\t...\n\n\tconst onSelectAudio = function ( media ) {\n\t\tif ( ! media || ! media.id ) {\n\t\t\treturn;\n\t\t}\n\t\tsetAudioId( media.id );\n\t\tsetAudioLabel( media.title || media.filename || ( 'Audio #' + media.id ) );\n\t\tsetNotice( null );\n\t};\n\t...\n}<\/code><\/pre>\n<p>Die code haalt de ID van het opgeslagen audiobestand uit de WordPress-database.<\/p>\n<p>Klikt de gebruiker op de knop <strong>G<\/strong><strong>enerate Content<\/strong>, dan stuurt de <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\/blob\/35ef318c10768969e235c89617a59cc4b6b38eb4\/editor.js#L382\" target=\"_blank\" rel=\"noopener noreferrer\">functie <code>onGenerate()<\/code><\/a> met <code>apiFetch()<\/code> een POST-verzoek naar het API-endpoint, inclusief de audio-ID.<\/p>\n<pre><code class=\"language-javascript\">const onGenerate = async function () {\n\n\t...\n\n\ttry {\n\t\tconst response = await apiFetch( {\n\t\t\tpath: AICBData.restPath,\n\t\t\tmethod: 'POST',\n\t\t\theaders: {\n\t\t\t\t'X-WP-Nonce': AICBData.nonce,\n\t\t\t},\n\t\t\tdata: {\n\t\t\t\taudio_id: audioId,\n\t\t\t},\n\t\t} );\n\t\t...\n\t}\n\t...\n}<\/code><\/pre>\n<ul>\n<li><code>await<\/code> pauzeert de functie, zodat de browser niet blokkeert terwijl je op het antwoord van de AI wacht.<\/li>\n<li>Zodra het antwoord binnen is, komt het JSON-object in de variabele <code>response<\/code>.<\/li>\n<\/ul>\n<p>De variabele <code>response<\/code> bevat een object met deze structuur:<\/p>\n<pre><code class=\"language-json\">{\n\ttitle: \"Two Wheels to the Medina: ...\",\n\tsections: [\n\t\t{\n\t\t\theading: \"A Well-Deserved Rest in the Red City\",\n\t\t\tlevel: 2,\n\t\t\tparagraphs: [ \"On April 24th, our group of seven motorcyclists...\" ],\n\t\t\tbullet_points: []\n\t\t},\n\t\t{\n\t\t\theading: \"Diving into the Medina and Jemaa el-Fnaa\",\n\t\t\tlevel: 2,\n\t\t\tparagraphs: [ \"We spent the day exploring the historic Medina...\" ],\n\t\t\tbullet_points: [ \n\t\t\t\t\"Navigating the vibrant, maze-like alleys of the ancient Medina\", \n\t\t\t\t\"Tasting traditional Berber tagines and Moroccan mint tea\",\n\t\t\t\t\"Shopping for handmade leather goods, spices, and lanterns in the souks\" \n\t\t\t]\n\t\t},\n\t\t{...}\n\t],\n\tcontent: \"Fallback plain text...\",\n\ttranscript: \"Full transcript...\"\n}<\/code><\/pre>\n<p>Dat object bevat alles wat je nodig hebt om de blokken te bouwen. Het script kan alleen zowel een JSON-string als in een object geneste JSON binnenkrijgen. Daarom volgt er eerst een normalisatiestap voordat de data eruit worden gehaald:<\/p>\n<pre><code class=\"language-javascript\">const normalizedSections = normalizeSectionsPayload( response.sections );<\/code><\/pre>\n<ul>\n<li>De functie <code>normalizeSectionsPayload()<\/code> zet een onzekere <code>sections<\/code> payload om in een array. (Zie de <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\/blob\/35ef318c10768969e235c89617a59cc4b6b38eb4\/editor.js#L171\" target=\"_blank\" rel=\"noopener noreferrer\">code op GitHub<\/a>.)<\/li>\n<\/ul>\n<p>Daarna geef je de variabele <code>normalizedSections<\/code> als argument door aan de <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\/blob\/35ef318c10768969e235c89617a59cc4b6b38eb4\/editor.js#L60\" target=\"_blank\" rel=\"noopener noreferrer\">functie die de velden uit <code>sections<\/code> omzet<\/a> in native Gutenberg-blokken:<\/p>\n<pre><code class=\"language-javascript\">const structuredBlocks = buildBlocksFromSections( normalizedSections );<\/code><\/pre>\n<p>Hieronder een fragment uit de functie <code>buildBlocksFromSections()<\/code>:<\/p>\n<pre><code class=\"language-javascript\">function buildBlocksFromSections( sections ) {\n\tif ( ! Array.isArray( sections ) ) {\n\t\treturn [];\n\t}\n\n\tconst blocks = [];\n\n\tsections.forEach( function ( section ) {\n\t\tif ( ! section || 'object' !== typeof section ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst heading =\n\t\t\t\t( 'string' === typeof section.heading )\n\t\t\t\t\t? section.heading.trim()\n\t\t\t\t\t: '';\n\n\t\t\tconst level = ( 3 === section.level ) ? 3 : 2;\n\n\t\t\tif ( heading ) {\n\t\t\t\tblocks.push(\n\t\t\t\t\tcreateBlock( 'core\/heading', {\n\t\t\t\t\t\tcontent: heading,\n\t\t\t\t\t\tlevel: level,\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t...\n\n\t\t} );\n\treturn blocks;\n}<\/code><\/pre>\n<p>In de code hierboven doorloopt de <code>forEach() <\/code>loop de data-array en haalt daar <code>section.heading<\/code> en <code>section.level<\/code> uit, zodat de native functie <code>createBlock()<\/code> ermee aan de slag kan.<\/p>\n<p>Hoe <code>section.paragraphs<\/code> en <code>section.bullet_points<\/code> worden gekoppeld, zie je in de <a href=\"https:\/\/github.com\/carlodaniele\/ai-content-builder\/blob\/35ef318c10768969e235c89617a59cc4b6b38eb4\/editor.js#L60\" target=\"_blank\" rel=\"noopener noreferrer\">broncode op GitHub<\/a>.<\/p>\n<h2>Eindeloze uitbreidingsmogelijkheden<\/h2>\n<p>AI in WordPress opent nieuwe mogelijkheden voor sitebeheerders \u00e9n ontwikkelaars. Waar je vroeger een complete netwerkinfrastructuur vanaf nul opbouwde om AI-features aan je WordPress-site toe te voegen, is het automatiseren van je redactionele workflow nu een stuk eenvoudiger geworden.<\/p>\n<p>De voorbeeldplugin uit het tweede deel van dit artikel laat \u00e9\u00e9n use case zien. Maar hij maakt duidelijk hoe je nu tools bouwt die sitebeheer en contentbewerking flink vereenvoudigen. Daarnaast opent deze architectuur de deur naar features die eerder te complex of te duur waren om te bouwen.<\/p>\n<p>En dit is nog maar het begin. AI ontwikkelt zich snel en zal ongetwijfeld een grote golf aan innovatie op gang brengen.<\/p>\n<p>Over innovatie gesproken: heb je de hosting van Kinsta al geprobeerd? Wil je je site draaien op de beste technologie die er vandaag voor WordPress beschikbaar is, <a href=\"https:\/\/kinsta.com\/nl\/prijzen\/\">probeer Kinsta dan zonder risico<\/a> of <a href=\"https:\/\/kinsta.com\/nl\/neem-contact-op-met-sales\/\">neem contact op met ons salesteam<\/a> voor meer informatie.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u00f3\u00f3r WordPress 7.0 moest elke plugin die AI-features toevoegde zelf een API-sleutel opvragen en beheren om met een AI-provider te kunnen communiceren. Dat kostte onnodig veel &#8230;<\/p>\n","protected":false},"author":36,"featured_media":66316,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[892],"class_list":["post-66315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-ontwikkeling"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AI-integratie in WordPress: architectuur en een praktijkvoorbeeld<\/title>\n<meta name=\"description\" content=\"Ontdek de nieuwe AI-infrastructuur van WordPress. Bekijk de native architectuur, de interne workflows en een praktijkvoorbeeld van audio naar tekst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AI-integratie en WordPress: een diepgaande analyse van de architectuur en een praktijkvoorbeeld\" \/>\n<meta property=\"og:description\" content=\"Ontdek de nieuwe AI-infrastructuur van WordPress. Bekijk de native architectuur, de interne workflows en een praktijkvoorbeeld van audio naar tekst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-22T13:20:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-28T09:38:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ontdek de nieuwe AI-infrastructuur van WordPress. Bekijk de native architectuur, de interne workflows en een praktijkvoorbeeld van audio naar tekst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"AI-integratie en WordPress: een diepgaande analyse van de architectuur en een praktijkvoorbeeld\",\"datePublished\":\"2026-07-22T13:20:06+00:00\",\"dateModified\":\"2026-07-28T09:38:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/\"},\"wordCount\":3571,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png\",\"inLanguage\":\"nl-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/\",\"name\":\"AI-integratie in WordPress: architectuur en een praktijkvoorbeeld\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png\",\"datePublished\":\"2026-07-22T13:20:06+00:00\",\"dateModified\":\"2026-07-28T09:38:04+00:00\",\"description\":\"Ontdek de nieuwe AI-infrastructuur van WordPress. Bekijk de native architectuur, de interne workflows en een praktijkvoorbeeld van audio naar tekst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress ontwikkeling\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"AI-integratie en WordPress: een diepgaande analyse van de architectuur en een praktijkvoorbeeld\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"AI-integratie in WordPress: architectuur en een praktijkvoorbeeld","description":"Ontdek de nieuwe AI-infrastructuur van WordPress. Bekijk de native architectuur, de interne workflows en een praktijkvoorbeeld van audio naar tekst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/","og_locale":"nl_NL","og_type":"article","og_title":"AI-integratie en WordPress: een diepgaande analyse van de architectuur en een praktijkvoorbeeld","og_description":"Ontdek de nieuwe AI-infrastructuur van WordPress. Bekijk de native architectuur, de interne workflows en een praktijkvoorbeeld van audio naar tekst.","og_url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2026-07-22T13:20:06+00:00","article_modified_time":"2026-07-28T09:38:04+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Ontdek de nieuwe AI-infrastructuur van WordPress. Bekijk de native architectuur, de interne workflows en een praktijkvoorbeeld van audio naar tekst.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"25 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"AI-integratie en WordPress: een diepgaande analyse van de architectuur en een praktijkvoorbeeld","datePublished":"2026-07-22T13:20:06+00:00","dateModified":"2026-07-28T09:38:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/"},"wordCount":3571,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png","inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/","url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/","name":"AI-integratie in WordPress: architectuur en een praktijkvoorbeeld","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png","datePublished":"2026-07-22T13:20:06+00:00","dateModified":"2026-07-28T09:38:04+00:00","description":"Ontdek de nieuwe AI-infrastructuur van WordPress. Bekijk de native architectuur, de interne workflows en een praktijkvoorbeeld van audio naar tekst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2026\/07\/wordpress-ai-integration-a-deep-dive-into-architecture-and-a-real-world-use-case.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-ai\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress ontwikkeling","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/"},{"@type":"ListItem","position":3,"name":"AI-integratie en WordPress: een diepgaande analyse van de architectuur en een praktijkvoorbeeld"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/66315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=66315"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/66315\/revisions"}],"predecessor-version":[{"id":66400,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/66315\/revisions\/66400"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/66315\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/66315\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/66315\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/66315\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/66315\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/66315\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/66315\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/66316"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=66315"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=66315"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=66315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}