{"id":48120,"date":"2021-10-07T15:06:48","date_gmt":"2021-10-07T13:06:48","guid":{"rendered":"https:\/\/kinsta.com\/?p=104261"},"modified":"2023-02-21T15:55:26","modified_gmt":"2023-02-21T14:55:26","slug":"wordpress-headless","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/","title":{"rendered":"Come Creare un Sito WordPress Headless con Vue.js"},"content":{"rendered":"

WordPress \u00e8 stato il sistema di gestione dei contenuti<\/a> per sviluppatori e non sviluppatori per costruire e creare rapidamente siti web sorprendenti.<\/p>\n

L’utilizzo di un’architettura a microservizi, dove il backend di gestione dei contenuti \u00e8 separato dal frontend, garantisce il massimo controllo di entrambi i “lati”. Questo problema di separazione \u00e8 ci\u00f2 che cercano di risolvere i sistemi di gestione dei contenuti headless (senza testa), comprese le soluzioni WordPress headless.<\/p>\n

Con un approccio headless, le aziende hanno un controllo pi\u00f9 granulare sul backend di gestione dei contenuti. Sono anche libere di utilizzare qualsiasi frontend di loro scelta, compresi React, Vue, Angular<\/a>, ecc.<\/p>\n

In questa guida andremo alla scoperta di WordPress senza testa (o headless), vi diremo di cosa si tratta, quando e perch\u00e9 potreste utilizzarlo. Infine, scopriremo come si crea un ambiente WordPress headless, come si costruisce il frontend con Vue.js<\/a> e come distribuire WordPress headless utilizzando Kinsta.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Cosa Significa WordPress Headless?<\/h2>\n

WordPress \u00e8 un’applicazione monolitica in cui il backend e il frontend sono strettamente legati. Il backend \u00e8 dove avviene la gestione, dove potete creare, modificare, aggiungere ed eliminare contenuti, oltre a cambiare le configurazioni dell’aspetto. Il frontend \u00e8 invece responsabile della visualizzazione dei contenuti all’utente.<\/p>\n

WordPress headless \u00e8 il termine utilizzato per descrivere un WordPress disabbinato. La parte del backend (gestione) \u00e8 separata dalla parte del frontend del CMS WordPress<\/a>. Potete sviluppare e gestire il frontend come un’applicazione standalone con qualsiasi framework frontend vogliate.<\/p>\n\n

Pro e Contro di WordPress Headless<\/h2>\n

Ora analizzeremo i pro e i contro di WordPress headless per darvi una migliore comprensione del concetto.<\/p>\n

I Pro<\/h3>\n

Inizieremo dai pro.<\/p>\n

Prestazioni Super<\/h4>\n

In questa era di applicazioni dalle prestazioni super-veloci, il vostro sito web non dovrebbe impiegare pi\u00f9 di qualche secondo per caricarsi<\/a>, evitando cos\u00ec di perdere visitatori. Dal momento che il frontend \u00e8 separato da WordPress e pu\u00f2 essere sviluppato con alte prestazioni e scalabilit\u00e0 utilizzando i moderni strumenti frontend, un approccio WordPress headless offre grandi vantaggi per l’esperienza utente complessiva del vostro sito web.<\/p>\n

Controllo Granulare<\/h4>\n

Optare per un’architettura headless vi d\u00e0 maggiore controllo sul layout del vostro design, sulla presentazione dei contenuti e su come gli utenti interagiscono con il frontend della vostra applicazione. Permette anche ai vostri contenuti di backend di essere protetti e accessibili da una posizione centrale.<\/p>\n

Maggiore Scalabilit\u00e0<\/h4>\n

A volte scalare WordPress pu\u00f2 essere complicato perch\u00e9 non avete il controllo completo di tutti i componenti e del codice che alimenta WordPress, soprattutto se non siete sviluppatori. Ma con il disaccoppiamento di WordPress, \u00e8 facile scalare ogni parte in modo isolato e individuare facilmente la parte che ha bisogno di essere scalata.<\/p>\n

Sicurezza Pi\u00f9 Rigida<\/h4>\n

Non possiamo sottolineare abbastanza i vantaggi in termini di sicurezza di WordPress headless perch\u00e9 WordPress disabbinato offre vantaggi di alta sicurezza contro gli hacker e gli attacchi DDoS<\/a>. L’approccio di WordPress headless rende difficile per gli hacker accedere ai vostri dati sensibili di backend perch\u00e9 \u00e8 separato dal frontend, cio\u00e8 il sito rivolto agli utenti.<\/p>\n

Design Leggero<\/h4>\n

Avrete maggiore controllo sulla struttura e sul layout del design del vostro frontend. Inoltre, potete lavorare sul frontend con maggiore libert\u00e0 nel creare design personalizzati; grazie alle chiamate alla REST API, sarete in grado di sfruttare i moderni strumenti web e distribuirli sul frontend.<\/p>\n

Pubblicazione di Contenuti Multicanale<\/h4>\n

Dal momento che WordPress headless utilizza un sistema basato su API<\/a> per comunicare i vostri contenuti al frontend, potete visualizzare i vostri contenuti ovunque e su qualsiasi piattaforma, compresi desktop, sito web, applicazioni mobili e chiosco touch screen. \u00c8 anche possibile fare pieno uso della realt\u00e0 aumentata, della realt\u00e0 virtuale e dei dispositivi della Internet of Things per visualizzare e presentare i vostri contenuti provenienti dal sistema basato sulle API.<\/p>\n

I Contro<\/h3>\n

Analizzeremo i contro dell’headless in modo pi\u00f9 approfondito man mano che andiamo avanti, ma i principali svantaggi sono questi:<\/p>\n

    \n
  1. Separare il backend e il frontend vi d\u00e0 un carico extra quando gestite diverse istanze del sito.<\/li>\n
  2. Pu\u00f2 essere costoso da implementare perch\u00e9 ha bisogno di pi\u00f9 membri nel vostro team e di un capitale aggiuntivo per gestire diverse istanze.<\/li>\n
  3. Rendere il vostro contenuto disponibile su diverse piattaforme pu\u00f2 causare un’esperienza fuorviante per i vostri utenti se il contenuto non \u00e8 presentato in modo coerente su tutte le piattaforme.<\/li>\n<\/ol>\n

    Quando WordPress Headless Potrebbe Non Essere la Soluzione Migliore<\/h2>\n

    Dal momento che WordPress headless \u00e8 un’incredibile innovazione e offre grandi vantaggi, ci sono alcune cose che dovete tenere a mente quando decidete se adottarlo o meno.<\/p>\n

      \n
    1. WordPress headless \u00e8 molto costoso da mantenere. Dovrete mantenere due diverse istanze di un sito web dall’infrastruttura<\/a> a pi\u00f9 sviluppatori.<\/li>\n
    2. WordPress headless non supporta tutte le funzionalit\u00e0 di WordPress. Ad esempio, alcune funzionalit\u00e0 di WordPress come l’editor WYSIWYG e l’anteprima live non funzionano quando si utilizza un frontend separato.<\/li>\n
    3. \u00c8 pi\u00f9 costoso configurare un WordPress headless. Quindi, tenete sempre presente il costo maggiore.<\/li>\n<\/ol>\n

      Chi Dovrebbe Utilizzare WordPress Headless?<\/h2>\n

      Di seguito riportiamo i casi in cui potreste aver pi\u00f9 bisogno di WordPress headless:<\/p>\n

        \n
      1. Dovreste usare WordPress headless se la sicurezza del vostro sito web<\/a> \u00e8 la vostra preoccupazione principale ed \u00e8 fondamentale per la vostra azienda.<\/li>\n
      2. Inoltre, se il vostro sito web non ha bisogno di aggiornamenti regolari, sar\u00e0 un ottimo segno che avete bisogno di una configurazione headless.<\/li>\n
      3. Poi, se volete avere un design personalizzato che non \u00e8 facile trovare in un tema WordPress, potrete ravvivare il frontend del vostro sito web con un design unico. Allora, WordPress headless \u00e8 la soluzione per voi.<\/li>\n
      4. Infine, se state costruendo un sito web di breve durata o una demo per presentazioni e tutorial, allora potete provare l’approccio headless.<\/li>\n<\/ol>\n

        Chi Dovrebbe Evitare WordPress headless<\/h2>\n

        Qui riportiamo diversi casi in cui usare WordPress headless non \u00e8 una buona idea:<\/p>\n

          \n
        1. Quando il vostro sito web si basa esclusivamente su plugin specifici e funzionalit\u00e0 che controllano e lavorano al meglio con il frontend della vostra applicazione, dovreste rimanere con WordPress a meno che i plugin non offrano soluzioni basate su API per consumare i dati.<\/li>\n
        2. Supponiamo che non siate interessati a codificare il vostro sito web, o che il vostro sito web richieda una manutenzione quotidiana e che non abbiate budget per assumere un professionista per la manutenzione ordinaria. In questo caso, WordPress \u00e8 una soluzione pi\u00f9 adatta a voi.<\/li>\n
        3. Se non siete uno sviluppatore esperto<\/a> e volete creare e gestire il vostro sito web da soli, dovresti utilizzare WordPress.<\/li>\n<\/ol>\n

          Come Rendere WordPress Headless (Creare un’App)<\/h2>\n

          In questa sezione analizzeremo la creazione e lo sviluppo di un blog di notizie con WordPress headless per il backend e Vue 3 come frontend per l’utente.<\/p>\n

          Installare WordPress Headless con Devkinsta<\/h3>\n

          Svilupperemo WordPress headless con DevKinsta<\/a>, un popolare ambiente di sviluppo locale di WordPress per progettare, sviluppare e distribuire siti WordPress comodamente dalla vostra macchina locale.<\/p>\n

          DevKinsta \u00e8 gratuito e vi offre grandi vantaggi nello sviluppare e costruire su WordPress.<\/p>\n

          Potete scaricare e installare DevKinsta dal sito ufficiale<\/a> e seguire le istruzioni della documentazione.<\/p>\n

          Dato che abbiamo gi\u00e0 installato DevKinsta, lo avvieremo e seguiremo il passaggio che segue per installare il nostro primo WordPress headless.<\/p>\n

          Sulla dashboard di DevKinsta, create un nuovo sito WordPress con Nginx<\/a>, MySQL<\/a> e qualsiasi versione di WordPress disponibile. Inoltre, potete importare un’istanza di WordPress esistente o creare un’istanza di WordPress personalizzata dalla dashboard.<\/p>\n

          Successivamente, assegnate alla vostra istanza di WordPress appena creata un nome, un nome utente admin e una password, poi fate clic su Crea<\/strong> e copiate i dati mentre DevKinsta crea una nuova istanza di WordPress sulla vostra macchina locale.<\/p>\n

          Poi fate clicca su Apri sito<\/strong> per aprire la vostra istanza di WordPress nel vostro browser predefinito.<\/p>\n

          Infine, potrete accedere alla bacheca di amministrazione accedendo al link http:\/\/headless-wordpress-news-blog.local\/wp-admin<\/code> e digitando le credenziali di accesso da amministratore che avete inserito durante la creazione della nuova istanza.<\/p>\n

          Si noti che abbiamo configurato il nostro WordPress headless in locale con l’URL http:\/\/headless-wordpress-news-blog.local<\/code>, mentre il frontend \u00e8 accessibile localmente su http:\/\/news-blog.local<\/code>. Utilizzeremo questi indirizzi per tutto il tutorial.<\/p>\n

          Configurare il Nostro WordPress Headless<\/h3>\n

          Dopo aver effettuato l’accesso alla vostra bacheca di WordPress, potrete procedere all’installazione di qualsiasi plugin<\/a> e configurazione di vostra scelta.<\/p>\n

          Per questo tutorial disabiliteremo completamente il tema e accederemo al contenuto solo tramite l’endpoint basato sulla REST API di WordPress installando e configurando il plugin Simple Website Redirect.<\/p>\n

          Andate su Plugin > Aggiungi nuovo<\/strong> e cercate Simple Website Redirect<\/a>, installatelo e attivatelo:<\/p>\n

          \"Installazione
          Installazione di un plugin WordPress.<\/figcaption><\/figure>\n

          Poi fate clic sulle Impostazioni<\/strong> del plugin e inserite il vostro URL del frontend (ad esempio http:\/\/news-blog.local<\/code>), cliccate sulle opzioni Avanzate<\/strong> e aggiungete alla sezione Exclude Paths i seguenti percorsi – \/wp-admin<\/code>, \/wp-login.php<\/code> e \/wp-json<\/code>.<\/p>\n

          Infine, abilitate il plugin selezionando Enabled<\/strong> nel menu a tendina Redirect Status<\/strong>:<\/p>\n

          \"Impostazioni
          Impostazioni del plugin Simple Website Redirect.<\/figcaption><\/figure>\n

          …e questo \u00e8 tutto!<\/p>\n

          Inoltre, se la vostra API JSON non \u00e8 abilitata di default quando visitate http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code>, potete abilitarla aprendo i vostri Permalink<\/strong> nelle Impostazioni di WordPress<\/strong> e selezionando Nome articolo<\/strong> o qualsiasi altro a vostra scelta tranne Semplice<\/strong>:<\/p>\n

          \"Pagina
          Impostazioni Permalink di WordPress.<\/figcaption><\/figure>\n

          Ora, quando visitate il vostro http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code>, dovrebbe presentarvi dei dati JSON come quelli riportati qui sotto:<\/p>\n

          {\n  \"name\": \"Headless WordPress News Blog\",\n  \"description\": \"Just another WordPress site\",\n  \"url\": \"http:\/\/headless-wordpress-news-blog.local\",\n  \"home\": \"http:\/\/headless-wordpress-news-blog.local\",\n  \"gmt_offset\": \"0\",\n  \"timezone_string\": \"\",\n  \"namespaces\": [\n    \"oembed\/1.0\",\n    \"wp\/v2\",\n    \"wp-site-health\/v1\"\n  ],\n  \"authentication\": [\n    \n  ],\n  \"routes\": {\n    \"\/\": {\n      \"namespace\": \"\",\n      \"methods\": [\n        \"GET\"\n      ],\n      \"endpoints\": [\n        {\n          \"methods\": [\n            \"GET\"\n          ],\n          \"args\": {\n            \"context\": {\n              \"default\": \"view\",\n              \"required\": false\n            }\n          }\n        }\n      ],\n...<\/code><\/pre>\n
          Installare Vue.js (Frontend)<\/h3>\n
          Per creare la nostra applicazione Vue 3 e connetterci con WordPress headless useremo lo strumento di sviluppo web Vite. Potete approfondire su Vue 3<\/a> e sugli strumenti di sviluppo di Vite<\/a>.<\/p>\n
          In questo articolo creeremo un blog di notizie<\/a>. Tutta la gestione backend dei contenuti del progetto sar\u00e0 sviluppata e ospitata con il nostro WordPress headless su Devkinsta.<\/p>\n
          Proseguite digitando questi semplici comandi:<\/p>\n
          npm init @vitejs\/app news-blog\ncd news-blog\nnpm install\nnpm run dev<\/code><\/pre>\n
          Se avete problemi con gli spazi nel vostro nome utente, provate:<\/p>\n
          npx crea-vite-app news-blog<\/code><\/pre>\n
          Si noti che abbiamo configurato la nostra applicazione Vue 3 per rimanere in ascolto di http:\/\/news-blog.local<\/code>, ma potete continuare con l’indirizzo http:\/\/localhost:3000<\/code> predefinito.<\/p>\n
          Infine, aprite il vostro codice Vue 3 con un qualsiasi editor di codice. Noi utilizzeremo VSCode<\/a>.<\/p>\n
          Consumare l’API di WordPress<\/h3>\n
          Siamo andati avanti a sviluppare la parte rimanente dell’applicazione Vue per farvi risparmiare tempo nella lettura, ma potete proseguire clonando la repository<\/a> dal mio GitHub.<\/p>\n
          Visualizzare il Componente Post dell’Applicazione<\/h4>\n
          Lo snippet di codice qui sotto mostra come implementiamo l’API REST di WordPress con la nostra istanza di Vue per visualizzare tutti i post da WordPress headless:<\/p>\n
          <template>\n  <section>\n    <div class=\"padding-top\">\n      <div class=\"container inner-padding-top\">\n        <div class=\"row\">\n          <div class=\"col-md-12 col-sm-12-col-xs-12 text-center\">\n            <h2 class=\"lead-title text-uppercase\">\n              Latest Backend Dev. Articles\n            <\/h2>\n            <h3 class=\"article-subtitle\">\n              Latest Backend Dev. Articles curated daily by the community.\n            <\/h3>\n          <\/div>\n        <\/div>\n        <div class=\"row mb-1 mt-5\">\n          <post v-for=\"(post, i) in posts\" :key=\"i\" :post=\"post\" \/>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"col-md-12 col-sm-12-col-xs-12 text-center mb-5\">\n      <Button link=\"\/posts\" class=\"col p-3\">More Articles<\/Button>\n    <\/div>\n  <\/section>\n<\/template>\n\n<script>\nimport { mapState } from 'vuex'\nexport default {\n  computed: {\n    ...mapState({\n      posts: (state) => {\n        return [...state.post.posts].slice(0, 22)\n      },\n    }),\n  },\n}\n<\/script><\/code><\/pre>\n
          Visualizzare il componente di un singolo post<\/h4>\n
          Lo snippet di codice mostra come recuperiamo un singolo post con WordPress REST API con l’headless WordPress e lo visualizziamo nella nostra istanza Vue:<\/p>\n
          <template>\n  <div class=\"card single\">\n    <div class=\"card-head pl-3 pr-3 pt-3\">\n      <h1 class=\"title\">{{ post.title || '' }}<\/h1>\n      <div class=\"d-flex\">\n        <div class=\"author d-flex pr-3 pb-4\">\n          <div class=\"profile mr-2\"><\/div>\n          <a :href=\"'\/authors\/' + post.author.slug\" class=\"subtitle is-6\">\n            {{ post.author.name }}\n          <\/a>\n        <\/div>\n\n        <div class=\"date_created\">\n          <small class=\"text-muted\">\n            <li class=\"fa fa-calendar\"><\/li>\n            <time\n              :datetime=\"$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')\"\n              >{{ $moment(post.date).format('MMMM Do YYYY') }}<\/time\n            >\n          <\/small>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"block-image pl-3 pr-3 pt-2 mb-3\">\n      <img\n        v-lazy-load\n        :data-src=\"image\"\n        class=\"card-img-top img-fluid\"\n        :alt=\"post.title\"\n      \/>\n    <\/div>\n\n    <div class=\"tags absolute\">\n      <a\n        v-for=\"category in post.categories\"\n        :key=\"category.id\"\n        :href=\"'\/categories\/' + category.slug\"\n        class=\"btn-tag\"\n      >\n        {{ category.title }}\n      <\/a>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nimport Vue from 'vue'\n\nexport default {\n  name: 'SinglePost',\n  props: {\n    post: {\n      type: [Object, Array],\n      default: () => {},\n    },\n  },\n}\n<\/script><\/code><\/pre>\n
          Di seguito \u00e8 riportato lo store che fa le chiamate API all’API headless di WordPress per i contenuti del backend:<\/p>\n
          export const actions = {\n  async getPosts({ commit }, { page, count = 22 }) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts`\n      )\n      const data = await response.json()\n      if (data) {\n        commit('setPosts', data)\n      }\n      return data\n    }\n  },\n  \n async getPost({ commit }, id) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts\/${id}`\n      )\n      const data = await response.json()\n      if (data) {\n        commit('setPost', data)\n      }\n      return data\n    }\n  },\n }<\/code><\/pre>\n
          Qui sotto c’\u00e8 il negozio che fa le chiamate API all’API di WordPress headless per i contenuti del backend:<\/p>\n
          export const actions = {\n  async getPosts({ commit }, { page, count = 22 }) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts`\n      )\n      const data = await response.json()\n      if (dati) {\n        commit('setPosts', dati)\n      }\n      return data\n    }\n  },\n  \n async getPost({ commit }, id) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts\/${id}`\n      )\n      const data = await response.json()\n      if (dati) {\n        commit('setPost', dati)\n      }\n      return data\n    }\n  },\n }<\/code><\/pre>\n
          Distribuire WordPress Headless con Kinsta<\/h3>\n
          Distribuire il vostro WordPress headless \u00e8 molto facile con DevKinsta utilizzando il servizio di hosting Kinsta.<\/p>\n
          Per distribuire il vostro WordPress headless su Kinsta, fate clic sul pulsante Passa a Staging<\/strong> nella vostra dashboard di DevKinsta e accedete a Kinsta con le vostre credenziali.<\/p>\n
          Trovate istruzioni per passare le modifiche all’ambiente di staging<\/a> e distribuire il vostro WordPress headless ai servizi di hosting di Kinsta con un solo clic.<\/p>\n
          Infine, potete distribuire la vostra istanza di Vue.js verso qualsiasi provider di cloud hosting. Aggiornate di conseguenza il vostro endpoint WordPress headless per testare la vostra applicazione in un ambiente di produzione live.<\/p>\n\n
          Riepilogo<\/h2>\n
          WordPress headless e i vantaggi che ne derivano rimarranno per un po’. La sua popolarit\u00e0 continuer\u00e0 a crescere man mano che un numero maggiore di sviluppatori e proprietari di siti comprenderanno i vantaggi di un’opzione headless.<\/p>\n
          In questa guida vi abbiamo presentato i vantaggi, i pro e i contro di WordPress headless e vi abbiamo mostrato come creare e distribuire il vostro primo WordPress headless con DevKinsta. Ora siete sulla buona strada per avere la vostra implementazione di WordPress headless.<\/p>\n
          Quali sono i vostri consigli per implementare un sito WordPress headless? Condivideteli nella sezione dei commenti!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
          WordPress \u00e8 stato il sistema di gestione dei contenuti per sviluppatori e non sviluppatori per costruire e creare rapidamente siti web sorprendenti. L’utilizzo di un’architettura a …<\/p>\n","protected":false},"author":193,"featured_media":48123,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[11607,32,15892],"topic":[26179,26160],"class_list":["post-48120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-headless","tag-sviluppo-web","tag-web-development","topic-cms-headless","topic-vue-js"],"yoast_head":"\nCome Creare un Sito WordPress Headless con Vue.js<\/title>\n<meta name=\"description\" content=\"Ti stai chiedendo perch\u00e9 tutte quelle chiacchiere su WordPress headless? Scopri cosa \u00e8 e impara come usarlo per costruire un'applicazione.\" \/>\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\/\" \/>\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 Vue.js\" \/>\n<meta property=\"og:description\" content=\"Ti stai chiedendo perch\u00e9 tutte quelle chiacchiere su WordPress headless? Scopri cosa \u00e8 e impara come usarlo per costruire un'applicazione.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\" \/>\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=\"2021-10-07T13:06:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T14:55:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg\" \/>\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=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ti stai chiedendo perch\u00e9 tutte quelle chiacchiere su WordPress headless? Scopri cosa \u00e8 e impara come usarlo per costruire un'applicazione.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Come Creare un Sito WordPress Headless con Vue.js\",\"datePublished\":\"2021-10-07T13:06:48+00:00\",\"dateModified\":\"2023-02-21T14:55:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\"},\"wordCount\":2013,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg\",\"keywords\":[\"headless\",\"sviluppo web\",\"web development\"],\"articleSection\":[\"I Migliori Tutorial su WordPress\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\",\"name\":\"Come Creare un Sito WordPress Headless con Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg\",\"datePublished\":\"2021-10-07T13:06:48+00:00\",\"dateModified\":\"2023-02-21T14:55:26+00:00\",\"description\":\"Ti stai chiedendo perch\u00e9 tutte quelle chiacchiere su WordPress headless? Scopri cosa \u00e8 e impara come usarlo per costruire un'applicazione.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Imparare a creare un sito WordPress senza testa con Vue.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#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 Creare un Sito WordPress Headless con Vue.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\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Creare un Sito WordPress Headless con Vue.js","description":"Ti stai chiedendo perch\u00e9 tutte quelle chiacchiere su WordPress headless? Scopri cosa \u00e8 e impara come usarlo per costruire un'applicazione.","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\/","og_locale":"it_IT","og_type":"article","og_title":"Come Creare un Sito WordPress Headless con Vue.js","og_description":"Ti stai chiedendo perch\u00e9 tutte quelle chiacchiere su WordPress headless? Scopri cosa \u00e8 e impara come usarlo per costruire un'applicazione.","og_url":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2021-10-07T13:06:48+00:00","article_modified_time":"2023-02-21T14:55:26+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Ti stai chiedendo perch\u00e9 tutte quelle chiacchiere su WordPress headless? Scopri cosa \u00e8 e impara come usarlo per costruire un'applicazione.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Solomon Eseme","Tempo di lettura stimato":"12 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Come Creare un Sito WordPress Headless con Vue.js","datePublished":"2021-10-07T13:06:48+00:00","dateModified":"2023-02-21T14:55:26+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/"},"wordCount":2013,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg","keywords":["headless","sviluppo web","web development"],"articleSection":["I Migliori Tutorial su WordPress"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/","url":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/","name":"Come Creare un Sito WordPress Headless con Vue.js","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg","datePublished":"2021-10-07T13:06:48+00:00","dateModified":"2023-02-21T14:55:26+00:00","description":"Ti stai chiedendo perch\u00e9 tutte quelle chiacchiere su WordPress headless? Scopri cosa \u00e8 e impara come usarlo per costruire un'applicazione.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/10\/headless-wordpress.jpeg","width":1460,"height":730,"caption":"Imparare a creare un sito WordPress senza testa con Vue.js"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/#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 Creare un Sito WordPress Headless con Vue.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\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/48120","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\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=48120"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/48120\/revisions"}],"predecessor-version":[{"id":65681,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/48120\/revisions\/65681"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/48120\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/48120\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/48120\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/48120\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/48120\/translations\/es"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/48120\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/48120\/translations\/nl"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/48120\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/48123"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=48120"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=48120"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=48120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}