{"id":77171,"date":"2024-04-02T10:36:06","date_gmt":"2024-04-02T09:36:06","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77171&#038;preview=true&#038;preview_id=77171"},"modified":"2024-04-05T08:31:38","modified_gmt":"2024-04-05T07:31:38","slug":"wordpress-headless-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/","title":{"rendered":"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless"},"content":{"rendered":"<p>Gutenberg \u00e8 l&#8217;editor predefinito di <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-next-js\/\">WordPress<\/a>. L&#8217;editor permette di creare e modellare i contenuti utilizzando blocchi discreti per testo, immagini, video e altri elementi del sito attraverso un&#8217;interfaccia drag-and-drop. Questo approccio migliora la flessibilit\u00e0 e le capacit\u00e0 di progettazione di WordPress.<\/p>\n<p>Questa guida spiega come eseguire il parse dei contenuti di Gutenberg come <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a> utilizzando l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/rest-api-wordpress\/\">API REST di WordPress<\/a> in un sito statico <a href=\"https:\/\/kinsta.com\/it\/blog\/next-js\/\">Next.js<\/a>. <div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Prerequisiti<\/h2>\n<p>Per seguirci, serviranno:<\/p>\n<ul>\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<li>Conoscenza di base di <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a><\/li>\n<li>Un <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/wordpress-come-iniziare\/nuovo-sito\/\">sito WordPress<\/a> con qualche post pubblicato<\/li>\n<\/ul>\n<h2>Recuperare i contenuti di Gutenberg utilizzando un&#8217;API REST<\/h2>\n<p>Per interagire con il sito WordPress in modo programmatico e recuperare i contenuti strutturati nei <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">blocchi di Gutenberg<\/a>, utilizziamo l&#8217;API REST di WordPress o il <a href=\"https:\/\/kinsta.com\/it\/blog\/wpgraphql-e-wp-api-rest\/\">plugin WPGraphQL<\/a>. Questi strumenti permettono di recuperare i contenuti di WordPress in formato JSON.<\/p>\n<p>Per abilitare l&#8217;accesso ai dati JSON tramite l&#8217;API REST, regoliamo le impostazioni dei permalink di WordPress in modo che non siano &#8220;Semplici&#8221;. In questo modo potremo accedere all&#8217;API attraverso un URL strutturato come il seguente:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n<p>Effettuando richieste API a questo URL, possiamo recuperare programmaticamente varie informazioni ed eseguire operazioni sul nostro sito WordPress. Ad esempio, possiamo recuperare un elenco di post inviando una richiesta GET a:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n<p>Questo restituir\u00e0 un oggetto JSON contenente informazioni sui post del nostro sito WordPress, tra cui titoli, contenuti, dettagli sull&#8217;autore e altro ancora.<\/p>\n<h2>Eseguire il parse dei blocchi di Gutenberg come HTML<\/h2>\n<p>Quando si recuperano i post da un sito WordPress che utilizza l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">editor Gutenberg<\/a>, il contenuto memorizzato nel database pu\u00f2 presentare una miscela di metadati HTML e JSON per descrivere vari tipi di blocchi, come citazioni e gallerie. Ad esempio:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:quote {\"className\":\"inspirational-quote\",\"style\":{\"typography\":{\"fontSize\":\"large\"}}} --&gt;\n&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n&lt;!-- \/wp:quote --&gt;\n\n&lt;!-- wp:gallery {\"ids\":[34,35],\"columns\":2,\"linkTo\":\"none\",\"sizeSlug\":\"medium\",\"className\":\"custom-gallery\"} --&gt;\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;\/ul&gt;\n&lt;!-- \/wp:gallery --&gt;\n<!-- \/wp:gallery --><\/code><\/pre>\n<p>Questo frammento illustra due blocchi di Gutenberg: una citazione e una galleria. Ognuno di essi \u00e8 arricchito da metadati JSON incapsulati all&#8217;interno di commenti HTML. I metadati definiscono attributi come nomi di classi, stili e altre configurazioni rilevanti per la presentazione del blocco.<\/p>\n<p>Quando recuperiamo questi blocchi tramite l&#8217;API REST di WordPress o WPGraphQL, WordPress li elabora, trasformando la combinazione di metadati HTML e JSON in elementi HTML completamente renderizzati che possiamo incorporare direttamente nelle pagine web. L&#8217;HTML trasformato per i blocchi di cui sopra appare come segue:<\/p>\n<pre><code class=\"language-html\">&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Per gli sviluppatori che realizzano applicazioni disaccoppiate o headless utilizzando framework JavaScript come Next.js, questo rappresenta un metodo semplice per visualizzare i contenuti iniettando direttamente l&#8217;HTML nella pagina utilizzando la propriet\u00e0 <code>dangerouslySetInnerHTML<\/code> per rendere il markup.<\/p>\n<pre><code class=\"language-html\">&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code><\/pre>\n<p>Inoltre, potrebbe essere necessario eseguire un&#8217;ulteriore formattazione per gli elementi come i link e gestire i caratteri newline in eccesso (<code>\\n<\/code>), come spiegato in seguito in questa guida.<\/p>\n<h2>Eseguire il parse del contenuto dei blocchi di Gutenberg nel sito statico Next.js<\/h2>\n<p>In questa sezione, recuperiamo i contenuti di WordPress in un progetto Next.js e poi eseguiamo il parse dei blocchi di Gutenberg come HTML.<\/p>\n<ol start=\"1\">\n<li>Iniziamo impostando una funzione per recuperare i post dal sito WordPress. Apriamo il file <strong>src\/page.js<\/strong> nel progetto e sostituiamo il suo contenuto con il seguente frammento di codice:\n<pre><code class=\"language-jsx\">const getWpPosts = async () =&gt; {\n\tconst res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n  \tconst posts = await res.json();\n\treturn posts;\n};<\/code><\/pre>\n<p>Questa funzione asincrona esegue una richiesta API all&#8217;API REST di WordPress. Recupera tutti i post disponibili sul sito e li restituisce come array.<\/li>\n<li>Successivamente, utilizziamo i post recuperati all&#8217;interno di un semplice componente di pagina Next.js registrando i post nella console e renderizzando un saluto di base:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n  console.log(posts);\n  \n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Hello World&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>Quando eseguiamo il progetto utilizzando <code>npm run dev<\/code>, viene visualizzato il messaggio &#8220;Hello World&#8221; e vengono registrati i post recuperati nel Terminale.<\/p>\n<pre><code class=\"language-json\">[\n  {\n    \"_links\" : {\n      \"about\" : [...],\n      \"author\" : [...],\n      \"collection\" : [...],\n      \"curies\" : [...],\n      \"predecessor-version\" : [...],\n      \"replies\" : [...],\n      \"self\" : [...],\n      \"version-history\" : [...],\n      \"wp:attachment\" : [...],\n      \"wp:term\" : [...]\n    },\n    \"author\" : 1,\n    \"categories\" : [...],\n    \"comment_status\" : \"open\",\n    \"content\" : {\n      \"protected\" : false,\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    \"date\" : \"2024-02-27T12:08:30\",\n    \"date_gmt\" : \"2024-02-27T12:08:30\",\n    \"excerpt\" : {\n      \"protected\" : false,\n      \"rendered\" : \"&lt;p&gt;Fire, a primal force, captivates with its flickering flames, evoking both awe and caution. Its dance symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate. In ancient times, fire was a beacon of light and warmth, [\u2026]&lt;\/p&gt;\\n\"\n    },\n    \"featured_media\" : 0,\n    \"format\" : \"standard\",\n    \"guid\" : {\n      \"rendered\" : \"https:\/\/yoursite.com\/?p=13\"\n    },\n    \"id\" : 13,\n    \"link\" : \"https:\/\/yoursite.com\/?p=13\",\n    \"meta\" : {\n      \"footnotes\" : \"\"\n    },\n    \"modified\" : \"2024-02-29T16:45:36\",\n    \"modified_gmt\" : \"2024-02-29T16:45:36\",\n    \"ping_status\" : \"open\",\n    \"slug\" : \"fire-fire\",\n    \"status\" : \"publish\",\n    \"sticky\" : false,\n    \"tags\" : [],\n    \"template\" : \"\",\n    \"title\" : {\n      \"rendered\" : \"Fire\"\n    },\n    \"type\" : \"post\"\n   },\n  },\n  ...\n]<\/code><\/pre>\n<p>Gli oggetti JSON che rappresentano i dati dei singoli post di Gutenberg includono vari campi, tra cui il contenuto e l&#8217;estratto che vengono restituiti come blocchi di Gutenberg analizzati come stringhe HTML.<\/li>\n<li>Per rendere correttamente il contenuto HTML in Next.js, utilizziamo la propriet\u00e0 <code>dangerouslySetInnerHTML<\/code>:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt; Headless Blog &lt;\/h1&gt;\n\n      &lt;div&gt;\n        {posts.map((post) =&gt; (\n          &lt;Link href={'\/blog\/' + post.id} key={post.id}&gt;\n            &lt;h2&gt;\n              {post.title.rendered} &lt;span&gt;-&gt;&lt;\/span&gt;\n            &lt;\/h2&gt;\n            &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n          &lt;\/Link&gt;\n        ))}\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>In questo componente aggiornato, mappiamo l&#8217;array di post recuperati per generare un elenco di estratti di post. Ogni estratto \u00e8 racchiuso in un componente <code>Link<\/code> per la navigazione, che mostra il titolo del post e un frammento del suo contenuto. <\/p>\n<p>La propriet\u00e0 <code>dangerouslySetInnerHTML<\/code> viene utilizzata per analizzare e rendere il contenuto HTML contenuto nel campo <code>excerpt.rendered<\/code>.<\/li>\n<li>Quindi, creiamo un file <strong>blog\/[id]\/page.js<\/strong> nella cartella <strong>app<\/strong>. Usiamo le cartelle per definire le route. Quindi, creando una cartella <strong>blog<\/strong>, definiamo la route <strong>blog<\/strong>. Combinando questo con il <a href=\"https:\/\/kinsta.com\/it\/blog\/next-js\/#dynamic-routes\">routing dinamico<\/a>, possiamo generare route per ogni post.<\/li>\n<li>Ogni post ha un ID. Utilizzeremo questo ID per generare la sua unica route, <code>\/blog\/{post_id}<\/code> nell&#8217;applicazione. Aggiungiamo il seguente codice:\n<pre><code class=\"language-jsx\">import Link from 'next\/link';\n\nexport async function generateStaticParams() {\n    const res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n    const posts = await res.json();\n    return posts.map((post) =&gt; {\n        return {\n            params: {\n                id: post.id.toString(),\n            },\n        };\n    });\n}\n\nexport async function getPost(id) {\n    const response = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/' + id);\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n<p>La funzione <code>generateStaticParams()<\/code> genera staticamente i percorsi al momento della creazione in base all&#8217;ID corrispondente restituito da ogni post. La funzione <code>getPost()<\/code> recupera i dati di Gutenberg dall&#8217;API REST per il post con l&#8217;ID passato. <\/p>\n<p>In una sezione precedente abbiamo mostrato un esempio di parsing dei dati di Gutenberg restituiti dall&#8217;API REST per un post. Per ora ci interessa solo il campo <code>content.rendered<\/code>:<\/p>\n<pre><code class=\"language-json\">[\n  {\n    ...\n    \"content\": {\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    ...\n  }\n]<\/code><\/pre>\n<p>Questo campo contiene l&#8217;HTML grezzo del post. Pu\u00f2 essere reso direttamente utilizzando la propriet\u00e0 <code>dangerouslySetInnerHTML<\/code> in questo modo, <code>&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code>.<\/li>\n<li>Successivamente, potremo elaborare i dati analizzando i link interni e ridimensionando le immagini. Installiamo il pacchetto <code>html-react-parser<\/code> per semplificare il processo di analisi dei tag:\n<pre><code class=\"language-bash\">npm install html-react-parser --save<\/code><\/pre>\n<\/li>\n<li>Aggiungiamo il seguente codice al file <strong>blog\/[id]\/page.js<\/strong>:\n<pre><code class=\"language-javascript\">import parse, { domToReact } from \"html-react-parser\";\n\n\/*\n * We use a regular expression (pattern) to match the specific URL you want to replace.\n * The (\\d+) part captures the numeric ID after ?p=.\n * Then, we use the replacement string 'data-internal-link=\"true\" href=\"\/blog\/$1\"',\n * where $1 is a placeholder for the captured ID.\n *\/\nexport function fixInternalLinks(html_string) {\n  const pattern = \/href=\"https:\\\/\\\/yoursite.com\\\/\\?p=(\\d+)\"\/g;\n  const replacement = 'data-internal-link=\"true\" href=\"\/blog\/$1\"';\n\n  return html_string.replace(pattern, replacement);\n}\n\nexport function parseHtml(html) {\n  \/\/ Replace 2+ sequences of '\\n' with a single '&lt;br \/&gt;' tag\n  const _content = html.replace(\/\\n{2,}\/g, '&lt;br \/&gt;');\n  const content = fixInternalLinks(_content);\n\n  const options = {\n    replace: ({ name, attribs, children }) =&gt; {\n      \/\/ Convert internal links to Next.js Link components.\n      const isInternalLink =\n        name === \"a\" && attribs[\"data-internal-link\"] === \"true\";\n\n      if (isInternalLink) {\n        return (\n          &lt;Link href={attribs.href} {...attribs}&gt;\n            {domToReact(children, options)}\n          &lt;\/Link&gt;\n    \t  );\n      } else if (name === \"img\") {\n        attribs[\"width\"] = \"250\";\n        attribs[\"height\"] = \"150\";\n        return (\n          &lt;img {...attribs}\/&gt;\n        );\n      }\n    },\n  };\n\n  return parse(content, options);\n}<\/code><\/pre>\n<p>La funzione <code>fixInternalLinks()<\/code> utilizza un&#8217;espressione regolare per trovare i link ai post del sito WordPress dalla stringa HTML. Nell&#8217;HTML grezzo, possiamo vedere che il post contiene un tag <code>List<\/code> con link ad altri post del sito, sostituendo questi link con link interni a percorsi del sito statico. <\/p>\n<p>La funzione <code>parseHTML()<\/code> individua sequenze multiple di newline in eccesso, <code>n<\/code> e le sostituisce con i tag <code>&lt;br \/&gt;<\/code>. Trova anche i link interni e converte i tag di ancoraggio in tag Link. Infine, questa funzione ridimensiona le immagini utilizzando gli attributi dei tag.<\/li>\n<li>Per generare l&#8217;interfaccia utente principale di ogni percorso dinamico, aggiungiamo il seguente codice:\n<pre><code class=\"language-javascript\">export default async function Post({ params }) {\n  const post = await getPost(params.id);\n\n  const content = parseHtml(post.content.rendered);\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt;\n        {post.title.rendered}\n      &lt;\/h1&gt;\n \t \n      &lt;div&gt;{content}&lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<p>Dopo aver analizzato l&#8217;HTML grezzo dai dati di Gutenberg, il codice restituisce JSX che rappresenta l&#8217;interfaccia utente formattata della pagina.<\/li>\n<\/ol>\n<p>Infine, quando eseguiamo il progetto, la pagina iniziale mostrer\u00e0 un elenco di post del WordPress. Inoltre, facendo clic sui singoli post, vedremo che il parse dei contenuti di Gutenberg \u00e8 stato eseguito correttamente.<\/p>\n<h2>Distribuire il sito statico Next.js su Kinsta<\/h2>\n<p>Quando si combinano WordPress headless con framework all&#8217;avanguardia come Next.js, diventa essenziale trovare una soluzione di distribuzione economica, soprattutto quando si utilizza un <a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/\">hosting WordPress potente<\/a> come quello di Kinsta per il proprio sito WordPress. Il servizio di <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hosting di Siti Statici<\/a> di Kinsta offre un modo semplice e conveniente per portare il proprio sito online. <\/p>\n<p>Kinsta permette di <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">ospitare <strong>gratuitamente<\/strong> fino a 100 siti web statici<\/a>. Per prima cosa, inviamo il codice al nostro provider Git preferito (<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>). Una volta che il repo sar\u00e0 pronto, seguiamo questi passaggi per distribuire il nostro 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 nostro 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>: <code>npm run build<\/code><\/li>\n<li><strong>Versione Node<\/strong>: <code>18.16.0<\/code><\/li>\n<li><strong>Directory di pubblicazione<\/strong>: <code>out<\/code><\/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 eventualmente aggiungere il nostro <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">dominio personalizzato<\/a> e un <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificato SSL personale<\/a>. <\/p>\n<p>In alternativa all&#8217;Hosting di Siti Statici, possiamo scegliere di distribuire il nostro sito statico con il servizio di <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 funzionalit\u00e0 pi\u00f9 robuste, come la scalabilit\u00e0, la distribuzione personalizzata tramite un file Docker e <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">statistiche complete<\/a> che comprendono dati storici e in tempo reale. Inoltre, non \u00e8 necessario configurare il progetto Next.js per il rendering statico.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Questa guida ha spiegato come integrare ed eseguire efficacemente il parse dei contenuti dei blocchi di Gutenberg come HTML tramite l&#8217;API di WordPress. Questo rende possibile il rendering di qualsiasi tipo di contenuto sul front-end quando si utilizza WordPress headless. <\/p>\n<p>Potete ospitare il vostro WordPress headless sul nostro servizio di hosting WordPress gestito e distribuire il vostro sito statico sul nostro servizio di hosting per siti statici. In questo modo, tutto ci\u00f2 che riguarda il vostro sito si trover\u00e0 in un&#8217;unica dashboard: MyKinsta. <\/p>\n<p>Scegliendo Kinsta, potete beneficiare di un provider di hosting che d\u00e0 priorit\u00e0 alle prestazioni ottimali del sito e alla scalabilit\u00e0, proteggendo al contempo i siti web con misure di sicurezza avanzate. <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Provate Kinsta oggi stesso<\/a>! <\/p>\n<p><em>Che ne pensate di WordPress headless e del suo rendering? Avete un modo migliore per integrare i blocchi di Gutenberg? Condividete le vostre idee nella sezione commenti!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg \u00e8 l&#8217;editor predefinito di WordPress. L&#8217;editor permette di creare e modellare i contenuti utilizzando blocchi discreti per testo, immagini, video e altri elementi del sito &#8230;<\/p>\n","protected":false},"author":199,"featured_media":77172,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26179,25918],"class_list":["post-77171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-cms-headless","topic-framework-javascript"],"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 eseguire il parse dei contenuti di Gutenberg per WordPress headless - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come integrare i contenuti di Gutenberg analizzati come HTML nel tuo sito con questa guida dettagliata. Mostra come utilizzare il contenuto in Next.js.\" \/>\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-headless-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless\" \/>\n<meta property=\"og:description\" content=\"Scopri come integrare i contenuti di Gutenberg analizzati come HTML nel tuo sito con questa guida dettagliata. Mostra come utilizzare il contenuto in Next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/\" \/>\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-04-02T09:36:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-05T07:31:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-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=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri come integrare i contenuti di Gutenberg analizzati come HTML nel tuo sito con questa guida dettagliata. Mostra come utilizzare il contenuto in Next.js.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.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=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 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-headless-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless\",\"datePublished\":\"2024-04-02T09:36:06+00:00\",\"dateModified\":\"2024-04-05T07:31:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/\"},\"wordCount\":1462,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/\",\"name\":\"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"datePublished\":\"2024-04-02T09:36:06+00:00\",\"dateModified\":\"2024-04-05T07:31:38+00:00\",\"description\":\"Scopri come integrare i contenuti di Gutenberg analizzati come HTML nel tuo sito con questa guida dettagliata. Mostra come utilizzare il contenuto in Next.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CMS Headless\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/cms-headless\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless\"}]},{\"@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\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless - Kinsta\u00ae","description":"Scopri come integrare i contenuti di Gutenberg analizzati come HTML nel tuo sito con questa guida dettagliata. Mostra come utilizzare il contenuto in Next.js.","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-headless-gutenberg\/","og_locale":"it_IT","og_type":"article","og_title":"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless","og_description":"Scopri come integrare i contenuti di Gutenberg analizzati come HTML nel tuo sito con questa guida dettagliata. Mostra come utilizzare il contenuto in Next.js.","og_url":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-04-02T09:36:06+00:00","article_modified_time":"2024-04-05T07:31:38+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Scopri come integrare i contenuti di Gutenberg analizzati come HTML nel tuo sito con questa guida dettagliata. Mostra come utilizzare il contenuto in Next.js.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Jeremy Holcombe","Tempo di lettura stimato":"14 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless","datePublished":"2024-04-02T09:36:06+00:00","dateModified":"2024-04-05T07:31:38+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/"},"wordCount":1462,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/","url":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/","name":"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","datePublished":"2024-04-02T09:36:06+00:00","dateModified":"2024-04-05T07:31:38+00:00","description":"Scopri come integrare i contenuti di Gutenberg analizzati come HTML nel tuo sito con questa guida dettagliata. Mostra come utilizzare il contenuto in Next.js.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"CMS Headless","item":"https:\/\/kinsta.com\/it\/argomenti\/cms-headless\/"},{"@type":"ListItem","position":3,"name":"Come eseguire il parse dei contenuti di Gutenberg per WordPress headless"}]},{"@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\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77171","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\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=77171"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77171\/revisions"}],"predecessor-version":[{"id":77220,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77171\/revisions\/77220"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77171\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/77172"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=77171"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=77171"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=77171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}