{"id":71227,"date":"2023-07-13T12:03:12","date_gmt":"2023-07-13T11:03:12","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=71227&#038;preview=true&#038;preview_id=71227"},"modified":"2024-04-04T16:45:03","modified_gmt":"2024-04-04T15:45:03","slug":"wordpress-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/","title":{"rendered":"Come Creare un Sito WordPress con l&#8217;API di Kinsta"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/wordpress\/\">WordPress<\/a> \u00e8 un popolare sistema di gestione dei contenuti che alimenta milioni di siti web su Internet. Offre un&#8217;interfaccia semplice e un&#8217;ampia gamma di opzioni di personalizzazione.<\/p>\n<p>Creare siti WordPress pu\u00f2 richiedere molto tempo, soprattutto quando si eseguono manualmente attivit\u00e0 ripetitive. Kinsta ha reso pi\u00e0 semplici <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/wordpress-come-iniziare\/nuovo-sito\/\">queste operazioni<\/a> grazie al cruscotto <a href=\"https:\/\/my.kinsta.com\/?lang=it\">MyKinsta<\/a>, che fornisce anche un <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/wordpress-domini\/url-temporaneo-wordpress\/\">dominio temporaneo<\/a> per eseguire un test immediato. Tuttavia, l&#8217;introduzione dell&#8217;<a href=\"https:\/\/kinsta.com\/it\/docs\/kinsta-api\/\">API di Kinsta<\/a> consente agli <a href=\"https:\/\/kinsta.com\/it\/blog\/tipi-di-developer\/\">sviluppatori<\/a> di migliorare il flusso di lavoro per la creazione del sito e di sviluppare interfacce personalizzate per soddisfare esigenze specifiche.<\/p>\n<p>In questo tutorial spieghiamo come sfruttare la potenza dell&#8217;API di Kinsta per creare siti WordPress. Inoltre, utilizzeremo la libreria JavaScript <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a> per sviluppare un&#8217;applicazione che crea siti WordPress senza MyKinsta.<\/p>\n<p>Ecco una demo live dell&#8217;<a href=\"https:\/\/site-builder-ndg9i.kinsta.app\/\">applicazione per la creazione di siti<\/a>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-application.gif\" alt=\"Applicazione per la creazione di siti\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Applicazione per la creazione di siti.<\/figcaption><\/figure>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>L&#8217;API di Kinsta<\/h2>\n<p>L&#8217;<a href=\"https:\/\/kinsta.com\/it\/changelog\/kinsta-api\/\">API di Kinsta<\/a> \u00e8 un potente strumento che permette di interagire con la piattaforma di <a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/\">Hosting WordPress Gestito<\/a> di Kinsta in modo programmatico. Permette di automatizzare diverse attivit\u00e0 relative ai servizi offerti da Kinsta, come la creazione di un sito, il recupero di informazioni sul sito, lo <a href=\"https:\/\/kinsta.com\/it\/blog\/chiave-api-kinsta\/#how-to-use-kinsta-api-to-build-a-status-checker\">stato di un sito<\/a> e molto altro.<\/p>\n<p>Questa API rende pi\u00f9 semplice la creazione di siti WordPress e pu\u00f2 essere uno strumento prezioso per gli sviluppatori. Per utilizzare l&#8217;API di Kinsta, \u00e8 necessario avere un account con almeno un sito, un&#8217;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">applicazione<\/a> o un <a href=\"https:\/\/sevalla.com\/database-hosting\/\">database<\/a> WordPress in MyKinsta. Sar\u00e0 inoltre necessario generare una chiave API per l&#8217;autenticazione e l&#8217;accesso all&#8217;account.<\/p>\n<p>Per generare una chiave API:<\/p>\n<ol start=\"1\">\n<li>Andate alla dashboard di MyKinsta.<\/li>\n<li>Andate alla pagina delle <strong>chiavi API <\/strong> (<strong>nome<\/strong> &gt; <strong>Impostazioni azienda<\/strong> &gt; <strong>Chiavi API<\/strong>).<\/li>\n<li>Cliccate su <strong>Crea chiave API<\/strong>.<\/li>\n<li>Scegliete una scadenza o impostate una data di inizio personalizzata e un numero di ore per la scadenza della chiave.<\/li>\n<li>Assegnate un nome univoco alla chiave.<\/li>\n<li>Cliccate su <strong>Genera<\/strong>.<\/li>\n<\/ol>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/create-api-key-on-mykinsta.jpg\" alt=\"Creare una chiave API in MyKinsta\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Creare una chiave API in MyKinsta.<\/figcaption><\/figure>\n<p>Dopo aver creato la chiave API, copiatela e conservatela in un luogo sicuro (vi consigliamo di utilizzare un <a href=\"https:\/\/kinsta.com\/it\/blog\/password-manager\/\">gestore di password<\/a>), perch\u00e9 sar\u00e0 visibile <strong>una sola volta<\/strong> all&#8217;interno di MyKinsta. \u00c8 possibile generare pi\u00f9 chiavi API: sono elencate nella pagina delle <strong>chiavi API<\/strong>. Se avete bisogno di revocare una chiave API, cliccate su <strong>Revoca<\/strong> accanto a quella che volete revocare.<\/p>\n<h2>Creare un sito WordPress con l&#8217;API di Kinsta<\/h2>\n<p>Ora che la vostra chiave API \u00e8 pronta, creiamo un sito WordPress con l&#8217;API di Kinsta. Per farlo, useremo l&#8217;endpoint <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/addWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code> che si aspetta un payload contenente i seguenti dati:<\/p>\n<ul>\n<li><strong>company:<\/strong> questo parametro si aspetta un ID aziendale unico visibile nelle impostazioni di MyKinsta. Serve a identificare l&#8217;azienda associata al sito WordPress.<\/li>\n<li><strong>display_name:<\/strong> il nome visualizzato, che \u00e8 lo stesso del nome del sito su MyKinsta, aiuta a identificare il sito. Viene utilizzato solo in MyKinsta. Viene utilizzato per il dominio temporaneo del sito WordPress e del pannello di <a href=\"https:\/\/kinsta.com\/it\/blog\/amministrazione-wordpress\/\">amministrazione di WordPress<\/a> (per l&#8217;API di Kinsta, \u00e8 <em>display_name.kinsta.cloud<\/em> e <em>display_name.kinsta.cloud\/wp-admin<\/em>).<\/li>\n<li><strong>region:<\/strong> questo parametro permette di scegliere tra i 27 data center disponibili per i siti web. Una regione pi\u00f9 vicina al vostro pubblico di riferimento pu\u00f2 migliorare le prestazioni e la velocit\u00e0 del sito (ecco l&#8217;<a href=\"https:\/\/kinsta.com\/it\/docs\/informazioni-sul-servizio\/sedi-data-center\/\">elenco delle regioni disponibili<\/a>).<\/li>\n<li><strong>install_mode:<\/strong> questo parametro determina il tipo di installazione di WordPress. Il valore predefinito \u00e8 &#8220;plain&#8221;, che consente di creare un normale sito WordPress. Altre opzioni includono &#8220;new&#8221; per una nuova installazione e altre modalit\u00e0 in base a requisiti specifici.<\/li>\n<li><strong>is_subdomain_multisite:<\/strong> questo parametro booleano (vero\/falso) specifica se il sito WordPress deve essere configurato come multisito utilizzando i sottodomini.<\/li>\n<li><strong>admin_email:<\/strong> questo parametro richiede l&#8217;indirizzo e-mail dell&#8217;amministratore di WordPress. Viene utilizzato per scopi amministrativi e per ricevere notifiche importanti.<\/li>\n<li><strong>admin_password:<\/strong> questo parametro serve per impostare la password dell&#8217;account utente amministratore di WordPress. Scegliete una password sicura per proteggere il sito.<\/li>\n<li><strong>admin_user:<\/strong> questo parametro imposta il nome utente dell&#8217;account amministratore di WordPress. Viene utilizzato per accedere alla bacheca di WordPress e gestire il sito.<\/li>\n<li><strong>is_multisite:<\/strong> simile a <code>is_subdomain_multisite<\/code>, questo parametro booleano determina se il sito WordPress deve essere configurato come multisito.<\/li>\n<li><strong>site_title:<\/strong> Questo parametro rappresenta il titolo del sito WordPress. Appare nella parte superiore di ogni pagina del sito. Potrete sempre modificarlo in seguito.<\/li>\n<li><strong>woocommerce:<\/strong> impostando questo parametro booleano \u00e8 possibile installare il plugin WooCommerce durante la creazione del sito.<\/li>\n<li><strong>wordpressseo:<\/strong> questo parametro controlla l&#8217;installazione del <a href=\"https:\/\/kinsta.com\/it\/blog\/yoast-seo\/\">plugin Yoast SEO<\/a> durante la creazione del sito.<\/li>\n<li><strong>wp_language:<\/strong> questo parametro accetta un valore stringa che rappresenti la lingua\/locale del vostro sito WordPress (potete individuare la vostra versione <a href=\"https:\/\/translate.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">locale di WordPress qui<\/a>).<\/li>\n<\/ul>\n<p>Ora che abbiamo analizzato tutti i parametri, ecco come appare il payload che inviate all&#8217;API di Kinsta:<\/p>\n<pre><code class=\"language-json\">{\n  \"company\": \"54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n  \"display_name\": \"First site\",\n  \"region\": \"us-central1\",\n  \"install_mode\": \"new\",\n  \"is_subdomain_multisite\": false,\n  \"admin_email\": \"admin@example.com\",\n  \"admin_password\": \"vJnFnN-~v)PxF[6k\",\n  \"admin_user\": \"admin\",\n  \"is_multisite\": false,\n  \"site_title\": \"My First Site\",\n  \"woocommerce\": false,\n  \"wordpressseo\": false,\n  \"wp_language\": \"en_US\"\n}<\/code><\/pre>\n<p>Utilizzando la modalit\u00e0 che preferite, potete inviare una richiesta POST all&#8217;API di Kinsta; dovete solo impostare la vostra chiave API per creare un sito WordPress. Per questo esempio, utilizziamo la <a href=\"https:\/\/kinsta.com\/it\/blog\/richieste-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">Fetch API di JavaScript<\/a>:<\/p>\n<pre><code class=\"language-jsx\">const createWPSite = async () =&gt; {\n    const resp = await fetch(\n        `https:\/\/api.kinsta.com\/v2\/sites`,\n        {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application\/json',\n            Authorization: 'Bearer &lt;YOUR_KEY_HERE&gt;'\n          },\n          body: JSON.stringify({\n            company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',\n            display_name: 'First site',\n            region: 'us-central1',\n            install_mode: 'new',\n            is_subdomain_multisite: false,\n            admin_email: 'admin@example.com',\n            admin_password: 'vJnFnN-~v)PxF[6k',\n            admin_user: 'admin',\n            is_multisite: false,\n            site_title: 'My First Site',\n            woocommerce: false,\n            wordpressseo: false,\n            wp_language: 'en_US'\n          })\n        }\n      );\n      \n      const data = await resp.json();\n      console.log(data);\n}<\/code><\/pre>\n<p>Il codice qui sopra utilizza la Fetch API JavaScript per inviare una richiesta POST all&#8217;API di Kinsta per creare un sito WordPress. La funzione <code>createWPSite<\/code> gestisce il processo. All&#8217;interno della funzione, viene effettuata una richiesta Fetch all&#8217;API di Kinsta <code>\/sites endpoint with the necessary data<\/code>.<\/p>\n<p>Viene eseguito il parsing della risposta utilizzando <code>resp.json()<\/code> e il risultato viene registrato nella console. Sostituite <code>&lt;YOUR_KEY_HERE&gt;<\/code> con la vostra chiave API, regolate i valori del payload e invocate <code>createWPSite()<\/code> per creare un sito WordPress utilizzando l&#8217;API di Kinsta.<\/p>\n<p>Ecco come appare la risposta:<\/p>\n<pre><code class=\"language-json\">{\n    \"operation_id\": \"sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n    \"message\": \"Adding site in progress\",\n    \"status\": 202\n}<\/code><\/pre>\n<h3>Monitoraggio delle operazioni con l&#8217;API di Kinsta<\/h3>\n<p>Una volta avviata la creazione di un sito con l&#8217;API di Kinsta, \u00e8 importante monitorare l&#8217;avanzamento dell&#8217;operazione. Questo pu\u00f2 essere fatto in modo programmatico senza dover controllare MyKinsta con l&#8217;endpoint <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations#operation\/getOperationStatus\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code>.<\/p>\n<p>Per monitorare le operazioni, usate l&#8217;<code>operation_id<\/code> ottenuto quando avviate un&#8217;operazione, come la creazione di un sito WordPress. Passate <code>operation_id<\/code> come parametro all&#8217;endpoint <code>\/operations<\/code>.<\/p>\n<pre><code class=\"language-jsx\">const operationId = 'YOUR_operation_id_PARAMETER';\nconst resp = await fetch(\n  `https:\/\/api.kinsta.com\/v2\/operations\/${operationId}`,\n  {\n    method: 'GET',\n    headers: {\n      Authorization: 'Bearer &lt;YOUR_TOKEN_HERE&gt;'\n    }\n  }\n);\nconst data = await resp.json();\nconsole.log(data);<\/code><\/pre>\n<p>Il codice precedente recupera le informazioni su un&#8217;operazione inviando una richiesta GET all&#8217;endpoint <code>\/operations<\/code> con l&#8217;appropriato <code>operation_id<\/code>. La richiesta include la <a href=\"https:\/\/kinsta.com\/it\/blog\/chiave-api-kinsta\/\">chiave API<\/a> per l&#8217;autenticazione.<br \/>\nI dati di risposta ricevuti dall&#8217;API vengono registrati nella console. La risposta fornisce informazioni preziose sullo stato e sull&#8217;avanzamento dell&#8217;operazione. Ad esempio, se la creazione di un sito WordPress \u00e8 ancora in corso, la risposta appare come segue:<\/p>\n<pre><code class=\"language-json\">{\n    \"status\": 202,\n    \"message\": \"Operation in progress\",\n    \"data\": null\n}<\/code><\/pre>\n<p>Allo stesso modo, una volta che l&#8217;operazione \u00e8 stata completata con successo, la risposta \u00e8 questa:<\/p>\n<pre><code class=\"language-json\">{\n    \"message\": \"Successfully finished request\",\n    \"status\": 200,\n    \"data\": null\n}<\/code><\/pre>\n<p>\u00c8 possibile, a questo punto, creare programmaticamente un sito WordPress e verificarne il funzionamento utilizzando l&#8217;API di Kinsta. Per migliorare questa funzionalit\u00e0, facciamo un ulteriore passo avanti e sviluppiamo un&#8217;interfaccia utente (UI) personalizzata in grado di gestire queste operazioni. In questo modo, anche chi non ha competenze tecniche pu\u00f2 sfruttare le funzionalit\u00e0 dell&#8217;API.<\/p>\n<h2>Creare un&#8217;applicazione React per creare un sito WordPress con l&#8217;API di Kinsta<\/h2>\n<p>Per iniziare, create la struttura di un progetto React e installate le dipendenze necessarie. Integrate l&#8217;API di Kinsta nell&#8217;applicazione React con la Fetch API o altre librerie di <a href=\"https:\/\/kinsta.com\/it\/blog\/richieste-http-javascript\/\">richieste HTTP<\/a>, come Axios.<\/p>\n<h3>Prerequisiti<\/h3>\n<p>Per seguire questo progetto, \u00e8 consigliabile avere una conoscenza base di <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> e una certa familiarit\u00e0 con React. L&#8217;obiettivo principale di questo progetto \u00e8 dimostrare l&#8217;utilizzo dell&#8217;API di Kinsta, quindi questo articolo non si addentra nei dettagli della creazione o dello stile dell&#8217;interfaccia utente.<\/p>\n<h3>Come iniziare<\/h3>\n<p>Per rendere pi\u00f9 semplice la configurazione del progetto, abbiamo creato un template. Seguite questi passaggi:<\/p>\n<p>1. Create un repository <a href=\"https:\/\/kinsta.com\/it\/argomenti\/git\/\">Git<\/a> utilizzando <a href=\"https:\/\/github.com\/kinsta\/site-builder\" target=\"_blank\" rel=\"noopener noreferrer\">questo template su GitHub<\/a>. Selezionate <strong>Use this template<\/strong> &gt; <strong>Create a new repository<\/strong> per copiare il codice di partenza in un nuovo repository all&#8217;interno del vostro account GitHub e selezionate la casella per <strong>includere tutti i branch<\/strong>.<\/p>\n<p>2. Estraete il repository sul computer locale e passate alla cartella <strong><a href=\"https:\/\/github.com\/kinsta\/site-builder\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a><\/strong> utilizzando il comando che segue:<\/p>\n<pre><code class=\"language-bash\">git checkout starter-files<\/code><\/pre>\n<p>3. Installate le dipendenze necessarie eseguendo il comando <code>npm install<\/code>. 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 <strong><a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:3000\/<\/a><\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form.jpg\" alt=\"Modulo per la creazione del sito\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Modulo per la creazione del sito.<\/figcaption><\/figure>\n<h3>I file del progetto<\/h3>\n<p>All&#8217;interno della <strong>cartella src<\/strong> del progetto ci sono due sottocartelle principali: <strong>components<\/strong> e <strong>pages<\/strong>. La cartella components contiene componenti riutilizzabili, come l&#8217;<strong>header<\/strong> e il <strong>footer<\/strong>, utilizzati nelle <strong>pagine<\/strong> <strong>Home<\/strong> e <strong>Details<\/strong>.<\/p>\n<p>In questo progetto, l&#8217;obiettivo principale \u00e8 quello di implementare la logica delle <strong>pagine<\/strong> <strong>Home<\/strong> e <strong>Details<\/strong>, perch\u00e9 lo stile e il routing sono gi\u00e0 stati realizzati.<\/p>\n<p>La <strong>pagina Home<\/strong> ha un modulo che raccoglie diversi campi di dati che vengono passati all&#8217;API di Kinsta. La risposta di questa pagina viene memorizzata nel localStorage (ci sono metodi alternativi per memorizzare l&#8217;ID dell&#8217;operazione, fondamentale per verificare lo stato dell&#8217;operazione).<\/p>\n<p>Nella <strong>pagina Details<\/strong>, l&#8217;ID dell&#8217;operazione viene recuperato da loacalStorage e passato all&#8217;endpoint <code>\/operation<\/code> dell&#8217;API di Kinsta come parametro per verificare lo stato dell&#8217;operazione. In questo progetto, aggiungiamo un pulsante che permette agli utenti di controllare lo stato a intermittenza (potete utilizzare il metodo <code>setInterval<\/code> per automatizzare la procedura).<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-operation-information.jpg\" alt=\"Informazioni sulle operazioni del costruttore del sito\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Informazioni sull&#8217;operazione del costruttore del sito.<\/figcaption><\/figure>\n<h2>Interagire con l&#8217;API di Kinsta in React<\/h2>\n<p>Dopo aver realizzato l&#8217;interfaccia utente (UI), il passo successivo \u00e8 quello di gestire l&#8217;invio del modulo nella <strong>pagina Home<\/strong> e inviare una richiesta POST all&#8217;endpoint <code>\/sites<\/code> dell&#8217;API di Kinsta. Questa richiesta contiene i dati del modulo raccolti come payload e ci permette di creare un sito WordPress.<\/p>\n<p>Per interagire con l&#8217;API di Kinsta, avrete bisogno del vostro <strong>ID aziendale<\/strong> e della vostra <strong>chiave API<\/strong>. Una volta ottenute queste credenziali, \u00e8 meglio memorizzarle in modo sicuro come variabili d&#8217;ambiente nella vostra applicazione React.<\/p>\n<p>Per impostare le variabili d&#8217;ambiente, create un <strong> file .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 <strong> file .env<\/strong> al file <strong><a href=\"https:\/\/kinsta.com\/it\/blog\/gitignore-non-funziona\/\">.gitignore<\/a><\/strong> per evitare che venga inviato a GitHub. Questo fa s\u00ec che le informazioni sensibili, come le chiavi API, rimangano private e sicure.<\/p>\n<\/aside>\n\n<h3>Recuperare i dati del modulo in React<\/h3>\n<p>Nel file <strong>Home.jsx<\/strong> \u00e8 presente un modulo. Dovrete aggiungere al modulo una logica che consenta di ottenere i dati e convalidarli quando vengono inviati. Per recuperare i dati del modulo nella vostra applicazione React, seguite l&#8217;approccio dei componenti controllati di React insieme all&#8217;hook <code><a href=\"https:\/\/kinsta.com\/it\/blog\/usestate-react\/\">useState<\/a><\/code> . Questo approccio permette di creare uno stato per ogni campo del modulo e di aggiornarlo quando l&#8217;utente inserisce i dati.<\/p>\n<p>Per prima cosa, importate l&#8217;hook <code>useState<\/code> all&#8217;inizio del file:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';<\/code><\/pre>\n<p>Quindi, impostate una variabile di stato per ogni campo del modulo all&#8217;interno del vostro componente funzionale. Ad esempio, se avete un campo di input per il &#8220;Titolo del sito&#8221;, potete creare una variabile di stato chiamata <code>siteTitle<\/code>:<\/p>\n<pre><code class=\"language-jsx\">const [siteTitle, setSiteTitle] = useState('');<\/code><\/pre>\n<p>Qui, <code>siteTitle<\/code> \u00e8 la variabile di stato che contiene il valore del campo di input &#8220;Titolo del sito&#8221; e <code>setSiteTitle<\/code> \u00e8 la funzione che aggiorna lo stato corrispondente.<\/p>\n<p>Per legare i campi del modulo ai rispettivi valori di stato, aggiungete gli attributi <code>value<\/code> e <code>onChange<\/code> a ciascun elemento di input. Ad esempio, il campo di input &#8220;Site title&#8221;:<\/p>\n<pre><code class=\"language-jsx\">&lt;input\n  type=\"text\"\n  className=\"form-control\"\n  value={siteTitle}\n  onChange={(event) =&gt; setSiteTitle(event.target.value)}\n\/&gt;<\/code><\/pre>\n<p>In questo esempio, l&#8217;attributo <code>value<\/code> \u00e8 impostato sulla variabile di stato <code>siteTitle<\/code>. Questo fa s\u00ec che il campo di input visualizzi il valore corrente di <code>siteTitle<\/code>. L&#8217;event handler <code>onChange<\/code> \u00e8 impostato sulla funzione <code>setSiteTitle<\/code>, che aggiorna lo stato <code>siteTitle<\/code> con il nuovo valore ogni volta che l&#8217;utente digita nel campo.<\/p>\n<p>Seguendo questo approccio per ogni campo del modulo, potete creare le variabili di stato necessarie e aggiornarle man mano che l&#8217;utente interagisce con il modulo. Questo permette di accedere facilmente ai valori inseriti quando il modulo viene inviato e di eseguire ulteriori azioni o convalide con i dati del modulo.<\/p>\n<p>Se lo fate per tutti i campi del modulo, avrete questo file <strong>Home.jsx<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import Header from '..\/components\/Header';\nimport Footer from '..\/components\/Footer';\n\nconst Home = () =&gt; {\n\n    return (\n        &lt;div className=\"app-container\"&gt;\n            &lt;Header \/&gt;\n            &lt;div className=\"container\"&gt;\n                &lt;div className=\"container-title\"&gt;\n                    &lt;h1&gt; className=\"title\"&gt;Site Builder with Kinsta API&lt;\/h1&gt;\n                    &lt;p&gt; className=\"description\"&gt;\n                        This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.\n                    &lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;form&gt;\n                    &lt;div className=\"form-container\"&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Display name&lt;\/label&gt;\n                            &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt; WordPress site title&lt;\/label&gt;\n                            &lt;span&gt;Appears across the top of every page of the site. You can always change it later.&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-flex\"&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin username&lt;\/label&gt;\n                                &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin email&lt;\/label&gt;\n                                &lt;input type=\"email\" className=\"form-control\" \/&gt;\n                                &lt;span&gt; className='error-message'&gt;Ensure this is a valid email&lt;\/span&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;WordPress admin password&lt;\/label&gt;\n                            &lt;span&gt;Ensure you remember this password as it is what you'll use to log into WP-admin&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Data center location&lt;\/label&gt;\n                            &lt;span&gt;Allows you to place your website in a geographical location closest to your visitors.&lt;\/span&gt;\n                            &lt;select className=\"form-control\"&gt;\n                                &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n                                {\/* add options *\/}\n                            &lt;\/select&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"checkbox-flex\"&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install WooCommerce&lt;\/label&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install Yoast SEO&lt;\/label&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;button&gt; className='btn'&gt;Create Site&lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div &gt;\n    )\n}\n\nexport default Home;<\/code><\/pre>\n<h4>Implementare la convalida dei campi del modulo con l&#8217;hook useRef<\/h4>\n<p>Per implementare la convalida dei campi del modulo in React, potete seguire questi passaggi. Concentriamoci sull&#8217;implementazione della convalida per i campi &#8220;Nome visualizzato&#8221; e &#8220;E-mail amministratore WordPress&#8221;.<\/p>\n<p>Per prima cosa, dovete creare dei riferimenti utilizzando l&#8217;hook <code><a href=\"https:\/\/kinsta.com\/it\/blog\/react-useref\/\">useRef<\/a><\/code> per controllare la visualizzazione dei messaggi di errore. Importate l&#8217;hook <code>useRef<\/code> e create i riferimenti necessari per ogni campo:<\/p>\n<pre><code class=\"language-jsx\">import { useRef } from 'react';\n\nconst displayNameRef = useRef(null);\nconst wpEmailRef = useRef(null);<\/code><\/pre>\n<p>Successivamente, colleghiamo i riferimenti agli elementi dei messaggi di errore corrispondenti nei campi del modulo. Ad esempio, per il campo &#8220;Nome visualizzato&#8221;, aggiungete <code>ref<\/code> al tag <code>span<\/code> che contiene il messaggio di errore:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Display name&lt;\/label&gt;\n    &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n    &lt;input type=\"text\" className=\"form-control\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n    &lt;span className='error-message' ref={displayNameRef}&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Allo stesso modo, per il campo &#8220;WordPress admin email&#8221;:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n  &lt;label&gt;WordPress admin email&lt;\/label&gt;\n  &lt;input\n    type=\"email\"\n    className=\"form-control\"\n    value={wpAdminEmail}\n    onChange={(e) =&gt; setWpAdminEmail(e.target.value)}\n  \/&gt;\n  &lt;span&gt; className='error-message' ref={wpEmailRef}&gt;Ensure this is a valid email&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Ora possiamo creare le funzioni di convalida che controllano i valori inseriti e decidono se visualizzare i messaggi di errore. Ecco le funzioni per &#8220;Nome visualizzato&#8221; e &#8220;E-mail amministratore WordPress&#8221;:<\/p>\n<pre><code class=\"language-jsx\">const checkDisplayName = () =&gt; {\n  if (displayName.length &lt; 4) {\n    displayNameRef.current.style.display = 'block';\n  } else {\n    displayNameRef.current.style.display = 'none';\n  }\n}\n\nconst checkWpAdminEmail = () =&gt; {\n  let regex = \/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$\/;\n  if (!wpAdminEmail.match(regex)) {\n    wpEmailRef.current.style.display = 'block';\n  } else {\n    wpEmailRef.current.style.display = 'none';\n  }\n}<\/code><\/pre>\n<p>Queste funzioni vengono richiamate ogni volta che i campi di input corrispondenti vengono modificati. Confrontano i valori di input con i criteri di validazione e aggiornano la visualizzazione dei messaggi di errore manipolando la propriet\u00e0 <code>style.display<\/code> degli elementi del messaggio di errore.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form-with-validation.jpg\" alt=\"Site builder form with validation\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Modulo del costruttore del sito con convalida.<\/figcaption><\/figure>\n<p>Potrete implementare altre convalide o personalizzare la logica di convalida in base alle vostre esigenze.<\/p>\n<h3>Gestire l&#8217;invio di un modulo in React<\/h3>\n<p>Quando si gestisce l&#8217;evento di invio del modulo per la creazione di un sito, \u00e8 necessario eseguire diverse operazioni. Innanzitutto, bisogner\u00e0 collegare l&#8217;event handler <code>onSubmit<\/code> all&#8217;elemento <code>&lt;form&gt;<\/code>. All&#8217;interno della funzione <code>createSite<\/code>, bisogner\u00e0 prevenire il comportamento predefinito di invio del modulo invocando <code>event.preventDefault()<\/code>. Questo permetter\u00e0 di gestire l&#8217;invio in modo programmatico.<\/p>\n<p>Per essere sicuri che i dati del modulo siano validi prima di procedere con l&#8217;invio, invocherete i metodi di convalida <code>checkDisplayName<\/code> e <code>checkWpAdminEmail<\/code>. Questi metodi verificano che i campi obbligatori soddisfino i criteri specificati.<\/p>\n<pre><code class=\"language-jsx\">const createSite = (e) =&gt; {\n  e.preventDefault();\n\n  checkDisplayName();\n  checkWpAdminEmail();\n\n  \/\/ Additional logic\n};<\/code><\/pre>\n<p>Supponendo che tutte le convalide passino e che i campi obbligatori contengano dati validi, si procede con lo svuotamento del localStorage per garantire uno stato pulito per la memorizzazione della risposta dell&#8217;API e del nome visualizzato.<\/p>\n<p>A questo punto, effettuate una richiesta all&#8217;API di Kinsta utilizzando la funzione fetch. La richiesta \u00e8 un metodo POST all&#8217;endpoint <strong>https:\/\/api.kinsta.com\/v2\/sites<\/strong>. Aggiungete le intestazioni necessarie e il payload in formato JSON.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/sites`,\n        {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json',\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            },\n            body: JSON.stringify({\n                company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,\n                display_name: displayName,\n                region: centerLocation,\n                install_mode: 'new',\n                is_subdomain_multisite: false,\n                admin_email: wpAdminEmail,\n                admin_password: wpAdminPassword,\n                admin_user: wpAdminUsername,\n                is_multisite: false,\n                site_title: siteTitle,\n                woocommerce: false,\n                wordpressseo: false,\n                wp_language: 'en_US'\n            })\n        }\n    );\n\n    \/\/ Handle the response data\n};<\/code><\/pre>\n<p>Il payload contiene vari campi di dati richiesti dall&#8217;API di Kinsta, come l&#8217;ID dell&#8217;azienda, il nome visualizzato, la regione, la modalit\u00e0 di installazione, l&#8217;email dell&#8217;amministratore, la password dell&#8217;amministratore, ecc. Questi valori sono ottenuti dalle variabili di stato corrispondenti.<\/p>\n<p>Dopo aver effettuato la richiesta all&#8217;API, si rimane in attesa della risposta utilizzando <code>await resp.json()<\/code> si estraggono i dati rilevanti. Create un nuovo oggetto <code>newData<\/code>, con l&#8217;ID dell&#8217;operazione e il nome visualizzato, che viene poi memorizzato nel localStorage utilizzando <code>localStorage.setItem<\/code>.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        \/\/ Fetch request here\n    );\n\n    const data = await resp.json();\n    let newData = { operationId: data.operation_id, display_name: displayName };\n    localStorage.setItem('state', JSON.stringify(newData));\n    navigate('\/details');\n}<\/code><\/pre>\n<p>Infine, invocate la funzione <code>createSiteWithKinstaAPI<\/code> in modo che, quando un utente compila il modulo e clicca sul pulsante, venga creato un sito WordPress con l&#8217;API di Kinsta. Inoltre, nel codice \u00e8 indicato che l&#8217;utente viene reindirizzato alla pagina <strong>details.jsx<\/strong> per tenere traccia dell&#8217;operazione. Per attivare la funzionalit\u00e0 di navigazione, importate <code>useNavigate<\/code> da <code>react-router-dom<\/code> e inizializzatelo.<\/p>\n<p>Ricordate: potete trovare il codice completo di <a href=\"https:\/\/github.com\/kinsta\/site-builder\/blob\/starter-files\/src\/pages\/Home.jsx\">questa pagina sul repository GitHub<\/a>.<\/p>\n<h3>Implementare la verifica dello stato dell&#8217;operazione con l&#8217;API di Kinsta<\/h3>\n<p>Per verificare lo stato dell&#8217;operazione con l&#8217;API di Kinsta, utilizziamo l&#8217;ID dell&#8217;operazione memorizzato nel localStorage. L&#8217;ID dell&#8217;operazione viene recuperato dal localStorage utilizzando <code>JSON.parse(localStorage.getItem('state'))<\/code> e assegnato a una variabile.<\/p>\n<p>Per verificare lo stato dell&#8217;operazione, fate un&#8217;altra richiesta all&#8217;API di Kinsta inviando una richiesta GET all&#8217;endpoint <code>\/operations\/{operationId}<\/code>. Questa richiesta include le intestazioni necessarie, come l&#8217;intestazione Authorization contenente la chiave API.<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress\" });\nconst KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst stateData = JSON.parse(localStorage.getItem('state'));\n\nconst checkOperation = async () =&gt; {\n    const operationId = stateData.operationId;\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\n        {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            }\n        }\n    );\n    const data = await resp.json();\n    setOperationData(data);\n}<\/code><\/pre>\n<p>Una volta ricevuta la risposta, estraete i dati rilevanti dalla risposta utilizzando <code>await resp.json()<\/code>. I dati dell&#8217;operazione vengono poi aggiornati nello stato utilizzando <code>setOperationData(data)<\/code>.<\/p>\n<p>Nella dichiarazione di ritorno del componente, visualizzate il messaggio dell&#8217;operazione utilizzando <code>operationData.message<\/code>. Fornite anche un pulsante che consente all&#8217;utente di attivare manualmente la verifica dello stato dell&#8217;operazione chiamando <code>checkOperation<\/code>.<\/p>\n<p>Se lo stato dell&#8217;operazione indica che \u00e8 stata completata con successo, l&#8217;utente pu\u00f2 utilizzare i link aggiunti per accedere alla bacheca di WordPress e al sito stesso. I link sono costruiti utilizzando <code>stateData.display_name<\/code> ottenuto da localStorage.<\/p>\n<pre><code class=\"language-jsx\">&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/wp-admin\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open WordPress admin&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;\n&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open URL&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;<\/code><\/pre>\n<p>Cliccando su questi link, la bacheca di WordPress e l&#8217;URL del sito si aprono rispettivamente in una nuova scheda, permettendo all&#8217;utente di accedervi senza dover navigare in MyKinsta.<\/p>\n<p>Ora potete creare facilmente un sito WordPress tramite la vostra applicazione personalizzata.<\/p>\n<h2>Come distribuire un&#8217;applicazione React con Kinsta<\/h2>\n<p>Per distribuire il progetto React sull&#8217;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting<\/a> di Kinsta, dovete inviare il progetto al vostro <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">provider Git preferito<\/a>. Quando il progetto sar\u00e0 su <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-github\/\">GitHub<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/gitlab-vs-github\/\">GitLab<\/a> o <a href=\"https:\/\/kinsta.com\/it\/blog\/bitbucket-e-github\/\">Bitbucket<\/a>, potrete procedere al deploy su Kinsta.<\/p>\n<p>Per distribuire il repository su Kinsta, seguite questi passaggi:<\/p>\n<ol start=\"1\">\n<li>Accedete o create un account Kinsta nella dashboard MyKinsta.<\/li>\n<li>Nella barra laterale di sinistra, cliccate su &#8220;Applicazioni&#8221; e poi su &#8220;Aggiungi servizio&#8221;.<\/li>\n<li>Per distribuire un&#8217;applicazione React su Kinsta, selezionate &#8220;Applicazione&#8221; dal menu a tendina.<\/li>\n<li>Nella finestra di dialogo, scegliete il repository che volete distribuire. Se avete pi\u00f9 branch, potete selezionare il branch desiderato e dare un nome alla vostra applicazione.<\/li>\n<li>Selezionate uno dei 24 data center disponibili. Kinsta rileva automaticamente il comando di avvio dell&#8217;applicazione.<\/li>\n<\/ol>\n<p>Infine, non \u00e8 sicuro inviare le chiavi API a host pubblici come il vostro provider Git. Potete per\u00f2 aggiungerle 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 <strong>file .env<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/set-environment-variables-on-mykinsta.jpg\" alt=\"Impostare le variabili d'ambiente su MyKinsta durante la distribuzione\" 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, del tipo <strong>https:\/\/site-builder-ndg9i.kinsta.app\/<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>\u00c8 possibile attivare il deployment automatico, in modo che Kinsta ridistribuisca l&#8217;applicazione ogni volta che la base di codice viene modificata e inviata al proprio host Git.<\/p>\n<\/aside>\n\n<h2>Riepilogo<\/h2>\n<p>In questo articolo abbiamo visto come utilizzare programmaticamente l&#8217;API di Kinsta per creare un sito WordPress e integrare l&#8217;API in un&#8217;applicazione React. Ricordate sempre di tenere al sicuro la vostra chiave API e ogni volta che ritienete di averla condivisa pubblicamente, revocatela e createne una nuova.<\/p>\n<p>L&#8217;API di Kinsta pu\u00f2 essere utilizzata non solo per creare un sito WordPress ma anche per recuperare informazioni sui vostri siti WordPress, sui domini e per moltre altre operazioni. Permette anche di accedere ai servizi <a href=\"https:\/\/kinsta.com\/it\/\">Kinsta<\/a> come database e applicazioni.<\/p>\n<p><em>Quale endpoint vi piacerebbe che aggiungessimo alle API di Kinsta e cosa vorreste veder realizzato con le API di Kinsta? Scrivetecelo nei commenti.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress \u00e8 un popolare sistema di gestione dei contenuti che alimenta milioni di siti web su Internet. Offre un&#8217;interfaccia semplice e un&#8217;ampia gamma di opzioni di &#8230;<\/p>\n","protected":false},"author":287,"featured_media":71228,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26232,25883,25873],"class_list":["post-71227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-strumenti-di-sviluppo-web","topic-sviluppo-wordpress"],"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 Creare un Sito WordPress con l&#039;API di Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Sfrutta tutto il potenziale dell&#039;API di Kinsta e crea un sito WordPress in pochi passaggi. Scopri come collegare l&#039;API di Kinsta e costruire 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:\/\/kinsta.com\/it\/blog\/wordpress-api\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Creare un Sito WordPress con l&#039;API di Kinsta\" \/>\n<meta property=\"og:description\" content=\"Sfrutta tutto il potenziale dell&#039;API di Kinsta e crea un sito WordPress in pochi passaggi. Scopri come collegare l&#039;API di Kinsta e costruire un&#039;interfaccia utente personalizzata.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/wordpress-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-07-13T11:03:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-04T15:45:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Sfrutta tutto il potenziale dell&#039;API di Kinsta e crea un sito WordPress in pochi passaggi. Scopri come collegare l&#039;API di Kinsta e costruire un&#039;interfaccia utente personalizzata.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-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=\"18 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come Creare un Sito WordPress con l&#8217;API di Kinsta\",\"datePublished\":\"2023-07-13T11:03:12+00:00\",\"dateModified\":\"2024-04-04T15:45:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/\"},\"wordCount\":3058,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/\",\"name\":\"Come Creare un Sito WordPress con l'API di Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg\",\"datePublished\":\"2023-07-13T11:03:12+00:00\",\"dateModified\":\"2024-04-04T15:45:03+00:00\",\"description\":\"Sfrutta tutto il potenziale dell'API di Kinsta e crea un sito WordPress in pochi passaggi. Scopri come collegare l'API di Kinsta e costruire un'interfaccia utente personalizzata.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Creare un Sito WordPress con l&#8217;API di Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Creare un Sito WordPress con l'API di Kinsta - Kinsta\u00ae","description":"Sfrutta tutto il potenziale dell'API di Kinsta e crea un sito WordPress in pochi passaggi. Scopri come collegare l'API di Kinsta e costruire 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:\/\/kinsta.com\/it\/blog\/wordpress-api\/","og_locale":"it_IT","og_type":"article","og_title":"Come Creare un Sito WordPress con l'API di Kinsta","og_description":"Sfrutta tutto il potenziale dell'API di Kinsta e crea un sito WordPress in pochi passaggi. Scopri come collegare l'API di Kinsta e costruire un'interfaccia utente personalizzata.","og_url":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-07-13T11:03:12+00:00","article_modified_time":"2024-04-04T15:45:03+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Sfrutta tutto il potenziale dell'API di Kinsta e crea un sito WordPress in pochi passaggi. Scopri come collegare l'API di Kinsta e costruire un'interfaccia utente personalizzata.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"18 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come Creare un Sito WordPress con l&#8217;API di Kinsta","datePublished":"2023-07-13T11:03:12+00:00","dateModified":"2024-04-04T15:45:03+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/"},"wordCount":3058,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/","url":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/","name":"Come Creare un Sito WordPress con l'API di Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg","datePublished":"2023-07-13T11:03:12+00:00","dateModified":"2024-04-04T15:45:03+00:00","description":"Sfrutta tutto il potenziale dell'API di Kinsta e crea un sito WordPress in pochi passaggi. Scopri come collegare l'API di Kinsta e costruire un'interfaccia utente personalizzata.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-api\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/07\/wordpress-api.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/it\/argomenti\/api\/"},{"@type":"ListItem","position":3,"name":"Come Creare un Sito WordPress con l&#8217;API di Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.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:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.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:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/71227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=71227"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/71227\/revisions"}],"predecessor-version":[{"id":77218,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/71227\/revisions\/77218"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/71227\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/71228"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=71227"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=71227"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=71227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}