{"id":77593,"date":"2024-05-09T14:36:06","date_gmt":"2024-05-09T13:36:06","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77593&#038;preview=true&#038;preview_id=77593"},"modified":"2024-05-10T11:54:25","modified_gmt":"2024-05-10T10:54:25","slug":"tema-react-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/","title":{"rendered":"Come costruire un tema WordPress con React"},"content":{"rendered":"<p>Questo articolo-tutorial sfrutta la flessibilit\u00e0 di <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-wordpress\/\">WordPress<\/a> e la potente interfaccia utente (UI) di <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a> per lo sviluppo di temi. Dimostra come l&#8217;integrazione di <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/\">WordPress e React<\/a> possa elevare i vostri progetti WordPress, guidandovi attraverso i passaggi necessari per creare un tema.<br \/>\n<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 seguire questo tutorial, servono:<\/p>\n<ul>\n<li>Un sito WordPress. Kinsta offre diverse opzioni di configurazione, tra cui: <a href=\"https:\/\/kinsta.com\/local-development\/\">sviluppo locale<\/a> con <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/\">DevKinsta<\/a>, tramite la <a href=\"https:\/\/kinsta.com\/it\/mykinsta\/\">dashboard MyKinsta<\/a>, di facile utilizzo, o in modo programmatico tramite l&#8217;API Kinsta.<\/li>\n<li>Node.js e npm (<a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">Node Package Manager<\/a>) o yarn installati sul computer<\/li>\n<\/ul>\n<h2>Creare una struttura di base per i temi di WordPress<\/h2>\n<p>La creazione di una struttura di base di un tema WordPress comporta l&#8217;impostazione di una serie di file e directory che WordPress utilizza per applicare gli stili, le funzionalit\u00e0 e i layout del tema a un sito WordPress.<\/p>\n<ol start=\"1\">\n<li>Nell&#8217;ambiente DevKinsta, accediamo alla cartella del sito. Andiamo alla cartella <strong>wp-content\/themes<\/strong>.<\/li>\n<li>Creiamo una nuova cartella per il tema. Il nome della cartella deve essere unico e descrittivo, ad esempio <strong>my-basic-theme<\/strong>.<\/li>\n<li>Nella cartella del tema, creiamo questi file essenziali e lasciamoli vuoti:\n<ul>\n<li><strong>style.css<\/strong>: questo \u00e8 il file principale del foglio di stile. Contiene anche le informazioni dell&#8217;header del tema.<\/li>\n<li><strong>functions.php<\/strong>: questo file definisce le funzioni, le classi, le azioni e i filtri che verranno utilizzati dal tema.<\/li>\n<li><strong>index.php<\/strong>: \u00e8 il file principale del template. \u00c8 necessario per tutti i temi.<\/li>\n<\/ul>\n<p>Se decidete di non utilizzare React, dovrete creare anche i seguenti file. Ma con React creeremo i componenti per questi file in un secondo momento.<\/p>\n<ul>\n<li><strong>header.php<\/strong>: contiene la sezione dell&#8217;header del sito.<\/li>\n<li><strong>footer.php<\/strong>: contiene la sezione footer del sito.<\/li>\n<li><strong>sidebar.php<\/strong>: per la sezione della barra laterale, se il tema include le barre laterali.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Quindi, apriamo <strong>style.css<\/strong> e aggiungiamo quanto segue all&#8217;inizio del file:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Il mio tema base\nTheme URI: http:\/\/esempio.com\/mio-tema-base\/\nAuthor: Il vostro nome\nAuthor URI: http:\/\/esempio.com\nDescription: Un tema WordPress di base.\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nTags: blog, custom-background\nText Domain: mio-tema-base\n*\/<\/code><\/pre>\n<p>Questo frammento di codice \u00e8 la sezione di intestazione del file <strong>style.css<\/strong> di un tema WordPress e contiene metadati essenziali come il nome del tema, i dettagli dell&#8217;autore, la versione e la licenza. Aiuta WordPress a riconoscere e visualizzare il tema nella <a href=\"https:\/\/kinsta.com\/it\/blog\/amministrazione-wordpress\/\">bacheca<\/a>, includendo la sua descrizione e i tag per la categorizzazione.<\/p>\n<h2>Integrare React in WordPress<\/h2>\n<p>L&#8217;integrazione di React in un tema WordPress permette di utilizzare l&#8217;architettura basata su componenti di React per costruire interfacce utente dinamiche e interattive all&#8217;interno del sito WordPress. Per integrare React, sar\u00e0 necessario utilizzare il <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\" target=\"_blank\" rel=\"noopener noreferrer\"> pacchetto @wordpress\/scripts<\/a>.<\/p>\n<p>Si tratta di una raccolta di script riutilizzabili, pensati per lo sviluppo di WordPress. WordPress lo fornisce per semplificare la configurazione e il processo di creazione, soprattutto quando si integrano i moderni flussi di lavoro <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, come React, nei temi e nei plugin di WordPress.<\/p>\n<p>Questo set di strumenti racchiude attivit\u00e0 comuni, rendendo pi\u00f9 semplice lo sviluppo con <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript<\/a> nell&#8217;ecosistema WordPress.<\/p>\n<h3>Adattare il tema<\/h3>\n<p>Ora che abbiamo una struttura di base del tema WordPress, possiamo adattarlo.<\/p>\n<ol start=\"1\">\n<li>All&#8217;interno della cartella del tema, incolliamo il seguente codice nel file <strong>functions.php <\/strong>:\n<pre><code class=\"language-php\">&lt;?php\nfunction my_react_theme_scripts() {\n    wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '\/build\/index.js', array('wp-element'), '1.0.0', true);\n    wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_react_theme_scripts');<\/code><\/pre>\n<p>Il file <strong>functions.php<\/strong> integra React con il tema WordPress. Utilizza le funzioni <code>wp_enqueue_script<\/code> e <code>wp_enqueue_style<\/code> per aggiungere file JavaScript e fogli di stile a cascata (<a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a>) al tema.<\/p>\n<p>La funzione <code>wp_enqueue_script<\/code> di WordPress richiede diversi argomenti:<\/p>\n<ul>\n<li>Il nome dell&#8217;handle (<code>'my-react-theme-app'<\/code>), che identifica in modo univoco lo script<\/li>\n<li>Il percorso del file dello script<\/li>\n<li>L&#8217;array di dipendenze, <code>array('wp-element')<\/code>, che indica che lo script dipende dal wrapper di WordPress per React <code>('wp-element')<\/code>.<\/li>\n<li>Il numero di versione <code>('1.0.0')<\/code><\/li>\n<li>La posizione <code>true<\/code>, che indica che lo script deve essere caricato nel footer del documento HTML per migliorare le prestazioni di caricamento della pagina<\/li>\n<\/ul>\n<p>La funzione <code>wp_enqueue_style<\/code> accetta i seguenti argomenti:<\/p>\n<ul>\n<li>Il nome dell&#8217;handle <code>'my-react-theme-style'<\/code>, che identifica in modo univoco il foglio di stile<\/li>\n<li>La fonte <code>get_stylesheet_uri()<\/code>, che restituisce l&#8217;URL del foglio di stile principale del tema (<strong>style.css<\/strong>) e assicura che gli stili del tema vengano applicati<\/li>\n<\/ul>\n<ul>\n<li>L&#8217;elemento <code>add_action<\/code>, che aggancia una funzione personalizzata <code>'my_react_theme_scripts'<\/code> a un&#8217;azione specifica (<code>'wp_enqueue_scripts'<\/code>). Questo assicura che il JavaScript e il CSS siano caricati correttamente quando WordPress prepara il rendering della pagina.<\/li>\n<\/ul>\n<p>Questo codice assicura che il file JavaScript compilato dell&#8217;applicazione React, che si trova in <strong>&lt;tua-directory-tema&gt;\/build\/index.js<\/strong>, e il foglio di stile principale del tema siano caricati con il tema.<\/p>\n<p>La <strong> directory \/build<\/strong> deriva in genere dalla compilazione dell&#8217;applicazione React con uno strumento come <code>create-react-app<\/code> o <a href=\"https:\/\/kinsta.com\/it\/blog\/vite-vs-webpack\/\">webpack<\/a>, che raggruppa il codice React in un file JavaScript minificato pronto per la produzione.<\/p>\n<p>Questa configurazione \u00e8 essenziale per integrare le funzionalit\u00e0 React nel tema WordPress, consentendo all&#8217;utente un&#8217;esperienza dinamica simile a quella di un&#8217;app all&#8217;interno di un sito WordPress.<\/li>\n<li>Successivamente, aggiorniamo il contenuto del file <strong>index.php<\/strong>:\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;div id=\"app\"&gt;&lt;\/div&gt;\n    &lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Il codice del file <strong>index.php<\/strong> definisce la struttura HTML di base del tema WordPress, compresi gli hook per WordPress per inserire gli header (<code>wp_head<\/code>) e i footer (<code>wp_footer<\/code>) necessari e un <code>div<\/code> con l&#8217;ID <code>app<\/code> dove viene montata l&#8217;applicazione React.<\/li>\n<\/ol>\n<h3>Configurare React con @wordpress\/scripts<\/h3>\n<ol start=\"1\">\n<li>Apriamo il terminale e navighiamo nella directory del tema:\n<pre><code class=\"language-bash\">cd wp-content\/themes\/mio-tema-base\n<\/code><\/pre>\n<\/li>\n<li>Inizializziamo un nuovo progetto Node.js:\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<\/li>\n<li>Installiamo <code>@wordpress\/scripts<\/code> e <code>@wordpress\/element<\/code>:\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts @wordpress\/element --save-dev<\/code><\/pre>\n<p>Questo passaggio pu\u00f2 richiedere alcuni minuti.<\/li>\n<li>Modifichiamo il file <strong>package.json<\/strong> per includere uno script <code>start<\/code> e uno <code>build<\/code>:\n<pre><code class=\"language-json\">\"scripts\": {\n  \"start\": \"wp-scripts start\",\n  \"build\": \"wp-scripts build\"\n},<\/code><\/pre>\n<p>Lo script <code>'@wordpress\/scripts'<\/code> viene utilizzato per avviare un server di sviluppo con hot reloading per scopi di sviluppo (<code>start<\/code>) e per compilare l&#8217;applicazione React in risorse statiche per la produzione (<code>build<\/code>).<\/li>\n<\/ol>\n<h3>Creare un progetto React<\/h3>\n<ol start=\"1\">\n<li>Creiamo una nuova cartella denominata <strong>src<\/strong> per i file sorgente di React all&#8217;interno del tema.<\/li>\n<li>All&#8217;interno della cartella <strong>src<\/strong>, creiamo due nuovi file: <strong>index.js<\/strong> e <strong>App.js<\/strong>.<\/li>\n<li>Inseriamo il seguente codice in <strong>index.js<\/strong>:\n<pre><code class=\"language-jsx\">import { render } from '@wordpress\/element';\nimport App from '.\/App';\nrender(, document.getElementById('app'))<\/code><\/pre>\n<p>Il codice precedente importa la funzione <code>render<\/code> da <code>@wordpress\/element<\/code> e il componente <code>App<\/code>. Poi, monta il componente <code>App<\/code> nel Document Object Model (DOM).<\/li>\n<li>Successivamente, incolliamo questo codice nel file <strong>App.js<\/strong>:\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nexport default class App extends Component {\n  render() {\n    return (\n      &lt;div&gt; \n        &lt;h1&gt;Hello, WordPress and React!&lt;\/h1&gt;\n        {\/* Your React components will go here *\/}\n      &lt;\/div&gt;\n);\n    }\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>Finalizzare e attivare il tema<\/h3>\n<p>Per attivare il tema:<\/p>\n<ol start=\"1\">\n<li>Eseguiamo il server di sviluppo con <code>npm start<\/code>.<\/li>\n<li>Attiviamo il nuovo tema nella bacheca di WordPress andando su <strong>Aspetto <\/strong>&gt; <strong>Temi<\/strong> e cliccando su <strong>Attiva<\/strong>.<\/li>\n<li>Assicuriamoci che il processo di build del progetto React sia configurato in modo corretto per inviare l&#8217;output alla directory corretta del tema, consentendo a WordPress di eseguire il rendering dei vostri componenti React.<\/li>\n<li>Visitiamo il frontend del sito WordPress per vedere le modifiche apportate.<\/li>\n<\/ol>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/hello-wp-react.png\" alt=\"La home page mostra il nuovo tema WordPress basato su React con il messaggio Hello, WordPress and React.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">La home page mostra il nuovo tema WordPress basato su React con il messaggio &#8220;Hello, WordPress e React&#8221;.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Quando sarete pronti a distribuire il tema, eseguiamo: <code>npm run build<\/code>. Questo comando compila l&#8217;applicazione React in risorse statiche in una cartella di build all&#8217;interno della cartella del tema.<\/p>\n<\/aside>\n\n<h2>Sviluppare i componenti React per il tema<\/h2>\n<p>Successivamente, seguiamo un approccio basato sui componenti per estendere la configurazione React di base del tema WordPress con componenti specifici, come l&#8217;header.<\/p>\n<h3>Creare il componente header<\/h3>\n<p>Nella cartella <strong>src<\/strong> del tema, creiamo un nuovo file per il componente header. Diamogli un nome, ad esempio <strong>Header.js<\/strong>, e aggiungiamo il seguente codice:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Header extends Component {\n    render() {\n        const { toggleTheme, darkTheme } = this.props;\n        const headerStyle = {\n            backgroundColor: darkTheme ? '#333' : '#EEE',\n            color: darkTheme ? 'white' : '#333',\n            padding: '10px 20px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n        };\n        return (\n            &lt;header style={headerStyle}&gt;\n                &lt;div&gt;My WP Theme&lt;\/div&gt;\n                &lt;button onClick={toggleTheme}&gt;{darkTheme ? 'Light Mode' : 'Dark Mode'}&lt;\/button&gt;\n            &lt;\/header&gt;\n        );\n    }\n}\nexport default Header;<\/code><\/pre>\n<p>Questo codice definisce un componente header utilizzando <code>'@wordpress\/element'<\/code> che stilizza dinamicamente l&#8217;header in base a <code>darkTheme prop<\/code>. Include un pulsante che permette di passare dal tema chiaro a quello scuro richiamando il metodo <code>toggleTheme<code> method passed as a prop.<\/code><\/code><\/p>\n<h3>Creare il componente footer<\/h3>\n<p>Nella cartella <strong>src<\/strong> del tema, creiamo un nuovo file per il componente footer. Diamogli un nome, ad esempio <strong>Footer.js<\/strong>, e aggiungiamo il seguente codice:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Footer extends Component {\n    render() {\n        const { darkTheme } = this.props;\n        const footerStyle = {\n            backgroundColor: darkTheme ? '#333' : '#EEE',\n            color: darkTheme ? 'white' : '#333',\n            padding: '20px',\n            textAlign: 'center',\n        };\n        return (\n            &lt;footer&gt; style={footerStyle}&gt;\n                \u00a9 {new Date().getFullYear()} My WP Theme\n            &lt;\/footer&gt;\n        );\n    }\n}\nexport default Footer;<\/code><\/pre>\n<p>Questo codice definisce un componente del footer che rende un footer con uno stile dinamico basato sul prop <code>darkTheme<\/code> e visualizza l&#8217;anno corrente.<\/p>\n<h3>Aggiornare il file App.js<\/h3>\n<p>Per utilizzare il nuovo header e il nuovo footer, sostituiamo il contenuto del file <strong>App.js<\/strong> con il seguente codice:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nimport Header from '.\/Header';\nimport Footer from '.\/Footer';\nexport default class App extends Component {\n    state = {\n        darkTheme: true,\n    };\n    toggleTheme = () =&gt; {\n        this.setState(prevState =&gt; ({\n            darkTheme: !prevState.darkTheme,\n        }));\n    };\n    render() {\n        const { darkTheme } = this.state;\n        return (\n            &lt;div&gt;\n                &lt;Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} \/&gt;\n                &lt;main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}&gt;               \n                &lt;\/main&gt;\n                &lt;Footer darkTheme={darkTheme} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}<\/code><\/pre>\n<p>Il processo di sviluppo, che controlla le modifiche e ricompila il codice, dovrebbe essere ancora attivo. Quindi, l&#8217;ultima versione del template dovrebbe essere simile a questa:<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/new-styles-react-wp.png\" alt=\"La home page mostra un tema WordPress basato su React, compresi l'header e il footer.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">La home page del tema WordPress basato su React con header e footer.<\/figcaption><\/figure>\n<h2>Come gestire i dati di WordPress in React<\/h2>\n<p>L&#8217;integrazione dei contenuti di WordPress all&#8217;interno delle applicazioni React offre un ponte perfetto tra le solide funzionalit\u00e0 di <a href=\"https:\/\/kinsta.com\/it\/blog\/content-management-system\/\">gestione dei contenuti<\/a> di WordPress e il design dinamico dell&#8217;interfaccia utente di React. Questo \u00e8 possibile grazie all&#8217;API REST di WordPress.<\/p>\n<p>Per accedere all&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/rest-api-wordpress\/\">API REST<\/a> di WordPress, abilitiamola aggiornando le impostazioni dei permalink. Nella bacheca di amministrazione di WordPress, andiamo su <strong>Impostazioni<\/strong> &gt; <strong>Permalink<\/strong>. Selezioniamo l&#8217;opzione <strong>Nome del post<\/strong> o qualsiasi altra opzione diversa da <strong>Semplice<\/strong> e salviamo le modifiche.<\/p>\n<p>Nella directory <strong>src<\/strong> del tema, creiamo un nuovo file chiamato <strong>Posts.js<\/strong> e aggiungiamo questo codice:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Posts extends Component {\n    state = {\n        posts: [],\n        isLoading: true,\n        error: null,\n    };\n    componentDidMount() {\n        fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')\n            .then(response =&gt; {\n                if (!response.ok) {\n                    throw new Error('Something went wrong');\n                }\n                return response.json();\n            })\n            .then(posts =&gt; this.setState({ posts, isLoading: false }))\n            .catch(error =&gt; this.setState({ error, isLoading: false }));\n    }\n    render() {\n        const { posts, isLoading, error } = this.state;\n        if (error) {\n            return &lt;div&gt;Error: {error.message}&lt;\/div&gt;;\n        }\n        if (isLoading) {\n            return &lt;div&gt;Loading...&lt;\/div&gt;;\n        }\n        return (\n            &lt;div&gt;\n                {posts.map(post =&gt; (\n                    &lt;article key={post.id}&gt;\n                        &lt;h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} \/&gt;\n                        &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n                    &lt;\/article&gt;\n                ))}\n            &lt;\/div&gt;\n        );\n    }\n}\nexport default Posts;<\/code><\/pre>\n<p>L&#8217;URL di <code>fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')<\/code> potrebbe essere leggermente diverso a seconda del nome della distribuzione di WP, cio\u00e8 della cartella in cui abbiamo installato WP. In alternativa, possiamo prendere l&#8217;hostname del sito dalla dashboard di DevKinsta e aggiungere il suffisso <code>\/wp-json\/wp\/v2\/posts<\/code>.<\/p>\n<p>Il componente <code>Posts<\/code> \u00e8 un ottimo esempio di questa integrazione e dimostra il processo di acquisizione e gestione dei dati di WordPress, in particolare dei post, utilizzando l&#8217;API REST di WordPress.<\/p>\n<p>Avviando una richiesta di rete all&#8217;interno del metodo del ciclo di vita del componente, <code>componentDidMount<\/code>, il componente recupera in modo efficiente i post da un sito WordPress e li memorizza nel suo stato. Questo metodo evidenzia un modello per incorporare dinamicamente i dati di WordPress, come le pagine o i tipi di post personalizzati, nei componenti React.<\/p>\n<p>Per utilizzare il nuovo componente, sostituiamo il contenuto del file <strong>App.js<\/strong> con il seguente codice:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nimport Header from '.\/Header';\nimport Footer from '.\/Footer';\nimport Posts from '.\/Posts'; \/\/ Import the Posts component\n\nexport default class App extends Component {\n    state = {\n        darkTheme: true,\n    };\n    toggleTheme = () =&gt; {\n        this.setState(prevState =&gt; ({\n            darkTheme: !prevState.darkTheme,\n        }));\n    };\n    render() {\n        const { darkTheme } = this.state;\n        return (\n            &lt;div&gt;\n                &lt;Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} \/&gt;\n                &lt;main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}&gt;\n                    &lt;Posts \/&gt; {\/* Render the Posts component *\/}\n                &lt;\/main&gt;\n\n                &lt;Footer darkTheme={darkTheme} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}<\/code><\/pre>\n<p>Ora possiamo controllare la versione pi\u00f9 recente e definitiva del tema. Oltre all&#8217;header e al footer, consiste in un&#8217;area di contenuto dinamico che presenta i post.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/fetch-data-react-wp-theme.png\" alt=\"La home page mostra il tema finale di WordPress basato su React, compresi i post.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">La home page mostra il tema WordPress finale basato su React, compresi i post.<\/figcaption><\/figure>\n<h2>Utilizzare il tema WordPress React in un progetto WordPress<\/h2>\n<p>L&#8217;integrazione di un tema basato su React in un progetto WordPress inizia con la trasformazione del codice React in un formato compatibile con WordPress, sfruttando pacchetti come <code>@wordpress\/scripts<\/code>. Questo strumento semplifica il processo di creazione, permettendo di compilare le applicazioni React in risorse statiche che WordPress pu\u00f2 richiedere.<\/p>\n<p>Creare il tema \u00e8 semplice grazie ai comandi npm forniti da <code>@wordpress\/scripts<\/code>. L&#8217;esecuzione di <code>npm run build<\/code> nella directory del tema compila il codice React in file JavaScript e CSS statici.<\/p>\n<p>Successivamente, questi file compilati vengono posizionati nella directory appropriata all&#8217;interno del tema, assicurando che WordPress possa caricare e renderizzare correttamente i componenti React come parte del tema. Una volta integrato, possiamo attivare il tema React per WordPress come attiviamo tutti gli altri, donando immediatamente al sito WordPress un&#8217;esperienza utente moderna e simile a quella di un&#8217;app.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Costruendo e integrando un tema in WordPress utilizzando le potenti funzionalit\u00e0 UI di React, potrete sbloccare il potenziale di creazione di esperienze web flessibili, altamente interattive e incentrate sull&#8217;utente.<\/p>\n<p>Se siete pronti a rendere operativi i vostri temi React per WordPress, Kinsta offre un <a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/\">servizio di hosting WordPress<\/a> gestito con un&#8217;infrastruttura sicura, un edge caching e altre funzioni che aumentano la velocit\u00e0 e le prestazioni del sito.<\/p>\n<p><em>State pensando di creare un tema WordPress con React? Condividete con noi i vostri consigli sul perch\u00e9 pensate che sia la soluzione migliore e su come procedere.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Questo articolo-tutorial sfrutta la flessibilit\u00e0 di WordPress e la potente interfaccia utente (UI) di React per lo sviluppo di temi. Dimostra come l&#8217;integrazione di WordPress e &#8230;<\/p>\n","protected":false},"author":199,"featured_media":77594,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26212,25957],"class_list":["post-77593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-temi-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 costruire un tema WordPress con React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come creare un tema WordPress con React, sfruttando le sue potenti caratteristiche come i componenti riutilizzabili e le richieste API.\" \/>\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\/tema-react-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come costruire un tema WordPress con React\" \/>\n<meta property=\"og:description\" content=\"Scopri come creare un tema WordPress con React, sfruttando le sue potenti caratteristiche come i componenti riutilizzabili e le richieste API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-09T13:36:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-10T10:54:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.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 creare un tema WordPress con React, sfruttando le sue potenti caratteristiche come i componenti riutilizzabili e le richieste API.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme-1024x512.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=\"13 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Come costruire un tema WordPress con React\",\"datePublished\":\"2024-05-09T13:36:06+00:00\",\"dateModified\":\"2024-05-10T10:54:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/\"},\"wordCount\":1829,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/\",\"name\":\"Come costruire un tema WordPress con React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg\",\"datePublished\":\"2024-05-09T13:36:06+00:00\",\"dateModified\":\"2024-05-10T10:54:25+00:00\",\"description\":\"Scopri come creare un tema WordPress con React, sfruttando le sue potenti caratteristiche come i componenti riutilizzabili e le richieste API.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#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 costruire un tema WordPress con React\"}]},{\"@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 costruire un tema WordPress con React - Kinsta\u00ae","description":"Scopri come creare un tema WordPress con React, sfruttando le sue potenti caratteristiche come i componenti riutilizzabili e le richieste API.","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\/tema-react-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Come costruire un tema WordPress con React","og_description":"Scopri come creare un tema WordPress con React, sfruttando le sue potenti caratteristiche come i componenti riutilizzabili e le richieste API.","og_url":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-05-09T13:36:06+00:00","article_modified_time":"2024-05-10T10:54:25+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Scopri come creare un tema WordPress con React, sfruttando le sue potenti caratteristiche come i componenti riutilizzabili e le richieste API.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme-1024x512.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Jeremy Holcombe","Tempo di lettura stimato":"13 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Come costruire un tema WordPress con React","datePublished":"2024-05-09T13:36:06+00:00","dateModified":"2024-05-10T10:54:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/"},"wordCount":1829,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/","name":"Come costruire un tema WordPress con React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg","datePublished":"2024-05-09T13:36:06+00:00","dateModified":"2024-05-10T10:54:25+00:00","description":"Scopri come creare un tema WordPress con React, sfruttando le sue potenti caratteristiche come i componenti riutilizzabili e le richieste API.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/05\/wordpress-react-theme.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/#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 costruire un tema WordPress con React"}]},{"@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\/77593","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=77593"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77593\/revisions"}],"predecessor-version":[{"id":77619,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77593\/revisions\/77619"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/translations\/nl"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77593\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/77594"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=77593"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=77593"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=77593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}