KBA Plugin maken (webservice integratie met WordPress)

Plugin-mappenstructuur

Maak een map in wp-content/plugins/:

wp-content/plugins/kba-plugin/
├── kba-plugin.php
├── js/
└── kba-api.js

PHP: Verbind het JavaScript-bestand met WordPress

Maak een bestand kba-plugin.php met deze inhoud:

Code om het JS-bestand te registreren: In je plugin-bestand (kba-plugin.php), moet je ervoor zorgen dat het JavaScript-bestand wordt geladen.

Shortcode voor het formulier: Zodat het formulier in je WordPress-pagina verschijnt:

Stel je vraag: Verstuur

Code voor kba-api.js

Plaats dit bestand in de js-map van je plugin, zoals:

Deze code zorgt ervoor dat het formulier een vraag naar je webservice stuurt en het antwoord toont op de pagina.

document.addEventListener(“DOMContentLoaded”, function () { // Selecteer het formulier en het resultaatgedeelte const form = document.getElementById(“kbaForm”); const resultDiv = document.getElementById(“kbaResult”); // Voeg een eventlistener toe aan het formulier form.addEventListener(“submit”, async function (event) { event.preventDefault(); // Voorkom standaardformuliergedrag // Haal de vraag op uit het formulier const vraag = document.getElementById(“kbaVraag”).value; // Verstuur de vraag naar de API try { const response = await fetch(“https://jouw-api.onrender.com/kba”, { method: “POST”, headers: { “Content-Type”: “application/json”, }, body: JSON.stringify({ vraag }), // Vraag als JSON }); if (!response.ok) { throw new Error(`API fout: ${response.status}`); } // Parseer de respons en toon het antwoord const data = await response.json(); resultDiv.innerHTML = `

Antwoord: ${data.antwoord}

`; } catch (error) { // Toon een foutmelding resultDiv.innerHTML = `

Fout: ${error.message}

`; } }); });

Ga naar je WordPress-dashboard:

• Plugins > Geïnstalleerde Plugins > Activeer je plugin.

Voeg de shortcode

Stel je nieuwe vraag: Verstuur

kba_shortcode_form

toe aan een pagina of bericht.