{"id":69515,"date":"2023-05-26T07:56:17","date_gmt":"2023-05-26T06:56:17","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=69515&#038;preview=true&#038;preview_id=69515"},"modified":"2023-07-28T16:03:15","modified_gmt":"2023-07-28T15:03:15","slug":"wordpress-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/","title":{"rendered":"Come Creare un Sito WordPress Headless con React.js"},"content":{"rendered":"<p>WordPress \u00e8 uno dei <a href=\"https:\/\/kinsta.com\/it\/quota-di-mercato-di-wordpress\/\">sistemi di gestione dei contenuti (CMS) pi\u00f9 popolari<\/a>, utilizzato da 810 milioni di persone, ovvero il 41% dell&#8217;intera internet! \u00c8 la scelta ideale per chi vuole creare velocemente un sito web perch\u00e9 \u00e8 semplice, intuitivo, offre ampie possibilit\u00e0 di personalizzazione e dispone di un solido ecosistema di plugin e di altre risorse.<\/p>\n<p>Una delle soluzioni per sfruttare al meglio WordPress \u00e8 la modalit\u00e0 headless.<\/p>\n<p>Un CMS headless, noto anche come sistema headless, \u00e8 un tipo di CMS <a href=\"https:\/\/kinsta.com\/it\/blog\/backend-vs-frontend\/\">backend<\/a> utilizzato esclusivamente per la gestione dei contenuti. Questo permette di integrare i contenuti in qualsiasi sistema o sito web semplicemente <a href=\"https:\/\/kinsta.com\/it\/blog\/api-endpoint\/\">invocando le API<\/a> del CMS headless.<\/p>\n<p>Tuttavia, in questo modo il frontend va gestito separatamente. \u00c8 qui che entra in gioco un&#8217;API.<\/p>\n<p>Le API permettono a due o pi\u00f9 applicazioni di scambiarsi dati. In questo caso, l&#8217;API viene utilizzata per trasferire i dati dal CMS al sito di frontend, garantendo cos\u00ec maggiore flessibilit\u00e0 e <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-lento\/\">prestazioni superiori<\/a>.<\/p>\n<p>In questo articolo scopriremo cos&#8217;\u00e8 un CMS headless, perch\u00e9 utilizzarne uno e come configurarlo per WordPress.<\/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 vuol dire WordPress Headless?<\/h2>\n<p>Un <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\">sito WordPress Headless<\/a> \u00e8 un sito che <a href=\"https:\/\/kinsta.com\/it\/blog\/perche-usare-wordpress\/\">utilizza WordPress<\/a> come CMS, o <a href=\"https:\/\/kinsta.com\/it\/blog\/software-cms\/\">sistema di gestione dei contenuti<\/a>, e altre tecnologie frontend come <a href=\"https:\/\/kinsta.com\/it\/blog\/vue-vs-react\/\">React o Vue<\/a> per il frontend.<\/p>\n<p>Per visualizzare i contenuti del sito, vengono utilizzate <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-javascript\/\">librerie e framework JavaScript<\/a>. Pertanto, un sito WordPress Headless ha un frontend e un backend separati e usa un&#8217;API per la comunicazione.<\/p>\n<p>In termini pi\u00f9 semplici, in un&#8217;architettura headless il CMS viene utilizzato solo per archiviare e gestire i contenuti e non per il frontend del sito web.<\/p>\n<p>Il compito principale del frontend, invece, \u00e8 quello di visualizzare i contenuti, indipendentemente da dove i contenuti siano archiviati o gestiti, a condizione di poterli raggiungere.<\/p>\n<p>Un sito WordPress Headless ha prestazioni migliori perch\u00e9 le richieste del frontend sono gestite da tecnologie pi\u00f9 veloci, come <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-tutorial-react\/\">React<\/a>, e solo il backend \u00e8 gestito da WordPress. La separazione tra frontend e backend consente di scalare i componenti in modo indipendente.<\/p>\n\n<h2>Vantaggi e svantaggi di WordPress Headless<\/h2>\n<p>Come sempre nel mondo dello sviluppo, la scelta di una soluzione WordPress Headless presenta vantaggi e svantaggi. \u00c8 importante comprenderli entrambi prima di prendere una decisione.<\/p>\n<h3>Vantaggi di WordPress Headless<\/h3>\n<p>Tra i principali vantaggi di un&#8217;implementazione di WordPress Headless ricordiamo i seguenti:<\/p>\n<ul>\n<li><strong>Flessibilit\u00e0:<\/strong> WordPress Headless permette agli sviluppatori di creare esperienze frontend personalizzate senza essere limitati dal tradizionale <a href=\"https:\/\/kinsta.com\/it\/blog\/come-funzionano-i-temi-di-wordpress\/\">sistema di temi di WordPress<\/a>. Ci\u00f2 significa che \u00e8 possibile creare interfacce utente ed esperienze uniche per esigenze specifiche.<\/li>\n<li><strong>Prestazioni:<\/strong> separare il frontend dal backend di un sito WordPress pu\u00f2 rendere <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-lento\/\">pi\u00f9 veloce il caricamento<\/a> del sito e quindi migliorarne le prestazioni, perch\u00e9 il server si limita a fornire i dati tramite un&#8217;API, anzich\u00e9 <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">eseguire il rendering dell&#8217;HTML<\/a> ad ogni richiesta.<\/li>\n<li><strong>Sicurezza:<\/strong> separando il frontend dal backend, un sistema WordPress Headless pu\u00f2 fornire un ulteriore livello di sicurezza in quanto limita l&#8217;accesso al codice e al database di WordPress.<\/li>\n<\/ul>\n<h3>Svantaggi di WordPress Headless<\/h3>\n<p>Tra gli svantaggi di un sistema WordPress Headless ricordiamo:<\/p>\n<ul>\n<li><strong>Mancanza di temi:<\/strong> dato che WordPress Headless non ha una base di <a href=\"https:\/\/kinsta.com\/it\/blog\/temi-wordpress-veloci\/\">temi precostituiti<\/a>, \u00e8 necessario creare i propri temi. Questo pu\u00f2 richiedere tempo e risorse.<\/li>\n<li><strong>Costi:<\/strong> lo sviluppo di un sito WordPress Headless pu\u00f2 essere pi\u00f9 costoso di un <a href=\"https:\/\/kinsta.com\/it\/blog\/costo-sito-wordpress\/\">sito WordPress tradizionale<\/a>, in quanto richiede maggiori competenze tecniche e risorse per la configurazione e la manutenzione.<\/li>\n<li><strong>Limitazioni dei plugin:<\/strong> alcuni <a href=\"https:\/\/kinsta.com\/it\/argomenti\/plugin-wordpress\/\">plugin di WordPress<\/a> potrebbero non funzionare con WordPress Headless, in quanto per funzionare correttamente si basano sui temi di WordPress.<\/li>\n<\/ul>\n<h2>Cos&#8217;\u00e8 l&#8217;API REST di WordPress?<\/h2>\n<p>L&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/rest-api-wordpress\/\">API REST di WordPress<\/a> \u00e8 utilizzata come interfaccia tra il backend e il frontend. Grazie all&#8217;API, i dati possono essere facilmente inviati o recuperati dal sito, perch\u00e9 l&#8217;API ha un accesso controllato ai dati. Inoltre, garantisce che solo gli utenti autorizzati possano accedervi.<\/p>\n<p>L&#8217;API pu\u00f2 supportare un&#8217;ampia gamma di formati di dati, tra cui JSON, il che facilita l&#8217;interazione con il sistema.<\/p>\n<p>L&#8217;API REST di WordPress \u00e8 un potente strumento per gli sviluppatori che possono creare, aggiornare o cancellare dati, oltre a creare funzionalit\u00e0 personalizzate per i siti o integrarsi con altri servizi. Inoltre, sono disponibili dei plugin che estendono le funzionalit\u00e0 dell&#8217;API, come ad esempio l&#8217;integrazione di ulteriori metodi di autenticazione.<\/p>\n<h2>Cos&#8217;\u00e8 React?<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a> \u00e8 una libreria <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript<\/a> che permette di creare interfacce utente. Si tratta di una libreria frontend open-source e riutilizzabile. Gli sviluppatori possono utilizzarla per creare <a href=\"https:\/\/kinsta.com\/it\/blog\/libreria-componenti-react\/\">componenti dell&#8217;interfaccia utente (UI)<\/a> utilizzando una sintassi dichiarativa.<\/p>\n<p>React crea un&#8217;interfaccia utente interattiva e renderizza i componenti quando i dati cambiano. Questa libreria \u00e8 molto popolare tra gli sviluppatori che vogliono creare componenti complessi e riutilizzabili, gestire lo stato in modo efficiente e aggiornare facilmente l&#8217;interfaccia utente in tempo reale.<\/p>\n<p>La solida community di sviluppatori di React ha creato numerosi strumenti, librerie e risorse per migliorare le funzionalit\u00e0 della libreria. Molte aziende e organizzazioni stanno adottando React come tecnologia per la creazione di applicazioni web complesse, dinamiche e veloci.<\/p>\n<figure id=\"attachment_152469\" aria-describedby=\"caption-attachment-152469\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152469\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\" alt=\"Collage di loghi di aziende (tra cui Facebook, Netflix, Amazon, Reddit) con React\" width=\"1024\" height=\"621\"><\/a><figcaption id=\"caption-attachment-152469\" class=\"wp-caption-text\">Aziende che utilizzano React.js (fonte: inexture.com)<\/figcaption><\/figure>\n<h3>Perch\u00e9 utilizzare React?<\/h3>\n<p>React offre molti vantaggi che ne fanno una soluzione eccellente per sviluppare applicazioni web complesse e dinamiche.<\/p>\n<p>Eccone alcuni:<\/p>\n<ul>\n<li><strong>Sintassi dichiarativa:<\/strong> React adotta un approccio dichiarativo alla costruzione dei componenti dell&#8217;interfaccia utente, il che rende pi\u00f9 semplice la creazione di componenti riutilizzabili e altamente efficienti.<\/li>\n<li><strong>Ecosistema esteso e comunit\u00e0 attiva:<\/strong> React vanta una comunit\u00e0 di sviluppatori ampia e attiva, che ha portato alla creazione di una vasta gamma di strumenti e librerie che ne migliorano le funzionalit\u00e0.<\/li>\n<li><strong>DOM virtuale:<\/strong> React utilizza il DOM virtuale per aggiornare l&#8217;interfaccia utente in tempo reale. Ci\u00f2 significa che quando lo stato cambia, vengono aggiornati solo i componenti necessari e non viene invece renderizzata l&#8217;intera pagina.<\/li>\n<li><strong>Riutilizzabilit\u00e0:<\/strong> React.js offre componenti riutilizzabili che possono essere impiegati in diverse applicazioni, riducendo notevolmente i tempi e il lavoro di sviluppo.<\/li>\n<\/ul>\n<h2>Come creare un sito WordPress Headless con React<\/h2>\n<p>\u00c8 il momento di sporcarci le mani e imparare a creare e distribuire un sito WordPress Headless con React.<\/p>\n<h3>Prerequisiti<\/h3>\n<p>Ecco cosa \u00e8 necessario:<\/p>\n<ul>\n<li>Una buona conoscenza di React<\/li>\n<li>Aver <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-node-js\/\">installato Node.js v14 o superiore<\/a> sulla propria macchina<\/li>\n<\/ul>\n<h3>Passo 1. Installare un sito WordPress<\/h3>\n<p>Iniziamo a configurare il sito WordPress che servir\u00e0 come fonte di dati per l&#8217;applicazione React. Se avete gi\u00e0 configurato un sito WordPress, potete saltare questa sezione; in caso contrario, seguiteci.<\/p>\n<p>In questo tutorial utilizzeremo DevKinsta, un ambiente di sviluppo locale veloce e affidabile utilizzato per creare, sviluppare e distribuire siti WordPress. \u00c8 completamente gratuito: basta <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/download\/\">scaricarlo dal sito ufficiale<\/a> e <a href=\"https:\/\/kinsta.com\/it\/docs\/devkinsta\/devkinsta-come-iniziare\/installazione\/\">installarlo sul sistema<\/a>.<\/p>\n<p>Una volta completata l&#8217;installazione, aprite la dashboard di DevKinsta e cliccate su <strong>Nuovo sito WordPress<\/strong>.<\/p>\n<p>Inserite i dati richiesti e premete il pulsante <strong>Crea sito<\/strong>.<\/p>\n<figure id=\"attachment_152847\" aria-describedby=\"caption-attachment-152847\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-152847\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site-1024x681.png\" alt=\"Schermata della pagina di creazione del sito di DevKinsta che mostra tre campi di input e un pulsante\" width=\"1024\" height=\"681\"><\/a><figcaption id=\"caption-attachment-152847\" class=\"wp-caption-text\">Pagina di creazione del sito in DevKinsta<\/figcaption><\/figure>\n<p>Questa operazione potrebbe richiedere qualche minuto, ma una volta creato il sito, potrete accedere al pannello di amministrazione cliccando rispettivamente su <strong>Apri sito<\/strong> o <strong>WP Admin<\/strong>.<\/p>\n<p>Successivamente, per abilitare l&#8217;API JSON, dovrete aggiornare i permalink del vostro sito.<\/p>\n<p>Nella <a href=\"https:\/\/kinsta.com\/it\/blog\/amministrazione-wordpress\/\">bacheca di WordPress<\/a>, cliccate su <strong>Impostazioni<\/strong> e poi su <strong>Permalink<\/strong>. Scegliete l&#8217;opzione <strong>Nome del post<\/strong> e cliccate su <strong>Salva modifiche<\/strong>.<\/p>\n<figure id=\"attachment_152850\" aria-describedby=\"caption-attachment-152850\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-152850\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings-1024x651.png\" alt=\"Schermata della pagina delle impostazioni dei permalink del pannello di amministrazione di WordPress che mostra varie opzioni per personalizzare la struttura dei permalink del sito web..\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152850\" class=\"wp-caption-text\">Impostazioni dei Permalink di WordPress<\/figcaption><\/figure>\n<p>Potete anche utilizzare strumenti come <a href=\"https:\/\/www.postman.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Postman<\/a> per testare e inviare facilmente richieste alle API REST di WordPress.<\/p>\n<h3>Passo 2: configurare un&#8217;applicazione React<\/h3>\n<p>Ora che abbiamo installato il nostro sito WordPress, possiamo iniziare a lavorare sul frontend. Come gi\u00e0 detto, in questo tutorial utilizzeremo React per il frontend della nostra applicazione.<\/p>\n<p>Per iniziare, eseguite il codice qui sotto nel terminale per creare un&#8217;applicazione React.<\/p>\n<pre><code class=\"language-bash\">npm create vite@latest my-blog-app \ncd my-blog-app \nnpm install<\/code><\/pre>\n<p>Questi comandi creeranno un&#8217;applicazione React e installeranno le dipendenze necessarie.<\/p>\n<p>Dobbiamo anche installare Axios, una libreria JavaScript che consente di effettuare richieste HTTP. Per l&#8217;installazione, eseguite questo comando:<\/p>\n<pre><code class=\"language-bash\">npm install axios<\/code><\/pre>\n<p>Ora, per avviare il server di sviluppo, potete eseguire <code>npm run dev<\/code> nel terminale. Il server dovrebbe inizializzare l&#8217;applicazione all&#8217;indirizzo <a href=\"http:\/\/127.0.0.1:5173\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/127.0.0.1:5173<\/a>.<\/p>\n<figure id=\"attachment_152848\" aria-describedby=\"caption-attachment-152848\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-152848\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page-1024x651.png\" alt=\"La schermata della pagina predefinita di React mostra il logo di React e Vite, un pulsante e del testo.\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152848\" class=\"wp-caption-text\">Landing page Vite + React<\/figcaption><\/figure>\n<p>Poi aprite il progetto nel vostro <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-editor-di-testo\/\">editor di codice<\/a> preferito e cancellate tutti i file non necessari, come la cartella <strong>assets<\/strong>, <strong>index.css<\/strong> e <strong>app.css<\/strong>.<\/p>\n<p>Potete anche sostituire il codice all&#8217;interno di <strong>main.jsx<\/strong> e <strong>App.jsx<\/strong> con il seguente codice:<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom\/client'\nimport App from '.\/App'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  &lt;React.StrictMode&gt;\n    &lt;App \/&gt;\n  &lt;\/React.StrictMode&gt;,\n)<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ App.jsx\n\nimport React from 'react'\n\nexport default function App() {\n  return (\n    &lt;App \/&gt;\n  )\n}<\/code><\/pre>\n<h3>Passo 3: recuperare i post da WordPress<\/h3>\n<p>Ora \u00e8 il momento di recuperare i post dal nostro sito WordPress.<\/p>\n<p>All&#8217;interno di <strong>App.jsx<\/strong>, aggiungete il seguente stato e importate <code>useState<\/code> da React:<\/p>\n<pre><code class=\"language-javascript\">const [posts, setPosts] = useState([])<\/code><\/pre>\n<p><code>useState<\/code> \u00e8 un <a href=\"https:\/\/kinsta.com\/it\/blog\/usecallback-react\/\">hook integrato in React<\/a> che viene utilizzato per aggiungere stati a un componente, uno stato che si riferisce a dati o propriet\u00e0.<\/p>\n<p><code>posts<\/code> \u00e8 utilizzato per ottenere i dati dallo stato e <code>setPosts<\/code> \u00e8 utilizzato per aggiungere nuovi dati al post. Di default, abbiamo passato allo stato un array vuoto.<\/p>\n<p>Quindi aggiungete il seguente codice dopo lo stato per recuperare i post dall&#8217;API REST di WordPress:<\/p>\n<pre><code class=\"language-javascript\">const fetchPosts = () =&gt; {\n    \/\/ Using axios to fetch the posts\n    axios\n      .get(\"http:\/\/headless-wordpress-website.local\/wp-json\/wp\/v2\/posts\")\n      .then((res) =&gt; {\n        \/\/ Saving the data to state\n        setPosts(res.data);\n      });\n  }\n\n\n  \/\/ Calling the function on page load\n  useEffect(() =&gt; {\n    fetchPosts()\n  }, [])<\/code><\/pre>\n<p>Il codice precedente esegue la funzione <code>fetchPosts()<\/code> al caricamento della pagina. All&#8217;interno della funzione <code>fetchPosts()<\/code>, inviamo una richiesta <code>GET<\/code> all&#8217;API di WordPress utilizzando Axios per recuperare i post e poi salvarli nello stato dichiarato in precedenza.<\/p>\n<h3>Passo 4: creare un componente Blog<\/h3>\n<p>All&#8217;interno della cartella principale, create una nuova cartella denominata <strong>components<\/strong> e al suo interno create due nuovi file: <strong>blog.jsx<\/strong> e <strong>blog.css<\/strong>.<\/p>\n<p>Per prima cosa, aggiungete il seguente codice a <strong>blog.jsx<\/strong>:<\/p>\n<pre><code class=\"language-javascript\">import axios from \"axios\";\nimport React, { useEffect, useState } from \"react\";\nimport \".\/blog.css\";\n\nexport default function Blog({ post }) {\n  const [featuredImage, setFeaturedimage] = useState();\n\n  const getImage = () =&gt; {\n    axios\n     .get(post?._links[\"wp:featuredmedia\"][0]?.href)\n     .then((response) =&gt; {\n      setFeaturedimage(response.data.source_url);\n    });\n  };\n\n  useEffect(() =&gt; {\n    getImage();\n  }, []);\n\n  return (\n    &lt;div class=\"container\"&gt;\n      &lt;div class=\"blog-container\"&gt;\n        &lt;p className=\"blog-date\"&gt;\n          {new Date(Date.now()).toLocaleDateString(\"en-US\", {\n            day: \"numeric\",\n            month: \"long\",\n            year: \"numeric\",\n          })}\n        &lt;\/p&gt;\n        &lt;h2 className=\"blog-title\"&gt;{post.title.rendered}&lt;\/h2&gt;\n        &lt;p\n          className=\"blog-excerpt\"\n          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n        \/&gt;\n        &lt;img src={featuredImage} class=\"mask\" \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<p>Nel codice precedente, abbiamo creato un componente che accetta la propriet\u00e0 <code>posts<\/code> contenente le informazioni sul post del blog dall&#8217;API di WordPress.<\/p>\n<p>Nella funzione <code>getImage()<\/code>, utilizziamo Axios per recuperare l&#8217;URL dell&#8217;immagine in evidenza e poi salviamo queste informazioni nello stato.<\/p>\n<p>Abbiamo poi aggiunto un hook <code>useEffect<\/code> per invocare la funzione <code>getImage()<\/code> una volta che il componente \u00e8 stato montato. Abbiamo anche aggiunto la dichiarazione di ritorno in cui renderizziamo i dati del post, il titolo, l&#8217;estratto e l&#8217;immagine.<\/p>\n<p>Aggiungete, quindi, gli stili sottostanti al file <strong>blog.css<\/strong>:<\/p>\n<pre><code class=\"language-css\">@import url(\"https:\/\/fonts.googleapis.com\/css?family=Poppins\");\n\n.blog-container {\n  width: 400px;\n  height: 322px;\n  background: white;\n  border-radius: 10px;\n  box-shadow: 0px 20px 50px #d9dbdf;\n  -webkit-transition: all 0.3s ease;\n  -o-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\n\nimg {\n  width: 400px;\n  height: 210px;\n  object-fit: cover;\n  overflow: hidden;\n  z-index: 999;\n  border-bottom-left-radius: 10px;\n  border-bottom-right-radius: 10px;\n}\n\n.blog-title {\n  margin: auto;\n  text-align: left;\n  padding-left: 22px;\n  font-family: \"Poppins\";\n  font-size: 22px;\n}\n\n.blog-date {\n  text-align: justify;\n  padding-left: 22px;\n  padding-right: 22px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  color: #c8c8c8;\n  line-height: 18px;\n  padding-top: 10px;\n}\n\n.blog-excerpt {\n  text-align: justify;\n  padding-left: 22px;\n  padding-right: 22px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  color: #8a8a8a;\n  line-height: 18px;\n  margin-bottom: 13px;\n}<\/code><\/pre>\n<p>Nel file App.jsx, aggiungete il seguente codice nell&#8217;istruzione <code>return<\/code> per rendere il componente blog:<\/p>\n<pre><code class=\"language-javascript\">&lt;div&gt;\n\t{posts.map((item) =&gt; (\n\t\t&lt;Blog post={item} \/&gt;\n\t))}\n&lt;\/div&gt;;<\/code><\/pre>\n<p>Infine, ecco il vostro App.jsx:<\/p>\n<pre><code class=\"language-javascript\">import React, { useEffect, useState } from 'react'\nimport axios from \"axios\"\nimport Blog from '.\/components\/Blog';\n\nexport default function App() {\n  const [posts, setPosts] = useState([]);\n\n  const fetchPosts = () =&gt; {\n    axios\n      .get(\"http:\/\/my-awesome-website.local\/wp-json\/wp\/v2\/posts\")\n      .then((res) =&gt; {\n        setPosts(res.data);\n      });\n  }\n\n  useEffect(() =&gt; {\n    fetchPosts()\n  }, [])\n\n  return (\n    &lt;div&gt;\n      {posts.map((item) =&gt; (\n        &lt;Blog\n          post={item}\n        \/&gt;\n      ))}\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n<p>Salvate il file e aggiornate la scheda del browser. Ora dovreste essere in grado di visualizzare sulla pagina gli articoli del blog.<\/p>\n<figure id=\"attachment_152849\" aria-describedby=\"caption-attachment-152849\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-152849\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_-1024x654.png\" alt=\"Schermata dell'applicazione React con quattro schede blog, ognuna delle quali visualizza un diverso post di WordPress.\" width=\"1024\" height=\"654\"><\/a><figcaption id=\"caption-attachment-152849\" class=\"wp-caption-text\">WordPress Headless con React.js<\/figcaption><\/figure>\n\n<h2>Riepilogo<\/h2>\n<p>WordPress Headless \u00e8 un&#8217;ottima soluzione per creare siti veloci e dall&#8217;architettura scalabile. Grazie a React e all&#8217;API REST di WordPress, creare siti web dinamici e interattivi con WordPress come sistema di gestione dei contenuti \u00e8 davvero semplice.<\/p>\n<p>Altrettanto importante per la velocit\u00e0 \u00e8 il posto dove viene ospitato il sito WordPress. Kinsta \u00e8 in grado di offrire <a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/\">hosting WordPress<\/a> velocissimo grazie alle macchine C2 di altissimo livello sulla <a href=\"https:\/\/kinsta.com\/it\/blog\/piattaforma-cloud-per-sviluppatori\/\">rete Premium Tier<\/a> di Google, oltre all&#8217;<a href=\"https:\/\/kinsta.com\/it\/integrazione-cloudflare\/\">integrazione di Cloudflare<\/a>, che permette di evitare che il sito vada incontro a perdite di dati o attacchi malevoli.<\/p>\n<p><em>Avete realizzato o avete intenzione di realizzare un sito WordPress Headless con React? Fatecelo sapere nella sezione dei commenti qui sotto!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress \u00e8 uno dei sistemi di gestione dei contenuti (CMS) pi\u00f9 popolari, utilizzato da 810 milioni di persone, ovvero il 41% dell&#8217;intera internet! \u00c8 la scelta &#8230;<\/p>\n","protected":false},"author":256,"featured_media":69516,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[25648,15892,67],"topic":[26212,25873],"class_list":["post-69515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-web-development","tag-webdev","topic-react","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 Headless con React.js - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come creare un sito headless utilizzando React.js e Wordpress nella nostra guida dettagliata sul funzionamento dei CMS headless.\" \/>\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-react\/\" \/>\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 Headless con React.js\" \/>\n<meta property=\"og:description\" content=\"Scopri come creare un sito headless utilizzando React.js e Wordpress nella nostra guida dettagliata sul funzionamento dei CMS headless.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/\" \/>\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-05-26T06:56:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T15:03:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.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=\"Suhail Kakar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri come creare un sito headless utilizzando React.js e Wordpress nella nostra guida dettagliata sul funzionamento dei CMS headless.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suhail Kakar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 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-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/\"},\"author\":{\"name\":\"Suhail Kakar\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\"},\"headline\":\"Come Creare un Sito WordPress Headless con React.js\",\"datePublished\":\"2023-05-26T06:56:17+00:00\",\"dateModified\":\"2023-07-28T15:03:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/\"},\"wordCount\":1852,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg\",\"keywords\":[\"JavaScript\",\"web development\",\"webdev\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/\",\"name\":\"Come Creare un Sito WordPress Headless con React.js - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg\",\"datePublished\":\"2023-05-26T06:56:17+00:00\",\"dateModified\":\"2023-07-28T15:03:15+00:00\",\"description\":\"Scopri come creare un sito headless utilizzando React.js e Wordpress nella nostra guida dettagliata sul funzionamento dei CMS headless.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Creare un Sito WordPress Headless con React.js\"}]},{\"@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\/5ba7d23f58a0b812e2a85ec38b61287b\",\"name\":\"Suhail Kakar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g\",\"caption\":\"Suhail Kakar\"},\"description\":\"Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/suhailkakar\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Creare un Sito WordPress Headless con React.js - Kinsta\u00ae","description":"Scopri come creare un sito headless utilizzando React.js e Wordpress nella nostra guida dettagliata sul funzionamento dei CMS headless.","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-react\/","og_locale":"it_IT","og_type":"article","og_title":"Come Creare un Sito WordPress Headless con React.js","og_description":"Scopri come creare un sito headless utilizzando React.js e Wordpress nella nostra guida dettagliata sul funzionamento dei CMS headless.","og_url":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-05-26T06:56:17+00:00","article_modified_time":"2023-07-28T15:03:15+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg","type":"image\/jpeg"}],"author":"Suhail Kakar","twitter_card":"summary_large_image","twitter_description":"Scopri come creare un sito headless utilizzando React.js e Wordpress nella nostra guida dettagliata sul funzionamento dei CMS headless.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Suhail Kakar","Tempo di lettura stimato":"11 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/"},"author":{"name":"Suhail Kakar","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b"},"headline":"Come Creare un Sito WordPress Headless con React.js","datePublished":"2023-05-26T06:56:17+00:00","dateModified":"2023-07-28T15:03:15+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/"},"wordCount":1852,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg","keywords":["JavaScript","web development","webdev"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/","url":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/","name":"Come Creare un Sito WordPress Headless con React.js - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg","datePublished":"2023-05-26T06:56:17+00:00","dateModified":"2023-07-28T15:03:15+00:00","description":"Scopri come creare un sito headless utilizzando React.js e Wordpress nella nostra guida dettagliata sul funzionamento dei CMS headless.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-react\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/it\/argomenti\/react\/"},{"@type":"ListItem","position":3,"name":"Come Creare un Sito WordPress Headless con React.js"}]},{"@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\/5ba7d23f58a0b812e2a85ec38b61287b","name":"Suhail Kakar","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g","caption":"Suhail Kakar"},"description":"Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.","url":"https:\/\/kinsta.com\/it\/blog\/author\/suhailkakar\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69515","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\/256"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=69515"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69515\/revisions"}],"predecessor-version":[{"id":71734,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69515\/revisions\/71734"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/translations\/dk"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69515\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/69516"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=69515"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=69515"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=69515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}