{"id":58331,"date":"2024-02-14T19:21:03","date_gmt":"2024-02-14T18:21:03","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=58331&#038;preview=true&#038;preview_id=58331"},"modified":"2024-02-22T17:53:17","modified_gmt":"2024-02-22T16:53:17","slug":"plugins-in-bulk-bijwerken-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/","title":{"rendered":"Zo bouw je een tool om met Kinsta API op meerdere sites WordPress plugins in bulk bij te werken"},"content":{"rendered":"<p>Plugins spelen een belangrijke rol bij het aanpassen en verbeteren van je WordPress sites. Ze worden gebruikt om functionaliteit zoals <a href=\"https:\/\/kinsta.com\/nl\/blog\/contactformulier-plugins-wordpress\/\">contactformulieren<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ecommerce-plugins\/\">e-commerce<\/a> en <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/analytics\/\">analytics<\/a> aan je sites toe te voegen zonder dat je daarvoor hoeft te coderen.<\/p>\n<p>Net als WordPress, dat regelmatig updates ontvangt, ontvangen plugins ook regelmatig updates om nieuwe features toe te voegen, een veiligheidslek te repareren, de compatibiliteit te vergroten en nog veel meer. Daarom heeft Kinsta <a href=\"https:\/\/kinsta.com\/nl\/changelog\/plugin-en-thema-management\/\">Plugin- en Themabeheer<\/a> toegevoegd aan de tools die je kan gebruiken in MyKinsta voor al je sites.<\/p>\n<p>Het bijwerken van plugins voor veel sites kan echter nog steeds vaak teveel zijn voor drukke klanten zoals bureaus. Dit artikel laat een oplossing zien die gebruik maakt van de <a href=\"https:\/\/kinsta.com\/nl\/changelog\/kinsta-api\/\">Kinsta API<\/a> om tegelijkertijd plugins te beheren voor meerdere sites.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Wat je gaat bouwen<\/h2>\n<p>Deze handleiding richt zich op het bouwen van een geavanceerde oplossing met behulp van de Kinsta API, die nu endpoints biedt voor het ophalen en bijwerken van plugins.<\/p>\n<p>Hierin maken we een custom React applicatie die alle plugins van je Kinsta bedrijfsaccount ophaalt. Met deze tool kun je <strong>een specifieke plugin identificeren en bijwerken op meerdere sites<\/strong>, waardoor het proces aanzienlijk wordt gestroomlijnd.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/kinsta-plugin-manager.gif\" alt=\"Tool gebouwd met React en Kinsta API om WordPress plugins in bulk bij te werken op meerdere sites.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Tool gebouwd met React en Kinsta API om WordPress plugins in bulk bij te werken op meerdere sites.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Als je een <a href=\"https:\/\/kinsta.com\/nl\/agency-directory\/\">bureau<\/a> hebt dat meerdere sites beheert op Kinsta, kun je deze tool direct gebruiken zonder dat je je hoeft te verdiepen in deze handleiding, tenzij je ge\u00efnteresseerd bent in de interactie met de API voor het toevoegen van custom functionaliteiten.<\/p>\n<p>Om deze tool te gebruiken, maak je een <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/git\/\">Git<\/a> repository <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\" target=\"_blank\" rel=\"noopener noreferrer\">met deze template op GitHub<\/a>. Selecteer <strong>Use this template <\/strong>&gt;<strong> Create a new repository<\/strong> om de startcode naar een nieuwe repository binnen je GitHub account te kopi\u00ebren.<\/p>\n<p>Zodra je repository is ingesteld, deploy je het gratis op ons Statische Site Hosting platform en voeg je het volgende toe als <a href=\"https:\/\/kinsta.com\/blog\/what-is-an-environment-variable\/\">omgevingsvariabelen<\/a>:<\/p>\n<pre><code class=\"language-bash\">REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID' \nREACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'<\/code><\/pre>\n<p>Dat is alles. Je kunt deze tool nu gebruiken voor je Kinsta bedrijf om je sitebeheerprocessen te stroomlijnen.<\/p>\n<\/aside>\n\n<h2>Voorwaarden applicatie<\/h2>\n<p>Om dit project te kunnen volgen, moet je over het volgende beschikken:<\/p>\n<ul>\n<li>Basiskennis van <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS<\/a> en <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>.<\/li>\n<li>Enige bekendheid met <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a>.<\/li>\n<li>Node.js en npm (<a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">Node Package Manager<\/a>) of yarn ge\u00efnstalleerd op je computer.<\/li>\n<\/ul>\n<h2>De Kinsta API zelf<\/h2>\n<p>De <a href=\"https:\/\/kinsta.com\/nl\/docs\/kinsta-api\/\">Kinsta API<\/a> is een krachtige tool waarmee je programmatisch kunt communiceren met diensten van Kinsta zoals gehoste WordPress sites. Het kan helpen bij het automatiseren van verschillende taken met betrekking tot WordPress beheer, waaronder <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-api\/\">het maken van sites<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/taken-inplannen-kinsta-api\/\">het ophalen van site informatie<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/kinsta-api-sleutel\/#how-to-use-kinsta-api-to-build-a-status-checker\">het opvragen van de status van een site<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/serverlogs-api\/\">het doorzoeken<\/a> en <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-backups-api\/\">herstellen van backups<\/a>, en nog veel meer.<\/p>\n<p>Om de API van Kinsta te gebruiken, moet je een account hebben met ten minste \u00e9\u00e9n WordPress site, <a href=\"https:\/\/sevalla.com\/application-hosting\/\">applicatie<\/a> of <a href=\"https:\/\/sevalla.com\/database-hosting\/\">database<\/a> in MyKinsta. Je moet ook een API sleutel genereren om je te authenticeren en toegang te krijgen tot je account.<\/p>\n<p>Om een API sleutel te genereren:<\/p>\n<ol start=\"1\">\n<li>Ga naar je <a href=\"https:\/\/my.kinsta.com\/?lang=nl\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a> dashboard.<\/li>\n<li>Navigeer naar de pagina <strong>API sleutels <\/strong>(<strong>Je naam <\/strong>&gt;<strong> Bedrijfsinstellingen <\/strong>&gt;<strong> API sleutels<\/strong>).<\/li>\n<li>Klik op <strong>API sleutel aanmaken<\/strong>.<\/li>\n<li>Kies een vervaltijd of stel een custom begindatum in en het aantal uren dat de sleutel moet verlopen.<\/li>\n<li>Geef de sleutel een unieke naam.<\/li>\n<li>Klik op <strong>Genereer<\/strong>.<\/li>\n<\/ol>\n<p>Nadat je een API sleutel hebt gemaakt, moet je deze kopi\u00ebren en ergens veilig opslaan (het gebruik van een <a href=\"https:\/\/kinsta.com\/nl\/blog\/wachtwoordmanagers\/\">wachtwoordmanager<\/a> wordt aanbevolen). Je kunt meerdere API sleutels aanmaken, die worden weergegeven op de pagina <strong>API sleutels<\/strong>. Als je een API sleutel moet intrekken, klik je op de knop <strong>Intrekken<\/strong>.<\/p>\n<h2>Je React ontwikkelomgeving instellen<\/h2>\n<p>React is een <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/\">populaire JavaScript bibliotheek<\/a> voor het bouwen van gebruikersinterfaces. Hiermee kunnen developers declaratieve componenten maken die verschillende onderdelen van de gebruikersinterface vertegenwoordigen. Deze componenten worden gedefinieerd met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-jsx\/\">JSX syntaxis<\/a>, een combinatie van JavaScript en HTML.<\/p>\n<p>Volg deze stappen om aan de slag te gaan:<\/p>\n<ol start=\"1\">\n<li>Navigeer naar de map waarin je je project wilt maken en gebruik <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a> om een React project te maken:\n<pre><code class=\"language-bash\">npx create-react-app &lt;project-name&gt;<\/code><\/pre>\n<p>Wijzig <code>&lt;project-name&gt;<\/code> hierboven in de gewenste naam voor je project.<\/li>\n<li>Zodra dit is gelukt, navigeer je naar de projectmap en start je de ontwikkelserver:\n<pre><code class=\"language-bash\">cd &lt;project-name&gt;\nnpm run start<\/code><\/pre>\n<p>Je React app wordt geopend in je standaard webbrowser op http:\/\/localhost:3000.<\/li>\n<\/ol>\n<p>Door een React project te maken met <code>create-react-app<\/code> wordt een mappenstructuur opgezet. De cruciale map is <strong>src<\/strong>, waar de ontwikkeling plaatsvindt. De belangrijkste bestanden in deze map zijn:<\/p>\n<ul>\n<li><strong>App.js:<\/strong> Dit is de hoofdcomponent, die alle andere componenten in je React app rendert. Dit is waar al je code voor deze tool wordt toegevoegd.<\/li>\n<li><strong>index.js:<\/strong> Dit is het startpunt, wordt als eerste geladen en is verantwoordelijk voor het renderen van <strong>App.js<\/strong>.<\/li>\n<li><strong>index.css:<\/strong> Dit bestand definieert de algehele styling en layout van je app. Alle stijlen worden hier toegevoegd.<\/li>\n<\/ul>\n<h2>Gebruikersinterface maken en stylen<\/h2>\n<p>Laten we ons richten op het bouwen en stylen van de interface voor een basisapplicatie die is ondergebracht in het <strong>App.js<\/strong> bestand zonder routing. Onze belangrijkste UI is een formulier met een <code>select<\/code> veld om een lijst te maken van unieke plugins op je Kinsta sites naast een <code>submit<\/code> knop om sites op te halen met de geselecteerde plugin.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/plugin-manager-ui.png\" alt=\"Gebruikersinterface voor pluginmanager om een lijst met plugins te openen en sites te laden.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Gebruikersinterface voor pluginmanager om een lijst met plugins te openen en sites te laden.<\/figcaption><\/figure>\n<p>Daarnaast toont een weergavegedeelte sitegegevens zoals naam, pluginstatus en versie. Het bevat een knop om elke site bij te werken indien nodig en een algemene knop voor het in bulk bijwerken van alle sites die de plugin update nodig hebben.<\/p>\n<p>Voeg in je <strong>App.js<\/strong> bestand de volgende code toe:<\/p>\n<pre><code class=\"language-jsx\">import KinstaLogo from '.\/images\/kinsta_logo.png';\n\nconst App = () =&gt; {\n    return (\n        &lt;div className=\"container\"&gt;\n            &lt;div className=\"title-section\"&gt;\n                &lt;img src={KinstaLogo} className=\"logo\" alt=\"\" \/&gt;\n                &lt;h2&gt;Manage your site's plugins&lt;\/h2&gt;\n                &lt;p&gt;\n                    Easily update plugins across all sites hosted with Kinsta using the\n                    Kinsta API.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div&gt; className=\"info-section\"&gt;\n                &lt;p&gt;\n                    This application allows you to retrieve a list of all sites within\n                    your company that uses a specific plugin. You can then choose to update\n                    the plugin across all these sites simultaneously or individually.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div className=\"form-section\"&gt;\n                &lt;form&gt;\n                    &lt;div className=\"form-control\"&gt;\n                        &lt;label&gt; htmlFor=\"plugin-name\"&gt;Plugin name&lt;\/label&gt;\n                        &lt;select name=\"plugin-name\" id=\"plugin-name\"&gt;\n                            &lt;option&gt; value=\"\"&gt;Select a plugin&lt;\/option&gt;\n                        &lt;\/select&gt;\n                    &lt;\/div&gt;\n                    &lt;button&gt; className=\"btn\"&gt;Fetch sites with this plugin&lt;\/button&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;div className=\"display_container\"&gt;\n                &lt;div className=\"site-list\"&gt;\n                    &lt;div className=\"list-title\"&gt;\n                        &lt;h3&gt;Sites with WooCommerce plugin&lt;\/h3&gt;\n\n                        &lt;button&gt; className=\"sm-btn\"&gt;Update all sites to v.3.6&lt;\/button&gt;\n                    &lt;\/div&gt;\n                    &lt;ul&gt;\n                        &lt;li&gt;\n                            &lt;div className=\"info\"&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Site Name:&lt;\/b&gt; WooCommerce\n                                &lt;\/p&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Plugin Status:&lt;\/b&gt; active\n                                &lt;\/p&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Plugin Version:&lt;\/b&gt; 3.5.1\n                                &lt;\/p&gt;\n                            &lt;\/div&gt;\n                            &lt;button&gt; className=\"sm-btn\"&gt;Update to v.5.6&lt;\/button&gt;\n                        &lt;\/li&gt;\n                    &lt;\/ul&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Om dit project te stylen, bezoek je het <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">CSS bestand in onze volledige GitHub repository<\/a> en kopieer je de code ervan naar je <strong>index.css<\/strong> bestand.<\/p>\n<h2>Interactie met Kinsta API<\/h2>\n<p>De Kinsta API biedt een reeks endpoints die essentieel zijn voor toegang tot verschillende parameters die nodig zijn voor interactie met de plugin van een site. Als je bijvoorbeeld een plugin wilt ophalen of bijwerken, moet je eerst de omgevings-ID van de site ophalen.<\/p>\n<p>Het verkrijgen van deze omgevings-ID is een sequentieel proces. Eerst moet je de ID van de site bepalen. Om de site-ID te krijgen, moet je je Kinsta bedrijfs-ID hebben. Dit bedrijfs-ID is beschikbaar in je MyKinsta dashboard (<strong>Bedrijfsinstellingen<\/strong> &gt; <strong>Factureringsgegevens<\/strong>), en het is gevoelige informatie die je met niemand wilt delen, zoals je API sleutel.<\/p>\n<p>Je kunt ze veilig opslaan als omgevingsvariabelen in je React applicatie door een <strong>.env <\/strong>bestand aan te maken in de hoofdmap van je project. Voeg in dit bestand het volgende toe met de juiste waarde:<\/p>\n<pre><code class=\"language-bash\">REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID' \nREACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'<\/code><\/pre>\n<p>Om toegang te krijgen tot deze omgevingsvariabelen binnen je project, kun je de syntaxis <code>process.env.THE_VARIABLE<\/code> gebruiken. Om bijvoorbeeld toegang te krijgen tot <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, gebruik je <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<p>Door het <strong>.env<\/strong> bestand toe te voegen aan je <strong><a href=\"https:\/\/kinsta.com\/nl\/blog\/gitignore-repareren\/\">.gitignore<\/a><\/strong> bestand is belangrijk om te voorkomen dat het naar GitHub gepushed wordt. Dit zorgt ervoor dat je gevoelige informatie priv\u00e9 en veilig blijft.<\/p>\n<h3>Alle sites en plugins ophalen met de Kinsta API<\/h3>\n<p>Om plugin gegevens op te halen voor alle sites die worden beheerd door je Kinsta bedrijfsaccount, kun je de Kinsta API gebruiken door drie API verzoeken uit te voeren. Hier volgt een stapsgewijze uitleg:<\/p>\n<p>Begin met het opslaan van de Kinsta API URL in een variabele voor gemakkelijke referentie.<\/p>\n<pre><code class=\"language-js\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n<ol start=\"1\">\n<li><strong>Lijst met bedrijfssites ophalen:<\/strong> Je moet een lijst ophalen met alle WordPress sites die aan je bedrijf zijn gekoppeld. Om dit te bereiken stel je een query samen met de ID van het bedrijf, doe je een GET verzoek met de juiste autorisatie, verwerk je het antwoord in JSON format en haal je de sitegegevens uit het antwoord.\n<pre><code class=\"language-js\">const query = new URLSearchParams({\n    company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n}).toString();\nconst response = await fetch(`${KinstaAPIUrl}\/sites?${query}`, {\n    method: 'GET',\n    headers: { Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}` },\n});\n\nconst data = await response.json();\nconst companySites = data.company.sites;<\/code><\/pre>\n<\/li>\n<li><strong>Siteomgevings-ID ophalen:<\/strong> De vorige stap retourneert een array van WordPress sites. Loop voor elke site door en doe nog een GET verzoek om de bijbehorende omgevingen op te halen.\n<pre><code class=\"language-js\">const sitesEnvironmentData = companySites.map(async (site) =&gt; {\n    const siteId = site.id;\n    const resp = await fetch(`${KinstaAPIUrl}\/sites\/${siteId}\/environments`, {\n        method: 'GET',\n        headers: {\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n    });\n    const data = await resp.json();\n    const environments = data.site.environments;\n    return {\n        id: siteId,\n        name: site.display_name,\n        environments: environments,\n    };\n});<\/code><\/pre>\n<\/li>\n<li><strong>Lijst van WordPress site plugins ophalen:<\/strong> Na het verkrijgen van de site-ID, naam en omgeving, kun je nu de omgeving-ID gebruiken om een lijst van alle plugins op elke site op te halen. Je moet eerst de promises uit de vorige stap oplossen en dan de GET verzoeken voor de plugins doen:\n<pre><code class=\"language-js\">\/\/ Wait for all the promises to resolve\nconst sitesData = await Promise.all(sitesEnvironmentData);\n\n\/\/ Get all plugins for each environment\nconst sitesWithPlugin = sitesData.map(async (site) =&gt; {\n    const environmentId = site.environments[0].id;\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n        {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n            },\n        }\n    );\n    const data = await resp.json();\n    const plugins = data.environment.container_info;\n    return {\n        env_id: environmentId,\n        name: site.name,\n        plugins: plugins,\n    };\n});\n\nconst sitesWithPluginData = await Promise.all(sitesWithPlugin);\nreturn sitesWithPluginData;<\/code><\/pre>\n<\/li>\n<li><strong>Het proces consolideren:<\/strong> Om het proces te stroomlijnen kun je deze API verzoeken inkapselen in een enkele asynchrone functie <code>getSitesWithPluginData<\/code>, die hergebruikt kan worden. Deze functie voert de hierboven beschreven stappen uit en retourneert een array met de essenti\u00eble informatie over elke site, waaronder de omgevings-ID, sitenaam en een array met plugins.\n<pre><code class=\"language-jsx\">const getSitesWithPluginData = async () =&gt; {\n    const query = new URLSearchParams({\n        company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n    }).toString();\n    const resp = await fetch(`${KinstaAPIUrl}\/sites?${query}`, {\n        method: 'GET',\n        headers: {\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n    });\n\n    const data = await resp.json();\n    const companySites = data.company.sites;\n\n    \/\/ Get all environments for each site\n    const sitesEnvironmentData = companySites.map(async (site) =&gt; {\n        const siteId = site.id;\n        const resp = await fetch(`${KinstaAPIUrl}\/sites\/${siteId}\/environments`, {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n            },\n        });\n        const data = await resp.json();\n        const environments = data.site.environments;\n        return {\n            id: siteId,\n            name: site.display_name,\n            environments: environments,\n        };\n    });\n\n    \/\/ Wait for all the promises to resolve\n    const sitesData = await Promise.all(sitesEnvironmentData);\n\n    \/\/ Get all plugins for each environment\n    const sitesWithPlugin = sitesData.map(async (site) =&gt; {\n        const environmentId = site.environments[0].id;\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n            {\n                method: 'GET',\n                headers: {\n                    Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n                },\n            }\n        );\n        const data = await resp.json();\n        const plugins = data.environment.container_info;\n        return {\n            env_id: environmentId,\n            name: site.name,\n            plugins: plugins,\n        };\n    });\n\n    \/\/ Wait for all the promises to resolve\n    const sitesWithPluginData = await Promise.all(sitesWithPlugin);\n    return sitesWithPluginData;\n};<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>Unieke plugins van alle sites ophalen<\/h3>\n<p>In je applicatie wil je de lijst met plugins van alle sites weergeven in een vervolgkeuzemenu op <code>select<\/code>. Om dit te bereiken, haalt de functie <code>getSitesWithPluginData<\/code> de omgevings-ID, naam en plugins van elke site op. Deze gegevens vormen de basis voor het extraheren van een lijst met plugins.<\/p>\n<p>Definieer een nieuwe functie, <code>fetchAllSitesPlugins<\/code>, die <code>getSitesWithPluginData<\/code> callt en de uitvoer verwerkt om een lijst met alle plugins te krijgen:<\/p>\n<pre><code class=\"language-js\">const fetchAllSitesPlugins = async () =&gt; {\n    const sitesWithPluginData = await getSitesWithPluginData();\n\n    \/\/ get all plugins\n    const allPlugins = sitesWithPluginData.map((site) =&gt; {\n        const { plugins } = site;\n        return plugins.wp_plugins.data;\n    });\n\n   \/\/ \u2026\n};<\/code><\/pre>\n<p>Deze code itereert de gegevens van elke site en stelt een lijst van plugins samen. Om ervoor te zorgen dat elke plugin maar \u00e9\u00e9n keer in de lijst voorkomt, gebruik je het JavaScript object <code>Set<\/code>, dat unieke waarden opslaat:<\/p>\n<pre><code class=\"language-js\">\/\/ get unique plugins\n    const uniquePlugins = [\n        ...new Set(allPlugins.flat().map((plugin) =&gt; plugin.name)),\n    ];<\/code><\/pre>\n<p>De methode <code>.flat()<\/code> maakt de array-structuur plat en <code>.map()<\/code> maakt een lus om alleen de plugin-namen eruit te halen. Het <code>Set<\/code> object filtert duplicaten eruit.<\/p>\n<p>Om deze gegevens in je React applicatie te laden en weer te geven, gebruik je de haken <code>useState()<\/code> en <code>useEffect()<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\n\nconst App = () =&gt; {\n    const [pluginName, setPluginName] = useState('');\n    const [plugins, setPlugins] = useState([]);\n\n    \/\/Get sites with plugin data\n    const getSitesWithPluginData = async () =&gt; {\n        \/\/ perform requests\n    };\n\n    useEffect(() =&gt; {\n        const fetchAllSitesPlugins = async () =&gt; {\n            const sitesWithPluginData = await getSitesWithPluginData();\n            \/\/ get all plugins\n            const allPlugins = sitesWithPluginData.map((site) =&gt; {\n                const { plugins } = site;\n                return plugins.wp_plugins.data;\n            });\n            \/\/ get unique plugins\n            const uniquePlugins = [\n                ...new Set(allPlugins.flat().map((plugin) =&gt; plugin.name)),\n            ];\n            setPlugins(uniquePlugins);\n        };\n\n        fetchAllSitesPlugins();\n    }, []);\n\n     \/\/ JSX render code follows\n    \/\/...\n};<\/code><\/pre>\n<p>De <code>useEffect()<\/code> hook zorgt ervoor dat de gegevens worden opgehaald en ingesteld wanneer het component wordt gemount. De <code>useState()<\/code> hook onderhoudt de lijst met unieke plugins.<\/p>\n<p>Tot slot worden deze plugins weergegeven in een <code>select<\/code> veld. Als de plugins nog aan het laden zijn, toon dan een placeholderbericht:<\/p>\n<pre><code class=\"language-jsx\">&lt;select&gt;\n    name=\"plugin-name\"\n    id=\"plugin-name\"\n    value={pluginName}\n    onChange={(e) =&gt; setPluginName(e.target.value)}\n&gt;\n    {plugins.length &gt; 0 ? (\n        &lt;&gt;\n            &lt;option value=\"\"&gt;Select a plugin&lt;\/option&gt;\n            {plugins.map((plugin) =&gt; (\n                &lt;option key={plugin} value={plugin.toLowerCase()}&gt;\n                    {plugin}\n                &lt;\/option&gt;\n            ))}\n        &lt;\/&gt;\n    ) : (\n        &lt;option&gt; value=\"\"&gt;Loading plugins...&lt;\/option&gt;\n    )}\n&lt;\/select&gt;<\/code><\/pre>\n<p>In deze code:<\/p>\n<ul>\n<li>Het <code>select<\/code> element is gekoppeld aan een toestandsvariabele <code>pluginName<\/code> om de geselecteerde waarde op te slaan.<\/li>\n<li>De <code>onChange<\/code> handler werkt deze toestand bij wanneer een nieuwe plugin wordt geselecteerd.<\/li>\n<li>De <code>plugins.map()<\/code> functie maakt dynamisch optie-elementen aan voor elke plugin.<\/li>\n<\/ul>\n<p>Door deze stappen te volgen, zal je applicatie effectief een unieke lijst van plugins tonen die van alle sites zijn opgehaald, waardoor een schone en gebruikersvriendelijke interface voor selectie ontstaat.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/select-field-plugin-manager.png\" alt=\"Selectieveld met lijst van unieke plugins van alle sites in Kinsta bedrijfsaccount.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Selectieveld met lijst van unieke plugins van alle sites in Kinsta bedrijfsaccount.<\/figcaption><\/figure>\n<h3>Sites met een specifieke plugin ophalen<\/h3>\n<p>Tot nu toe heb je plugins kunnen ophalen uit je Kinsta bedrijfsaccount, maar je wilt alle sites doorlopen om sites met een bepaalde plugin op te halen, ze opslaan in een status en ze vervolgens weergeven.<\/p>\n<p>Om dit te doen, maak je twee toestanden aan: een om de sites op te slaan (<code>sites<\/code>) en een andere om de laadstatus aan te geven (<code>isLoading<\/code>).<\/p>\n<pre><code class=\"language-jsx\">const [sites, setSites] = useState([]);\nconst [isLoading, setIsLoading] = useState(false);<\/code><\/pre>\n<p>Maak vervolgens een <code>fetchSites<\/code> functie om elke site te filteren om te controleren of deze de geselecteerde plugin bevat. Zo ja, dan worden de relevante gegevens van de site opgeslagen.<\/p>\n<p>Deze functie begint met het instellen van <code>isLoading<\/code> op <code>true<\/code> en het wissen van de <code>sites<\/code> array. Vervolgens wordt <code>getSitesWithPluginData<\/code> gecallt om alle sitegegevens op te halen.<\/p>\n<pre><code class=\"language-jsx\">const fetchSites = async () =&gt; {\n    setIsLoading(true);\n    setSites([]);\n    const sitesWithPluginData = await getSitesWithPluginData();\n\n    \/\/ Filter out sites that don't have the plugin\n    const sitesWithPluginDataFiltered = sitesWithPluginData\n        .filter((site) =&gt; {\n            const sitePlugins = site.plugins.wp_plugins.data;\n            return sitePlugins.some((plugin) =&gt; {\n                return plugin.name === pluginName;\n            });\n        })\n        .map((site) =&gt; {\n            const { env_id, name } = site;\n            const { version, status, update, update_version } =\n                site.plugins.wp_plugins.data.find(\n                    (plugin) =&gt; plugin.name === pluginName\n                );\n            return {\n                env_id,\n                name,\n                version,\n                status,\n                updateAvailable: update,\n                updateVersion: update_version,\n            };\n        });\n    setSites(sitesWithPluginDataFiltered);\n    setIsLoading(false);\n};<\/code><\/pre>\n<p>Voor de functie <code>sitesWithPluginDataFiltered<\/code> geldt:<\/p>\n<ul>\n<li>De methode <code>.filter()<\/code> isoleert sites die de geselecteerde plugin bevatten.<\/li>\n<li>De methode <code>.map()<\/code> haalt dan de vereiste gegevens uit elke site.<\/li>\n<li>Tot slot werken de hooks <code>setSites<\/code> en <code>setIsLoading<\/code> de status bij met de nieuwe gegevens en laadstatus.<\/li>\n<\/ul>\n<p>Maak vervolgens een <code>handleSubmit<\/code> functie en voeg deze toe aan de knop <strong>Fetch sites with this plugin<\/strong> op het formulier om de functie aan te roepen wanneer een gebruiker een plugin selecteert en het formulier verzendt. Deze functie voorkomt de standaard formulieractie en roept <code>fetchSites<\/code> aan:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (e) =&gt; {\n    e.preventDefault();\n    fetchSites();\n};<\/code><\/pre>\n<p>Hiermee worden, wanneer een gebruiker een bepaalde plugin selecteert en op de verzendknop klikt, alle sites met die plugin opgehaald en opgeslagen in de <code>sites<\/code> status.<\/p>\n<h4>Sites met de geselecteerde plugin weergeven<\/h4>\n<p>Nadat je de relevante sites met succes hebt opgeslagen in je <code>sites<\/code> status, is de volgende stap om deze gegevens weer te geven in de gebruikersinterface van je project. Het doel is om elke site te presenteren als een lijstitem met belangrijke details en een voorwaardelijke knop voor plugin-updates.<\/p>\n<pre><code class=\"language-jsx\">&lt;ul&gt;\n    {sites.map((site) =&gt; (\n        &lt;li key={site.env_id}&gt;\n            &lt;div className=\"info\"&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Site Name:&lt;\/b&gt; {site.name}\n                &lt;\/p&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Plugin Status:&lt;\/b&gt; {site.status}\n                &lt;\/p&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Plugin Version:&lt;\/b&gt; {site.version}\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;button&gt;\n                className={`sm-btn ${\n                    site.updateAvailable !== 'available' ? 'disabled-btn' : ''\n                }`}\n                disabled={site.updateAvailable !== 'available'}\n            &gt;\n                {site.updateAvailable === 'available'\n                    ? `Update to v.${site.updateVersion}`\n                    : 'Up to date'}\n            &lt;\/button&gt;\n        &lt;\/li&gt;\n    ))}\n&lt;\/ul&gt;<\/code><\/pre>\n<p>In de bovenstaande code wordt de array <code>sites<\/code> ge\u00eftereerd met de methode <code>.map()<\/code>, waardoor een lijst (<code>&lt;ul&gt;<\/code>) met sites (<code>&lt;li&gt;<\/code> elementen) ontstaat. Elk lijstitem bevat details over de site en een knop voor plugin-updates.<\/p>\n<p>De knop in de UI verandert van stijl en functie op basis van de updatestatus van de plugin: hij is actief voor beschikbare updates, anders uitgeschakeld en gelabeld als &#8220;Up to date,&#8221; geregeld door voorwaardelijke <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS<\/a> en het disabled attribuut.<\/p>\n<p>Laten we ook, om de gebruikerservaring te verbeteren, een laadtekst toevoegen die conditioneel gebruik maakt van de <code>isLoading<\/code> status wanneer de sites worden opgehaald.<\/p>\n<pre><code class=\"language-jsx\">{isLoading && (\n    &lt;div className=\"loading\"&gt;\n        &lt;p&gt;Loading...&lt;\/p&gt;\n    &lt;\/div&gt;\n)}<\/code><\/pre>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/list-sites-plugin.png\" alt=\"Een lijst met sites die een bepaalde plugin gebruiken van de Kinsta bedrijfsaccount met knoppen om ze afzonderlijk of in \u00e9\u00e9n keer bij te werken.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Een lijst met sites die een bepaalde plugin gebruiken van de Kinsta bedrijfsaccount met knoppen om ze afzonderlijk of in \u00e9\u00e9n keer bij te werken.<\/figcaption><\/figure>\n<h3>Plugins bijwerken met Kinsta API<\/h3>\n<p>Tot nu toe hebben we sites kunnen ophalen met belangrijke details en toegang tot hun plugins. Het doel van deze tool is om het bijwerken van plugins op meerdere sites te vergemakkelijken met behulp van de Kinsta API. Het proces omvat het initi\u00ebren van updates en het bijhouden van de voortgang ervan.<\/p>\n<h4>Plugin-updates starten<\/h4>\n<p>Er is een knop voor elke site in de lijst. De vormgeving geeft aan of er een update beschikbaar is. Als er een update beschikbaar is, activeer je door op de knop te klikken de functie <code>updatePlugin<\/code>.<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt;\n    className={`sm-btn ${\n        site.updateAvailable !== 'available' ? 'disabled-btn' : ''\n    }`}\n    disabled={site.updateAvailable !== 'available'}\n    onClick={() =&gt;\n        updatePlugin(site.env_id, site.updateVersion)\n    }\n&gt;\n    {site.updateAvailable === 'available'\n        ? `Update to v.${site.updateVersion}`\n        : 'Up to date'}\n&lt;\/button&gt;<\/code><\/pre>\n<p>De <code>onClick<\/code> handler callt <code>updatePlugin<\/code> met de omgevings-ID van de site en de laatste versie van de plugin (<code>updateVersion<\/code>). Deze functie stuurt een PUT verzoek naar de Kinsta API om de plugin bij te werken.<\/p>\n<pre><code class=\"language-jsx\">const updatePlugin = async (envId, pluginVersion) =&gt; {\n    const resp = await fetch(`${KinstaAPIUrl}\/sites\/environments\/${envId}\/plugins`, {\n        method: 'PUT',\n        headers: {\n            'Content-Type': 'application\/json',\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n        body: JSON.stringify({\n            name: pluginName,\n            update_version: pluginVersion,\n        }),\n    });\n\n    const data = await resp.json();\n    \/\/ Further processing\n};<\/code><\/pre>\n<h4>De voortgang van de update volgen<\/h4>\n<p>Nadat je de update hebt gestart, moet je de voortgang ervan controleren. De Kinsta API geeft een respons zoals dit na het initi\u00ebren van een update:<\/p>\n<pre><code class=\"language-jsx\">{\n  \"operation_id\": \"wp-plugin:update-54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n  \"message\": \"Updating WordPress plugin in progress\",\n  \"status\": 202\n}<\/code><\/pre>\n<p>De <code>operation_id<\/code> houdt de updatestatus bij via het operations endpoint. Maak een functie om dit API verzoek te doen en verwacht de <code>operation_id<\/code> als argument:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Check plugin update status\nconst checkPluginUpdateStatus = async (operationId) =&gt; {\n    const resp = await fetch(`${KinstaAPIUrl}\/operations\/${operationId}`, {\n        method: 'GET',\n        headers: {\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n    });\n    const data = await resp.json();\n    return data.status;\n};<\/code><\/pre>\n<p>Gebruik binnen <code>updatePlugin<\/code> een <code>if<\/code> statement om te controleren of de initi\u00eble update-aanvragen <code>status<\/code> <code>202<\/code> zijn. Als dat zo is, wordt er een interval ingesteld om <code>checkPluginUpdateStatus<\/code> elke vijf seconden (5000 milliseconden) aan te roepen.<\/p>\n<p>Het interval controleert herhaaldelijk de updatestatus en als dat succesvol is, wordt het interval gewist en wordt <code>fetchSites<\/code> gecallt om de lijst met sites te verversen. Als er een fout optreedt tijdens deze controles, wordt deze gelogd op de console.<\/p>\n<pre><code class=\"language-jsx\">if (data.status === 202) {\n    const interval = setInterval(() =&gt; {\n        checkPluginUpdateStatus(data.operation_id)\n            .then((status) =&gt; {\n                console.log(status);\n                if (status === 200) {\n                    clearInterval(interval);\n                    fetchSites();\n                }\n            })\n            .catch((error) =&gt; {\n                \/\/ Handle any errors that occur during the promise resolution\n                console.error('Error:', error);\n            });\n    }, 5000);\n}<\/code><\/pre>\n<h4>Feedback van de gebruiker tijdens het gebruik<\/h4>\n<p>Alles werkt goed tot zover, maar het is goed om de gebruiker bewust te maken van de voortgang van de operatie in plaats van ze te laten gissen. Je kunt dit doen door een melding te tonen die verschijnt als de bewerking bezig is en weer verdwijnt als de bewerking klaar is. Maak een <code>showStatusBar<\/code> status om dit te regelen:<\/p>\n<pre><code class=\"language-jsx\">const [showStatusBar, setShowStatusBar] = useState(false);<\/code><\/pre>\n<p>Wanneer <code>showStatusBar<\/code> <code>true<\/code> is, verschijnt er een statusbalk bovenaan het scherm die aangeeft dat er een update wordt uitgevoerd. Deze is zo vormgegeven dat hij vast aan de bovenkant van het scherm staat.<\/p>\n<pre><code class=\"language-jsx\">{showStatusBar && (\n    &lt;div className=\"status-bar\"&gt;\n        &lt;p&gt;Updating WordPress plugin in progress...&lt;\/p&gt;\n    &lt;\/div&gt;\n)}<\/code><\/pre>\n<p>Je kunt nu het statement <code>if<\/code> in de functie <code>updatePlugin<\/code> aanpassen om <code>showStatusBar<\/code> in te stellen op <code>true<\/code> of <code>false<\/code> op basis van de updatestatus:<\/p>\n<pre><code class=\"language-jsx\">if (data.status === 202) {\n    setShowStatusBar(true);\n    const interval = setInterval(() =&gt; {\n        checkPluginUpdateStatus(data.operation_id)\n            .then((status) =&gt; {\n                console.log(status);\n                if (status === 200) {\n                    setShowStatusBar(false);\n                    clearInterval(interval);\n                    fetchSites();\n                }\n            })\n            .catch((error) =&gt; {\n                \/\/ Handle any errors that occur during the promise resolution\n                console.error('Error:', error);\n            });\n    }, 5000);\n}<\/code><\/pre>\n<p>Deze aanpak zorgt ervoor dat gebruikers op de hoogte blijven van de status van plugin-updates, wat de algehele bruikbaarheid van de tool verbetert.<\/p>\n<h3>Plugins bijwerken op meerdere sites met Kinsta API<\/h3>\n<p>De belangrijkste functie van deze tool is de mogelijkheid om een bepaalde plugin met \u00e9\u00e9n klik bij te werken op meerdere sites binnen je Kinsta account. Dit is vergelijkbaar met de functionaliteit die is ge\u00efmplementeerd voor het bijwerken van plugins op een enkele site.<\/p>\n<p>Het proces bestaat uit het doorlopen van de <code>sites<\/code> status, die de sites bevat met de specifieke plugin die een update nodig heeft. Voor elke site die een update nodig heeft, wordt een API verzoek gedaan om de plugin bij te werken en vervolgens wordt de status van de bewerking bijgehouden:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Update all plugins\nconst updateAllPlugins = async () =&gt; {\n    sites.map(async (site) =&gt; {\n        if (site.updateAvailable === 'available') {\n            const environmentId = site.env_id;\n            const resp = await fetch(\n                `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n                {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application\/json',\n                        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n                    },\n                    body: JSON.stringify({\n                        name: pluginName,\n                        update_version: site.updateVersion,\n                    }),\n                }\n            );\n            const data = await resp.json();\n            if (data.status === 202) {\n                setShowStatusBar(true);\n                const interval = setInterval(() =&gt; {\n                    checkPluginUpdateStatus(data.operation_id)\n                        .then((status) =&gt; {\n                            console.log(status);\n                            if (status === 200) {\n                                setShowStatusBar(false);\n                                clearInterval(interval);\n                                fetchSites();\n                            }\n                        })\n                        .catch((error) =&gt; {\n                            \/\/ Handle any errors that occur during the promise resolution\n                            console.error('Error:', error);\n                        });\n                }, 5000);\n            }\n        }\n    });\n};<\/code><\/pre>\n<p>Deze functie is gekoppeld aan een <strong>Update All<\/strong> knop. Om de gebruikerservaring te verbeteren, toont de knop het versienummer waarnaar de plugins worden bijgewerkt:<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt; className=\"sm-btn\" onClick={updateAllPlugins}&gt;\n    Update all sites to v.\n    {\n        sites.find((site) =&gt; site.updateVersion !== null)\n            ?.updateVersion\n    }\n&lt;\/button&gt;<\/code><\/pre>\n<p>Bovendien geven we deze knop voorwaardelijk weer, zodat hij alleen verschijnt als meer dan \u00e9\u00e9n site een update voor de plugin nodig heeft. Als alle sites up-to-date zijn, wordt in plaats daarvan een bericht weergegeven:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"list-title\"&gt;\n    &lt;h3&gt;Sites with {pluginName} plugin&lt;\/h3&gt;\n    {sites.filter((site) =&gt; site.updateAvailable === 'available')\n        .length &gt; 1 && (\n        &lt;button className=\"sm-btn\" onClick={updateAllPlugins}&gt;\n            Update all sites to v.\n            {\n                sites.find((site) =&gt; site.updateVersion !== null)\n                    ?.updateVersion\n            }\n        &lt;\/button&gt;\n    )}\n    {sites.every((site) =&gt; site.updateAvailable !== 'available') && (\n        &lt;p&gt;All sites are up to date&lt;\/p&gt;\n    )}\n&lt;\/div&gt;<\/code><\/pre>\n<p>Met deze implementaties kun je nu moeiteloos plugins bijwerken voor meerdere sites in je Kinsta account, wat de effici\u00ebntie verhoogt en ervoor zorgt dat al je sites up-to-date zijn met de nieuwste pluginversies.<\/p>\n<h2>Deploy je statische React site gratis op Kinsta<\/h2>\n<p>We gebruiken <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">de statische site hosting van Kinsta<\/a> om de applicatie te demonstreren. In de praktijk zou je deze React app vanuit je eigen netwerk kunnen draaien of pas implementeren nadat je voor de veiligheid een authenticatiemiddel aan deze tool hebt toegevoegd.<\/p>\n<p>Je kunt je React applicaties gemaakt met de <code>create-react-app<\/code> als een statische site hosten met behulp van onze statische site hosting, gratis, door je code naar een Git provider van je voorkeur te pushen (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> of <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>).<\/p>\n<p>Zodra je repo klaar is, volg je deze stappen om je statische site te deployen op Kinsta:<\/p>\n<ol start=\"1\">\n<li>Log in of maak een account aan om je <a href=\"https:\/\/my.kinsta.com\/?lang=nl\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a> dashboard te bekijken.<\/li>\n<li>Autoriseer Kinsta met je Git provider.<\/li>\n<li>Klik op <strong>Statische sites<\/strong> op de linker zijbalk, klik dan op <strong>Site toevoegen<\/strong>.<\/li>\n<li>Selecteer de repository en de branch waarvan je wilt deployen.<\/li>\n<li>Geef je site een unieke naam.<\/li>\n<li>Voeg de bouwinstellingen toe in het volgende formaat:\n<ul>\n<li><strong>Build commando:<\/strong> npm run build<\/li>\n<li><strong>Node versie:<\/strong> 18.16.0<\/li>\n<li><strong>Publish directory:<\/strong> build<\/li>\n<\/ul>\n<\/li>\n<li>Klik ten slotte op <strong>Site maken<\/strong>.<\/li>\n<\/ol>\n<p>En dat is het! Je hebt nu binnen een paar seconden een gedeployde site. Je krijgt een link waarmee je naar de gedeployde versie van je site kunt gaan. Als je wilt, kun je later je <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">eigen domein<\/a> en <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">SSL certificaat<\/a> toevoegen.<\/p>\n<p>Als alternatief voor statische site hosting kun je je statische site deployen met Kinsta&#8217;s <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Applicatie Hosting<\/a>, die een grotere hostingflexibiliteit, een breder scala aan voordelen en toegang tot robuustere features biedt. Bijvoorbeeld schaalbaarheid, custom deployments met behulp van een Dockerfile en <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">uitgebreide analyses<\/a> met real-time en historische gegevens.<\/p>\n<h2>Samenvatting<\/h2>\n<p>De Kinsta API opent mogelijkheden die verder gaan dan wat we hebben besproken. Een andere interessante toepassing zou het <a href=\"https:\/\/kinsta.com\/nl\/blog\/maken-slackbot-sitebeheer\/\">maken van een Slackbot<\/a> kunnen zijn die je op Slack waarschuwt wanneer een plugin verouderd is. Deze integratie kan je workflow aanzienlijk stroomlijnen en je op de hoogte en proactief houden.<\/p>\n<p>Je kunt ook een soortgelijke tool ontwikkelen, zoals uitgelegd in deze gids, om <a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Site-Themes-and-Plugins#operation\/updateTheme\" target=\"_blank\" rel=\"noopener noreferrer\">je thema&#8217;s bij te werken<\/a>, omdat de Kinsta API hier al endpoints voor heeft.<\/p>\n<p>Het Kinsta team werkt voortdurend aan het toevoegen van de volgende functies door feedback op de voet te volgen en ernaar te luisteren, zoals Kristof Siket, Development Team Lead voor Kinsta API, deelt:<\/p>\n<blockquote><p><em>Feedback van gebruikers bepaalt de prioritering van features. Het huidige plan dekt de Tools pagina niet volledig; in plaats daarvan worden functies gebaseerd op verzoeken van gebruikers en verzamelde feedback. Als je vindt dat een specifieke tool of endpoint moet worden opgenomen in de Kinsta API, <a href=\"https:\/\/kinsta.com\/nl\/docs\/service-informatie\/kinsta-research-programma\/#how-to-join\">stuur dan gerust je feedback<\/a>.<\/em><\/p><\/blockquote>\n<p><em>Hoe gebruik je momenteel de Kinsta API? Welke functies of verbeteringen zou je graag zien in toekomstige updates?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Plugins spelen een belangrijke rol bij het aanpassen en verbeteren van je WordPress sites. Ze worden gebruikt om functionaliteit zoals contactformulieren, e-commerce en analytics aan je &#8230;<\/p>\n","protected":false},"author":287,"featured_media":58332,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[911,853,871,899],"class_list":["post-58331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-kinsta-diensten","topic-react","topic-wordpress-plugins"],"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>WordPress-plugins bijwerken op meerdere sites met Kinsta API - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Stroomlijn je WordPress beheer met onze handleiding voor het bouwen van een tool om plugins in bulk bij te werken op meerdere sites met behulp van Kinsta&#039;s API.\" \/>\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\/plugins-in-bulk-bijwerken-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo bouw je een tool om met Kinsta API op meerdere sites WordPress plugins in bulk bij te werken\" \/>\n<meta property=\"og:description\" content=\"Stroomlijn je WordPress beheer met onze handleiding voor het bouwen van een tool om plugins in bulk bij te werken op meerdere sites met behulp van Kinsta&#039;s API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/\" \/>\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=\"2024-02-14T18:21:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-22T16:53:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Stroomlijn je WordPress beheer met onze handleiding voor het bouwen van een tool om plugins in bulk bij te werken op meerdere sites met behulp van Kinsta&#039;s API.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo bouw je een tool om met Kinsta API op meerdere sites WordPress plugins in bulk bij te werken\",\"datePublished\":\"2024-02-14T18:21:03+00:00\",\"dateModified\":\"2024-02-22T16:53:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/\"},\"wordCount\":3134,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/\",\"name\":\"WordPress-plugins bijwerken op meerdere sites met Kinsta API - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"datePublished\":\"2024-02-14T18:21:03+00:00\",\"dateModified\":\"2024-02-22T16:53:17+00:00\",\"description\":\"Stroomlijn je WordPress beheer met onze handleiding voor het bouwen van een tool om plugins in bulk bij te werken op meerdere sites met behulp van Kinsta's API.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Kinsta diensten\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/kinsta-diensten\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo bouw je een tool om met Kinsta API op meerdere sites WordPress plugins in bulk bij te werken\"}]},{\"@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\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WordPress-plugins bijwerken op meerdere sites met Kinsta API - Kinsta\u00ae","description":"Stroomlijn je WordPress beheer met onze handleiding voor het bouwen van een tool om plugins in bulk bij te werken op meerdere sites met behulp van Kinsta's API.","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\/plugins-in-bulk-bijwerken-wordpress\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo bouw je een tool om met Kinsta API op meerdere sites WordPress plugins in bulk bij te werken","og_description":"Stroomlijn je WordPress beheer met onze handleiding voor het bouwen van een tool om plugins in bulk bij te werken op meerdere sites met behulp van Kinsta's API.","og_url":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-02-14T18:21:03+00:00","article_modified_time":"2024-02-22T16:53:17+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Stroomlijn je WordPress beheer met onze handleiding voor het bouwen van een tool om plugins in bulk bij te werken op meerdere sites met behulp van Kinsta's API.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"20 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo bouw je een tool om met Kinsta API op meerdere sites WordPress plugins in bulk bij te werken","datePublished":"2024-02-14T18:21:03+00:00","dateModified":"2024-02-22T16:53:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/"},"wordCount":3134,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/","url":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/","name":"WordPress-plugins bijwerken op meerdere sites met Kinsta API - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","datePublished":"2024-02-14T18:21:03+00:00","dateModified":"2024-02-22T16:53:17+00:00","description":"Stroomlijn je WordPress beheer met onze handleiding voor het bouwen van een tool om plugins in bulk bij te werken op meerdere sites met behulp van Kinsta's API.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/plugins-in-bulk-bijwerken-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Kinsta diensten","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/kinsta-diensten\/"},{"@type":"ListItem","position":3,"name":"Zo bouw je een tool om met Kinsta API op meerdere sites WordPress plugins in bulk bij te werken"}]},{"@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\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58331","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\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=58331"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58331\/revisions"}],"predecessor-version":[{"id":58504,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58331\/revisions\/58504"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58331\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/58332"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=58331"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=58331"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=58331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}