{"id":64692,"date":"2023-08-07T17:17:01","date_gmt":"2023-08-07T16:17:01","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=64692&#038;preview=true&#038;preview_id=64692"},"modified":"2023-08-18T09:29:43","modified_gmt":"2023-08-18T08:29:43","slug":"klonen-website-kinsta-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/","title":{"rendered":"Wie man mit der Kinsta-API und React eine WordPress-Seite klont"},"content":{"rendered":"<p>Du musst nicht viele der 800 Millionen <a href=\"https:\/\/kinsta.com\/wordpress\/\">WordPress-Sites<\/a> im Internet verwalten, bevor du nach M\u00f6glichkeiten suchst, neue Websites effizient zu starten.<\/p>\n<p>Das Klonen einer bestehenden WordPress-Konfiguration ist eine M\u00f6glichkeit, schnell loszulegen, und Kunden des <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">Managed WordPress Hosting<\/a> Service von Kinsta wissen, dass dies \u00fcber unser benutzerfreundliches <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta-Dashboard<\/a> ganz einfach m\u00f6glich ist.<\/p>\n<p>Au\u00dferdem kannst du WordPress-Websites in gro\u00dfem Umfang klonen, indem du deine bevorzugten Technologien zur Anwendungsentwicklung und die <a href=\"https:\/\/kinsta.com\/de\/docs\/kinsta-api\/\">Kinsta-API<\/a> nutzt. In diesem Tutorial zeigen wir dir, wie das mit dieser API und <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a>, einer der beliebtesten <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">JavaScript-Bibliotheken<\/a>, funktioniert.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Was du bauen wirst<\/h2>\n<p>Hier ist das Szenario: Du bist eine WordPress-Entwicklungsagentur mit einer oder mehreren Websites, die als Startvorlagen verwendet werden k\u00f6nnen. Die React-Anwendung zum Klonen von WordPress-Seiten, die wir bauen, sieht so aus:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/clone-wp-site-demo.gif\" alt=\"React-Anwendung zum Klonen von Websites mit der Kinsta-API\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">React-Anwendung zum Klonen von Websites mit der Kinsta-API<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Hast du es eilig? Der gesamte Code ist in <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">dieser GitHub-Vorlage<\/a> verf\u00fcgbar. Verwende sie, um dein eigenes Repository zu erstellen und \u00fcber <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta<\/a> bereitzustellen, indem du deine eigene Unternehmens-ID und deinen API-Schl\u00fcssel als Umgebungsvariablen hinzuf\u00fcgst. (Eine Anleitung findest du in der <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/blob\/main\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Datei Readme.md<\/a>.)<\/p>\n<\/aside>\n\n<h3>Voraussetzungen<\/h3>\n<p>Um diesem Tutorial folgen zu k\u00f6nnen, brauchst 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. Au\u00dferdem musst du Node.js und npm (den <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">Node Package Manager<\/a>) oder yarn auf deinem Computer installiert haben. Der Schwerpunkt dieses Projekts liegt auf der Erstellung einer WordPress-Kloning-Anwendung mit React und der Kinsta-API und nicht auf den Details der UI-Erstellung und des Stylings.<br \/>\n<\/p>\n<h2>Einrichten der Entwicklungsumgebung<\/h2>\n<p>Du kannst eine React-Anwendung von Grund auf neu erstellen und deine eigene Oberfl\u00e4che entwickeln oder du kannst die oben erw\u00e4hnte <a href=\"https:\/\/kinsta.com\/de\/thema\/git\/\">Git-Starter-Vorlage<\/a> nutzen, indem du die folgenden Schritte befolgst:<\/p>\n<ol start=\"1\">\n<li>Besuche das <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub-Repository<\/a> dieses Projekts.<\/li>\n<li>W\u00e4hle <strong>Diese Vorlage verwenden<\/strong> &gt; <strong>Neues Repository erstellen<\/strong>, um den Startcode in ein Repository in deinem GitHub-Konto zu kopieren. (Aktiviere das Kontrollk\u00e4stchen, um <strong>alle Zweige einzuschlie\u00dfen<\/strong>.)<\/li>\n<li>Ziehe das Repository auf deinen lokalen Computer und wechsle mit dem Befehl in den <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files-Zweig<\/a>: <code>git checkout starter-files<\/code><\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Installiere die notwendigen Abh\u00e4ngigkeiten, indem du den Befehl <code>npm install<\/code> laufen l\u00e4sst<\/li>\n<\/ol>\n<p>Sobald die Installation abgeschlossen ist, kannst du das Projekt auf deinem lokalen Computer mit <code>npm run start<\/code> starten. Dadurch wird das Projekt unter <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a> ge\u00f6ffnet.<\/p>\n<h3>Die Projektdateien verstehen<\/h3>\n<p>Der Ordner <strong>src <\/strong>ist das Herzst\u00fcck einer React-Anwendung, denn er enth\u00e4lt das JavaScript, das von webpack ben\u00f6tigt wird. In diesem Ordner befindet sich die Datei <strong>App.js,<\/strong> in der die beiden Routen f\u00fcr dieses Projekt konfiguriert sind.<\/p>\n<p>Innerhalb des Ordners <strong>src<\/strong> befinden sich die Unterordner <strong>components<\/strong> und <strong>pages<\/strong>. Der Ordner components enth\u00e4lt wiederverwendbare Komponenten wie die <strong>Header.jsx<\/strong> und <strong>Footer.jsx<\/strong>, die in den Seiten <strong>Home.jsx<\/strong> und <strong>Operations.jsx <\/strong>verwendet werden.<\/p>\n<p>Hier geht es darum, die Logik in <strong>Home.jsx<\/strong> und <strong>Operations<\/strong><strong>.jsx<\/strong> zu implementieren, da Styling und Routing in unseren GitHub-Starterdateien zu finden sind.<\/p>\n<p><strong>Home.jsx<\/strong> hat ein Formular mit zwei Feldern: den Namen der Seite, die du erstellen willst, und ein Auswahlfeld, das die WordPress-Seiten in deinem MyKinsta-Konto auflistet (diese Liste wird \u00fcber die Kinsta-API abgerufen).<\/p>\n<p>Wenn du auf den Submit-Button des Formulars (<strong>Website klonen<\/strong>) klickst, wird ein Objekt mit der Eigenschaft <code>operation_id<\/code> zur\u00fcckgegeben. Diese ID und der Anzeigename werden als Routenparameter an <strong>Operations.jsx<\/strong> \u00fcbergeben, wo der Status des Klonvorgangs gemeldet wird. Die Schnittstelle enth\u00e4lt auch Links zum WordPress-Admin-Login und zur Startseite der Website.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/operations-page.jpg\" alt=\"Operations-Seite mit Links zum WP-Admin und zur Website\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Operations-Seite mit Links zum WP-Admin und zur Website<\/figcaption><\/figure>\n<h2>Verwendung der Kinsta-API zum Klonen einer WordPress-Website<\/h2>\n<p>In <strong>Home.jsx<\/strong> werden drei API-Anfragen an die <a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kinsta-API<\/a> gestellt. Die erste Anfrage dient dazu, eine Liste der Websites in deinem Kinsta-Konto zu erhalten. Diese wird in einem Status gespeichert und dann zum Auswahlfeld iteriert. Diese Anfrage wird unmittelbar nach dem Rendering der Seite \u00fcber den <a href=\"https:\/\/kinsta.com\/de\/blog\/react-useeffect\/\">useEffect-Hook<\/a> gestellt.<\/p>\n<p>Die zweite und dritte Anfrage wird gestellt, sobald du auf die Schaltfl\u00e4che <strong>Website klonen<\/strong>\u00a0klickst. Bei der zweiten Anfrage wird die Umgebungs-ID der Website abgefragt, die du klonen m\u00f6chtest. Die dritte Anfrage verwendet diese Umgebungs-ID und den Anzeigenamen der Site, um das Klonen der Site zu starten.<\/p>\n<h3>Interaktion mit der Kinsta-API in React<\/h3>\n<p>In diesem Leitfaden interagierst du mit zwei Endpunkten der Kinsta-API:<\/p>\n<ul>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code>: Damit kannst du eine Liste aller Websites zur\u00fcckgeben, eine Site Environment ID anfordern und schlie\u00dflich eine bestehende Website klonen.<\/li>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code>: Mit diesem Endpunkt kannst du den Status der Operation abfragen. Wenn zum Beispiel das Klonen einer Site im Gange ist, kannst du diesen Endpunkt verwenden, um den Status des Vorgangs programmatisch zu verfolgen und festzustellen, wann er abgeschlossen ist.<\/li>\n<\/ul>\n<p>Um mit der Kinsta-API zu interagieren, brauchst du deine <strong>Unternehmens-ID<\/strong> (du findest sie in MyKinsta unter <strong>Unternehmen<\/strong> &gt; <strong>Rechnungsdetails<\/strong> &gt; <strong>Unternehmens-ID<\/strong>) und einen <strong>API-Schl\u00fcssel<\/strong>. Hier erf\u00e4hrst du, wie du <a href=\"https:\/\/kinsta.com\/de\/blog\/kinsta-api-schluessel\/#how-to-create-an-api-key\">einen Kinsta-API-Schl\u00fcssel erstellst<\/a>.<\/p>\n<p>Sobald du diese Zugangsdaten hast, speicherst du sie am besten sicher als Umgebungsvariablen in deiner React-Anwendung. 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 auf diese Umgebungsvariablen innerhalb deines Projekts 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 <a href=\"https:\/\/kinsta.com\/de\/blog\/gitignore-funktioniert-nicht\/\">.gitignore-Datei<\/a> hinzuf\u00fcgst, um zu verhindern, dass sie auf GitHub ver\u00f6ffentlicht wird. Dadurch wird sichergestellt, dass deine sensiblen Informationen, wie z. B. API-Schl\u00fcssel, geheim bleiben.<\/p>\n<\/aside>\n\n<h3>Eine bestehende Website mit der Kinsta-API klonen<\/h3>\n<p>Wir beginnen damit, dass wir die Liste aller Websites, die <strong>Home.jsx<\/strong> rendert, mit dem useEffect Hook abrufen und sie in einem Status speichern. Dazu importierst du die Hooks useEffect und <a href=\"https:\/\/kinsta.com\/de\/blog\/usestate-react\/\">useState<\/a> und erstellst einen Status, in dem du die Liste der abgerufenen Websites speicherst:<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\nconst [sites, setSites] = useState([]);<\/code><\/pre>\n<p>Als N\u00e4chstes verwendest du den useEffect Hook, um die Kinsta API mit der <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> abzufragen. Erstelle zun\u00e4chst zwei konstante Variablen, um die Kopfzeilen und die URL der Kinsta-API zu speichern. Dies geschieht, um Wiederholungen zu vermeiden, da du auf dieser Seite mehr als eine Anfrage an die Kinsta-API senden wirst:<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);<\/code><\/pre>\n<p>Im obigen Code merkt sich der <a href=\"https:\/\/kinsta.com\/de\/blog\/usecallback-react\/#reacts-usecallback-vs-usememo\">useMemo-Hook<\/a> das Header-Objekt, damit es nicht bei jedem Rendering neu ausgewertet werden muss, da sein Wert konstant ist. Jetzt kannst du die API-Anfrage erstellen:<\/p>\n<pre><code class=\"language-jsx\">useEffect(() =&gt; {\n    const fetchAllSites = async () =&gt; {\n        const query = new URLSearchParams({\n            company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n        }).toString();\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites?${query}`,\n            {\n                method: 'GET',\n                headers\n            }\n        );\n        const data = await resp.json();\n        setSites(data.company.sites);\n    };\n    fetchAllSites();\n}, [headers]);<\/code><\/pre>\n<p>Im obigen Code wird eine asynchrone Funktion <code>fetchAllSites<\/code> erstellt. In dieser Funktion definierst du zun\u00e4chst den Parameter <code>query<\/code> (deine Unternehmens-ID), den du aus deiner <strong>.env-Datei<\/strong> abrufst. Dann stellst du mit dem Parameter <code>query<\/code> eine GET-Anfrage an den Endpunkt <code>\/sites<\/code> der Kinsta-API. Die Antwort wird im <code>sites<\/code> Status gespeichert, den du zuvor erstellt hast. Schlie\u00dflich rufst du <code>fetchAllSites<\/code> auf, um den Abrufprozess zu starten.<\/p>\n<p>Jetzt werden die im Status <code>sites<\/code> gespeicherten Werte in einer Schleife verarbeitet, um das Auswahlfeld zu f\u00fcllen. Der Anzeigename wird dem Benutzer angezeigt, w\u00e4hrend die Website-ID als Optionswert verwendet wird. Auf diese Weise kann beim Absenden des Formulars die ID der ausgew\u00e4hlten Website f\u00fcr die Abfrage von Umgebungsdetails verwendet werden:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Select a site&lt;\/label&gt;\n    &lt;span&gt;Select the site you want to clone&lt;\/span&gt;\n    &lt;select className=\"form-control\"&gt;\n        &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n        {sites && (\n            sites.map((site) =&gt; {\n                return (\n                    &lt;option&gt; key={site.id} value={site.id}&gt;{site.display_name}&lt;\/option&gt;\n                )\n            })\n        )}\n    &lt;\/select&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Fahren wir fort mit dem Absenden des Formulars und dem Abrufen von Werten aus dem Formular. Dazu musst du Zustandsvariablen f\u00fcr jedes Eingabefeld erstellen:<\/p>\n<pre><code class=\"language-jsx\">const [selectedSiteId, setSelectedSiteId] = useState('');\nconst [displayName, setDisplayName] = useState('');<\/code><\/pre>\n<p>Als N\u00e4chstes bindest du die Formularfelder an ihre jeweiligen Statuswerte, indem du die Attribute <code>value<\/code> und <code>onChange<\/code> zu jedem Eingabeelement hinzuf\u00fcgst. So sieht das Formular dann aus:<\/p>\n<pre><code class=\"language-jsx\">&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\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"input-div\"&gt;\n            &lt;label&gt;Select a site&lt;\/label&gt;\n            &lt;span&gt;Select the site you want to clone&lt;\/span&gt;\n            &lt;select className=\"form-control\" value={selectedSiteId} onChange={(e) =&gt; setSelectedSiteId(e.target.value)}&gt;\n                &lt;option value=\"\"&gt;&lt;\/option&gt;\n                {sites && (\n                    sites.map((site) =&gt; {\n                        return (\n                            &lt;option key={site.id} value={site.id}&gt;{site.display_name}&lt;\/option&gt;\n                        )\n                    })\n                )}\n            &lt;\/select&gt;\n        &lt;\/div&gt;\n        &lt;button className='btn'&gt;Clone Site&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Im obigen Code ist das value-Attribut jedes Eingabeelements auf die entsprechende Zustandsvariable gesetzt, und das <code>onChange<\/code> -Attribut wird verwendet, um den Zustandswert zu aktualisieren, wenn der Nutzer mit den Eingabefeldern interagiert.<\/p>\n<p>Um die \u00dcbermittlung des Formulars zu verarbeiten, f\u00fcge dem Formularelement eine <code>onSubmit<\/code> Methode hinzu. Zum Beispiel:<\/p>\n<pre><code class=\"language-jsx\">&lt;form&gt; onSubmit={handleSubmission}&gt;\n    {\/* form details *\/}\n&lt;\/form&gt;<\/code><\/pre>\n<p>Definiere die Methode <code>handleSubmission<\/code>, bei der zwei API-Anfragen an die Kinsta-API gestellt werden. Die erste Anfrage ruft die Umgebungs-ID der zu klonenden Website ab, und die zweite Anfrage f\u00fchrt den Klonvorgang durch.<\/p>\n<p>Beginnen wir mit der Abfrage der Umgebungs-ID. Erstelle innerhalb der Methode <code>handleSubmission<\/code> eine asynchrone Funktion, die diese Anfrage bearbeitet. Die Funktion sendet eine GET-Anfrage an den Endpunkt <code>\/sites<\/code> und f\u00fcgt die ID der ausgew\u00e4hlten Site hinzu, gefolgt von der Angabe <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/getSiteEnvironments\" target=\"_blank\" rel=\"noopener noreferrer\">\/environments<\/a><\/code> endpunkt:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmission = async (e) =&gt; {\n    e.preventDefault();\n    const fetchEnvironmentId = async (siteId) =&gt; {\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/${siteId}\/environments`,\n            {\n                method: 'GET',\n                headers\n            }\n        );\n        const data = await resp.json();\n        let envId = data.site.environments[0].id;\n        return envId;\n    }\n    let environmentId = await fetchEnvironmentId(selectedSiteId);\n}<\/code><\/pre>\n<p><code>fetchEnvironmentId<\/code> ist eine asynchrone Funktion, die eine GET-Anfrage an die Kinsta-API sendet. Sie holt die Umgebungen der ausgew\u00e4hlten Website ab und extrahiert die Umgebungs-ID aus der Antwort. Die Umgebungs-ID wird in der Variablen <code>envId<\/code> gespeichert und dann zur\u00fcckgegeben. Wenn wir die Funktion aufrufen, weisen wir ihren R\u00fcckgabewert der Variablen <code>envId<\/code> zu.<br \/>\n<br \/>\nJetzt kannst du eine bestehende Website mit der Kinsta-API klonen, denn du hast die wichtigsten Informationen \u00fcber die Ausgangsseite: Unternehmens-ID, Anzeigename und Umgebungs-ID.<\/p>\n<p>Erstelle in der Methode <code>handleSubmission<\/code> eine Funktion namens <code>cloneExistingSite<\/code>, die diese API-Anfrage bearbeitet. Diese Anfrage ist an den <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/cloneWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites\/clone<\/a><\/code> Endpunkt gerichtet. Im Gegensatz zu den vorherigen Anfragen sind die Kopfzeilen f\u00fcr diese Anfrage anders, da du <code>Content-Type<\/code> als <code>application\/json<\/code> angeben musst. Au\u00dferdem handelt es sich um eine POST-Anfrage, d.h. du musst einen Request Body mit den Daten, die du an die API senden willst, einf\u00fcgen. So wird die Anfrage aufgebaut:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmission = async (e) =&gt; {\n    e.preventDefault();\n\n    \/\/ fetch environment Id\n\n    const cloneExistingSite = async (env_Id) =&gt; {\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/clone`,\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                    source_env_id: env_Id,\n                })\n            }\n        );\n        const data = await resp.json();\n        navigate(`\/operations\/${displayName}\/${data.operation_id}`)\n        console.log(data);\n    }\n    cloneExistingSite(environmentId);\n}<\/code><\/pre>\n<p>In diesem Code wird die Anfrage <code>body<\/code> mithilfe von <code>JSON.stringify()<\/code> erstellt, um das Payload-Objekt in einen JSON-String zu konvertieren. Die Antwort wird dann in der Variablen data gespeichert. Mit der Methode <code>useNavigate<\/code> aus der Bibliothek <code>react-router-dom<\/code> werden <code>displayName<\/code> und <code>operation_id<\/code> als Routenparameter \u00fcbergeben. Stelle sicher, dass du die Methode <code>useNaviagte<\/code> importierst und instanziierst:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Import the required method \nimport { useNavigate } from 'react-router-dom'; \n\n\/\/ Instantiate the useNavigate method \nconst navigate = useNavigate();<\/code><\/pre>\n<p>Wenn du nun das Formular ausf\u00fcllst und auf die Schaltfl\u00e4che <strong>Seite klonen<\/strong> klickst, wird eine neue Seite geklont, die in deinem MyKinsta-Dashboard sichtbar ist. Wir wollen den Vorgang des Klonens jedoch programmatisch in der benutzerdefinierten Benutzeroberfl\u00e4che verfolgen. Das machst du in <strong>Operations.jsx <\/strong>mit den Daten, die \u00fcber die Route gesendet werden.<\/p>\n<h3>Implementierung der \u00dcberpr\u00fcfung des Vorgangsstatus mit der Kinsta-API<\/h3>\n<p>In <strong>Operations.jsx<\/strong> rufst du mit der Methode <code>useParams<\/code> von <code>react-router-dom<\/code> die ID des Vorgangs aus der Route ab. Diese ID wird f\u00fcr eine API-Anfrage verwendet, wenn du auf die Schaltfl\u00e4che <strong>Check Site Status<\/strong> klickst.<\/p>\n<p>Importiere zun\u00e4chst die Methode <code>useParams<\/code> und verwende sie, um die Variablen <code>displayName<\/code> und <code>operationId<\/code> zu instanziieren:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Import the useParams library\nimport { useParams } from 'react-router-dom';\n\n\/\/ Instantiate the paramters\nconst { displayName, operationId } = useParams();<\/code><\/pre>\n<p>Als N\u00e4chstes erstellst du einen Status, um den Betriebsstatus zu speichern, wenn die Anfrage gestellt wird:<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress.\" });<\/code><\/pre>\n<p>Im obigen Code wird der Status mit einer Standardnachricht initialisiert, die angezeigt wird, bis die Schaltfl\u00e4che <strong>Check Site Status<\/strong> angeklickt wird. F\u00fcge ein <code>onClick<\/code> Ereignis zur Schaltfl\u00e4che <strong>Check Site Status<\/strong> hinzu und rufe die Methode <code>checkOperation<\/code> auf, wenn die Schaltfl\u00e4che angeklickt wird:<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt; className='sm-btn' onClick={() =&gt; checkOperation()}&gt;Check Site Status&lt;\/button&gt;<\/code><\/pre>\n<p>Erstelle nun die Funktion <code>checkOperation<\/code>, um die Anfrage an die Kinsta-API zu stellen. Speichere die Konstanten <code>headers<\/code> und <code>KinstaAPIUrl<\/code> in Variablen und verwende sie dann in der API-Anfrage:<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);\n\nconst checkOperation = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\n        {\n            method: 'GET',\n            headers\n        }\n    );\n    const data = await resp.json();\n    setOperationData(data);\n};<\/code><\/pre>\n<p>Im obigen Code wird eine GET-Anfrage mit der Vorgangs-ID an den Endpunkt <code>\/operations<\/code> gesendet, und die Antwort wird im Status <code>operationData<\/code> gespeichert. Jetzt kannst du die Daten in deinem Markup verwenden:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"services\"&gt;\n    &lt;div className=\"details\"&gt;\n        &lt;p&gt;{operationData.message}..&lt;\/p&gt;\n        &lt;button&gt; className='sm-btn' onClick={() =&gt; checkOperation()}&gt;Check Site Status&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Schlie\u00dflich werden die <code>displayName<\/code> Daten, die \u00fcber die Route \u00fcbergeben werden, verwendet, um die URL f\u00fcr die neue Website und die WordPress-Admin-URL zu erstellen. Beide Links werden in einem neuen Tab ge\u00f6ffnet.<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"details\"&gt;\n    &lt;a href={`http:\/\/${displayName}.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:\/\/${displayName}.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;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Mit diesen \u00c4nderungen ruft <strong>Operations.jsx<\/strong> die ID des Vorgangs von der Route ab, stellt eine API-Anfrage, wenn die Schaltfl\u00e4che angeklickt wird, zeigt den Status des Vorgangs an und liefert Links zum WordPress-Admin und zur URL der Website auf der Grundlage der Daten von <code>displayName<\/code>.<\/p>\n<h2>Bereitstellen deiner Anwendung bei Kinsta<\/h2>\n<p>Um deine Anwendung auf der <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting-Plattform<\/a> von Kinsta bereitzustellen, musst du das Projekt bei deinem <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">bevorzugten Git-Anbieter<\/a> pushen. Wenn dein Projekt 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 dem Deployment auf Kinsta beginnen.<\/p>\n<p>Befolge diese Schritte, um dein Repository auf 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 <strong>Anwendungen<\/strong> und dann auf <strong>Dienst hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle <strong>Anwendung<\/strong> 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.<\/li>\n<li>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\/08\/environment-variables-mykinsta.jpg\" alt=\"Setze Umgebungsvariablen auf MyKinsta, wenn du die Anwendung bereitstellst\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Setze Umgebungsvariablen auf MyKinsta, 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:\/\/clone-wp-site-12teh.kinsta.app\/<\/strong>.<\/p>\n<p><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<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Die Kinsta-API bietet dir die Flexibilit\u00e4t, eigene Benutzeroberfl\u00e4chen f\u00fcr die Verwaltung von WordPress-Sites zu erstellen, einschlie\u00dflich der M\u00f6glichkeit, bestehende Websites zu klonen und verschiedene Aspekte deiner WordPress-Umgebung zu verwalten.<\/p>\n<p>In diesem Artikel hast du gelernt, wie du eine Anwendung entwickelst, die das Klonen von Websites au\u00dferhalb von MyKinsta erm\u00f6glicht.<\/p>\n<p><em>Wie nutzt du die Kinsta-API? Welche Funktionen und Endpunkte w\u00fcrdest du dir f\u00fcr die API w\u00fcnschen? Teile sie im Kommentarbereich mit!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Du musst nicht viele der 800 Millionen WordPress-Sites im Internet verwalten, bevor du nach M\u00f6glichkeiten suchst, neue Websites effizient zu starten. Das Klonen einer bestehenden WordPress-Konfiguration &#8230;<\/p>\n","protected":false},"author":287,"featured_media":64693,"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],"class_list":["post-64692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-kinsta-leistungen","topic-react"],"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-Website mit Kinsta API &amp; React klont<\/title>\n<meta name=\"description\" content=\"Lerne, wie du mit der leistungsstarken Kinsta-API und React m\u00fchelos eine WordPress-Seite klonen kannst, indem du eine eigene Benutzeroberfl\u00e4che erstellst.\" \/>\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\/klonen-website-kinsta-api\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man mit der Kinsta-API und React eine WordPress-Seite klont\" \/>\n<meta property=\"og:description\" content=\"Lerne, wie du mit der leistungsstarken Kinsta-API und React m\u00fchelos eine WordPress-Seite klonen kannst, indem du eine eigene Benutzeroberfl\u00e4che erstellst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-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-08-07T16:17:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-18T08:29:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-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=\"Lerne, wie du mit der leistungsstarken Kinsta-API und React m\u00fchelos eine WordPress-Seite klonen kannst, indem du eine eigene Benutzeroberfl\u00e4che erstellst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-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=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie man mit der Kinsta-API und React eine WordPress-Seite klont\",\"datePublished\":\"2023-08-07T16:17:01+00:00\",\"dateModified\":\"2023-08-18T08:29:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/\"},\"wordCount\":2164,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/\",\"name\":\"Wie man eine WordPress-Website mit Kinsta API & React klont\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg\",\"datePublished\":\"2023-08-07T16:17:01+00:00\",\"dateModified\":\"2023-08-18T08:29:43+00:00\",\"description\":\"Lerne, wie du mit der leistungsstarken Kinsta-API und React m\u00fchelos eine WordPress-Seite klonen kannst, indem du eine eigene Benutzeroberfl\u00e4che erstellst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Wie man eine WordPress-Website mit Kinsta API &amp; React klont\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-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 mit der Kinsta-API und React eine WordPress-Seite klont\"}]},{\"@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-Website mit Kinsta API & React klont","description":"Lerne, wie du mit der leistungsstarken Kinsta-API und React m\u00fchelos eine WordPress-Seite klonen kannst, indem du eine eigene Benutzeroberfl\u00e4che erstellst.","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\/klonen-website-kinsta-api\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man mit der Kinsta-API und React eine WordPress-Seite klont","og_description":"Lerne, wie du mit der leistungsstarken Kinsta-API und React m\u00fchelos eine WordPress-Seite klonen kannst, indem du eine eigene Benutzeroberfl\u00e4che erstellst.","og_url":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-08-07T16:17:01+00:00","article_modified_time":"2023-08-18T08:29:43+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Lerne, wie du mit der leistungsstarken Kinsta-API und React m\u00fchelos eine WordPress-Seite klonen kannst, indem du eine eigene Benutzeroberfl\u00e4che erstellst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie man mit der Kinsta-API und React eine WordPress-Seite klont","datePublished":"2023-08-07T16:17:01+00:00","dateModified":"2023-08-18T08:29:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/"},"wordCount":2164,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/","url":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/","name":"Wie man eine WordPress-Website mit Kinsta API & React klont","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg","datePublished":"2023-08-07T16:17:01+00:00","dateModified":"2023-08-18T08:29:43+00:00","description":"Lerne, wie du mit der leistungsstarken Kinsta-API und React m\u00fchelos eine WordPress-Seite klonen kannst, indem du eine eigene Benutzeroberfl\u00e4che erstellst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-api\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/08\/clone-site-kinsta-api.jpg","width":1460,"height":730,"caption":"Wie man eine WordPress-Website mit Kinsta API &amp; React klont"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/klonen-website-kinsta-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 mit der Kinsta-API und React eine WordPress-Seite klont"}]},{"@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\/64692","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=64692"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/64692\/revisions"}],"predecessor-version":[{"id":64998,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/64692\/revisions\/64998"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/64692\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/64693"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=64692"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=64692"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=64692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}