{"id":68978,"date":"2024-02-14T19:15:14","date_gmt":"2024-02-14T18:15:14","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=68978&#038;preview=true&#038;preview_id=68978"},"modified":"2024-02-22T09:09:25","modified_gmt":"2024-02-22T08:09:25","slug":"massenaktualisierung-von-plugins-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/","title":{"rendered":"Baue ein Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites mit der Kinsta-API"},"content":{"rendered":"<p>Plugins spielen eine wichtige Rolle bei der Anpassung und Verbesserung deiner WordPress-Websites. Sie werden verwendet, um Funktionen wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-kontaktformular-plugins\/\">Kontaktformulare<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-ecommerce-plugins\/\">E-Commerce<\/a> und <a href=\"https:\/\/kinsta.com\/de\/thema\/analysen\/\">Analysen<\/a> zu deinen Seiten hinzuzuf\u00fcgen, ohne dass du programmieren musst.<\/p>\n<p>Wie WordPress, das regelm\u00e4\u00dfig aktualisiert wird, erhalten auch Plugins regelm\u00e4\u00dfig Updates, um neue Funktionen hinzuzuf\u00fcgen, Sicherheitsl\u00fccken zu schlie\u00dfen, die Kompatibilit\u00e4t zu verbessern und vieles mehr. Deshalb hat Kinsta die <a href=\"https:\/\/kinsta.com\/de\/changelog\/plugins-und-themes-aktualisieren\/\">Plugin- und Theme-Verwaltung<\/a> zu den Tools hinzugef\u00fcgt, die in MyKinsta f\u00fcr jede deiner Websites verf\u00fcgbar sind.<\/p>\n<p>F\u00fcr vielbesch\u00e4ftigte Kunden wie Agenturen kann die Aktualisierung von Plugins f\u00fcr viele Websites jedoch eine gro\u00dfe Herausforderung sein. In diesem Artikel wird eine L\u00f6sung vorgestellt, die die <a href=\"https:\/\/kinsta.com\/de\/changelog\/kinsta-api\/\">Kinsta-API<\/a> nutzt, um Plugins f\u00fcr mehrere Websites gleichzeitig zu verwalten.<\/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>Was du bauen wirst<\/h2>\n<p>In diesem Leitfaden geht es um den Aufbau einer fortgeschrittenen L\u00f6sung mit der Kinsta-API, die jetzt Endpunkte zum Abrufen und Aktualisieren von Plugins bietet.<\/p>\n<p>Darin erstellen wir eine benutzerdefinierte React-Anwendung, die alle Plugins von deinem Kinsta-Unternehmenskonto abruft. Mit diesem Tool kannst du <strong>ein bestimmtes Plugin auf mehreren Websites identifizieren und aktualisieren<\/strong>, was den Prozess erheblich vereinfacht.<\/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=\"Mit React und der Kinsta-API erstelltes Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Mit React und der Kinsta-API erstelltes Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Wenn du eine <a href=\"https:\/\/kinsta.com\/de\/agentur-verzeichnis\/\">Agentur<\/a> bist, die mehrere Websites auf Kinsta verwaltet, kannst du dieses Tool sofort nutzen, ohne dich mit diesem Leitfaden besch\u00e4ftigen zu m\u00fcssen, es sei denn, du m\u00f6chtest verstehen, wie es mit der API interagiert, um eigene Funktionen hinzuzuf\u00fcgen.<\/p>\n<p>Um dieses Tool zu nutzen, erstelle ein <a href=\"https:\/\/kinsta.com\/de\/thema\/git\/\">Git<\/a>-Repository <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\" target=\"_blank\" rel=\"noopener noreferrer\">mit dieser Vorlage auf GitHub<\/a>. W\u00e4hle <strong>diese Vorlage verwenden <\/strong>&gt;<strong> Neues Repository erstellen<\/strong>, um den Startcode in ein neues Repository in deinem GitHub-Konto zu kopieren.<\/p>\n<p>Sobald dein Repository eingerichtet ist, kannst du es auf unserer kostenlosen Hosting-Plattform f\u00fcr statische Websites bereitstellen und die folgenden <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-umgebungsvariable\/\">Umgebungsvariablen<\/a> hinzuf\u00fcgen:<\/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>Das war&#8217;s schon. Jetzt kannst du dieses Tool f\u00fcr dein Kinsta-Unternehmen nutzen, um deine Website-Verwaltungsprozesse zu optimieren.<\/p>\n<\/aside>\n\n<h2>Anwendungsvoraussetzungen<\/h2>\n<p>Um an diesem Projekt mitzuarbeiten, solltest du Folgendes mitbringen:<\/p>\n<ul>\n<li>Ein grundlegendes Verst\u00e4ndnis von <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> und <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>.<\/li>\n<li>Eine gewisse Vertrautheit mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a>.<\/li>\n<li>Node.js und npm (<a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">Node Package Manager<\/a>) oder yarn auf deinem Computer installiert haben.<\/li>\n<\/ul>\n<h2>Die Kinsta-API verstehen<\/h2>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/docs\/kinsta-api\/\">Kinsta-API<\/a> ist ein leistungsstarkes Werkzeug, mit dem du programmatisch mit Kinsta-Diensten wie gehosteten WordPress-Seiten interagieren kannst. Sie kann dir helfen, verschiedene Aufgaben im Zusammenhang mit der WordPress-Verwaltung zu automatisieren, z. B. das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/\">Erstellen von Websites<\/a>, das <a href=\"https:\/\/kinsta.com\/de\/blog\/plane-wartungsaufgaben-kinsta-api\/\">Abrufen von Website-Informationen<\/a>, das Abrufen <a href=\"https:\/\/kinsta.com\/de\/blog\/kinsta-api-schluessel\/#how-to-use-kinsta-api-to-build-a-status-checker\">des Status einer Website<\/a>, das <a href=\"https:\/\/kinsta.com\/de\/blog\/server-protokolle-api\/\">Durchsuchen<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-backups-api\/\">Wiederherstellen von Backups<\/a> und vieles mehr.<\/p>\n<p>Um die Kinsta-API zu nutzen, musst du ein Konto mit mindestens einer WordPress-Site, <a href=\"https:\/\/sevalla.com\/application-hosting\/\">-Anwendung<\/a> oder <a href=\"https:\/\/sevalla.com\/database-hosting\/\">-Datenbank<\/a> in MyKinsta haben. Au\u00dferdem musst du einen API-Schl\u00fcssel erstellen, um dich zu authentifizieren und auf dein Konto zuzugreifen.<\/p>\n<p>So generierst du einen API-Schl\u00fcssel:<\/p>\n<ol start=\"1\">\n<li>Gehe zu deinem <a href=\"https:\/\/my.kinsta.com\/?lang=de\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta-Dashboard<\/a>.<\/li>\n<li>Navigiere zur Seite mit den <strong>API-Schl\u00fcsseln <\/strong>(<strong>Dein Name <\/strong>&gt;<strong> Unternehmenseinstellungen <\/strong>&gt;<strong> API-Schl\u00fcssel<\/strong>).<\/li>\n<li>Klicke auf <strong>API-Schl\u00fcssel erstellen<\/strong>.<\/li>\n<li>W\u00e4hle ein Ablaufdatum oder lege ein benutzerdefiniertes Startdatum und die Anzahl der Stunden fest, nach denen der Schl\u00fcssel abl\u00e4uft.<\/li>\n<li>Gib dem Schl\u00fcssel einen eindeutigen Namen.<\/li>\n<li>Klicke auf <strong>Erzeugen<\/strong>.<\/li>\n<\/ol>\n<p>Nachdem du einen API-Schl\u00fcssel erstellt hast, kopiere ihn und bewahre ihn an einem sicheren Ort auf (es wird empfohlen, einen <a href=\"https:\/\/kinsta.com\/de\/blog\/passwort-manager\/\">Passwortmanager<\/a> zu verwenden). Du kannst mehrere API-Schl\u00fcssel erstellen, die dann auf der Seite <strong>API-Schl\u00fcssel<\/strong> aufgelistet werden. Wenn du einen API-Schl\u00fcssel widerrufen musst, klicke auf die Schaltfl\u00e4che <strong>Widerrufen<\/strong>.<\/p>\n<h2>Richte deine React-Entwicklungsumgebung ein<\/h2>\n<p>React ist eine <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">beliebte JavaScript-Bibliothek<\/a> zum Erstellen von Benutzeroberfl\u00e4chen. Sie erm\u00f6glicht es Entwicklern, deklarative Komponenten zu erstellen, die verschiedene Teile der Benutzeroberfl\u00e4che darstellen. Diese Komponenten werden mit der <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\">JSX-Syntax<\/a> definiert, einer Kombination aus JavaScript und HTML.<\/p>\n<p>Um loszulegen, befolge diese Schritte:<\/p>\n<ol start=\"1\">\n<li>Navigiere in den Ordner, in dem du dein Projekt erstellen m\u00f6chtest, und benutze <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a>, um ein React-Projekt zu erstellen:\n<pre><code class=\"language-bash\">npx create-react-app &lt;project-name&gt;<\/code><\/pre>\n<p>\u00c4ndere <code>&lt;project-name&gt;<\/code> oben in den gew\u00fcnschten Namen f\u00fcr dein Projekt.<\/li>\n<li>Sobald dies erfolgreich war, navigiere in den Projektordner und starte den Entwicklungsserver:\n<pre><code class=\"language-bash\">cd &lt;project-name&gt;\nnpm run start<\/code><\/pre>\n<p>Deine React-Anwendung \u00f6ffnet sich in deinem Standard-Webbrowser auf http:\/\/localhost:3000.<\/li>\n<\/ol>\n<p>Wenn du ein React-Projekt mit <code>create-react-app<\/code> erstellst, wird eine Ordnerstruktur angelegt. Der wichtigste Ordner ist <strong>src<\/strong>, in dem die Entwicklung stattfindet. Die wichtigsten Dateien in diesem Ordner sind:<\/p>\n<ul>\n<li><strong>App.js:<\/strong> Dies ist die Hauptkomponente, die alle anderen in deiner React-Anwendung gerendert wird. Hier wird dein gesamter Code f\u00fcr dieses Tool eingef\u00fcgt.<\/li>\n<li><strong>index.js<\/strong>: Sie ist der Einstiegspunkt, wird zuerst geladen und ist f\u00fcr das Rendern von <strong>App.js<\/strong> verantwortlich.<\/li>\n<li><strong>index.css:<\/strong> Diese Datei definiert das allgemeine Styling und Layout deiner Anwendung. Alle Stile werden hier eingef\u00fcgt.<\/li>\n<\/ul>\n<h2>Benutzeroberfl\u00e4che erstellen und gestalten<\/h2>\n<p>Konzentrieren wir uns auf das Erstellen und Gestalten der Benutzeroberfl\u00e4che f\u00fcr eine einfache Anwendung, die in der Datei <strong>App.js<\/strong> untergebracht ist, ohne das Routing zu ber\u00fccksichtigen. Unsere Hauptbenutzeroberfl\u00e4che ist ein Formular mit einem <code>select<\/code> Feld, in dem du die einzelnen Plugins deiner Kinsta-Websites auflisten kannst, und einer <code>submit<\/code> Schaltfl\u00e4che, mit der du die Websites mit dem ausgew\u00e4hlten Plugin abrufen kannst.<\/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=\"Benutzeroberfl\u00e4che f\u00fcr das Plugin-Manager-Tool, um auf eine Liste von Plugins zuzugreifen und Websites zu laden\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Benutzeroberfl\u00e4che f\u00fcr das Plugin-Manager-Tool, um auf eine Liste von Plugins zuzugreifen und Websites zu laden<\/figcaption><\/figure>\n<p>Au\u00dferdem werden in einem Anzeigebereich Website-Details wie Name, Plugin-Status und Version angezeigt. Es gibt eine Schaltfl\u00e4che, mit der du jede einzelne Seite aktualisieren kannst, und eine allgemeine Schaltfl\u00e4che, mit der du alle Seiten, die ein Plugin-Update ben\u00f6tigen, auf einmal aktualisieren kannst.<\/p>\n<p>F\u00fcge in deiner <strong>App.js-Datei<\/strong> den folgenden Code ein:<\/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>Um dieses Projekt zu gestalten, besuche die <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">CSS-Datei in unserem vollst\u00e4ndigen GitHub-Repository<\/a> und kopiere den Code in deine <strong>index.css-Datei<\/strong>.<\/p>\n<h2>Mit der Kinsta-API interagieren<\/h2>\n<p>Die Kinsta-API bietet eine Reihe von Endpunkten, \u00fcber die du auf verschiedene Parameter zugreifen kannst, die f\u00fcr die Interaktion mit dem Plugin einer Website notwendig sind. Wenn du zum Beispiel ein Plugin abrufen oder aktualisieren m\u00f6chtest, musst du zun\u00e4chst die Umgebungs-ID der Website ermitteln.<\/p>\n<p>Die Ermittlung dieser Umgebungs-ID ist ein sequentieller Prozess. Zun\u00e4chst musst du die ID der Website ermitteln. Um die Site-ID zu erhalten, brauchst du deine Kinsta-Unternehmens-ID. Diese Unternehmens-ID findest du in deinem MyKinsta-Dashboard (<strong>Unternehmenseinstellungen<\/strong> &gt; <strong>Abrechnungsdetails<\/strong>). Es handelt sich dabei um sensible Informationen, die du wie deinen API-Schl\u00fcssel mit niemandem teilen m\u00f6chtest.<\/p>\n<p>Du kannst sie sicher als Umgebungsvariable in deiner React-Anwendung speichern, indem du eine <strong>.env-Datei<\/strong> im Stammverzeichnis deines Projekts erstellst. In dieser Datei f\u00fcgst du Folgendes mit dem richtigen Wert ein:<\/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>Um innerhalb deines Projekts auf diese Umgebungsvariablen zuzugreifen, kannst du die Syntax <code>process.env.THE_VARIABLE<\/code> verwenden. Um zum Beispiel auf die <code>REACT_APP_KINSTA_COMPANY_ID<\/code> zuzugreifen, w\u00fcrdest du <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code> verwenden.<\/p>\n<p>Wenn du die <strong>.env-Datei<\/strong> zu deiner <strong><a href=\"https:\/\/kinsta.com\/de\/blog\/gitignore-funktioniert-nicht\/\">.gitignore<\/a><\/strong> datei hinzuzuf\u00fcgen, ist wichtig, um zu verhindern, dass sie auf GitHub ver\u00f6ffentlicht wird. So wird sichergestellt, dass deine sensiblen Informationen privat und sicher bleiben.<\/p>\n<h3>Abruf aller Websites und Plugins \u00fcber die Kinsta-API<\/h3>\n<p>Um die Plugin-Daten f\u00fcr alle Websites abzurufen, die von deinem Kinsta-Unternehmenskonto verwaltet werden, kannst du die Kinsta-API nutzen, indem du drei API-Anfragen stellst. Hier ist eine kurze Erkl\u00e4rung:<\/p>\n<p>Speichere zun\u00e4chst die Kinsta-API-URL in einer Variablen, damit du sie leicht wiederfinden kannst.<\/p>\n<pre><code class=\"language-js\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n<ol start=\"1\">\n<li><strong>Liste der Unternehmensseiten abrufen:<\/strong> Du musst eine Liste aller WordPress-Seiten abrufen, die mit deinem Unternehmen verbunden sind. Dazu erstellst du eine Abfrage mit der ID des Unternehmens, stellst eine GET-Anfrage mit der entsprechenden Berechtigung, verarbeitest die Antwort im JSON-Format und extrahierst die Website-Details aus der Antwort.\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>Abfrage der Site Environment ID:<\/strong> Der vorherige Schritt liefert ein Array mit WordPress-Websites. F\u00fchre f\u00fcr jede Website eine Schleife durch und stelle eine weitere GET-Anfrage, um die zugeh\u00f6rigen Umgebungen abzurufen.\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>Liste der WordPress-Website-Plugins abrufen:<\/strong> Nachdem du die Site-ID, den Namen und die Umgebung erhalten hast, kannst du jetzt die Umgebungs-ID verwenden, um eine Liste aller Plugins auf jeder Website abzurufen. Zuerst musst du die Versprechen aus dem vorherigen Schritt aufl\u00f6sen und dann die GET-Anfragen f\u00fcr die Plugins stellen:\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>Konsolidierung des Prozesses:<\/strong> Um den Prozess zu straffen, kannst du diese API-Anfragen in einer einzigen asynchronen Funktion <code>getSitesWithPluginData<\/code> kapseln, die wiederverwendet werden kann. Diese Funktion f\u00fchrt die oben beschriebenen Schritte aus und gibt ein Array mit den wichtigsten Informationen zu jeder Website zur\u00fcck, darunter die Umgebungs-ID, den Website-Namen und ein Array mit den 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>Eindeutige Plugins von allen Websites abrufen<\/h3>\n<p>In deiner Anwendung m\u00f6chtest du die Liste der Plugins f\u00fcr alle Websites in einem <code>select<\/code> Dropdown-Men\u00fc anzeigen. Um dies zu erreichen, ruft die Funktion <code>getSitesWithPluginData<\/code> die Umgebungs-ID, den Namen und die Plugins jeder Website ab. Diese Daten bilden die Grundlage f\u00fcr die Extraktion einer Liste von Plugins.<\/p>\n<p>Definiere eine neue Funktion, <code>fetchAllSitesPlugins<\/code>, die <code>getSitesWithPluginData<\/code> aufruft und deren Ausgabe verarbeitet, um eine Liste aller Plugins zu erhalten:<\/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>Dieser Code durchl\u00e4uft die Daten jeder Website und stellt eine Liste der Plugins zusammen. Um sicherzustellen, dass jedes Plugin nur einmal aufgelistet wird, verwendest du das JavaScript <code>Set<\/code> Objekt, das eindeutige Werte speichert:<\/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>Die Methode <code>.flat()<\/code> gl\u00e4ttet die Array-Struktur und <code>.map()<\/code> f\u00fchrt eine Schleife durch, um nur die Plugin-Namen zu extrahieren. Das <code>Set<\/code> Objekt filtert Duplikate heraus.<\/p>\n<p>Um diese Daten zu laden und in deiner React-Anwendung anzuzeigen, verwendest du die Hooks <code>useState()<\/code> und <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>Der <code>useEffect()<\/code> Hook sorgt daf\u00fcr, dass die Daten beim Einh\u00e4ngen der Komponente geholt und gesetzt werden. Der <code>useState()<\/code> Hook verwaltet die Liste der einzelnen Plugins.<\/p>\n<p>Schlie\u00dflich werden diese Plugins in einem <code>select<\/code> Feld angezeigt. Wenn die Plugins noch geladen werden, zeige eine Platzhaltermeldung an:<\/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 diesem Code:<\/p>\n<ul>\n<li>Das Element <code>select<\/code> ist mit einer Statusvariablen <code>pluginName<\/code> verkn\u00fcpft, um den ausgew\u00e4hlten Wert zu speichern.<\/li>\n<li>Der <code>onChange<\/code> Handler aktualisiert diesen Status, wenn ein neues Plugin ausgew\u00e4hlt wird.<\/li>\n<li>Die Funktion <code>plugins.map()<\/code> erstellt dynamisch Optionselemente f\u00fcr jedes Plugin.<\/li>\n<\/ul>\n<p>Wenn du diese Schritte befolgst, zeigt deine Anwendung eine eindeutige Liste von Plugins an, die von allen Websites abgerufen wurden, und bietet eine \u00fcbersichtliche und benutzerfreundliche Oberfl\u00e4che f\u00fcr die Auswahl.<\/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=\"W\u00e4hle ein Feld aus, das die Liste der Plugins von allen Websites im Kinsta-Unternehmenskonto anzeigt\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">W\u00e4hle ein Feld aus, das die Liste der Plugins von allen Websites im Kinsta-Unternehmenskonto anzeigt<\/figcaption><\/figure>\n<h3>Websites mit einem bestimmten Plugin abrufen<\/h3>\n<p>Bisher konntest du Plugins von deinem Kinsta-Firmenkonto abrufen, aber du m\u00f6chtest eine Schleife durch alle Websites ziehen, um Websites mit einem bestimmten Plugin abzurufen, sie in einem Status zu speichern und sie dann anzuzeigen.<\/p>\n<p>Dazu erstellst du zwei Zust\u00e4nde: einen, um die Websites zu speichern (<code>sites<\/code>) und einen, um den Ladestatus anzuzeigen (<code>isLoading<\/code>).<\/p>\n<pre><code class=\"language-jsx\">const [sites, setSites] = useState([]);\nconst [isLoading, setIsLoading] = useState(false);<\/code><\/pre>\n<p>Als N\u00e4chstes erstellst du eine <code>fetchSites<\/code> Funktion, die jede Seite daraufhin \u00fcberpr\u00fcft, ob sie das ausgew\u00e4hlte Plugin enth\u00e4lt. Ist dies der Fall, werden die relevanten Details der Seite gespeichert<\/p>\n<p>Diese Funktion beginnt damit, dass sie <code>isLoading<\/code> auf <code>true<\/code> setzt und das Array <code>sites<\/code> l\u00f6scht. Dann ruft sie <code>getSitesWithPluginData<\/code> auf, um alle Website-Daten abzurufen.<\/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>In der Funktion <code>sitesWithPluginDataFiltered<\/code>:<\/p>\n<ul>\n<li>Die Methode <code>.filter()<\/code> isoliert die Websites, die das ausgew\u00e4hlte Plugin enthalten.<\/li>\n<li>Die Methode <code>.map()<\/code> extrahiert dann die erforderlichen Details von jeder Website.<\/li>\n<li>Schlie\u00dflich aktualisieren die Hooks <code>setSites<\/code> und <code>setIsLoading<\/code> den Status mit den neuen Daten und dem Ladestatus.<\/li>\n<\/ul>\n<p>Als N\u00e4chstes erstellst du eine Funktion <code>handleSubmit<\/code> und f\u00fcgst sie der Schaltfl\u00e4che <strong>Webs<\/strong><strong>ites mit diesem Plugin abrufen<\/strong>\u00a0auf dem Formular hinzu, um die Funktion aufzurufen, wenn ein Nutzer ein Plugin ausw\u00e4hlt und das Formular abschickt. Diese Funktion verhindert die Standardaktion des Formulars und ruft <code>fetchSites<\/code> auf:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (e) =&gt; {\n    e.preventDefault();\n    fetchSites();\n};<\/code><\/pre>\n<p>Wenn ein Nutzer ein bestimmtes Plugin ausw\u00e4hlt und auf die Schaltfl\u00e4che &#8222;Absenden&#8220; klickt, werden alle Websites mit diesem Plugin abgerufen und im Status <code>sites<\/code> gespeichert.<\/p>\n<h4>Websites mit dem ausgew\u00e4hlten Plugin anzeigen<\/h4>\n<p>Nachdem du die relevanten Websites in deinem <code>sites<\/code> Status gespeichert hast, musst du diese Daten in der Benutzeroberfl\u00e4che deines Projekts anzeigen. Das Ziel ist es, jede Website als Listenelement mit den wichtigsten Details und einer Schaltfl\u00e4che f\u00fcr die Aktualisierung des Plugins anzuzeigen.<\/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>Im obigen Code wird das Array <code>sites<\/code> mit der Methode <code>.map()<\/code> durchlaufen und eine Liste (<code>&lt;ul&gt;<\/code>) von Websites (<code>&lt;li&gt;<\/code> Elemente) erstellt. Jedes Listenelement enth\u00e4lt Details \u00fcber die Seite und eine Schaltfl\u00e4che f\u00fcr Plugin-Aktualisierungen.<\/p>\n<p>Die Schaltfl\u00e4che in der Benutzeroberfl\u00e4che \u00e4ndert ihren Stil und ihre Funktion je nach Aktualisierungsstatus des Plugins: Sie ist aktiv, wenn Updates verf\u00fcgbar sind, andernfalls ist sie deaktiviert und mit &#8222;Aktuell&#8220; beschriftet, was durch bedingtes <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> und das Attribut disabled gesteuert wird.<\/p>\n<p>Um das Nutzererlebnis zu verbessern, f\u00fcgen wir au\u00dferdem einen Ladetext hinzu, der sich nach dem Zustand von <code>isLoading<\/code> richtet, wenn die Seiten abgerufen werden.<\/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=\"Eine Liste der Websites, die ein bestimmtes Plugin aus dem Kinsta-Unternehmenskonto verwenden, mit Schaltfl\u00e4chen, um sie einzeln oder auf einmal zu aktualisieren\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Eine Liste der Websites, die ein bestimmtes Plugin aus dem Kinsta-Unternehmenskonto verwenden, mit Schaltfl\u00e4chen, um sie einzeln oder auf einmal zu aktualisieren<\/figcaption><\/figure>\n<h3>Plugins mit der Kinsta-API aktualisieren<\/h3>\n<p>Bis jetzt konnten wir Websites mit wichtigen Details abrufen und auf ihre Plugins zugreifen. Das Ziel dieses Tools ist es, die Aktualisierung von Plugins f\u00fcr mehrere Websites \u00fcber die Kinsta-API zu erleichtern. Der Prozess umfasst das Ausl\u00f6sen von Aktualisierungen und das Verfolgen ihres Fortschritts.<\/p>\n<h4>Plugin-Updates ausl\u00f6sen<\/h4>\n<p>F\u00fcr jede aufgelistete Website gibt es eine Schaltfl\u00e4che. Sie ist so gestaltet, dass sie anzeigt, ob ein Update verf\u00fcgbar ist. Wenn ein Update verf\u00fcgbar ist, l\u00f6st ein Klick auf die Schaltfl\u00e4che die Funktion <code>updatePlugin<\/code> aus.<\/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>Der <code>onClick<\/code> Handler ruft <code>updatePlugin<\/code> mit der Umgebungs-ID der Website und der neuesten Version des Plugins (<code>updateVersion<\/code>) auf. Diese Funktion sendet eine PUT-Anfrage an die Kinsta-API, um das Plugin zu aktualisieren.<\/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>Aktualisierungsfortschritt verfolgen<\/h4>\n<p>Nachdem du die Aktualisierung eingeleitet hast, musst du den Fortschritt der Aktualisierung \u00fcberwachen. Die Kinsta-API liefert eine Antwort wie diese, wenn eine Aktualisierung eingeleitet wird:<\/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>Die <code>operation_id<\/code> verfolgt den Aktualisierungsstatus \u00fcber den Operations-Endpunkt. Erstelle eine Funktion, die diese API-Anfrage stellt und die <code>operation_id<\/code> als Argument erwartet:<\/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>Innerhalb von <code>updatePlugin<\/code> \u00fcberpr\u00fcfst du mit der Anweisung <code>if<\/code>, ob die anf\u00e4nglichen Aktualisierungsanfragen <code>status<\/code> <code>202<\/code> sind. Wenn ja, wird ein Intervall festgelegt, um <code>checkPluginUpdateStatus<\/code> alle f\u00fcnf Sekunden (5000 Millisekunden) aufzurufen.<\/p>\n<p>Das Intervall pr\u00fcft wiederholt den Aktualisierungsstatus, und wenn er erfolgreich ist, l\u00f6scht er das Intervall und ruft <code>fetchSites<\/code> auf, um die Liste der Websites zu aktualisieren. Tritt bei diesen \u00dcberpr\u00fcfungen ein Fehler auf, wird er auf der Konsole protokolliert.<\/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>Benutzerfeedback w\u00e4hrend des Betriebs<\/h4>\n<p>An diesem Punkt funktioniert alles gut, aber es ist gut, den Nutzer \u00fcber den Fortschritt der Operation zu informieren, anstatt ihn im Ungewissen zu lassen. Das kannst du tun, indem du eine Benachrichtigung anzeigst, die erscheint, wenn der Vorgang l\u00e4uft, und die gel\u00f6scht wird, wenn der Vorgang abgeschlossen ist. Erstelle einen <code>showStatusBar<\/code> Status, um dies zu steuern:<\/p>\n<pre><code class=\"language-jsx\">const [showStatusBar, setShowStatusBar] = useState(false);<\/code><\/pre>\n<p>Wenn <code>showStatusBar<\/code> <code>true<\/code> ist, erscheint oben auf dem Bildschirm eine Statusleiste, die anzeigt, dass eine Aktualisierung im Gange ist. Sie ist so gestaltet, dass sie am oberen Rand des Bildschirms fixiert ist.<\/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>Du kannst nun die Anweisung <code>if<\/code> in der Funktion <code>updatePlugin<\/code> anpassen, um <code>showStatusBar<\/code> je nach Aktualisierungsstatus auf <code>true<\/code> oder <code>false<\/code> zu setzen:<\/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>Auf diese Weise wird sichergestellt, dass die Nutzer\/innen \u00fcber den Status der Plugin-Aktualisierungen informiert werden, was die Benutzerfreundlichkeit des Tools insgesamt verbessert.<\/p>\n<h3>Plugins \u00fcber mehrere Websites mit der Kinsta-API aktualisieren<\/h3>\n<p>Die wichtigste Funktion dieses Tools ist die M\u00f6glichkeit, ein bestimmtes Plugin mit einem Klick auf mehreren Websites innerhalb deines Kinsta-Kontos zu aktualisieren. Diese Funktion \u00e4hnelt der, die f\u00fcr die Aktualisierung von Plugins auf einer einzelnen Website implementiert wurde.<\/p>\n<p>Dabei wird eine Schleife durch den Status von <code>sites<\/code> gezogen, der die Websites enth\u00e4lt, auf denen das jeweilige Plugin aktualisiert werden muss. F\u00fcr jede Website, die ein Update ben\u00f6tigt, wird eine API-Anfrage gestellt, um das Plugin zu aktualisieren und den Status der Operation zu verfolgen:<\/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>Diese Funktion ist mit einer Schaltfl\u00e4che <strong>Alle aktualisieren<\/strong> verbunden. Um die Benutzerfreundlichkeit zu erh\u00f6hen, zeigt die Schaltfl\u00e4che die Versionsnummer an, auf die die Plugins aktualisiert werden:<\/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>Au\u00dferdem wird diese Schaltfl\u00e4che nur dann angezeigt, wenn mehr als eine Website ein Update f\u00fcr das Plugin ben\u00f6tigt. Wenn alle Websites auf dem neuesten Stand sind, wird stattdessen eine Meldung angezeigt:<\/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>Mit diesen Implementierungen kannst du jetzt m\u00fchelos Plugins f\u00fcr mehrere Websites in deinem Kinsta-Konto aktualisieren, was die Effizienz steigert und sicherstellt, dass alle deine Websites mit den neuesten Plugin-Versionen ausgestattet sind.<\/p>\n<h2>Stelle deine statische React-Website kostenlos auf Kinsta bereit<\/h2>\n<p>Wir nutzen das <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Statische-Seiten-Hosting von Kinsta<\/a>, um die Anwendung zu demonstrieren. In der Praxis k\u00f6nntest du diese React-Anwendung in deinem eigenen Netzwerk ausf\u00fchren oder sie erst dann bereitstellen, wenn du diesem Tool aus Sicherheitsgr\u00fcnden eine Authentifizierungsm\u00f6glichkeit hinzugef\u00fcgt hast.<\/p>\n<p>Du kannst deine React-Anwendungen, die du mit <code>create-react-app<\/code> erstellt hast, als statische Website mit unserem kostenlosen Statische-Seiten-Hosting hosten, indem du deinen Code zu einem bevorzugten Git-Anbieter (<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> oder <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>) schiebst.<\/p>\n<p>Sobald dein Repo fertig ist, befolge diese Schritte, um deine statische Website auf Kinsta bereitzustellen:<\/p>\n<ol start=\"1\">\n<li>Logge dich ein oder erstelle ein Konto, um dein <a href=\"https:\/\/my.kinsta.com\/?lang=de\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n<li>Autorisiere Kinsta bei deinem Git-Anbieter.<\/li>\n<li>Klicke in der linken Seitenleiste auf <strong>Statische Websites<\/strong> und dann auf <strong>Webs<\/strong><strong>ite hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle das Repository und den Zweig aus, von dem aus du bereitstellen m\u00f6chtest.<\/li>\n<li>Gib deiner Website einen eindeutigen Namen.<\/li>\n<li>F\u00fcge die Build-Einstellungen in folgendem Format hinzu:\n<ul>\n<li><strong>Build-Befehl:<\/strong> npm run build<\/li>\n<li><strong>Node-Version:<\/strong> 18.16.0<\/li>\n<li><strong>Verzeichnis f\u00fcr die Ver\u00f6ffentlichung:<\/strong> build<\/li>\n<\/ul>\n<\/li>\n<li>Zum Schluss klickst du auf <strong>Website erstellen<\/strong>.<\/li>\n<\/ol>\n<p>Und das war&#8217;s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erh\u00e4ltst einen Link, \u00fcber den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst sp\u00e4ter deine <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">eigene Domain<\/a> und dein <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">SSL-Zertifikat<\/a> hinzuf\u00fcgen, wenn du m\u00f6chtest.<\/p>\n<p>Als Alternative zum Hosting statischer Websites kannst du deine statische Website auch mit dem <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Applikations-Hosting<\/a> von Kinsta bereitstellen, das eine gr\u00f6\u00dfere Hosting-Flexibilit\u00e4t, ein breiteres Spektrum an Vorteilen und den Zugang zu robusteren Funktionen bietet. Dazu geh\u00f6ren z. B. Skalierbarkeit, benutzerdefinierte Bereitstellung mithilfe eines Dockerfiles und <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">umfassende Analysen<\/a>, die Echtzeit- und historische Daten umfassen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Die Kinsta-API er\u00f6ffnet M\u00f6glichkeiten, die \u00fcber das hinausgehen, was wir besprochen haben. Eine spannende Anwendung k\u00f6nnte die <a href=\"https:\/\/kinsta.com\/de\/blog\/erstelle-slackbot-website-management\/\">Erstellung eines Slackbots<\/a> sein, der dich auf Slack benachrichtigt, wenn ein Plugin veraltet ist. Diese Integration kann deinen Arbeitsablauf erheblich vereinfachen, da du immer informiert bist und proaktiv handeln kannst.<\/p>\n<p>Du kannst auch ein \u00e4hnliches Tool entwickeln, wie in diesem Leitfaden beschrieben, um <a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Site-Themes-and-Plugins#operation\/updateTheme\" target=\"_blank\" rel=\"noopener noreferrer\">deine Themes zu aktualisieren<\/a>, da die Kinsta-API bereits Endpunkte daf\u00fcr hat.<\/p>\n<p>Das Kinsta-Team arbeitet st\u00e4ndig daran, die n\u00e4chsten Funktionen hinzuzuf\u00fcgen, indem es das Feedback genau verfolgt und zuh\u00f6rt, wie Kristof Siket, Development Team Lead f\u00fcr die Kinsta API, erz\u00e4hlt:<\/p>\n<blockquote><p><em>Das Feedback der Nutzerinnen und Nutzer bestimmt die Priorit\u00e4ten f\u00fcr die Ver\u00f6ffentlichung der Funktionen. Der aktuelle Plan deckt die Tools-Seite nicht vollst\u00e4ndig ab; stattdessen basieren die Funktionen auf den Nutzeranfragen und dem gesammelten Feedback. Wenn du glaubst, dass ein bestimmtes Tool oder ein Endpunkt in die Kinsta-API aufgenommen werden sollte, kannst du uns gerne <a href=\"https:\/\/kinsta.com\/de\/docs\/service-information\/kinsta-forschungsprogramm\/#how-to-join\">dein Feedback schicken<\/a>.<\/em><\/p><\/blockquote>\n<p><em>Wie nutzt du derzeit die Kinsta-API? Welche Funktionen oder Verbesserungen w\u00fcrdest du gerne in zuk\u00fcnftigen Updates sehen?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Plugins spielen eine wichtige Rolle bei der Anpassung und Verbesserung deiner WordPress-Websites. Sie werden verwendet, um Funktionen wie Kontaktformulare, E-Commerce und Analysen zu deinen Seiten hinzuzuf\u00fcgen, &#8230;<\/p>\n","protected":false},"author":287,"featured_media":68979,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[925,957,975,1006],"class_list":["post-68978","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-kinsta-leistungen","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 auf mehreren Websites mit der Kinsta-API aktualisieren - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Optimiere deine WordPress-Verwaltung mit unserer Anleitung zur Erstellung eines Tools f\u00fcr die Massenaktualisierung von Plugins f\u00fcr mehrere Websites mit der Kinsta-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\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Baue ein Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites mit der Kinsta-API\" \/>\n<meta property=\"og:description\" content=\"Optimiere deine WordPress-Verwaltung mit unserer Anleitung zur Erstellung eines Tools f\u00fcr die Massenaktualisierung von Plugins f\u00fcr mehrere Websites mit der Kinsta-API\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-14T18:15:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-22T08:09:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/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=\"Optimiere deine WordPress-Verwaltung mit unserer Anleitung zur Erstellung eines Tools f\u00fcr die Massenaktualisierung von Plugins f\u00fcr mehrere Websites mit der Kinsta-API\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"19\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Baue ein Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites mit der Kinsta-API\",\"datePublished\":\"2024-02-14T18:15:14+00:00\",\"dateModified\":\"2024-02-22T08:09:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/\"},\"wordCount\":3096,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/\",\"name\":\"WordPress-Plugins auf mehreren Websites mit der Kinsta-API aktualisieren - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"datePublished\":\"2024-02-14T18:15:14+00:00\",\"dateModified\":\"2024-02-22T08:09:25+00:00\",\"description\":\"Optimiere deine WordPress-Verwaltung mit unserer Anleitung zur Erstellung eines Tools f\u00fcr die Massenaktualisierung von Plugins f\u00fcr mehrere Websites mit der Kinsta-API\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Kinsta Leistungen\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/kinsta-leistungen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Baue ein Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites mit der Kinsta-API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WordPress-Plugins auf mehreren Websites mit der Kinsta-API aktualisieren - Kinsta\u00ae","description":"Optimiere deine WordPress-Verwaltung mit unserer Anleitung zur Erstellung eines Tools f\u00fcr die Massenaktualisierung von Plugins f\u00fcr mehrere Websites mit der Kinsta-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\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/","og_locale":"de_DE","og_type":"article","og_title":"Baue ein Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites mit der Kinsta-API","og_description":"Optimiere deine WordPress-Verwaltung mit unserer Anleitung zur Erstellung eines Tools f\u00fcr die Massenaktualisierung von Plugins f\u00fcr mehrere Websites mit der Kinsta-API","og_url":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-02-14T18:15:14+00:00","article_modified_time":"2024-02-22T08:09:25+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Optimiere deine WordPress-Verwaltung mit unserer Anleitung zur Erstellung eines Tools f\u00fcr die Massenaktualisierung von Plugins f\u00fcr mehrere Websites mit der Kinsta-API","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"19\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Baue ein Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites mit der Kinsta-API","datePublished":"2024-02-14T18:15:14+00:00","dateModified":"2024-02-22T08:09:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/"},"wordCount":3096,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/","url":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/","name":"WordPress-Plugins auf mehreren Websites mit der Kinsta-API aktualisieren - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","datePublished":"2024-02-14T18:15:14+00:00","dateModified":"2024-02-22T08:09:25+00:00","description":"Optimiere deine WordPress-Verwaltung mit unserer Anleitung zur Erstellung eines Tools f\u00fcr die Massenaktualisierung von Plugins f\u00fcr mehrere Websites mit der Kinsta-API","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/massenaktualisierung-von-plugins-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Kinsta Leistungen","item":"https:\/\/kinsta.com\/de\/thema\/kinsta-leistungen\/"},{"@type":"ListItem","position":3,"name":"Baue ein Tool zur Massenaktualisierung von WordPress-Plugins auf mehreren Websites mit der Kinsta-API"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/68978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=68978"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/68978\/revisions"}],"predecessor-version":[{"id":69122,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/68978\/revisions\/69122"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68978\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/68979"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=68978"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=68978"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=68978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}