{"id":72024,"date":"2023-08-07T17:13:26","date_gmt":"2023-08-07T16:13:26","guid":{"rendered":"https:\/\/kinqsta.com\/it\/?p=72024&#038;preview=true&#038;preview_id=72024"},"modified":"2023-08-15T18:23:50","modified_gmt":"2023-08-15T17:23:50","slug":"clonare-sito-kinsta-api","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/","title":{"rendered":"Come clonare un sito WordPress usando l&#8217;API di Kinsta e React"},"content":{"rendered":"<p>Non \u00e8 necessario dover gestire tutti gli 800 milioni di <a href=\"https:\/\/kinqsta.com\/wordpress\/\">siti WordPress<\/a> presenti sul web prima di cercare un modo per lanciare nuovi siti in modo efficiente.<\/p>\n<p>Clonare una configurazione WordPress esistente \u00e8 un modo per essere rapidamente operativi e i clienti del servizio di <a href=\"https:\/\/kinqsta.com\/it\/hosting-wordpress\/\">Hosting WordPress gestito<\/a> di Kinsta sanno che \u00e8 facile farlo all&#8217;interno della nostra <a href=\"https:\/\/my.kinqsta.com\/?lang=it\">dashboard MyKinsta<\/a>.<\/p>\n<p>Inoltre, \u00e8 possibile clonare siti WordPress in scala utilizzando le tecnologie di sviluppo delle applicazioni che preferite e le <a href=\"https:\/\/kinqsta.com\/it\/docs\/kinsta-api\/\">API di Kinsta<\/a>. In questo tutorial utilizzeremo l&#8217;API e <a href=\"https:\/\/kinqsta.com\/it\/blog\/react-js\/\">React<\/a>, una delle tante <a href=\"https:\/\/kinqsta.com\/it\/blog\/librerie-javascript\/\">librerie JavaScript<\/a> pi\u00f9 diffuse, per mostrarvi come funziona.<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>Cosa costruiremo<\/h2>\n<p>Ecco lo scenario: siete un&#8217;agenzia di sviluppo WordPress con uno o pi\u00f9 siti che possono essere utilizzati come modelli di partenza. L&#8217;applicazione React per clonare siti WordPress che stiamo costruendo ha questo aspetto:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/clone-wp-site-demo.gif\" alt=\"Applicazione React per clonare siti con Kinsta API\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Applicazione React per clonare siti con Kinsta API.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Andate di fretta? Tutto il codice sottostante \u00e8 disponibile in <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">questo template GitHub<\/a>. Utilizzatelo per creare il repository e distribuirlo tramite <a href=\"https:\/\/my.kinqsta.com\/?lang=it\">MyKinsta<\/a>, aggiungendo l&#8217;ID della vostra azienda e la chiave API come variabili d&#8217;ambiente. (Date un&#8217;occhiata al <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/blob\/main\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">file Readme.md<\/a> per le istruzioni)<\/p>\n<\/aside>\n\n<h3>Prerequisiti<\/h3>\n<p>Per seguire questo tutorial, \u00e8 necessario avere una conoscenza di base di <a href=\"https:\/\/kinqsta.com\/it\/blog\/html\/\">HTML<\/a>, <a href=\"https:\/\/kinqsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> e <a href=\"https:\/\/kinqsta.com\/javascript\/\">JavaScript<\/a> e una certa familiarit\u00e0 con React. Inoltre, dovrete avere installato sul computer Node.js e npm (il <a href=\"https:\/\/kinqsta.com\/it\/blog\/cos-e-npm\/\">gestore di pacchetti Node<\/a>) o yarn. L&#8217;obiettivo di questo progetto \u00e8 la creazione di un&#8217;applicazione per la clonazione di WordPress utilizzando React e l&#8217;API Kinsta piuttosto che i dettagli della creazione e dello stile dell&#8217;interfaccia utente.<br \/>\n<\/p>\n<h2>Impostazione dell&#8217;ambiente di sviluppo<\/h2>\n<p>Potete creare un&#8217;applicazione React da zero e sviluppare la vostra interfaccia, oppure usare il template di partenza <a href=\"https:\/\/kinqsta.com\/it\/argomenti\/git\/\">Git<\/a> di cui sopra seguendo questi passaggi:<\/p>\n<ol start=\"1\">\n<li>Visitate il <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">repository GitHub<\/a> di questo progetto.<\/li>\n<li>Selezionate <strong>Use this template<\/strong> &gt; <strong>Create a new repository<\/strong> per copiare il codice di partenza in un repository all&#8217;interno del vostro account GitHub. (Selezionate la casella per <strong>includere tutti i branch<\/strong>.)<\/li>\n<li>Estraete il repository sul vostro computer locale e passate al branch <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a> usando il comando: <code>git checkout starter-files<\/code><\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Installate le dipendenze necessarie eseguendo il comando <code>npm install<\/code><\/li>\n<\/ol>\n<p>Una volta completata l&#8217;installazione, potete lanciare il progetto sul vostro computer locale con <code>npm run start<\/code>. In questo modo si apre il progetto all&#8217;indirizzo <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>.<\/p>\n<h3>Capire i file del progetto<\/h3>\n<p>La cartella <strong>src <\/strong>\u00e8 il cuore di un&#8217;applicazione React, poich\u00e9 contiene il JavaScript necessario a webpack. Nella cartella c&#8217;\u00e8 <strong>App.js<\/strong>, dove sono configurati i due percorsi di questo progetto.<\/p>\n<p>All&#8217;interno della cartella <strong>src<\/strong> ci sono le sottocartelle <strong>components<\/strong> e <strong>pages<\/strong>. La cartella components contiene componenti riutilizzabili, come <strong>Header.jsx<\/strong> e <strong>Footer.jsx<\/strong>, utilizzati nelle pagine <strong>Home.jsx<\/strong> e <strong>Operations.jsx <\/strong>.<\/p>\n<p>Il vostro obiettivo qui \u00e8 implementare la logica in <strong>Home.jsx<\/strong> e <strong>Operations.jsx<\/strong>, poich\u00e9 lo stile e il routing si trovano nei nostri file di partenza su GitHub.<\/p>\n<p><strong>Home.jsx<\/strong> ha un modulo con due campi: il nome del sito che state creando e un campo di selezione che elenca i siti WordPress presenti nel vostro account MyKinsta (questo elenco viene recuperato tramite l&#8217;API di Kinsta).<\/p>\n<p>Quando il pulsante di invio del modulo (<strong>Clone site<\/strong>) viene cliccato, viene restituito un oggetto che contiene la propriet\u00e0 <code>operation_id<\/code>. L&#8217;ID e il nome visualizzato saranno passati come parametri di percorso a <strong>Operations.jsx<\/strong>, dove viene riportato lo stato dell&#8217;operazione di clonazione. L&#8217;interfaccia includer\u00e0 anche dei link per accedere al login dell&#8217;area di amministrazione di WordPress e alla home page del sito.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/operations-page.jpg\" alt=\"Pagina delle operazioni che mostra i link all'area di amministrazione di WP e al sito\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pagina delle operazioni che mostra i link all&#8217;area di amministrazione di WP e al sito.<\/figcaption><\/figure>\n<h2>Utilizzare l&#8217;API di Kinsta per clonare un sito WordPress<\/h2>\n<p>All&#8217;interno di <strong>Home.jsx<\/strong>, verranno effettuate tre richieste API all&#8217;<a href=\"https:\/\/api-docs.kinqsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API di Kinsta<\/a>. La prima richiesta \u00e8 quella di ottenere un elenco di siti sul vostro account Kinsta. Questo verr\u00e0 memorizzato in uno stato e poi iterato nel campo select. Questa richiesta verr\u00e0 effettuata subito dopo il rendering della pagina utilizzando l&#8217;<a href=\"https:\/\/kinqsta.com\/it\/blog\/react-useeffect\/\">hook useEffect<\/a>.<\/p>\n<p>La seconda e la terza richiesta vengono effettuate una volta cliccato il pulsante <strong>Clone site<\/strong>. La seconda richiesta ottiene l&#8217;ID dell&#8217;ambiente del sito che si desidera clonare. La terza richiesta utilizza l&#8217;ID dell&#8217;ambiente e il nome visualizzato del sito per avviare la clonazione del sito.<\/p>\n<h3>Interagire con l&#8217;API di Kinsta in React<\/h3>\n<p>In questa esercitazione interagiamo con due endpoint dell&#8217;API di Kinsta:<\/p>\n<ul>\n<li><code><a href=\"https:\/\/api-docs.kinqsta.com\/tag\/WordPress-Sites\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code>: Questo pu\u00f2 restituire un elenco di tutti i siti, richiedere l&#8217;ID di un ambiente del sito e infine clonare un sito esistente.<\/li>\n<li><code><a href=\"https:\/\/api-docs.kinqsta.com\/tag\/Operations\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code>: Viene utilizzato per ottenere lo stato dell&#8217;operazione. Ad esempio, quando l&#8217;operazione di clonazione del sito \u00e8 in corso, possiamo utilizzare questo endpoint per monitorare programmaticamente lo stato dell&#8217;operazione e determinare quando \u00e8 terminata.<\/li>\n<\/ul>\n<p>Per interagire con l&#8217;API di Kinsta, avrete bisogno del vostro <strong>ID azienda<\/strong> (che si trova in MyKinsta alla voce <strong>Azienda<\/strong> &gt; <strong>Dettagli di fatturazione<\/strong> &gt; <strong>ID azienda<\/strong>) e di una <strong>chiave API<\/strong>. Ecco come <a href=\"https:\/\/kinqsta.com\/it\/blog\/chiave-api-kinsta\/#how-to-create-an-api-key\">creare una chiave API Kinsta<\/a>.<\/p>\n<p>Una volta ottenute queste credenziali, \u00e8 meglio memorizzarle in modo sicuro come variabili d&#8217;ambiente nella vostra applicazione React. Per impostare le variabili d&#8217;ambiente, create un file <strong>.env<\/strong> nella cartella principale del progetto. All&#8217;interno di questo file, aggiungete le seguenti righe:<\/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>Per accedere a queste variabili d&#8217;ambiente all&#8217;interno del progetto, potete utilizzare la sintassi <code>process.env.THE_VARIABLE<\/code>. Ad esempio, per accedere a <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, dovete usare <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>\u00c8 importante aggiungere il file <strong>.env<\/strong> al vostro <a href=\"https:\/\/kinqsta.com\/it\/blog\/gitignore-non-funziona\/\">file .gitignore<\/a> per evitare che venga inviato a GitHub. In questo modo le informazioni sensibili, come le chiavi API, rimarranno private.<\/p>\n<\/aside>\n\n<h3>Clonare un sito esistente con Kinsta API<\/h3>\n<p>Iniziamo recuperando l&#8217;elenco di tutti i siti quando <strong>Home.jsx<\/strong> viene renderizzato utilizzando l&#8217;hook useEffect e memorizzandoli in uno stato. A tal fine, importiamo gli hook useEffect e <a href=\"https:\/\/kinqsta.com\/it\/blog\/usestate-react\/\">useState<\/a> e creiamo uno stato per memorizzare l&#8217;array di siti che verranno recuperati:<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\nconst [sites, setSites] = useState([]);<\/code><\/pre>\n<p>Quindi, utilizziamo l&#8217;hook useEffect per interrogare l&#8217;API di Kinsta utilizzando l&#8217;<a href=\"https:\/\/kinqsta.com\/it\/blog\/richieste-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API JavaScript Fetch<\/a>. Per prima cosa, creiamo due variabili costanti per memorizzare gli header e l&#8217;URL dell&#8217;API Kinsta. Questo per evitare ripetizioni dato che invieremo pi\u00f9 di una richiesta all&#8217;API di Kinsta in questa pagina:<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinqsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);<\/code><\/pre>\n<p>Nel codice qui sopra, l&#8217;hook <a href=\"https:\/\/kinqsta.com\/it\/blog\/usecallback-react\/#reacts-usecallback-vs-usememo\">useMemo<\/a> memorizza l&#8217;oggetto headers in modo che non debba essere rivalutato a ogni rendering poich\u00e9 il suo valore \u00e8 costante. Ora possiamo creare la richiesta API:<\/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>Nel codice precedente, viene creata una funzione asincrona <code>fetchAllSites<\/code>. All&#8217;interno di questa funzione, definiamo innanzitutto il parametro <code>query<\/code> (l&#8217;ID dell&#8217;azienda) recuperato dal file <strong>.env<\/strong>. Poi facciamo una richiesta GET all&#8217;endpoint <code>\/sites<\/code> dell&#8217;API Kinsta utilizzando il parametro <code>query<\/code>. La risposta viene memorizzata nello stato <code>sites<\/code> creato in precedenza. Infine, chiamiamo <code>fetchAllSites<\/code> per avviare il processo di recupero.<\/p>\n<p>Ora incorporiamo i valori memorizzati nello stato <code>sites<\/code> eseguendo un loop per popolare il campo select. Il nome visualizzato verr\u00e0 mostrato all&#8217;utente, mentre l&#8217;ID del sito verr\u00e0 utilizzato come valore dell&#8217;opzione. In questo modo, quando il modulo viene inviato, l&#8217;ID del sito selezionato pu\u00f2 essere utilizzato per ottenere i dettagli dell&#8217;ambiente:<\/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>Procediamo a gestire l&#8217;invio del modulo e a recuperare i valori dal modulo. Per farlo, dobbiamo creare delle variabili di stato per ogni campo di input:<\/p>\n<pre><code class=\"language-jsx\">const [selectedSiteId, setSelectedSiteId] = useState('');\nconst [displayName, setDisplayName] = useState('');<\/code><\/pre>\n<p>Quindi, leghiamo i campi del modulo ai rispettivi valori di stato aggiungendo gli attributi <code>value<\/code> e <code>onChange<\/code> a ogni elemento di input. Ecco come apparir\u00e0 il modulo:<\/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>Nel codice precedente, ogni elemento di input ha l&#8217;attributo value impostato sulla variabile di stato corrispondente e l&#8217;attributo <code>onChange<\/code> viene utilizzato per aggiornare il valore dello stato quando l&#8217;utente interagisce con i campi di input.<\/p>\n<p>Per gestire l&#8217;invio del modulo, colleghiamo un metodo <code>onSubmit<\/code> all&#8217;elemento del modulo. Ad esempio:<\/p>\n<pre><code class=\"language-jsx\">&lt;form&gt; onSubmit={handleSubmission}&gt;\n    {\/* form details *\/}\n&lt;\/form&gt;<\/code><\/pre>\n<p>Definiamo il metodo <code>handleSubmission<\/code> che prevede due richieste API all&#8217;API di Kinsta. La prima richiesta recupera l&#8217;ID dell&#8217;ambiente del sito da clonare e la seconda esegue l&#8217;operazione di clonazione.<\/p>\n<p>Iniziamo con il recuperare l&#8217;ID dell&#8217;ambiente. All&#8217;interno del metodo <code>handleSubmission<\/code>, creiamo una funzione asincrona per gestire questa richiesta. La funzione invier\u00e0 una richiesta GET all&#8217;endpoint <code>\/sites<\/code>, aggiungendo l&#8217;ID del sito selezionato, seguito dall&#8217;endpoint <code><a href=\"https:\/\/api-docs.kinqsta.com\/tag\/WordPress-Sites#operation\/getSiteEnvironments\" target=\"_blank\" rel=\"noopener noreferrer\">\/environments<\/a><\/code>:<\/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>Qui sopra, <code>fetchEnvironmentId<\/code> \u00e8 una funzione asincrona che invia una richiesta GET all&#8217;API di Kinsta. Recupera gli ambienti del sito selezionato ed estrae l&#8217;ID dell&#8217;ambiente dalla risposta. L&#8217;ID dell&#8217;ambiente viene memorizzato nella variabile <code>envId<\/code> e poi restituito. Quando chiamiamo la funzione, assegniamo il suo valore di ritorno alla variabile <code>envId<\/code>.<br \/>\n<br \/>\nA questo punto, possiamo clonare un sito esistente con l&#8217;API di Kinsta perch\u00e9 disponiamo delle informazioni essenziali sul sito di origine: ID azienda, nome visualizzato e ID ambiente.<\/p>\n<p>All&#8217;interno del metodo <code>handleSubmission<\/code>, creiamo una funzione chiamata <code>cloneExistingSite<\/code> per gestire questa richiesta API. Questa richiesta sar\u00e0 indirizzata all&#8217;endpoint <code><a href=\"https:\/\/api-docs.kinqsta.com\/tag\/WordPress-Sites#operation\/cloneWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites\/clone<\/a><\/code>. A differenza delle richieste precedenti, le intestazioni di questa richiesta sono diverse perch\u00e9 dobbiamo specificare <code>Content-Type<\/code> come <code>application\/json<\/code>. Inoltre, si tratta di una richiesta POST, quindi dobbiamo includere un corpo di richiesta contenente il payload che vogliamo inviare all&#8217;API. Ecco come sar\u00e0 strutturata la richiesta:<\/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 questo codice, la richiesta <code>body<\/code> viene costruita utilizzando <code>JSON.stringify()<\/code> per convertire l&#8217;oggetto payload in una stringa JSON. La risposta viene poi memorizzata nella variabile data. Utilizzando il metodo <code>useNavigate<\/code> della libreria <code>react-router-dom<\/code>, i parametri <code>displayName<\/code> e <code>operation_id<\/code> vengono passati come parametri del percorso. Assicuratevi di importare il metodo <code>useNaviagte<\/code> e di istanziarlo:<\/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>Ora, quando compiliamo il modulo e clicchiamo sul pulsante <strong>Clone site<\/strong>, inizier\u00e0 il processo di clonazione di un nuovo sito, che sar\u00e0 visibile nella dashboard MyKinsta. Tuttavia, vogliamo seguire l&#8217;operazione di clonazione del sito in modo programmatico all&#8217;interno dell&#8217;interfaccia utente personalizzata. Questo viene gestito in <strong>Operations.jsx<\/strong> utilizzando i dati inviati tramite la route.<\/p>\n<h3>Implementare la verifica dello stato dell&#8217;operazione con l&#8217;API di Kinsta<\/h3>\n<p>In <strong>Operations.jsx<\/strong>, recuperiamo l&#8217;ID dell&#8217;operazione dalla route utilizzando il metodo <code>useParams<\/code> di <code>react-router-dom<\/code>. Questo ID sar\u00e0 utilizzato per effettuare una richiesta API ogni volta che si clicca sul pulsante <strong>Check Site Status<\/strong>.<\/p>\n<p>Per prima cosa, importiamo il metodo <code>useParams<\/code> e usiamolo per istanziare le variabili <code>displayName<\/code> e <code>operationId<\/code>:<\/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>Quindi, creiamo uno stato per memorizzare lo stato dell&#8217;operazione quando viene effettuata la richiesta:<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress.\" });<\/code><\/pre>\n<p>Nel codice precedente, lo stato viene inizializzato con un messaggio predefinito che verr\u00e0 visualizzato fino a quando non verr\u00e0 cliccato il pulsante <strong>Check Site Status<\/strong>. Aggiungiamo un evento <code>onClick<\/code> al pulsante <strong>Check Site Status<\/strong> e chiamiamo il metodo <code>checkOperation<\/code> quando il pulsante viene cliccato:<\/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>Ora, creiamo la funzione <code>checkOperation<\/code> per effettuare la richiesta di operazione all&#8217;API di Kinsta. Memorizziamo le costanti <code>headers<\/code> e <code>KinstaAPIUrl<\/code> nelle variabili e poi usiamole nella richiesta API:<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinqsta.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>Nel codice qui sopra, viene inviata una richiesta GET all&#8217;endpoint <code>\/operations<\/code> con l&#8217;ID dell&#8217;operazione e la risposta viene memorizzata nello stato <code>operationData<\/code>. Ora possiamo utilizzare i dati nel markup:<\/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>Infine, i dati di <code>displayName<\/code> passati attraverso la route saranno utilizzati per costruire l&#8217;URL del nuovo sito e l&#8217;URL dell&#8217;area di amministrazione di WordPress. Entrambi i link si apriranno in una nuova scheda.<\/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>Con queste modifiche, <strong>Operations.jsx<\/strong> recuperer\u00e0 l&#8217;ID dell&#8217;operazione dalla route, effettuer\u00e0 una richiesta API quando viene cliccato il pulsante, visualizzer\u00e0 lo stato dell&#8217;operazione e fornir\u00e0 i link all&#8217;URL dell&#8217;area di amministrazione di WordPress e del sito in base ai dati di <code>displayName<\/code>.<\/p>\n<h2>Distribuire l&#8217;applicazione su Kinsta<\/h2>\n<p>Per distribuire l&#8217;applicazione sulla piattaforma di <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting di Applicazioni<\/a> di Kinsta, dovrete inviare il progetto al vostro <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">provider Git preferito<\/a>. Una volta che il progetto sar\u00e0 ospitato su <a href=\"https:\/\/kinqsta.com\/it\/blog\/cosa-e-github\/\">GitHub<\/a>, <a href=\"https:\/\/kinqsta.com\/it\/blog\/gitlab-vs-github\/\">GitLab<\/a> o <a href=\"https:\/\/kinqsta.com\/it\/blog\/bitbucket-e-github\/\">Bitbucket<\/a>, potrete procedere al deploy su Kinsta.<\/p>\n<p>Per distribuire il repository su Kinsta, seguire i seguenti passaggi:<\/p>\n<ol start=\"1\">\n<li>Accedere o creare un account Kinsta nella dashboard MyKinsta.<\/li>\n<li>Nella barra laterale di sinistra, cliccare su <strong>Applicazioni<\/strong> e poi su <strong>Aggiungi servizio<\/strong>.<\/li>\n<li>Selezionare <strong>Applicazione<\/strong> dal menu a tendina per distribuire un&#8217;applicazione React su Kinsta.<\/li>\n<li>Nella finestra di dialogo che appare, scegliere il repository che si desidera distribuire. Se si hanno pi\u00f9 branch, \u00e8 possibile selezionare il branch desiderato e dare un nome all&#8217;applicazione.<\/li>\n<li>Selezionare uno dei data center disponibili nell&#8217;elenco delle opzioni di 24.<\/li>\n<li>Kinsta rileva automaticamente il comando Start dell&#8217;applicazione.<\/li>\n<\/ol>\n<p>Infine, non \u00e8 sicuro inviare le chiavi API a host pubblici come un provider Git. Durante l&#8217;hosting, si possono aggiungere come <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">variabili d&#8217;ambiente<\/a> utilizzando lo stesso nome e valore della variabile specificata nel file <strong>.env<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/environment-variables-mykinsta.jpg\" alt=\"variabili d'ambiente\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Impostare le variabili d&#8217;ambiente su MyKinsta durante la distribuzione.<\/figcaption><\/figure>\n<p>Una volta avviata la distribuzione dell&#8217;applicazione, il processo inizia e in genere si conclude in pochi minuti. Una distribuzione riuscita genera un link all&#8217;applicazione, come <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>\u00c8 possibile attivare la distribuzione automatica, in modo che Kinsta ridistribuisca l&#8217;applicazione ogni volta che la base di codice viene modificata e inviata all&#8217;host Git.<\/p>\n<\/aside>\n<\/p>\n<h2>Riepilogo<\/h2>\n<p>L&#8217;API di Kinsta offre la flessibilit\u00e0 necessaria per creare interfacce utente personalizzate per la gestione dei siti WordPress, compresa la possibilit\u00e0 di clonare siti esistenti e gestire vari aspetti del proprio ambiente WordPress.<\/p>\n<p>In questo articolo abbiamo imparato a sviluppare un&#8217;applicazione che permette di clonare un sito al di fuori di MyKinsta.<\/p>\n<p><em>Come utilizzate le API di Kinsta? Quali funzioni ed endpoint vorreste vedere aggiunti alle API? Condividiteli nella sezione commenti!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Non \u00e8 necessario dover gestire tutti gli 800 milioni di siti WordPress presenti sul web prima di cercare un modo per lanciare nuovi siti in modo &#8230;<\/p>\n","protected":false},"author":287,"featured_media":72025,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26232,26212,26206],"class_list":["post-72024","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-react","topic-servizi-kinsta"],"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>Come clonare un sito WordPress usando l&#039;API di Kinsta e React<\/title>\n<meta name=\"description\" content=\"Scopri come clonare senza sforzo un sito WordPress utilizzando la potente API Kinsta e React, costruendo un&#039;interfaccia utente personalizzata.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come clonare un sito WordPress usando l&#039;API di Kinsta e React\" \/>\n<meta property=\"og:description\" content=\"Scopri come clonare senza sforzo un sito WordPress utilizzando la potente API Kinsta e React, costruendo un&#039;interfaccia utente personalizzata.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:13:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-15T17:23:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Scopri come clonare senza sforzo un sito WordPress utilizzando la potente API Kinsta e React, costruendo un&#039;interfaccia utente personalizzata.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come clonare un sito WordPress usando l&#8217;API di Kinsta e React\",\"datePublished\":\"2023-08-07T16:13:26+00:00\",\"dateModified\":\"2023-08-15T17:23:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/\"},\"wordCount\":2193,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/\",\"url\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/\",\"name\":\"Come clonare un sito WordPress usando l'API di Kinsta e React\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg\",\"datePublished\":\"2023-08-07T16:13:26+00:00\",\"dateModified\":\"2023-08-15T17:23:50+00:00\",\"description\":\"Scopri come clonare senza sforzo un sito WordPress utilizzando la potente API Kinsta e React, costruendo un'interfaccia utente personalizzata.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinqsta.com\/it\/argomenti\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come clonare un sito WordPress usando l&#8217;API di Kinsta e React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/it\/#website\",\"url\":\"https:\/\/kinqsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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:\/\/kinqsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/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:\/\/kinqsta.com\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come clonare un sito WordPress usando l'API di Kinsta e React","description":"Scopri come clonare senza sforzo un sito WordPress utilizzando la potente API Kinsta e React, costruendo un'interfaccia utente personalizzata.","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:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/","og_locale":"it_IT","og_type":"article","og_title":"Come clonare un sito WordPress usando l'API di Kinsta e React","og_description":"Scopri come clonare senza sforzo un sito WordPress utilizzando la potente API Kinsta e React, costruendo un'interfaccia utente personalizzata.","og_url":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-08-07T16:13:26+00:00","article_modified_time":"2023-08-15T17:23:50+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Scopri come clonare senza sforzo un sito WordPress utilizzando la potente API Kinsta e React, costruendo un'interfaccia utente personalizzata.","twitter_image":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"12 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come clonare un sito WordPress usando l&#8217;API di Kinsta e React","datePublished":"2023-08-07T16:13:26+00:00","dateModified":"2023-08-15T17:23:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/"},"wordCount":2193,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/","url":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/","name":"Come clonare un sito WordPress usando l'API di Kinsta e React","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg","datePublished":"2023-08-07T16:13:26+00:00","dateModified":"2023-08-15T17:23:50+00:00","description":"Scopri come clonare senza sforzo un sito WordPress utilizzando la potente API Kinsta e React, costruendo un'interfaccia utente personalizzata.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#primaryimage","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/clone-site-kinsta-api.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/it\/blog\/clonare-sito-kinsta-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinqsta.com\/it\/argomenti\/api\/"},{"@type":"ListItem","position":3,"name":"Come clonare un sito WordPress usando l&#8217;API di Kinsta e React"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/it\/#website","url":"https:\/\/kinqsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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:\/\/kinqsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/#\/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:\/\/kinqsta.com\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/72024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/comments?post=72024"}],"version-history":[{"count":9,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/72024\/revisions"}],"predecessor-version":[{"id":72321,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/72024\/revisions\/72321"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/translations\/es"},{"href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72024\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media\/72025"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media?parent=72024"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/tags?post=72024"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/topic?post=72024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}