{"id":76579,"date":"2024-02-14T19:19:36","date_gmt":"2024-02-14T18:19:36","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=76579&#038;preview=true&#038;preview_id=76579"},"modified":"2024-02-16T19:36:54","modified_gmt":"2024-02-16T18:36:54","slug":"aggiornamento-di-massa-dei-plugin-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/","title":{"rendered":"Uno strumento per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti con l&#8217;API di Kinsta"},"content":{"rendered":"<p>I plugin svolgono un ruolo fondamentale nella personalizzazione e nel miglioramento dei siti WordPress. Vengono utilizzati per aggiungere funzionalit\u00e0 come <a href=\"https:\/\/kinsta.com\/it\/blog\/moduli-di-contatto-per-wordpress\/\">moduli di contatto<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-wordpress-ecommerce\/\">e-commerce<\/a> e <a href=\"https:\/\/kinsta.com\/it\/argomenti\/statistiche\/\">analisi<\/a> ai siti senza dover ricorrere al codice.<\/p>\n<p>Come WordPress, che viene aggiornato regolarmente, anche i plugin ricevono aggiornamenti regolari per aggiungere nuove funzionalit\u00e0, correggere falle di sicurezza, aumentare la compatibilit\u00e0 e altro ancora. Ecco perch\u00e9 Kinsta ha incluso la <a href=\"https:\/\/kinsta.com\/it\/changelog\/aggiornare-temi-e-plugin\/\">gestione dei plugin e dei temi<\/a> tra gli strumenti disponibili all&#8217;interno di MyKinsta per ciascuno dei vostri siti.<\/p>\n<p>Tuttavia, aggiornare i plugin per molti siti pu\u00f2 essere scoraggiante per i clienti pi\u00f9 impegnati come le agenzie. Questo articolo mostra una soluzione che utilizza l&#8217;<a href=\"https:\/\/kinsta.com\/it\/changelog\/kinsta-api\/\">API di Kinsta<\/a> per gestire simultaneamente i plugin su pi\u00f9 siti.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Cosa costruiremo<\/h2>\n<p>Questa guida si concentra sulla costruzione di una soluzione avanzata utilizzando l&#8217;API di Kinsta, che ora offre endpoint per il recupero e l&#8217;aggiornamento dei plugin.<\/p>\n<p>In questa guida creeremo un&#8217;applicazione React personalizzata che recuperer\u00e0 tutti i plugin da un account aziendale Kinsta. Questo strumento permette di <strong>identificare e aggiornare un plugin specifico su pi\u00f9 siti<\/strong>, semplificando notevolmente l&#8217;intero processo di aggiornamento.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/kinsta-plugin-manager.gif\" alt=\"Strumento costruito con React e Kinsta API per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Strumento costruito con React e Kinsta API per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Se avete un&#8217;<a href=\"https:\/\/kinsta.com\/it\/indice-agenzie\/\">agenzia<\/a> che gestisce pi\u00f9 siti su Kinsta, potete iniziare a usare questo strumento immediatamente senza dover approfondire questa guida, a meno che non siate interessati a capire come interagisce con l&#8217;API per aggiungere funzionalit\u00e0 personalizzate.<\/p>\n<p>Per utilizzare questo strumento, create un repository <a href=\"https:\/\/kinsta.com\/it\/argomenti\/git\/\">Git<\/a> <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\" target=\"_blank\" rel=\"noopener noreferrer\">utilizzando 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.<\/p>\n<p>Una volta creato il repository, distribuitelo gratuitamente sulla piattaforma di Hosting di Siti Statici di Kinsta e aggiungete le seguenti <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-sono-le-variabili-d-ambiente\/\">variabili d&#8217;ambiente<\/a>:<\/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>Questo \u00e8 tutto. Ora potete utilizzare questo strumento per la vostra azienda Kinsta per semplificare i processi di gestione dei siti.<\/p>\n<\/aside>\n\n<h2>Prerequisiti dell&#8217;applicazione<\/h2>\n<p>Per seguire questo progetto, \u00e8 necessario avere i seguenti requisiti:<\/p>\n<ul>\n<li>Conoscenza fondamentale 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>.<\/li>\n<li>Una certa familiarit\u00e0 con <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a>.<\/li>\n<li>Node.js e npm (<a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">Node Package Manager<\/a>) o yarn installati sul computer.<\/li>\n<\/ul>\n<h2>L&#8217;API di Kinsta<\/h2>\n<p>L&#8217;<a href=\"https:\/\/kinsta.com\/it\/docs\/kinsta-api\/\">API di Kinsta<\/a> \u00e8 un potente strumento che permette di interagire in modo programmatico con i servizi Kinsta come i siti WordPress ospitati. Pu\u00f2 aiutare ad automatizzare diverse attivit\u00e0 legate alla gestione di WordPress, tra cui la <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-api\/\">creazione di un sito<\/a>, il <a href=\"https:\/\/kinsta.com\/it\/blog\/pianificare-manutenzione-con-kinsta-api\/\">recupero di informazioni sul sito<\/a>, 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>, la <a href=\"https:\/\/kinsta.com\/it\/blog\/log-server-api\/\">consultazione<\/a> e il <a href=\"https:\/\/kinsta.com\/it\/blog\/api-backup-wordpress\/\">ripristino dei backup<\/a> e altro ancora.<\/p>\n<p>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. Bisogna inoltre generare una chiave API per autenticarsi e accedere all&#8217;account.<\/p>\n<p>Per generare una chiave API:<\/p>\n<ol start=\"1\">\n<li>Andiamo alla dashboard di <a href=\"https:\/\/my.kinsta.com\/?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Andiamo alla pagina delle <strong>chiavi API<\/strong> (<strong>Nome <\/strong>&gt;<strong> Impostazioni dell&#8217;azienda <\/strong>&gt;<strong> Chiavi API<\/strong>).<\/li>\n<li>Clicchiamo su <strong>Crea chiave API<\/strong>.<\/li>\n<li>Scegliamo una scadenza o impostiamo una data di inizio personalizzata e un numero di ore di scadenza della chiave.<\/li>\n<li>Assegniamo alla chiave un nome univoco.<\/li>\n<li>Clicchiamo su <strong>Genera<\/strong>.<\/li>\n<\/ol>\n<p>Dopo aver creato una chiave API, copiamola e conserviamola in un luogo sicuro (noi consigliamo di utilizzare un <a href=\"https:\/\/kinsta.com\/it\/blog\/password-manager\/\">gestore di password<\/a> ). Possiamo generare pi\u00f9 chiavi API, che saranno elencate nella pagina delle <strong>chiavi API<\/strong>. Per revocare una chiave API, basta cliccare sul pulsante <strong>Revoca<\/strong>.<\/p>\n<h2>Configurare l&#8217;ambiente di sviluppo React<\/h2>\n<p>React \u00e8 una <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-javascript\/\">popolare libreria JavaScript<\/a> per la creazione di interfacce utente. Permette agli sviluppatori di creare componenti dichiarativi che rappresentano diverse parti dell&#8217;interfaccia utente. Questi componenti sono definiti utilizzando la <a href=\"https:\/\/kinsta.com\/it\/blog\/guida-su-jsx\/\">sintassi JSX<\/a>, una combinazione di JavaScript e HTML.<\/p>\n<p>Per iniziare, seguiamo questi passaggi:<\/p>\n<ol start=\"1\">\n<li>Navighiamo nella cartella in cui desideriamo creare il progetto e usiamo <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a> per creare un progetto React:\n<pre><code class=\"language-bash\">npx create-react-app &lt;project-name&gt;<\/code><\/pre>\n<p>Cambiamo <code>&lt;project-name&gt;<\/code> con il nome che preferiamo per il progetto.<\/li>\n<li>Una volta completata l&#8217;operazione, navighiamo nella cartella del progetto e avviamo il server di sviluppo:\n<pre><code class=\"language-bash\">cd &lt;project-name&gt;\nnpm run start<\/code><\/pre>\n<p>L&#8217;applicazione React si apre nel browser web predefinito su http:\/\/localhost:3000.<\/li>\n<\/ol>\n<p>La creazione di un progetto React tramite <code>create-react-app<\/code> crea una struttura di cartelle. La cartella fondamentale \u00e8 <strong>src<\/strong>, dove avviene lo sviluppo. I file chiave in questa cartella sono:<\/p>\n<ul>\n<li><strong>App.js:<\/strong> \u00e8 il componente principale, che esegue il rendering di tutti gli altri nell&#8217;applicazione React. \u00c8 qui che verr\u00e0 aggiunto tutto il codice per questo strumento.<\/li>\n<li><strong>index.js:<\/strong> \u00e8 il punto di ingresso, viene caricato per primo ed \u00e8 responsabile del rendering di <strong>App.js<\/strong>.<\/li>\n<li><strong>index.css:<\/strong> questo file definisce lo stile e il layout generale dell&#8217;applicazione. Tutti gli stili saranno aggiunti qui.<\/li>\n<\/ul>\n<h2>Creazione e stile dell&#8217;interfaccia utente<\/h2>\n<p>Concentriamoci sulla creazione e sullo stile dell&#8217;interfaccia di un&#8217;applicazione di base contenuta nel file <strong>App.js<\/strong> senza coinvolgere il routing. La nostra interfaccia utente principale \u00e8 un modulo con un campo <code>select<\/code> per elencare i plugin unici dei nostri siti Kinsta e un pulsante <code>submit<\/code> per recuperare i siti con il plugin selezionato.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/plugin-manager-ui.png\" alt=\"Interfaccia utente per lo strumento di gestione dei plugin per accedere a un elenco di plugin e caricare i siti\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Interfaccia utente per lo strumento di gestione dei plugin per accedere a un elenco di plugin e caricare i siti.<\/figcaption><\/figure>\n<p>Inoltre, una sezione mostra i dettagli del sito come il nome, lo stato del plugin e la versione. Include un pulsante per aggiornare ogni sito se necessario e un pulsante generale per aggiornare in blocco tutti i siti che richiedono l&#8217;aggiornamento del plugin.<\/p>\n<p>Nel file <strong>App.js<\/strong>, aggiungiamo il seguente codice:<\/p>\n<pre><code class=\"language-jsx\">import KinstaLogo from '.\/images\/kinsta_logo.png';\n\nconst App = () =&gt; {\n    return (\n        &lt;div className=\"container\"&gt;\n            &lt;div className=\"title-section\"&gt;\n                &lt;img src={KinstaLogo} className=\"logo\" alt=\"\" \/&gt;\n                &lt;h2&gt;Manage your site's plugins&lt;\/h2&gt;\n                &lt;p&gt;\n                    Easily update plugins across all sites hosted with Kinsta using the\n                    Kinsta API.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div&gt; className=\"info-section\"&gt;\n                &lt;p&gt;\n                    This application allows you to retrieve a list of all sites within\n                    your company that uses a specific plugin. You can then choose to update\n                    the plugin across all these sites simultaneously or individually.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div className=\"form-section\"&gt;\n                &lt;form&gt;\n                    &lt;div className=\"form-control\"&gt;\n                        &lt;label&gt; htmlFor=\"plugin-name\"&gt;Plugin name&lt;\/label&gt;\n                        &lt;select name=\"plugin-name\" id=\"plugin-name\"&gt;\n                            &lt;option&gt; value=\"\"&gt;Select a plugin&lt;\/option&gt;\n                        &lt;\/select&gt;\n                    &lt;\/div&gt;\n                    &lt;button&gt; className=\"btn\"&gt;Fetch sites with this plugin&lt;\/button&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;div className=\"display_container\"&gt;\n                &lt;div className=\"site-list\"&gt;\n                    &lt;div className=\"list-title\"&gt;\n                        &lt;h3&gt;Sites with WooCommerce plugin&lt;\/h3&gt;\n\n                        &lt;button&gt; className=\"sm-btn\"&gt;Update all sites to v.3.6&lt;\/button&gt;\n                    &lt;\/div&gt;\n                    &lt;ul&gt;\n                        &lt;li&gt;\n                            &lt;div className=\"info\"&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Site Name:&lt;\/b&gt; WooCommerce\n                                &lt;\/p&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Plugin Status:&lt;\/b&gt; active\n                                &lt;\/p&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Plugin Version:&lt;\/b&gt; 3.5.1\n                                &lt;\/p&gt;\n                            &lt;\/div&gt;\n                            &lt;button&gt; className=\"sm-btn\"&gt;Update to v.5.6&lt;\/button&gt;\n                        &lt;\/li&gt;\n                    &lt;\/ul&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Per creare lo stile di questo progetto, visitiamo il <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">file CSS nel repository GitHub completo di Kinsta<\/a> e copiamo il suo codice nel file <strong>index.css<\/strong>.<\/p>\n<h2>Interagire con l&#8217;API di Kinsta<\/h2>\n<p>L&#8217;API di Kinsta offre una serie di endpoint essenziali per accedere a vari parametri necessari per interagire con il plugin di un sito. Ad esempio, se volessimo recuperare o aggiornare un plugin, dovremmo prima acquisire l&#8217;ID ambiente del sito.<\/p>\n<p>Ottenere questo ID ambiente \u00e8 un processo sequenziale. Inizialmente, \u00e8 necessario determinare l&#8217;ID del sito. Per ottenere l&#8217;ID del sito, \u00e8 a sua volta necessario disporre dell&#8217;ID dell&#8217;azienda Kinsta. L&#8217;ID dell&#8217;azienda \u00e8 disponibile nel cruscotto MyKinsta (<strong>Impostazioni dell&#8217;azienda<\/strong> &gt; <strong>Dettagli di fatturazione<\/strong>) ed \u00e8 un&#8217;informazione sensibile che non va condivisa con nessuno, come la chiave API.<\/p>\n<p>\u00c8 possibile memorizzarle in modo sicuro come variabili d&#8217;ambiente nell&#8217;applicazione React creando un file <strong>.env<\/strong> nella cartella principale del progetto. In questo file, aggiungiamo il seguente valore corretto:<\/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, possiamo utilizzare la sintassi <code>process.env.THE_VARIABLE<\/code>. Ad esempio, per accedere a <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, dovremo usare <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<p>Aggiungere il file <strong>.env<\/strong> al file <strong><a href=\"https:\/\/kinsta.com\/it\/blog\/gitignore-non-funziona\/\">.gitignore<\/a><\/strong> \u00e8 importante per evitare che venga inviato a GitHub. In questo modo le informazioni sensibili rimarranno private e sicure.<\/p>\n<h3>Recuperare tutti i siti e i plugin utilizzando l&#8217;API di Kinsta<\/h3>\n<p>Per recuperare i dati dei plugin per tutti i siti gestiti dall&#8217;account Kinsta dell&#8217;azienda, possiamo utilizzare l&#8217;API Kinsta eseguendo tre richieste API. Ecco una spiegazione semplificata:<\/p>\n<p>Iniziamo memorizzando l&#8217;URL dell&#8217;API Kinsta in una variabile per poterla consultare facilmente.<\/p>\n<pre><code class=\"language-js\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n<ol start=\"1\">\n<li><strong>Recuperare l&#8217;elenco dei siti aziendali:<\/strong> dobbiamo ottenere un elenco di tutti i siti WordPress associati all&#8217;azienda. A tal fine, costruiamo una query utilizzando l&#8217;ID dell&#8217;azienda, effettuiamo una richiesta GET con l&#8217;autorizzazione appropriata, elaboriamo la risposta in formato JSON ed estraiamo i dettagli del sito dalla risposta.\n<pre><code class=\"language-js\">const query = new URLSearchParams({\n    company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n}).toString();\nconst response = await fetch(`${KinstaAPIUrl}\/sites?${query}`, {\n    method: 'GET',\n    headers: { Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}` },\n});\n\nconst data = await response.json();\nconst companySites = data.company.sites;<\/code><\/pre>\n<\/li>\n<li><strong>Recuperare l&#8217;ID dell&#8217;ambiente del sito:<\/strong> il passaggio precedente restituisce un array di siti WordPress. Per ogni sito, eseguiamo un ciclo e facciamo un&#8217;altra richiesta GET per recuperare gli ambienti associati.\n<pre><code class=\"language-js\">const sitesEnvironmentData = companySites.map(async (site) =&gt; {\n    const siteId = site.id;\n    const resp = await fetch(`${KinstaAPIUrl}\/sites\/${siteId}\/environments`, {\n        method: 'GET',\n        headers: {\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n    });\n    const data = await resp.json();\n    const environments = data.site.environments;\n    return {\n        id: siteId,\n        name: site.display_name,\n        environments: environments,\n    };\n});<\/code><\/pre>\n<\/li>\n<li><strong>Recuperare l&#8217;elenco dei plugin del sito WordPress:<\/strong> dopo aver ottenuto l&#8217;ID del sito, il nome e l&#8217;ambiente, ora possiamo utilizzare l&#8217;ID dell&#8217;ambiente per recuperare un elenco di tutti i plugin di ogni sito. Per prima cosa dobbiamo risolvere le promesse del passo precedente e poi effettuare le richieste GET per i plugin:\n<pre><code class=\"language-js\">\/\/ Wait for all the promises to resolve\nconst sitesData = await Promise.all(sitesEnvironmentData);\n\n\/\/ Get all plugins for each environment\nconst sitesWithPlugin = sitesData.map(async (site) =&gt; {\n    const environmentId = site.environments[0].id;\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n        {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n            },\n        }\n    );\n    const data = await resp.json();\n    const plugins = data.environment.container_info;\n    return {\n        env_id: environmentId,\n        name: site.name,\n        plugins: plugins,\n    };\n});\n\nconst sitesWithPluginData = await Promise.all(sitesWithPlugin);\nreturn sitesWithPluginData;<\/code><\/pre>\n<\/li>\n<li><strong>Consolidare il processo:<\/strong> per semplificare il processo, possiamo incapsulare queste richieste API in un&#8217;unica funzione asincrona <code>getSitesWithPluginData<\/code>, che pu\u00f2 essere riutilizzata. Questa funzione eseguir\u00e0 i passaggi descritti in precedenza e restituir\u00e0 un array contenente le informazioni essenziali su ogni sito, tra cui l&#8217;ID dell&#8217;ambiente, il nome del sito e un array di plugin.\n<pre><code class=\"language-jsx\">const getSitesWithPluginData = async () =&gt; {\n    const query = new URLSearchParams({\n        company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n    }).toString();\n    const resp = await fetch(`${KinstaAPIUrl}\/sites?${query}`, {\n        method: 'GET',\n        headers: {\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n    });\n\n    const data = await resp.json();\n    const companySites = data.company.sites;\n\n    \/\/ Get all environments for each site\n    const sitesEnvironmentData = companySites.map(async (site) =&gt; {\n        const siteId = site.id;\n        const resp = await fetch(`${KinstaAPIUrl}\/sites\/${siteId}\/environments`, {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n            },\n        });\n        const data = await resp.json();\n        const environments = data.site.environments;\n        return {\n            id: siteId,\n            name: site.display_name,\n            environments: environments,\n        };\n    });\n\n    \/\/ Wait for all the promises to resolve\n    const sitesData = await Promise.all(sitesEnvironmentData);\n\n    \/\/ Get all plugins for each environment\n    const sitesWithPlugin = sitesData.map(async (site) =&gt; {\n        const environmentId = site.environments[0].id;\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n            {\n                method: 'GET',\n                headers: {\n                    Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n                },\n            }\n        );\n        const data = await resp.json();\n        const plugins = data.environment.container_info;\n        return {\n            env_id: environmentId,\n            name: site.name,\n            plugins: plugins,\n        };\n    });\n\n    \/\/ Wait for all the promises to resolve\n    const sitesWithPluginData = await Promise.all(sitesWithPlugin);\n    return sitesWithPluginData;\n};<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>Recuperare i plugin unici di tutti i siti<\/h3>\n<p>Nell&#8217;applicazione, vogliamo visualizzare l&#8217;elenco dei plugin di tutti i siti in un menu a tendina <code>select<\/code>. Per ottenere questo risultato, la funzione <code>getSitesWithPluginData<\/code> recupera l&#8217;ID dell&#8217;ambiente, il nome e i plugin di ogni sito. Questi dati costituiscono la base per estrarre un elenco di plugin.<\/p>\n<p>Definiamo una nuova funzione, <code>fetchAllSitesPlugins<\/code>, che chiama <code>getSitesWithPluginData<\/code> ed elabora il suo output per ottenere un elenco di tutti i plugin:<\/p>\n<pre><code class=\"language-js\">const fetchAllSitesPlugins = async () =&gt; {\n    const sitesWithPluginData = await getSitesWithPluginData();\n\n    \/\/ get all plugins\n    const allPlugins = sitesWithPluginData.map((site) =&gt; {\n        const { plugins } = site;\n        return plugins.wp_plugins.data;\n    });\n\n   \/\/ \u2026\n};<\/code><\/pre>\n<p>Questo codice itera i dati di ogni sito e compila un elenco di plugin. Per garantire che ogni plugin sia elencato una sola volta, utilizza l&#8217;oggetto JavaScript <code>Set<\/code>, che memorizza valori unici:<\/p>\n<pre><code class=\"language-js\">\/\/ get unique plugins\n    const uniquePlugins = [\n        ...new Set(allPlugins.flat().map((plugin) =&gt; plugin.name)),\n    ];<\/code><\/pre>\n<p>Il metodo <code>.flat()<\/code> appiattisce la struttura dell&#8217;array e <code>.map()<\/code> esegue un loop per estrarre solo i nomi dei plugin. L&#8217;oggetto <code>Set<\/code> filtra i duplicati.<\/p>\n<p>Per caricare e visualizzare questi dati nell&#8217;applicazione React, utilizza gli hook <code>useState()<\/code> e <code>useEffect()<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\n\nconst App = () =&gt; {\n    const [pluginName, setPluginName] = useState('');\n    const [plugins, setPlugins] = useState([]);\n\n    \/\/Get sites with plugin data\n    const getSitesWithPluginData = async () =&gt; {\n        \/\/ perform requests\n    };\n\n    useEffect(() =&gt; {\n        const fetchAllSitesPlugins = async () =&gt; {\n            const sitesWithPluginData = await getSitesWithPluginData();\n            \/\/ get all plugins\n            const allPlugins = sitesWithPluginData.map((site) =&gt; {\n                const { plugins } = site;\n                return plugins.wp_plugins.data;\n            });\n            \/\/ get unique plugins\n            const uniquePlugins = [\n                ...new Set(allPlugins.flat().map((plugin) =&gt; plugin.name)),\n            ];\n            setPlugins(uniquePlugins);\n        };\n\n        fetchAllSitesPlugins();\n    }, []);\n\n     \/\/ JSX render code follows\n    \/\/...\n};<\/code><\/pre>\n<p>L&#8217;hook <code>useEffect()<\/code> assicura che i dati vengano recuperati e impostati quando il componente viene montato. L&#8217;hook <code>useState()<\/code> gestisce l&#8217;elenco dei plugin unici.<\/p>\n<p>Infine, visualizza questi plugin in un campo <code>select<\/code>. Se i plugin sono ancora in fase di caricamento, mostra un messaggio placeholder:<\/p>\n<pre><code class=\"language-jsx\">&lt;select&gt;\n    name=\"plugin-name\"\n    id=\"plugin-name\"\n    value={pluginName}\n    onChange={(e) =&gt; setPluginName(e.target.value)}\n&gt;\n    {plugins.length &gt; 0 ? (\n        &lt;&gt;\n            &lt;option value=\"\"&gt;Select a plugin&lt;\/option&gt;\n            {plugins.map((plugin) =&gt; (\n                &lt;option key={plugin} value={plugin.toLowerCase()}&gt;\n                    {plugin}\n                &lt;\/option&gt;\n            ))}\n        &lt;\/&gt;\n    ) : (\n        &lt;option&gt; value=\"\"&gt;Loading plugins...&lt;\/option&gt;\n    )}\n&lt;\/select&gt;<\/code><\/pre>\n<p>In questo codice:<\/p>\n<ul>\n<li>L&#8217;elemento <code>select<\/code> \u00e8 collegato a una variabile di stato <code>pluginName<\/code> per memorizzare il valore selezionato.<\/li>\n<li>Il gestore <code>onChange<\/code> aggiorna questo stato ogni volta che viene selezionato un nuovo plugin.<\/li>\n<li>La funzione <code>plugins.map()<\/code> crea dinamicamente gli elementi di opzione per ogni plugin.<\/li>\n<\/ul>\n<p>Seguendo questi passaggi, l&#8217;applicazione mostrer\u00e0 effettivamente un elenco unico di plugin recuperati da tutti i siti, fornendo un&#8217;interfaccia pulita e facile da usare per la selezione.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/select-field-plugin-manager.png\" alt=\"Campo di selezione che mostra l'elenco dei plugin unici di tutti i siti nell'account Kinsta dell'azienda.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Campo di selezione che mostra l&#8217;elenco dei plugin unici di tutti i siti dell&#8217;account Kinsta dell&#8217;azienda.<\/figcaption><\/figure>\n<h3>Recuperare i siti con un plugin specifico<\/h3>\n<p>Finora siamo riusciti a recuperare i plugin dall&#8217;account Kinsta dell&#8217;azienda, ma vogliamo scorrere tutti i siti per recuperare i siti con un determinato plugin, memorizzarli in uno stato e quindi visualizzarli.<\/p>\n<p>Per farlo, creiamo due stati: uno per memorizzare i siti (<code>sites<\/code>) e un altro per indicare lo stato di caricamento (<code>isLoading<\/code>).<\/p>\n<pre><code class=\"language-jsx\">const [sites, setSites] = useState([]);\nconst [isLoading, setIsLoading] = useState(false);<\/code><\/pre>\n<p>Quindi, creiamo una funzione <code>fetchSites<\/code> per filtrare ogni sito e verificare se contiene il plugin selezionato. In caso affermativo, i dettagli relativi al sito vengono memorizzati<\/p>\n<p>Questa funzione inizia impostando <code>isLoading<\/code> su <code>true<\/code> e cancellando l&#8217;array <code>sites<\/code>. Poi chiama <code>getSitesWithPluginData<\/code> per recuperare tutti i dati del sito.<\/p>\n<pre><code class=\"language-jsx\">const fetchSites = async () =&gt; {\n    setIsLoading(true);\n    setSites([]);\n    const sitesWithPluginData = await getSitesWithPluginData();\n\n    \/\/ Filter out sites that don't have the plugin\n    const sitesWithPluginDataFiltered = sitesWithPluginData\n        .filter((site) =&gt; {\n            const sitePlugins = site.plugins.wp_plugins.data;\n            return sitePlugins.some((plugin) =&gt; {\n                return plugin.name === pluginName;\n            });\n        })\n        .map((site) =&gt; {\n            const { env_id, name } = site;\n            const { version, status, update, update_version } =\n                site.plugins.wp_plugins.data.find(\n                    (plugin) =&gt; plugin.name === pluginName\n                );\n            return {\n                env_id,\n                name,\n                version,\n                status,\n                updateAvailable: update,\n                updateVersion: update_version,\n            };\n        });\n    setSites(sitesWithPluginDataFiltered);\n    setIsLoading(false);\n};<\/code><\/pre>\n<p>Nella funzione <code>sitesWithPluginDataFiltered<\/code>:<\/p>\n<ul>\n<li>Il metodo <code>.filter()<\/code> isola i siti che contengono il plugin selezionato.<\/li>\n<li>Il metodo <code>.map()<\/code> estrae quindi i dettagli necessari da ogni sito.<\/li>\n<li>Infine, i ganci <code>setSites<\/code> e <code>setIsLoading<\/code> aggiornano lo stato con i nuovi dati e lo stato di caricamento.<\/li>\n<\/ul>\n<p>Successivamente, creiamo una funzione <code>handleSubmit<\/code> e aggiungiamola al pulsante <strong>Fetch sites with this plugin<\/strong> del modulo per richiamare la funzione quando l&#8217;utente seleziona un plugin e invia il modulo. Questa funzione impedisce l&#8217;azione predefinita del modulo e richiama <code>fetchSites<\/code>:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (e) =&gt; {\n    e.preventDefault();\n    fetchSites();\n};<\/code><\/pre>\n<p>In questo modo, quando l&#8217;utente seleziona un particolare plugin e clicca sul pulsante di invio, recupera tutti i siti con quel plugin e li memorizza nello stato <code>sites<\/code>.<\/p>\n<h4>Visualizzare i siti con il plugin selezionato<\/h4>\n<p>Dopo aver memorizzato con successo i siti rilevanti nello stato <code>sites<\/code>, vogliamo visualizzare questi dati nell&#8217;interfaccia utente del progetto. L&#8217;obiettivo \u00e8 quello di presentare ogni sito come un elenco con i dettagli principali e un pulsante condizionale per l&#8217;aggiornamento del plugin.<\/p>\n<pre><code class=\"language-jsx\">&lt;ul&gt;\n    {sites.map((site) =&gt; (\n        &lt;li key={site.env_id}&gt;\n            &lt;div className=\"info\"&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Site Name:&lt;\/b&gt; {site.name}\n                &lt;\/p&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Plugin Status:&lt;\/b&gt; {site.status}\n                &lt;\/p&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Plugin Version:&lt;\/b&gt; {site.version}\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;button&gt;\n                className={`sm-btn ${\n                    site.updateAvailable !== 'available' ? 'disabled-btn' : ''\n                }`}\n                disabled={site.updateAvailable !== 'available'}\n            &gt;\n                {site.updateAvailable === 'available'\n                    ? `Update to v.${site.updateVersion}`\n                    : 'Up to date'}\n            &lt;\/button&gt;\n        &lt;\/li&gt;\n    ))}\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Nel codice qui sopra, l&#8217;array <code>sites<\/code> viene iterato con il metodo <code>.map()<\/code>, creando un elenco (<code>&lt;ul&gt;<\/code>) di siti (elementi<code>&lt;li&gt;<\/code> ). Ogni elemento dell&#8217;elenco contiene dettagli sul sito e un pulsante per l&#8217;aggiornamento del plugin.<\/p>\n<p>Il pulsante nell&#8217;interfaccia utente cambia stile e funzione in base allo stato di aggiornamento del plugin: \u00e8 attivo per gli aggiornamenti disponibili, altrimenti \u00e8 disattivato e riporta la dicitura &#8220;Updated&#8221;, controllata da <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> condizionali e dall&#8217;attributo disabled.<\/p>\n<p>Inoltre, per migliorare l&#8217;esperienza dell&#8217;utente, aggiungiamo un testo di caricamento condizionato dallo stato di <code>isLoading<\/code> quando i siti vengono recuperati.<\/p>\n<pre><code class=\"language-jsx\">{isLoading && (\n    &lt;div className=\"loading\"&gt;\n        &lt;p&gt;Loading...&lt;\/p&gt;\n    &lt;\/div&gt;\n)}<\/code><\/pre>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/list-sites-plugin.png\" alt=\"Un elenco di siti che utilizzano un determinato plugin dall'account Kinsta dell'azienda con i pulsanti per aggiornarli singolarmente o in una volta sola\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Un elenco di siti che utilizzano un determinato plugin dall&#8217;account Kinsta dell&#8217;azienda con i pulsanti per aggiornarli singolarmente o in una volta sola.<\/figcaption><\/figure>\n<h3>Aggiornare i plugin con l&#8217;API di Kinsta<\/h3>\n<p>Finora siamo riusciti a recuperare siti con dettagli importanti e ad accedere ai loro plugin. L&#8217;obiettivo di questo strumento \u00e8 quello di facilitare l&#8217;aggiornamento dei plugin su pi\u00f9 siti utilizzando l&#8217;API di Kinsta. Il processo prevede l&#8217;avvio degli aggiornamenti e il monitoraggio del loro avanzamento.<\/p>\n<h4>Attivare gli aggiornamenti dei plugin<\/h4>\n<p>Per ogni sito elencato viene fornito un pulsante. Il suo stile riflette la disponibilit\u00e0 di un aggiornamento. Se \u00e8 disponibile un aggiornamento, cliccando sul pulsante si attiva la funzione <code>updatePlugin<\/code>.<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt;\n    className={`sm-btn ${\n        site.updateAvailable !== 'available' ? 'disabled-btn' : ''\n    }`}\n    disabled={site.updateAvailable !== 'available'}\n    onClick={() =&gt;\n        updatePlugin(site.env_id, site.updateVersion)\n    }\n&gt;\n    {site.updateAvailable === 'available'\n        ? `Update to v.${site.updateVersion}`\n        : 'Up to date'}\n&lt;\/button&gt;<\/code><\/pre>\n<p>Il gestore <code>onClick<\/code> chiama <code>updatePlugin<\/code> con l&#8217;ID ambiente del sito e l&#8217;ultima versione del plugin (<code>updateVersion<\/code>). Questa funzione invia una richiesta PUT all&#8217;API di Kinsta per aggiornare il plugin.<\/p>\n<pre><code class=\"language-jsx\">const updatePlugin = async (envId, pluginVersion) =&gt; {\n    const resp = await fetch(`${KinstaAPIUrl}\/sites\/environments\/${envId}\/plugins`, {\n        method: 'PUT',\n        headers: {\n            'Content-Type': 'application\/json',\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n        body: JSON.stringify({\n            name: pluginName,\n            update_version: pluginVersion,\n        }),\n    });\n\n    const data = await resp.json();\n    \/\/ Further processing\n};<\/code><\/pre>\n<h4>Seguire l&#8217;avanzamento dell&#8217;aggiornamento<\/h4>\n<p>Dopo aver avviato l&#8217;aggiornamento, \u00e8 necessario monitorarne l&#8217;avanzamento. L&#8217;API di Kinsta fornisce una risposta come questa quando si avvia un aggiornamento:<\/p>\n<pre><code class=\"language-jsx\">{\n  \"operation_id\": \"wp-plugin:update-54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n  \"message\": \"Updating WordPress plugin in progress\",\n  \"status\": 202\n}<\/code><\/pre>\n<p>Il sito <code>operation_id<\/code> tiene traccia dello stato dell&#8217;aggiornamento tramite l&#8217;endpoint delle operazioni. Creiamo una funzione che effettui questa richiesta API e che abbia come argomento <code>operation_id<\/code>:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Check plugin update status\nconst checkPluginUpdateStatus = async (operationId) =&gt; {\n    const resp = await fetch(`${KinstaAPIUrl}\/operations\/${operationId}`, {\n        method: 'GET',\n        headers: {\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n    });\n    const data = await resp.json();\n    return data.status;\n};<\/code><\/pre>\n<p>All&#8217;interno di <code>updatePlugin<\/code>, utilizziamo un&#8217;istruzione <code>if<\/code> per verificare se le richieste di aggiornamento iniziali <code>status<\/code> sono <code>202<\/code>. In caso affermativo, impostiamo un intervallo per chiamare <code>checkPluginUpdateStatus<\/code> ogni cinque secondi (5000 millisecondi).<\/p>\n<p>L&#8217;intervallo controlla ripetutamente lo stato di aggiornamento e, in caso di successo, cancella l&#8217;intervallo e chiama <code>fetchSites<\/code> per aggiornare l&#8217;elenco dei siti. Se durante questi controlli si verifica un errore, questo viene registrato nella console.<\/p>\n<pre><code class=\"language-jsx\">if (data.status === 202) {\n    const interval = setInterval(() =&gt; {\n        checkPluginUpdateStatus(data.operation_id)\n            .then((status) =&gt; {\n                console.log(status);\n                if (status === 200) {\n                    clearInterval(interval);\n                    fetchSites();\n                }\n            })\n            .catch((error) =&gt; {\n                \/\/ Handle any errors that occur during the promise resolution\n                console.error('Error:', error);\n            });\n    }, 5000);\n}<\/code><\/pre>\n<h4>Feedback dell&#8217;utente durante il funzionamento<\/h4>\n<p>A questo punto tutto funziona bene, ma \u00e8 bene che l&#8217;utente sia al corrente dell&#8217;andamento dell&#8217;operazione invece di lasciarlo indovinare. Possiamo farlo mostrando una notifica che appare quando l&#8217;operazione \u00e8 in corso e che si cancella quando l&#8217;operazione \u00e8 terminata. Creiamo uno stato <code>showStatusBar<\/code> per controllare questo aspetto:<\/p>\n<pre><code class=\"language-jsx\">const [showStatusBar, setShowStatusBar] = useState(false);<\/code><\/pre>\n<p>Quando <code>showStatusBar<\/code> \u00e8 <code>true<\/code>, nella parte superiore dello schermo appare una barra di stato che indica che \u00e8 in corso un aggiornamento. Questa barra \u00e8 stata progettata in modo da essere fissa nella parte superiore dello schermo.<\/p>\n<pre><code class=\"language-jsx\">{showStatusBar && (\n    &lt;div className=\"status-bar\"&gt;\n        &lt;p&gt;Updating WordPress plugin in progress...&lt;\/p&gt;\n    &lt;\/div&gt;\n)}<\/code><\/pre>\n<p>Ora possiamo modificare l&#8217;istruzione <code>if<\/code> nella funzione <code>updatePlugin<\/code> per impostare <code>showStatusBar<\/code> su <code>true<\/code> o <code>false<\/code> in base allo stato di aggiornamento:<\/p>\n<pre><code class=\"language-jsx\">if (data.status === 202) {\n    setShowStatusBar(true);\n    const interval = setInterval(() =&gt; {\n        checkPluginUpdateStatus(data.operation_id)\n            .then((status) =&gt; {\n                console.log(status);\n                if (status === 200) {\n                    setShowStatusBar(false);\n                    clearInterval(interval);\n                    fetchSites();\n                }\n            })\n            .catch((error) =&gt; {\n                \/\/ Handle any errors that occur during the promise resolution\n                console.error('Error:', error);\n            });\n    }, 5000);\n}<\/code><\/pre>\n<p>Questo approccio garantisce che gli utenti siano informati sullo stato degli aggiornamenti dei plugin, migliorando l&#8217;usabilit\u00e0 complessiva dello strumento.<\/p>\n<h3>Aggiornamento dei plugin su pi\u00f9 siti con Kinsta API<\/h3>\n<p>La caratteristica principale di questo strumento \u00e8 la possibilit\u00e0 di aggiornare un determinato plugin con un solo clic su pi\u00f9 siti all&#8217;interno dell&#8217;account Kinsta. Si tratta di una funzionalit\u00e0 simile a quella implementata per l&#8217;aggiornamento dei plugin su un singolo sito.<\/p>\n<p>Il processo prevede il passaggio attraverso lo stato <code>sites<\/code>, che contiene i siti con il particolare plugin da aggiornare. Per ogni sito che necessita di un aggiornamento, viene effettuata una richiesta API per aggiornare il plugin e successivamente viene monitorato lo stato dell&#8217;operazione:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Update all plugins\nconst updateAllPlugins = async () =&gt; {\n    sites.map(async (site) =&gt; {\n        if (site.updateAvailable === 'available') {\n            const environmentId = site.env_id;\n            const resp = await fetch(\n                `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n                {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application\/json',\n                        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n                    },\n                    body: JSON.stringify({\n                        name: pluginName,\n                        update_version: site.updateVersion,\n                    }),\n                }\n            );\n            const data = await resp.json();\n            if (data.status === 202) {\n                setShowStatusBar(true);\n                const interval = setInterval(() =&gt; {\n                    checkPluginUpdateStatus(data.operation_id)\n                        .then((status) =&gt; {\n                            console.log(status);\n                            if (status === 200) {\n                                setShowStatusBar(false);\n                                clearInterval(interval);\n                                fetchSites();\n                            }\n                        })\n                        .catch((error) =&gt; {\n                            \/\/ Handle any errors that occur during the promise resolution\n                            console.error('Error:', error);\n                        });\n                }, 5000);\n            }\n        }\n    });\n};<\/code><\/pre>\n<p>Questa funzione \u00e8 collegata a un pulsante <strong>Aggiorna tutto<\/strong>. Per migliorare l&#8217;esperienza dell&#8217;utente, il pulsante mostra il numero di versione a cui il plugin viene aggiornato:<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt; className=\"sm-btn\" onClick={updateAllPlugins}&gt;\n    Update all sites to v.\n    {\n        sites.find((site) =&gt; site.updateVersion !== null)\n            ?.updateVersion\n    }\n&lt;\/button&gt;<\/code><\/pre>\n<p>Inoltre, rendiamo condizionale questo pulsante in modo che appaia solo quando pi\u00f9 di un sito richiede l&#8217;aggiornamento del plugin. Se tutti i siti sono aggiornati, viene visualizzato un messaggio:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"list-title\"&gt;\n    &lt;h3&gt;Sites with {pluginName} plugin&lt;\/h3&gt;\n    {sites.filter((site) =&gt; site.updateAvailable === 'available')\n        .length &gt; 1 && (\n        &lt;button className=\"sm-btn\" onClick={updateAllPlugins}&gt;\n            Update all sites to v.\n            {\n                sites.find((site) =&gt; site.updateVersion !== null)\n                    ?.updateVersion\n            }\n        &lt;\/button&gt;\n    )}\n    {sites.every((site) =&gt; site.updateAvailable !== 'available') && (\n        &lt;p&gt;All sites are up to date&lt;\/p&gt;\n    )}\n&lt;\/div&gt;<\/code><\/pre>\n<p>Grazie a queste implementazioni, ora possiamo aggiornare senza problemi i plugin su pi\u00f9 siti dell&#8217;account Kinsta, migliorando l&#8217;efficienza e garantendo che tutti i siti siano aggiornati con le ultime versioni dei plugin.<\/p>\n<h2>Distribuire il sito statico React su Kinsta gratuitamente<\/h2>\n<p>Per la dimostrazione dell&#8217;applicazione utilizzeremo l&#8217;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hosting di Siti Statici di Kinsta<\/a>. In pratica, potremmo eseguire questa applicazione React dalla nostra rete o distribuirla solo dopo aver aggiunto un mezzo di autenticazione a questo strumento per la sicurezza.<\/p>\n<p>\u00c8 possibile ospitare le applicazioni React create con <code>create-react-app<\/code> come sito statico utilizzando l&#8217;hosting statico gratuito di Kinsta e inviando il codice al provider Git di nostra preferenza (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> o <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>).<\/p>\n<p>Quando il repo sar\u00e0 pronto, seguiamo questi passaggi per distribuire il sito statico su Kinsta:<\/p>\n<ol start=\"1\">\n<li>Accediamo o creiamo un account per visualizzare la dashboard <a href=\"https:\/\/my.kinsta.com\/?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorizziamo Kinsta con il provider Git.<\/li>\n<li>Clicchiamo su <strong>Siti statici<\/strong> nella barra laterale di sinistra e poi su <strong>Aggiungi sito<\/strong>.<\/li>\n<li>Selezioniamo il repository e il branch da cui desideriamo effettuare il deploy.<\/li>\n<li>Assegniamo un nome unico al sito.<\/li>\n<li>Aggiungiamo le impostazioni di build nel seguente formato:\n<ul>\n<li><strong>Comando di build:<\/strong> npm run build<\/li>\n<li><strong>Versione Node:<\/strong> 18.16.0<\/li>\n<li><strong>Directory di pubblicazione:<\/strong> build<\/li>\n<\/ul>\n<\/li>\n<li>Infine, clicchiamo su <strong>Crea sito<\/strong>.<\/li>\n<\/ol>\n<p>E il gioco \u00e8 fatto! In pochi secondi avremo un sito distribuito. Viene fornito un link per accedere alla versione distribuita del sito. In seguito potremo aggiungere un <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">dominio personale<\/a> e un <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificato SSL<\/a>, a seconda delle nostre esigenze.<\/p>\n<p>In alternativa all&#8217;Hosting di Siti Statici, possiamo distribuire il sito statico con l&#8217;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting di Applicazioni<\/a> di Kinsta, che offre una maggiore flessibilit\u00e0 di hosting, una gamma pi\u00f9 ampia di vantaggi e l&#8217;accesso a funzioni pi\u00f9 robuste. Ad esempio, scalabilit\u00e0, distribuzione personalizzata tramite un file Docker e l&#8217;<a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">analisi completa<\/a> dei dati storici e in tempo reale.<\/p>\n<h2>Riepilogo<\/h2>\n<p>L&#8217;API di Kinsta apre possibilit\u00e0 che vanno al di l\u00e0 di quanto abbiamo discusso. Un&#8217;applicazione interessante potrebbe essere la <a href=\"https:\/\/kinsta.com\/it\/blog\/creare-slackbot-gestire-sito\/\">creazione di uno Slackbot<\/a> che invii una notifica su Slack ogni volta che un plugin \u00e8 obsoleto. Questa integrazione pu\u00f2 snellire notevolmente il vostro flusso di lavoro, mantenendovi informati e proattivi.<\/p>\n<p>Potrete anche sviluppare uno strumento simile, come spiegato in questa guida, per <a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Site-Themes-and-Plugins#operation\/updateTheme\" target=\"_blank\" rel=\"noopener noreferrer\">aggiornare i vostri temi<\/a>, dato che l&#8217;API di Kinsta ha gi\u00e0 degli endpoint per farlo.<\/p>\n<p>Il team di Kinsta lavora costantemente all&#8217;aggiunta di nuove funzionalit\u00e0 seguendo e ascoltando attentamente i feedback, come ci spiega Kristof Siket, Development Team Lead di Kinsta API:<\/p>\n<blockquote><p><em>Il feedback degli utenti guida la definizione delle priorit\u00e0 di esposizione delle funzionalit\u00e0. Il piano attuale non copre completamente la pagina degli strumenti; le funzionalit\u00e0 si basano invece sulle richieste degli utenti e sui feedback raccolti. Se ritienete che uno strumento o un endpoint specifico debba essere incluso nell&#8217;API di Kinsta, sentitevi liberi di <a href=\"https:\/\/kinsta.com\/it\/docs\/informazioni-sul-servizio\/programma-di-ricerca-kinsta\/#how-to-join\">inviare il vostro feedback<\/a>.<\/em><\/p><\/blockquote>\n<p><em>Come utilizzate attualmente l&#8217;API di Kinsta? Quali funzioni o miglioramenti vorreste vedere nei prossimi aggiornamenti?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I plugin svolgono un ruolo fondamentale nella personalizzazione e nel miglioramento dei siti WordPress. Vengono utilizzati per aggiungere funzionalit\u00e0 come moduli di contatto, e-commerce e analisi &#8230;<\/p>\n","protected":false},"author":287,"featured_media":76580,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26232,25900,26212,26206],"class_list":["post-76579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-plugin-wordpress","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>Aggiornare i plugin di WordPress su pi\u00f9 siti con l&#039;API di Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Semplifica la gestione di WordPress con la nostra guida alla creazione di uno tool per aggiornare in blocco i plugin su pi\u00f9 siti utilizzando l&#039;API di Kinsta.\" \/>\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\/aggiornamento-di-massa-dei-plugin-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uno strumento per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti con l&#039;API di Kinsta\" \/>\n<meta property=\"og:description\" content=\"Semplifica la gestione di WordPress con la nostra guida alla creazione di uno tool per aggiornare in blocco i plugin su pi\u00f9 siti utilizzando l&#039;API di Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/\" \/>\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=\"2024-02-14T18:19:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-16T18:36:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Semplifica la gestione di WordPress con la nostra guida alla creazione di uno tool per aggiornare in blocco i plugin su pi\u00f9 siti utilizzando l&#039;API di Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.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=\"23 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Uno strumento per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti con l&#8217;API di Kinsta\",\"datePublished\":\"2024-02-14T18:19:36+00:00\",\"dateModified\":\"2024-02-16T18:36:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/\"},\"wordCount\":3030,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/\",\"name\":\"Aggiornare i plugin di WordPress su pi\u00f9 siti con l'API di Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"datePublished\":\"2024-02-14T18:19:36+00:00\",\"dateModified\":\"2024-02-16T18:36:54+00:00\",\"description\":\"Semplifica la gestione di WordPress con la nostra guida alla creazione di uno tool per aggiornare in blocco i plugin su pi\u00f9 siti utilizzando l'API di Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Servizi di Kinsta\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/servizi-kinsta\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Uno strumento per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti 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":"Aggiornare i plugin di WordPress su pi\u00f9 siti con l'API di Kinsta - Kinsta\u00ae","description":"Semplifica la gestione di WordPress con la nostra guida alla creazione di uno tool per aggiornare in blocco i plugin su pi\u00f9 siti utilizzando l'API di Kinsta.","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\/aggiornamento-di-massa-dei-plugin-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Uno strumento per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti con l'API di Kinsta","og_description":"Semplifica la gestione di WordPress con la nostra guida alla creazione di uno tool per aggiornare in blocco i plugin su pi\u00f9 siti utilizzando l'API di Kinsta.","og_url":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-02-14T18:19:36+00:00","article_modified_time":"2024-02-16T18:36:54+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Semplifica la gestione di WordPress con la nostra guida alla creazione di uno tool per aggiornare in blocco i plugin su pi\u00f9 siti utilizzando l'API di Kinsta.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"23 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Uno strumento per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti con l&#8217;API di Kinsta","datePublished":"2024-02-14T18:19:36+00:00","dateModified":"2024-02-16T18:36:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/"},"wordCount":3030,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/","name":"Aggiornare i plugin di WordPress su pi\u00f9 siti con l'API di Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","datePublished":"2024-02-14T18:19:36+00:00","dateModified":"2024-02-16T18:36:54+00:00","description":"Semplifica la gestione di WordPress con la nostra guida alla creazione di uno tool per aggiornare in blocco i plugin su pi\u00f9 siti utilizzando l'API di Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/aggiornamento-di-massa-dei-plugin-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Servizi di Kinsta","item":"https:\/\/kinsta.com\/it\/argomenti\/servizi-kinsta\/"},{"@type":"ListItem","position":3,"name":"Uno strumento per aggiornare in blocco i plugin di WordPress su pi\u00f9 siti 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\/76579","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=76579"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/76579\/revisions"}],"predecessor-version":[{"id":76654,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/76579\/revisions\/76654"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/translations\/nl"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76579\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/76580"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=76579"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=76579"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=76579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}