{"id":63715,"date":"2023-07-13T12:06:33","date_gmt":"2023-07-13T11:06:33","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=63715&#038;preview=true&#038;preview_id=63715"},"modified":"2023-10-03T15:29:53","modified_gmt":"2023-10-03T14:29:53","slug":"wordpress-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/","title":{"rendered":"Wie man eine WordPress-Seite mit der Kinsta-API erstellt"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/wordpress\/\">WordPress<\/a> ist ein beliebtes Content Management System, das Millionen von Websites im Internet betreibt. Es bietet eine benutzerfreundliche Oberfl\u00e4che und eine breite Palette an Anpassungsm\u00f6glichkeiten.<\/p>\n<p>Die Erstellung von WordPress-Websites kann zeitaufw\u00e4ndig sein, vor allem, wenn sich wiederholende Aufgaben manuell ausgef\u00fchrt werden. Kinsta hat <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-erste-schritte\/neue-seite\/\">diesen Prozess<\/a> mit dem <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta-Dashboard<\/a> vereinfacht und beschleunigt, und stellt auch eine <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-domains\/wordpress-temporare-url\/\">tempor\u00e4re Domain<\/a> zum sofortigen Testen bereit. Au\u00dferdem bedeutet die Einf\u00fchrung der <a href=\"https:\/\/kinsta.com\/de\/docs\/kinsta-api\/\">Kinsta-API<\/a>, dass <a href=\"https:\/\/kinsta.com\/de\/blog\/arten-von-entwicklern\/\">Entwickler\/innen<\/a> den Arbeitsablauf bei der Website-Erstellung verbessern und benutzerdefinierte Schnittstellen entwickeln k\u00f6nnen, um spezielle Anforderungen zu erf\u00fcllen.<\/p>\n<p>In diesem Lernprogramm lernen wir, wie wir die Kinsta-API f\u00fcr die Erstellung von WordPress-Websites nutzen k\u00f6nnen. Und wir nutzen die <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> JavaScript-Bibliothek, um zu zeigen, wie man eine Anwendung erstellt, die WordPress-Seiten ohne MyKinsta erstellt.<\/p>\n<p>Hier ist eine Live-Demo der <a href=\"https:\/\/site-builder-ndg9i.kinsta.app\/\">Site-Builder-Anwendung<\/a>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-application.gif\" alt=\"Website-Builder-Anwendung\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Website-Builder-Anwendung<\/figcaption><\/figure>\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>Die Kinsta-API verstehen<\/h2>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/changelog\/kinsta-api\/\">Kinsta-API<\/a> ist ein leistungsstarkes Tool, mit dem du programmatisch mit der <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">Managed WordPress Hosting-Plattform<\/a> von Kinsta interagieren kannst. Sie kann dir helfen, verschiedene Aufgaben im Zusammenhang mit den von Kinsta angebotenen Diensten zu automatisieren, z. B. das Erstellen von Websites, das Abrufen von Website-Informationen, das <a href=\"https:\/\/kinsta.com\/de\/blog\/kinsta-api-schluessel\/#how-to-use-kinsta-api-to-build-a-status-checker\">Abrufen des Status einer Website<\/a> und vieles mehr.<\/p>\n<p>Diese API vereinfacht die Einrichtung von WordPress-Sites und ist damit ein unsch\u00e4tzbares Werkzeug f\u00fcr Entwickler. Um die API von Kinsta nutzen zu k\u00f6nnen, musst du ein Konto mit mindestens einer WordPress-Site,\u00a0 <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 \u00fcber die API auf dein Konto zuzugreifen.<\/p>\n<p>So generierst du einen API-Schl\u00fcssel:<\/p>\n<ol start=\"1\">\n<li>Gehe zu deinem MyKinsta-Dashboard.<\/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<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/create-api-key-on-mykinsta.jpg\" alt=\"API-Schl\u00fcssel auf MyKinsta erstellen\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">API-Schl\u00fcssel auf MyKinsta erstellen<\/figcaption><\/figure>\n<p>Nachdem du einen API-Schl\u00fcssel erstellt hast, kopiere ihn und speichere ihn an einem sicheren Ort (wir empfehlen die Verwendung eines <a href=\"https:\/\/kinsta.com\/de\/blog\/passwort-manager\/\">Passwortmanagers<\/a>), da er <strong>nur dann<\/strong> innerhalb von MyKinsta sichtbar ist. Du kannst mehrere API-Schl\u00fcssel erstellen &#8211; sie sind auf der Seite <strong>API-Schl\u00fcssel<\/strong> aufgef\u00fchrt. Wenn du einen API-Schl\u00fcssel widerrufen musst, klicke auf <strong>Widerruf<\/strong> neben dem Schl\u00fcssel, den du widerrufen m\u00f6chtest.<\/p>\n<h2>Erstellen einer WordPress-Site mit der Kinsta-API<\/h2>\n<p>Jetzt, wo du deinen API-Schl\u00fcssel hast, kannst du eine WordPress-Site mit der Kinsta-API erstellen. Dazu verwendest du den <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/addWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code> endpunkt, der einen Payload mit den folgenden Daten erwartet:<\/p>\n<ul>\n<li><strong>company:<\/strong> Dieser Parameter erwartet eine eindeutige Unternehmens-ID, die du in den Einstellungen von MyKinsta finden kannst. Sie hilft dabei, das Unternehmen zu identifizieren, das mit der WordPress-Website verbunden ist.<\/li>\n<li><strong>display_name:<\/strong> Der Anzeigename, der mit dem Namen der Website auf MyKinsta identisch ist, hilft dir, deine Website zu identifizieren. Wird nur in MyKinsta verwendet. Er wird f\u00fcr die tempor\u00e4re Domain deiner WordPress-Site und deines <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Admin<\/a> verwendet (f\u00fcr die Kinsta-API lautet er <em>display_name.kinsta.cloud<\/em> und <em>display_name.kinsta.cloud\/wp-admin<\/em>).<\/li>\n<li><strong>region:<\/strong> Mit diesem Parameter kannst du unter 27 den Standort des Rechenzentrums f\u00fcr deine Website ausw\u00e4hlen. Wenn du eine Region ausw\u00e4hlst, die deiner Zielgruppe am n\u00e4chsten liegt, kannst du die Leistung und Geschwindigkeit deiner Website verbessern (siehe die <a href=\"https:\/\/kinsta.com\/de\/docs\/service-information\/rechenzentrums-standorte\/\">Liste der verf\u00fcgbaren Regionen<\/a>).<\/li>\n<li><strong>install_mode:<\/strong> Dieser Parameter bestimmt die Art der WordPress-Installation. Der Standardwert ist &#8222;plain&#8220;, mit dem eine normale WordPress-Website eingerichtet wird. Andere Optionen sind &#8222;new&#8220; f\u00fcr eine Neuinstallation und weitere Modi je nach den spezifischen Anforderungen.<\/li>\n<li><strong>is_subdomain_multisite: <\/strong>Dieser boolesche Parameter (true\/false) gibt an, ob die WordPress-Website als Multisite mit Subdomains konfiguriert werden soll.<\/li>\n<li><strong>admin_email:<\/strong> Dieser Parameter erwartet die E-Mail-Adresse des WordPress-Administrators. Sie wird f\u00fcr administrative Zwecke und den Empfang wichtiger Benachrichtigungen verwendet.<\/li>\n<li><strong>admin_password:<\/strong> Mit diesem Parameter legst du das Passwort f\u00fcr das WordPress-Admin-Benutzerkonto fest. W\u00e4hle ein sicheres Passwort, um deine Seite zu sch\u00fctzen.<\/li>\n<li><strong>admin_user:<\/strong> Mit diesem Parameter wird der Benutzername f\u00fcr das WordPress-Admin-Benutzerkonto festgelegt. Er wird verwendet, um sich im WordPress-Dashboard anzumelden und die Website zu verwalten.<\/li>\n<li><strong>is_multisite:<\/strong> \u00c4hnlich wie bei <code>is_subdomain_multisite<\/code> legt dieser boolesche Parameter fest, ob die WordPress-Site als Multisite konfiguriert werden soll.<\/li>\n<li><strong>site_title:<\/strong> Dieser Parameter steht f\u00fcr den Titel deiner WordPress-Site. Er erscheint oben auf jeder Seite der Website. Du kannst ihn sp\u00e4ter jederzeit \u00e4ndern.<\/li>\n<li><strong>woocommerce:<\/strong> Dieser boolesche Parameter gibt an, ob du das WooCommerce-Plugin w\u00e4hrend der Erstellung der WordPress-Site installieren m\u00f6chtest.<\/li>\n<li><strong>wordpressseo:<\/strong> Dieser Parameter steuert die Installation des <a href=\"https:\/\/kinsta.com\/de\/blog\/yoast-seo\/\">Yoast SEO-Plugins<\/a> w\u00e4hrend der Website-Erstellung.<\/li>\n<li><strong>wp_language:<\/strong> Dieser Parameter erwartet einen String-Wert, der die Sprache\/Locale deiner WordPress-Website angibt (<a href=\"https:\/\/translate.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">hier<\/a> kannst du dein <a href=\"https:\/\/translate.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Locale<\/a> herausfinden).<\/li>\n<\/ul>\n<p>Jetzt, wo du jeden Parameter verstehst. Hier ist ein Beispiel daf\u00fcr, wie der Payload aussieht, den du an die Kinsta-API sendest:<\/p>\n<pre><code class=\"language-json\">{\n  \"company\": \"54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n  \"display_name\": \"First site\",\n  \"region\": \"us-central1\",\n  \"install_mode\": \"new\",\n  \"is_subdomain_multisite\": false,\n  \"admin_email\": \"admin@example.com\",\n  \"admin_password\": \"vJnFnN-~v)PxF[6k\",\n  \"admin_user\": \"admin\",\n  \"is_multisite\": false,\n  \"site_title\": \"My First Site\",\n  \"woocommerce\": false,\n  \"wordpressseo\": false,\n  \"wp_language\": \"en_US\"\n}<\/code><\/pre>\n<p>Mit deinem bevorzugten Modus kannst du eine POST-Anfrage an die Kinsta-API senden; du musst nur deinen API-Schl\u00fcssel festlegen, um eine WordPress-Site zu erstellen. F\u00fcr dieses Beispiel verwenden wir die <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">JavaScript Fetch API<\/a>:<\/p>\n<pre><code class=\"language-jsx\">const createWPSite = async () =&gt; {\n    const resp = await fetch(\n        `https:\/\/api.kinsta.com\/v2\/sites`,\n        {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application\/json',\n            Authorization: 'Bearer &lt;YOUR_KEY_HERE&gt;'\n          },\n          body: JSON.stringify({\n            company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',\n            display_name: 'First site',\n            region: 'us-central1',\n            install_mode: 'new',\n            is_subdomain_multisite: false,\n            admin_email: 'admin@example.com',\n            admin_password: 'vJnFnN-~v)PxF[6k',\n            admin_user: 'admin',\n            is_multisite: false,\n            site_title: 'My First Site',\n            woocommerce: false,\n            wordpressseo: false,\n            wp_language: 'en_US'\n          })\n        }\n      );\n      \n      const data = await resp.json();\n      console.log(data);\n}<\/code><\/pre>\n<p>Der obige Code verwendet die JavaScript Fetch API, um eine POST-Anfrage an die Kinsta-API zu senden und eine WordPress-Site zu erstellen. Die Funktion <code>createWPSite<\/code> wickelt diesen Vorgang ab. Innerhalb der Funktion wird eine Fetch-Anfrage an die Kinsta-API gestellt, die <code>\/sites<code> endpoint with the necessary data.<\/code><\/code><\/p>\n<p>Die Antwort wird mit <code>resp.json()<\/code> als JSON geparst und das Ergebnis wird in der Konsole protokolliert. Ersetze <code>&lt;YOUR_KEY_HERE&gt;<\/code> durch deinen API-Schl\u00fcssel, passe die Payload-Werte an und rufe <code>createWPSite()<\/code> auf, um eine WordPress-Site mit der Kinsta-API zu erstellen.<\/p>\n<p>So sieht die Antwort aus:<\/p>\n<pre><code class=\"language-json\">{\n    \"operation_id\": \"sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n    \"message\": \"Adding site in progress\",\n    \"status\": 202\n}<\/code><\/pre>\n<h3>\u00dcberwachung der Vorg\u00e4nge mit der Kinsta-API<\/h3>\n<p>Sobald du eine Website mit der Kinsta-API erstellt hast, ist es wichtig, den Fortschritt des Vorgangs zu verfolgen. Dies kann programmatisch geschehen, ohne dass du MyKinsta mit dem Kinsta-API <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations#operation\/getOperationStatus\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code> endpunkt \u00fcberpr\u00fcfen musst.<\/p>\n<p>Um Vorg\u00e4nge zu \u00fcberwachen, verwende die <code>operation_id<\/code>, die du erh\u00e4ltst, wenn du einen Vorgang wie das Erstellen einer WordPress-Site initiierst. \u00dcbergib die <code>operation_id<\/code> als Parameter an den <code>\/operations<\/code> Endpunkt.<\/p>\n<pre><code class=\"language-jsx\">const operationId = 'YOUR_operation_id_PARAMETER';\nconst resp = await fetch(\n  `https:\/\/api.kinsta.com\/v2\/operations\/${operationId}`,\n  {\n    method: 'GET',\n    headers: {\n      Authorization: 'Bearer &lt;YOUR_TOKEN_HERE&gt;'\n    }\n  }\n);\nconst data = await resp.json();\nconsole.log(data);<\/code><\/pre>\n<p>Der obige Code ruft Informationen \u00fcber einen Vorgang ab, indem er eine GET-Anfrage an den Endpunkt <code>\/operations<\/code> mit dem entsprechenden <code>operation_id<\/code> sendet. Die Anfrage enth\u00e4lt den <a href=\"https:\/\/kinsta.com\/de\/blog\/kinsta-api-schluessel\/\">API-Schl\u00fcssel<\/a> f\u00fcr die Authentifizierung.<\/p>\n<p>Wenn die Antwortdaten von der API empfangen werden, werden sie in der Konsole protokolliert. Die Antwort liefert wertvolle Informationen \u00fcber den Status und den Fortschritt des Vorgangs. Wenn zum Beispiel die Erstellung der WordPress-Website noch nicht abgeschlossen ist, sieht die Antwort wie folgt aus:<\/p>\n<pre><code class=\"language-json\">{\n    \"status\": 202,\n    \"message\": \"Operation in progress\",\n    \"data\": null\n}<\/code><\/pre>\n<p>\u00c4hnlich sieht die Antwort aus, wenn der Vorgang erfolgreich abgeschlossen ist:<\/p>\n<pre><code class=\"language-json\">{\n    \"message\": \"Successfully finished request\",\n    \"status\": 200,\n    \"data\": null\n}<\/code><\/pre>\n<p>An dieser Stelle kannst du eine WordPress-Website programmatisch erstellen und ihren Betrieb mit der Kinsta-API \u00fcberpr\u00fcfen. Um diese Funktionalit\u00e4t zu verbessern, gehen wir noch einen Schritt weiter und entwickeln eine angepasste Benutzeroberfl\u00e4che (UI), die diese Vorg\u00e4nge verarbeiten kann. Auf diese Weise k\u00f6nnen auch Personen ohne technisches Fachwissen die M\u00f6glichkeiten der API nutzen.<\/p>\n<h2>Erstellen einer React-Anwendung zur Erstellung einer WordPress-Website mit der Kinsta-API<\/h2>\n<p>Richte zun\u00e4chst eine React-Projektstruktur ein und installiere die notwendigen Abh\u00e4ngigkeiten. Integriere die Kinsta-API in deine React-Anwendung mit der Fetch-API oder anderen <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/\">HTTP-Request-Bibliotheken<\/a>, wie z. B. Axios.<\/p>\n<h3>Voraussetzung<\/h3>\n<p>Um an diesem Projekt mitzuarbeiten, solltest du 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> und eine gewisse Vertrautheit mit React haben. Der Schwerpunkt dieses Projekts liegt darauf, die Nutzung der Kinsta-API zu demonstrieren. Daher wird in diesem Artikel nicht n\u00e4her auf die Gestaltung der Benutzeroberfl\u00e4che eingegangen.<\/p>\n<h3>Erste Schritte<\/h3>\n<p>Um den Prozess der Projekteinrichtung zu vereinfachen, haben wir ein Starterprojekt f\u00fcr dich vorbereitet. Befolge diese Schritte, um loszulegen:<\/p>\n<p>1. Erstelle ein <a href=\"https:\/\/kinsta.com\/de\/thema\/git\/\">Git-Repository<\/a> mit <a href=\"https:\/\/github.com\/kinsta\/site-builder\" target=\"_blank\" rel=\"noopener noreferrer\">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, und achte darauf, dass du <strong>alle Zweige einschlie\u00dft<\/strong>.<\/p>\n<p>2. Ziehe das Repository auf deinen lokalen Computer und wechsle zu dem <strong><a href=\"https:\/\/github.com\/kinsta\/site-builder\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a><\/strong>-Zweig mit dem folgenden Befehl:<\/p>\n<pre><code class=\"language-bash\">git checkout starter-files<\/code><\/pre>\n<p>3. Installiere die notwendigen Abh\u00e4ngigkeiten, indem du den Befehl <code>npm install<\/code> ausf\u00fchrst. Sobald die Installation abgeschlossen ist, kannst du das Projekt auf deinem lokalen Computer mit <code>npm run start<\/code> starten. Dies \u00f6ffnet das Projekt unter <strong><a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:3000\/<\/a><\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form.jpg\" alt=\"Das Formular f\u00fcr den Site Builder\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Das Formular f\u00fcr den Site Builder<\/figcaption><\/figure>\n<h3>Die Projektdateien verstehen<\/h3>\n<p>Im <strong>src-Ordner<\/strong> dieses Projekts gibt es zwei Hauptunterordner: <strong>components<\/strong> und <strong>pages<\/strong>. Der Ordner components enth\u00e4lt wiederverwendbare Komponenten, wie z. B. die <strong>Kopf-<\/strong> und <strong>Fu\u00dfzeile<\/strong>, die sowohl auf der <strong>Startseite<\/strong> als auch auf der <strong>Detailseite<\/strong> verwendet werden.<\/p>\n<p>In diesem Projekt geht es in erster Linie darum, die Logik der <strong>Home-<\/strong> und <strong>Detailseiten<\/strong> zu implementieren, da das Styling und das Routing bereits fertig sind.<\/p>\n<p>Auf der <strong>Startseite<\/strong> gibt es ein Formular, das verschiedene Datenfelder erfasst, die an die Kinsta-API weitergeleitet werden. Die Antwort dieser Seite wird im localStorage gespeichert (du kannst alternative Methoden f\u00fcr die Speicherung der Vorgangs-ID ausprobieren, die f\u00fcr die \u00dcberpr\u00fcfung des Vorgangsstatus wichtig ist).<\/p>\n<p>Auf der <strong>Detailseite<\/strong> wird die Vorgangs-ID von loaclStoage abgerufen und als Parameter an den <code>\/operation<\/code> Endpunkt der Kinsta API \u00fcbergeben, um den Status des Vorgangs zu \u00fcberpr\u00fcfen. In diesem Projekt f\u00fcgen wir eine Schaltfl\u00e4che ein, mit der die Benutzer den Status in regelm\u00e4\u00dfigen Abst\u00e4nden \u00fcberpr\u00fcfen k\u00f6nnen (du kannst die Methode <code>setInterval<\/code> verwenden, um diesen Prozess zu automatisieren).<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-operation-information.jpg\" alt=\"Informationen zum Site Builder Vorgang\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Informationen zum Site Builder Vorgang<\/figcaption><\/figure>\n<h2>Interaktion mit der Kinsta-API in React<\/h2>\n<p>Nachdem du die Benutzeroberfl\u00e4che (UI) erstellt hast, musst du als N\u00e4chstes das Formular auf der <strong>Startseite<\/strong> bearbeiten und eine POST-Anfrage an den Endpunkt <code>\/sites<\/code> der Kinsta-API senden. Diese Anfrage enth\u00e4lt die gesammelten Formulardaten als Nutzdaten und erm\u00f6glicht es uns, eine WordPress-Seite zu erstellen.<\/p>\n<p>Um mit der Kinsta-API zu interagieren, brauchst du deine <strong>Unternehmens-ID<\/strong> und deinen <strong>API-Schl\u00fcssel<\/strong>. Sobald du diese Zugangsdaten hast, speicherst du sie am besten sicher als Umgebungsvariablen in deiner React-Anwendung.<\/p>\n<p>Um die Umgebungsvariablen einzurichten, erstellst du eine <strong>.env-Datei<\/strong> im Stammverzeichnis deines Projekts. F\u00fcge in diese Datei die folgenden Zeilen 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, verwendest du <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Es ist wichtig, dass du die <strong>.env-Datei<\/strong> zu deiner <strong><a href=\"https:\/\/kinsta.com\/de\/blog\/gitignore-funktioniert-nicht\/\">.gitignore-Datei<\/a><\/strong> hinzuzuf\u00fcgen, um zu verhindern, dass sie an GitHub weitergegeben wird. Dadurch wird sichergestellt, dass deine sensiblen Informationen, wie z. B. API-Schl\u00fcssel, privat und sicher bleiben.<\/p>\n<\/aside>\n\n<h3>Abrufen von Formulardaten in React<\/h3>\n<p>In der Datei <strong>Home.jsx<\/strong> gibt es ein Formular. Du musst dem Formular eine Logik hinzuf\u00fcgen, um Daten abzurufen und sie zu validieren, wenn sie \u00fcbermittelt werden. Um die Formulardaten in deiner React-Anwendung abzurufen, verwendest du den Ansatz der kontrollierten Komponenten von React zusammen mit dem <code><a href=\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/\">useState<\/a><\/code> hook. Mit diesem Ansatz kannst du f\u00fcr jedes Formularfeld einen Status erstellen und ihn aktualisieren, wenn der Nutzer Daten eingibt.<\/p>\n<p>Importiere zun\u00e4chst den <code>useState<\/code> Hook am Anfang deiner Datei:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';<\/code><\/pre>\n<p>Als N\u00e4chstes richtest du eine Statusvariable f\u00fcr jedes Formularfeld innerhalb deiner funktionalen Komponente ein. Wenn du zum Beispiel ein Eingabefeld f\u00fcr den &#8222;Titel der Website&#8220; hast, kannst du eine Zustandsvariable namens <code>siteTitle<\/code> erstellen:<\/p>\n<pre><code class=\"language-jsx\">const [siteTitle, setSiteTitle] = useState('');<\/code><\/pre>\n<p>Hier ist <code>siteTitle<\/code> die Statusvariable, die den Wert des Eingabefeldes &#8222;Titel der Website&#8220; enth\u00e4lt, und <code>setSiteTitle<\/code> ist die entsprechende Aktualisierungsfunktion.<\/p>\n<p>Um die Formularfelder an ihre jeweiligen Statuswerte zu binden, f\u00fcge die Attribute <code>value<\/code> und <code>onChange<\/code> zu jedem Eingabeelement hinzu. Zum Beispiel das Eingabefeld &#8222;Titel der Website&#8220;:<\/p>\n<pre><code class=\"language-jsx\">&lt;input\n  type=\"text\"\n  className=\"form-control\"\n  value={siteTitle}\n  onChange={(event) =&gt; setSiteTitle(event.target.value)}\n\/&gt;<\/code><\/pre>\n<p>In diesem Beispiel wird das Attribut <code>value<\/code> auf die Zustandsvariable <code>siteTitle<\/code> gesetzt, um sicherzustellen, dass das Eingabefeld den aktuellen Wert <code>siteTitle<\/code> anzeigt. Der Event-Handler <code>onChange<\/code> wird auf die Funktion <code>setSiteTitle<\/code> gesetzt, die den Zustand <code>siteTitle<\/code> mit dem neuen Wert aktualisiert, sobald der Benutzer das Eingabefeld eingibt.<\/p>\n<p>Wenn du diesen Ansatz f\u00fcr jedes Formularfeld anwendest, kannst du die notwendigen Statusvariablen erstellen und sie aktualisieren, wenn der Benutzer mit dem Formular interagiert. So kannst du ganz einfach auf die eingegebenen Werte zugreifen, wenn das Formular abgeschickt wird, und weitere Aktionen oder Validierungen mit den Formulardaten durchf\u00fchren.<\/p>\n<p>Wenn du dies f\u00fcr alle Formularfelder tust, sieht deine <strong>Home.jsx-Datei<\/strong> wie folgt aus:<\/p>\n<pre><code class=\"language-jsx\">import Header from '..\/components\/Header';\nimport Footer from '..\/components\/Footer';\n\nconst Home = () =&gt; {\n\n    return (\n        &lt;div className=\"app-container\"&gt;\n            &lt;Header \/&gt;\n            &lt;div className=\"container\"&gt;\n                &lt;div className=\"container-title\"&gt;\n                    &lt;h1&gt; className=\"title\"&gt;Site Builder with Kinsta API&lt;\/h1&gt;\n                    &lt;p&gt; className=\"description\"&gt;\n                        This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.\n                    &lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;form&gt;\n                    &lt;div className=\"form-container\"&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Display name&lt;\/label&gt;\n                            &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt; WordPress site title&lt;\/label&gt;\n                            &lt;span&gt;Appears across the top of every page of the site. You can always change it later.&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-flex\"&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin username&lt;\/label&gt;\n                                &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin email&lt;\/label&gt;\n                                &lt;input type=\"email\" className=\"form-control\" \/&gt;\n                                &lt;span&gt; className='error-message'&gt;Ensure this is a valid email&lt;\/span&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;WordPress admin password&lt;\/label&gt;\n                            &lt;span&gt;Ensure you remember this password as it is what you'll use to log into WP-admin&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Data center location&lt;\/label&gt;\n                            &lt;span&gt;Allows you to place your website in a geographical location closest to your visitors.&lt;\/span&gt;\n                            &lt;select className=\"form-control\"&gt;\n                                &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n                                {\/* add options *\/}\n                            &lt;\/select&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"checkbox-flex\"&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install WooCommerce&lt;\/label&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install Yoast SEO&lt;\/label&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;button&gt; className='btn'&gt;Create Site&lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div &gt;\n    )\n}\n\nexport default Home;<\/code><\/pre>\n<h4>Implementierung der Formularfeldvalidierung mit dem useRef-Hook<\/h4>\n<p>Um die Validierung von Formularfeldern in React zu implementieren, k\u00f6nnen wir diese Schritte befolgen. Wir konzentrieren uns auf die Validierung der Felder &#8222;Display name&#8220; und &#8222;WordPress admin email&#8220;.<\/p>\n<p>Als Erstes m\u00fcssen wir Referenzen mit dem <code><a href=\"https:\/\/kinsta.com\/de\/blog\/react-useref\/\">useRef<\/a><\/code> hook erstellen, um die Anzeige der Fehlermeldungen zu steuern. Importiere den <code>useRef<\/code> Hook und erstelle die notwendigen Referenzen f\u00fcr jedes Feld:<\/p>\n<pre><code class=\"language-jsx\">import { useRef } from 'react';\n\nconst displayNameRef = useRef(null);\nconst wpEmailRef = useRef(null);<\/code><\/pre>\n<p>Als N\u00e4chstes f\u00fcgen wir die Verweise an die entsprechenden Elemente der Fehlermeldungen in den Formularfeldern an. Zum Beispiel f\u00fcgst du f\u00fcr das Feld &#8222;Anzeigename&#8220; den <code>ref<\/code> zum Tag <code>span<\/code> hinzu, der die Fehlermeldung enth\u00e4lt:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Display name&lt;\/label&gt;\n    &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n    &lt;input type=\"text\" className=\"form-control\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n    &lt;span className='error-message' ref={displayNameRef}&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>\u00c4hnlich verh\u00e4lt es sich mit dem Feld &#8222;WordPress admin email&#8220;:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n  &lt;label&gt;WordPress admin email&lt;\/label&gt;\n  &lt;input\n    type=\"email\"\n    className=\"form-control\"\n    value={wpAdminEmail}\n    onChange={(e) =&gt; setWpAdminEmail(e.target.value)}\n  \/&gt;\n  &lt;span&gt; className='error-message' ref={wpEmailRef}&gt;Ensure this is a valid email&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Jetzt k\u00f6nnen wir die Validierungsfunktionen erstellen, die die Eingabewerte pr\u00fcfen und entscheiden, ob die Fehlermeldungen angezeigt werden sollen. Hier sind die Funktionen f\u00fcr &#8222;Anzeigename&#8220; und &#8222;WordPress-Admin-E-Mail&#8220;:<\/p>\n<pre><code class=\"language-jsx\">const checkDisplayName = () =&gt; {\n  if (displayName.length &lt; 4) {\n    displayNameRef.current.style.display = 'block';\n  } else {\n    displayNameRef.current.style.display = 'none';\n  }\n}\n\nconst checkWpAdminEmail = () =&gt; {\n  let regex = \/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$\/;\n  if (!wpAdminEmail.match(regex)) {\n    wpEmailRef.current.style.display = 'block';\n  } else {\n    wpEmailRef.current.style.display = 'none';\n  }\n}<\/code><\/pre>\n<p>Diese Funktionen werden immer dann aufgerufen, wenn die entsprechenden Eingabefelder ge\u00e4ndert werden. Sie vergleichen die Eingabewerte mit den \u00dcberpr\u00fcfungskriterien und aktualisieren die Anzeige der Fehlermeldungen, indem sie die <code>style.display<\/code> Eigenschaft der Fehlermeldungselemente manipulieren.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form-with-validation.jpg\" alt=\"Site-Builder-Formular mit Validierung\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Site-Builder-Formular mit Validierung<\/figcaption><\/figure>\n<p>Es steht dir frei, zus\u00e4tzliche Validierungen zu implementieren oder die Validierungslogik nach deinen Anforderungen anzupassen.<\/p>\n<h3>Handhabung der Formular\u00fcbermittlung in React<\/h3>\n<p>Bei der Verarbeitung des Formular\u00fcbermittlungsereignisses f\u00fcr die Erstellung einer Website m\u00fcssen wir mehrere Aufgaben erf\u00fcllen. Zun\u00e4chst f\u00fcgen wir einen <code>onSubmit<\/code> Event-Handler an das <code>&lt;form&gt;<\/code> Element an. Innerhalb der Funktion <code>createSite<\/code> verhindern wir das Standardverhalten bei der Formular\u00fcbermittlung, indem wir <code>event.preventDefault()<\/code> aufrufen. So k\u00f6nnen wir die \u00dcbermittlung programmatisch bearbeiten.<\/p>\n<p>Um sicherzustellen, dass die Formulardaten g\u00fcltig sind, bevor wir mit der \u00dcbermittlung fortfahren, rufen wir die Validierungsmethoden <code>checkDisplayName<\/code> und <code>checkWpAdminEmail<\/code> auf. Diese Methoden \u00fcberpr\u00fcfen, ob die erforderlichen Felder die angegebenen Kriterien erf\u00fcllen.<\/p>\n<pre><code class=\"language-jsx\">const createSite = (e) =&gt; {\n  e.preventDefault();\n\n  checkDisplayName();\n  checkWpAdminEmail();\n\n  \/\/ Additional logic\n};<\/code><\/pre>\n<p>Wenn alle \u00dcberpr\u00fcfungen erfolgreich waren und die erforderlichen Felder g\u00fcltige Daten enthalten, l\u00f6schen wir den localStorage, um einen sauberen Zustand f\u00fcr die Speicherung der API-Antwort und des Anzeigenamens zu gew\u00e4hrleisten.<\/p>\n<p>Als N\u00e4chstes stellst du mit der Fetch-Funktion eine API-Anfrage an die Kinsta-API. Die Anfrage ist eine POST-Methode an den Endpunkt <strong>https:\/\/api.kinsta.com\/v2\/sites<\/strong>. Achte darauf, dass du die notwendigen Header und die Nutzdaten als JSON mitschickst.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/sites`,\n        {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json',\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            },\n            body: JSON.stringify({\n                company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,\n                display_name: displayName,\n                region: centerLocation,\n                install_mode: 'new',\n                is_subdomain_multisite: false,\n                admin_email: wpAdminEmail,\n                admin_password: wpAdminPassword,\n                admin_user: wpAdminUsername,\n                is_multisite: false,\n                site_title: siteTitle,\n                woocommerce: false,\n                wordpressseo: false,\n                wp_language: 'en_US'\n            })\n        }\n    );\n\n    \/\/ Handle the response data\n};<\/code><\/pre>\n<p>Der Payload enth\u00e4lt verschiedene Datenfelder, die die Kinsta-API ben\u00f6tigt, z. B. Unternehmens-ID, Anzeigename, Region, Installationsmodus, Admin-E-Mail, Admin-Passwort usw. Diese Werte werden aus den entsprechenden Statusvariablen abgeleitet.<\/p>\n<p>Nachdem wir die API-Anfrage gestellt haben, warten wir mit <code>await resp.json()<\/code> auf die Antwort und extrahieren die relevanten Daten. Wir erstellen ein neues Objekt <code>newData<\/code> mit der Betriebs-ID und dem Anzeigenamen, das dann mit <code>localStorage.setItem<\/code> im localStorage gespeichert wird.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        \/\/ Fetch request here\n    );\n\n    const data = await resp.json();\n    let newData = { operationId: data.operation_id, display_name: displayName };\n    localStorage.setItem('state', JSON.stringify(newData));\n    navigate('\/details');\n}<\/code><\/pre>\n<p>Schlie\u00dflich rufen wir die Funktion <code>createSiteWithKinstaAPI<\/code> auf, damit eine WordPress-Site \u00fcber die Kinsta-API erstellt wird, wenn ein Nutzer das Formular ausf\u00fcllt und auf die Schaltfl\u00e4che klickt. Au\u00dferdem wird im Code erw\u00e4hnt, dass der Nutzer auf die Seite <strong>details.jsx<\/strong> weitergeleitet wird, um den Vorgang mit der Kinsta-API zu verfolgen. Um die Navigationsfunktion zu aktivieren, importiere <code>useNavigate<\/code> von <code>react-router-dom<\/code> und initialisiere es.<\/p>\n<p>Zur Erinnerung: Den vollst\u00e4ndigen Code f\u00fcr <a href=\"https:\/\/github.com\/kinsta\/site-builder\/blob\/starter-files\/src\/pages\/Home.jsx\">diese Seite findest du im GitHub-Repository<\/a>.<\/p>\n<h3>Implementierung der \u00dcberpr\u00fcfung des Vorgangsstatus mit der Kinsta-API<\/h3>\n<p>Um den Status des Vorgangs mit der Kinsta-API zu \u00fcberpr\u00fcfen, verwenden wir die Vorgangsnummer, die im localStorage gespeichert wurde. Diese Vorgangs-ID wird mit <code>JSON.parse(localStorage.getItem('state'))<\/code> aus dem localStorage abgerufen und einer Variablen zugewiesen.<\/p>\n<p>Um den Status des Vorgangs zu \u00fcberpr\u00fcfen, stellst du eine weitere API-Anfrage an die Kinsta-API, indem du eine GET-Anfrage an den Endpunkt <code>\/operations\/{operationId}<\/code> sendest. Diese Anfrage enth\u00e4lt die notwendigen Header, wie z. B. den Authorization-Header, der den API-Schl\u00fcssel enth\u00e4lt.<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress\" });\nconst KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst stateData = JSON.parse(localStorage.getItem('state'));\n\nconst checkOperation = async () =&gt; {\n    const operationId = stateData.operationId;\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\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    setOperationData(data);\n}<\/code><\/pre>\n<p>Sobald wir die Antwort erhalten haben, extrahieren wir die relevanten Daten mit <code>await resp.json()<\/code> aus der Antwort. Die Vorgangsdaten werden dann mit <code>setOperationData(data)<\/code> im Status aktualisiert.<\/p>\n<p>In der R\u00fcckgabeanweisung der Komponente zeigen wir die Vorgangsmeldung mit <code>operationData.message<\/code> an. Au\u00dferdem stellen wir eine Schaltfl\u00e4che zur Verf\u00fcgung, mit der der Benutzer die Pr\u00fcfung des Vorgangsstatus manuell ausl\u00f6sen kann, indem er die <code>checkOperation<\/code> aufruft.<\/p>\n<p>Wenn der Status des Vorgangs anzeigt, dass er erfolgreich abgeschlossen wurde, kann der Nutzer die hinzugef\u00fcgten Links nutzen, um auf den WordPress-Admin und die Website selbst zuzugreifen. Die Links werden mit Hilfe der <code>stateData.display_name<\/code> aus localStorage erstellt.<\/p>\n<pre><code class=\"language-jsx\">&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/wp-admin\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open WordPress admin&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;\n&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open URL&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;<\/code><\/pre>\n<p>Wenn du auf diese Links klickst, werden der WordPress-Admin und die Website-URL in einem neuen Tab ge\u00f6ffnet, so dass der Nutzer darauf zugreifen kann, ohne zu MyKinsta navigieren zu m\u00fcssen.<\/p>\n<p>Jetzt kannst du eine WordPress-Website ganz einfach \u00fcber deine selbst erstellte Anwendung erstellen.<\/p>\n<h2>Wie du deine React-Anwendung mit Kinsta bereitstellst<\/h2>\n<p>Um dein React-Projekt auf dem <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting<\/a> von Kinsta bereitzustellen, musst du das Projekt zu deinem <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">bevorzugten Git-Anbieter<\/a> pushen. Wenn dein Projekt entweder auf <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-github\/\">GitHub<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/gitlab-vs-github\/\">GitLab<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/bitbucket-vs-github\/\">Bitbucket<\/a> gehostet wird, kannst du mit der Bereitstellung bei Kinsta beginnen.<\/p>\n<p>Befolge diese Schritte, um dein Repository bei Kinsta bereitzustellen:<\/p>\n<ol start=\"1\">\n<li>Melde dich auf dem MyKinsta-Dashboard an oder erstelle dein Kinsta-Konto.<\/li>\n<li>Klicke in der linken Seitenleiste auf &#8222;Anwendungen&#8220; und dann auf &#8222;Dienst hinzuf\u00fcgen&#8220;.<\/li>\n<li>W\u00e4hle &#8222;Anwendung&#8220; aus dem Dropdown-Men\u00fc, um eine React-Anwendung auf Kinsta bereitzustellen.<\/li>\n<li>W\u00e4hle in dem erscheinenden Modal das Repository aus, das du bereitstellen m\u00f6chtest. Wenn du mehrere Zweige hast, kannst du den gew\u00fcnschten Zweig ausw\u00e4hlen und einen Namen f\u00fcr deine Anwendung vergeben.<\/li>\n<li>W\u00e4hle einen der verf\u00fcgbaren Rechenzentrumsstandorte aus der Liste der 24 Optionen aus. Kinsta erkennt automatisch den Startbefehl f\u00fcr deine Anwendung.<\/li>\n<\/ol>\n<p>Schlie\u00dflich ist es nicht sicher, API-Schl\u00fcssel an \u00f6ffentliche Hoster wie deinen Git-Provider weiterzugeben. Beim Hosten kannst du sie als <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">Umgebungsvariablen<\/a> hinzuf\u00fcgen, indem du denselben Variablennamen und Wert wie in der <strong>.env-Datei<\/strong> angibst.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/set-environment-variables-on-mykinsta.jpg\" alt=\"Lege Umgebungsvariablen auf MyKinsta fest, wenn du die Anwendung bereitstellst\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Lege Umgebungsvariablen auf MyKinsta fest, wenn du die Anwendung bereitstellst<\/figcaption><\/figure>\n<p>Sobald du die Bereitstellung deiner Anwendung initiierst, beginnt der Prozess und ist normalerweise innerhalb weniger Minuten abgeschlossen. Eine erfolgreiche Bereitstellung erzeugt einen Link zu deiner Anwendung, wie <strong>https:\/\/site-builder-ndg9i.kinsta.app\/<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Du kannst die automatische Bereitstellung aktivieren, so dass Kinsta deine Anwendung immer dann neu bereitstellt, wenn du deine Codebasis \u00e4nderst und sie auf deinen Git-Host \u00fcbertr\u00e4gst.<\/p>\n<\/aside>\n\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Artikel hast du gelernt, wie du die Kinsta-API programmatisch nutzen kannst, um eine WordPress-Seite zu erstellen und die API in eine React-Anwendung zu integrieren. Denke immer daran, deinen API-Schl\u00fcssel sicher aufzubewahren. Wenn du das Gef\u00fchl hast, dass du ihn \u00f6ffentlich weitergegeben hast, widerrufe ihn und erstelle einen neuen.<\/p>\n<p>Mit der Kinsta-API kannst du nicht nur eine WordPress-Site erstellen, sondern auch Informationen \u00fcber deine WordPress-Sites, Domains und vieles mehr abrufen. Sie kann auch auf <a href=\"https:\/\/kinsta.com\/de\/\">Kinsta-Dienste<\/a> wie Datenbanken und Anwendungen zugreifen.<\/p>\n<p><em>Welchen Endpunkt w\u00fcrdest du gerne als N\u00e4chstes zur Kinsta-API hinzugef\u00fcgt sehen und was w\u00fcrdest du gerne als N\u00e4chstes mit der Kinsta-API bauen? Lass es uns in den Kommentaren wissen.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress ist ein beliebtes Content Management System, das Millionen von Websites im Internet betreibt. Es bietet eine benutzerfreundliche Oberfl\u00e4che und eine breite Palette an Anpassungsm\u00f6glichkeiten. Die &#8230;<\/p>\n","protected":false},"author":287,"featured_media":63716,"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,991,999],"class_list":["post-63715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-kinsta-leistungen","topic-web-entwicklungs-tools","topic-wordpress-entwicklung"],"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>Wie man eine WordPress-Seite mit der Kinsta-API erstellt - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Sch\u00f6pfe das volle Potenzial der Kinsta-API aus und erstelle ganz einfach eine WordPress-Website. Erfahre au\u00dferdem, wie du die Kinsta-API anbinden und eine benutzerdefinierte Benutzeroberfl\u00e4che erstellen kannst.\" \/>\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\/wordpress-api\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man eine WordPress-Seite mit der Kinsta-API erstellt\" \/>\n<meta property=\"og:description\" content=\"Sch\u00f6pfe das volle Potenzial der Kinsta-API aus und erstelle ganz einfach eine WordPress-Website. Erfahre au\u00dferdem, wie du die Kinsta-API anbinden und eine benutzerdefinierte Benutzeroberfl\u00e4che erstellen kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/\" \/>\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=\"2023-07-13T11:06:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-03T14:29:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.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=\"Sch\u00f6pfe das volle Potenzial der Kinsta-API aus und erstelle ganz einfach eine WordPress-Website. Erfahre au\u00dferdem, wie du die Kinsta-API anbinden und eine benutzerdefinierte Benutzeroberfl\u00e4che erstellen kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.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=\"18\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie man eine WordPress-Seite mit der Kinsta-API erstellt\",\"datePublished\":\"2023-07-13T11:06:33+00:00\",\"dateModified\":\"2023-10-03T14:29:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/\"},\"wordCount\":3088,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/\",\"name\":\"Wie man eine WordPress-Seite mit der Kinsta-API erstellt - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg\",\"datePublished\":\"2023-07-13T11:06:33+00:00\",\"dateModified\":\"2023-10-03T14:29:53+00:00\",\"description\":\"Sch\u00f6pfe das volle Potenzial der Kinsta-API aus und erstelle ganz einfach eine WordPress-Website. Erfahre au\u00dferdem, wie du die Kinsta-API anbinden und eine benutzerdefinierte Benutzeroberfl\u00e4che erstellen kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man eine WordPress-Seite mit der Kinsta-API erstellt\"}]},{\"@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":"Wie man eine WordPress-Seite mit der Kinsta-API erstellt - Kinsta\u00ae","description":"Sch\u00f6pfe das volle Potenzial der Kinsta-API aus und erstelle ganz einfach eine WordPress-Website. Erfahre au\u00dferdem, wie du die Kinsta-API anbinden und eine benutzerdefinierte Benutzeroberfl\u00e4che erstellen kannst.","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\/wordpress-api\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man eine WordPress-Seite mit der Kinsta-API erstellt","og_description":"Sch\u00f6pfe das volle Potenzial der Kinsta-API aus und erstelle ganz einfach eine WordPress-Website. Erfahre au\u00dferdem, wie du die Kinsta-API anbinden und eine benutzerdefinierte Benutzeroberfl\u00e4che erstellen kannst.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-07-13T11:06:33+00:00","article_modified_time":"2023-10-03T14:29:53+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Sch\u00f6pfe das volle Potenzial der Kinsta-API aus und erstelle ganz einfach eine WordPress-Website. Erfahre au\u00dferdem, wie du die Kinsta-API anbinden und eine benutzerdefinierte Benutzeroberfl\u00e4che erstellen kannst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"18\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie man eine WordPress-Seite mit der Kinsta-API erstellt","datePublished":"2023-07-13T11:06:33+00:00","dateModified":"2023-10-03T14:29:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/"},"wordCount":3088,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/","name":"Wie man eine WordPress-Seite mit der Kinsta-API erstellt - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg","datePublished":"2023-07-13T11:06:33+00:00","dateModified":"2023-10-03T14:29:53+00:00","description":"Sch\u00f6pfe das volle Potenzial der Kinsta-API aus und erstelle ganz einfach eine WordPress-Website. Erfahre au\u00dferdem, wie du die Kinsta-API anbinden und eine benutzerdefinierte Benutzeroberfl\u00e4che erstellen kannst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-api\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/07\/wordpress-api.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/de\/thema\/api\/"},{"@type":"ListItem","position":3,"name":"Wie man eine WordPress-Seite mit der Kinsta-API erstellt"}]},{"@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\/63715","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=63715"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63715\/revisions"}],"predecessor-version":[{"id":63824,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63715\/revisions\/63824"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63715\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/63716"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=63715"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=63715"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=63715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}