{"id":59336,"date":"2024-05-14T10:38:22","date_gmt":"2024-05-14T08:38:22","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=59336&#038;preview=true&#038;preview_id=59336"},"modified":"2024-05-31T14:43:33","modified_gmt":"2024-05-31T12:43:33","slug":"wordpress-react-thema","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/","title":{"rendered":"Zo bouw je een WordPress thema met React"},"content":{"rendered":"<p>Dit praktische artikel maakt gebruik van de flexibiliteit <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-wordpress\/\">van WordPress<\/a> en de krachtige gebruikersinterface (UI) van <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a> voor het ontwikkelen van thema&#8217;s. Het laat zien hoe de integratie van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react\/\">WordPress en React<\/a> je WordPress projecten verbetert door je door de stappen te leiden die nodig zijn om een thema te maken.<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>Vereisten<\/h2>\n<p>Om dit artikel te kunnen volgen, moet je over het volgende beschikken:<\/p>\n<ul>\n<li>Een WordPress site. Kinsta biedt meerdere instellingsopties, waaronder <a href=\"https:\/\/kinsta.com\/local-development\/\">lokale ontwikkeling<\/a> met <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">DevKinsta<\/a>, een gebruiksvriendelijk <a href=\"https:\/\/kinsta.com\/nl\/mykinsta\/\">MyKinsta dashboard<\/a>, of programmatisch via de Kinsta API.<\/li>\n<li>Node.js en npm (<a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">Node Package Manager<\/a>) of yarn ge\u00efnstalleerd op je computer<\/li>\n<\/ul>\n<h2>Een basis WordPress themastructuur maken<\/h2>\n<p>Het maken van een WordPress themastructuur als basis bestaat uit het opzetten van een reeks bestanden en mappen die WordPress gebruikt om de stijlen, functionaliteiten en layouts van je thema toe te passen op een WordPress site.<\/p>\n<ol start=\"1\">\n<li>Ga naar de map van je site in je DevKinsta omgeving. Navigeer naar de map <strong>wp-content\/themes<\/strong>.<\/li>\n<li>Maak een nieuwe map voor je thema. De mapnaam moet uniek en beschrijvend zijn &#8211; bijvoorbeeld <strong>my-basic-theme<\/strong>.<\/li>\n<li>Maak in de themamap deze essenti\u00eble bestanden aan en laat ze voor nu leeg:\n<ul>\n<li><strong>style.css<\/strong> &#8211; Dit is het primaire stylesheetbestand. Het bevat ook de header-informatie voor je thema.<\/li>\n<li><strong>functions.php<\/strong> &#8211; Dit bestand definieert functies, klassen, acties en filters die door je thema worden gebruikt.<\/li>\n<li><strong>index.php<\/strong> &#8211; Dit is het belangrijkste templatebestand. Het is vereist voor alle thema&#8217;s.<\/li>\n<\/ul>\n<p>Als je React niet gebruikt, moet je de volgende bestanden ook maken. Maar met React zouden we er later componenten voor maken.<\/p>\n<ul>\n<li><strong>header.php<\/strong> &#8211; Bevat de headersectie van je site.<\/li>\n<li><strong>footer.php<\/strong> &#8211; Bevat het footergedeelte van je site.<\/li>\n<li><strong>sidebar.php<\/strong> &#8211; Voor de sidebarsectie, als je thema sidebars bevat.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Open vervolgens <strong>style.css<\/strong> en voeg het volgende toe bovenaan het bestand:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: My Basic Theme\nTheme URI: http:\/\/example.com\/my-basic-theme\/\nAuthor: Your Name\nAuthor URI: http:\/\/example.com\nDescription: A basic WordPress theme.\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: my-basic-theme\n*\/<\/code><\/pre>\n<p>Dit codefragment is de headersectie voor het <strong>style.css<\/strong> bestand van een WordPress thema en bevat essenti\u00eble metadata zoals de naam van het thema, de gegevens van de auteur, de versie en de licentie. Het helpt WordPress om het thema te herkennen en weer te geven in het <a href=\"https:\/\/kinsta.com\/blog\/wordpress-admin\/\">dashboard<\/a>, inclusief de beschrijving en tags voor categorisatie.<\/p>\n<h2>React integreren in WordPress<\/h2>\n<p>Door React te integreren in een WordPress thema kun je de op componenten gebaseerde architectuur van React gebruiken om dynamische, interactieve UI&#8217;s te bouwen binnen je WordPress site. Om React te integreren, gebruik je het <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\" target=\"_blank\" rel=\"noopener noreferrer\"> pakket @wordpress\/scripts<\/a>.<\/p>\n<p>Dit is een verzameling herbruikbare scripts op maat gemaakt voor WordPress ontwikkeling. WordPress biedt het aan om het configuratie- en bouwproces te vereenvoudigen, vooral bij het integreren van moderne <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> workflows, zoals React, in WordPress thema&#8217;s en plugins.<\/p>\n<p>Deze toolset verpakt veelvoorkomende taken, waardoor het gemakkelijker wordt om met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-javascript\/\">JavaScript<\/a> te ontwikkelen in het WordPress ecosysteem.<\/p>\n<h3>Je thema aanpassen<\/h3>\n<p>Nu je een basisstructuur voor WordPress thema&#8217;s hebt, kun je je thema aanpassen.<\/p>\n<ol start=\"1\">\n<li>Plak in de map van je thema de volgende code in het bestand <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>Het <strong>functions.php<\/strong> bestand integreert React met je WordPress thema. Het gebruikt <code>wp_enqueue_script<\/code> en <code>wp_enqueue_style<\/code> functies om JavaScript en <a href=\"https:\/\/kinsta.com\/nl\/blog\/css-best-practices\/\">CSS bestanden<\/a> (cascading style sheet) toe te voegen aan je thema.<\/p>\n<p>De <code>wp_enqueue_script<\/code> WordPress functie neemt verschillende argumenten aan:<\/p>\n<ul>\n<li>De handle naam (<code>'my-react-theme-app'<\/code>), die het script uniek identificeert<\/li>\n<li>Het pad naar het scriptbestand<\/li>\n<li>De array van dependencies, <code>array('wp-element')<\/code>, die aangeeft dat het script afhankelijk is van WordPress&#8217;s wrapper voor React <code>('wp-element')<\/code>.<\/li>\n<li>Het versienummer <code>('1.0.0')<\/code><\/li>\n<li>De positie <code>true<\/code>, die aangeeft dat het script in de footer van het HTML document moet worden geladen om de laadprestaties van de pagina te verbeteren<\/li>\n<\/ul>\n<p>De functie <code>wp_enqueue_style<\/code> neemt de volgende argumenten aan:<\/p>\n<ul>\n<li>De handle naam <code>'my-react-theme-style'<\/code>, die de stylesheet uniek identificeert<\/li>\n<li>De bron <code>get_stylesheet_uri()<\/code>, die de URL naar het hoofd stylesheet van het thema <strong>(style.css<\/strong>) teruggeeft en ervoor zorgt dat de stijlen van het thema worden toegepast<\/li>\n<\/ul>\n<ul>\n<li>Het <code>add_action<\/code> element, dat een aangepaste functie <code>'my_react_theme_scripts'<\/code> koppelt aan een specifieke actie (<code>'wp_enqueue_scripts'<\/code>). Dit zorgt ervoor dat je JavaScript en CSS correct worden geladen wanneer WordPress de pagina gaat renderen.<\/li>\n<\/ul>\n<p>Deze code zorgt ervoor dat het gecompileerde JavaScript bestand van je React app, dat zich bevindt in <strong>&lt;jouw-thema-directory&gt;\/build\/index.js<\/strong>, en het hoofd stylesheet van je thema samen met je thema worden geladen.<\/p>\n<p>De <strong>\/build directory<\/strong> is meestal afkomstig van het compileren van je React app met een tool als <code>create-react-app<\/code> of <a href=\"https:\/\/kinsta.com\/blog\/vite-vs-webpack\/\">webpack<\/a>, die je React code bundelt tot een productieklaar, geminificeerd JavaScript bestand.<\/p>\n<p>Deze opzet is essentieel voor het integreren van React functionaliteit in je WordPress thema, waardoor dynamische, app-achtige gebruikerservaringen mogelijk worden binnen een WordPress site.<\/li>\n<li>Werk vervolgens de inhoud van het bestand <strong>index.php<\/strong> bij:\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>De code in het <strong>index.php<\/strong> bestand definieert de basis HTML structuur van het WordPress thema, inclusief haken voor WordPress om de nodige headers (<code>wp_head<\/code>) en footers (<code>wp_footer<\/code>) in te voegen en een <code>div<\/code> met de ID <code>app<\/code> waar de React applicatie is gemonteerd.<\/li>\n<\/ol>\n<h3>React instellen met @wordpress\/scripts<\/h3>\n<ol start=\"1\">\n<li>Open je terminal en navigeer naar de map van je thema:\n<pre><code class=\"language-bash\">cd wp-content\/themes\/my-basic-theme\n<\/code><\/pre>\n<\/li>\n<li>Initialiseer een nieuw Node.js project:\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<\/li>\n<li>Installeer <code>@wordpress\/scripts<\/code> en <code>@wordpress\/element<\/code>:\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts @wordpress\/element --save-dev<\/code><\/pre>\n<p>Letop dat deze stap enkele minuten kan duren.<\/li>\n<li>Wijzig je <strong>package.json<\/strong> bestand om een <code>start<\/code> en een <code>build<\/code> script toe te voegen:\n<pre><code class=\"language-json\">\"scripts\": {\n  \"start\": \"wp-scripts start\",\n  \"build\": \"wp-scripts build\"\n},<\/code><\/pre>\n<p>Het <code>'@wordpress\/scripts'<\/code> wordt gebruikt om een ontwikkelingsserver te starten met hot reloading voor ontwikkelingsdoeleinden (<code>start<\/code>) en om de React-applicatie te compileren in statische assets voor productie (<code>build<\/code>).<\/li>\n<\/ol>\n<h3>Een React project maken<\/h3>\n<ol start=\"1\">\n<li>Maak een nieuwe map met de naam <strong>src<\/strong> voor je React bronbestanden binnen je thema.<\/li>\n<li>Maak in de map <strong>src<\/strong> twee nieuwe bestanden: <strong>index.js<\/strong> en <strong>App.js<\/strong>.<\/li>\n<li>Plaats de volgende code 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>Bovenstaande code importeert de <code>render<\/code> functie van <code>@wordpress\/element<\/code> en het <code>App<\/code> component. Vervolgens wordt de component <code>App<\/code> gekoppeld aan het Document Object Model (DOM).<\/li>\n<li>Plak deze code vervolgens in het bestand <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>Je thema voltooien en activeren<\/h3>\n<p>Om je thema te activeren:<\/p>\n<ol start=\"1\">\n<li>Start de ontwikkelserver met <code>npm start<\/code>.<\/li>\n<li>Activeer je nieuwe thema in het WordPress dashboard door te navigeren naar <strong>Appearance <\/strong>&gt; <strong>Themes<\/strong>, zoek je thema op en klik op <strong>Activate<\/strong>.<\/li>\n<li>Zorg ervoor dat het bouwproces van je React project goed is geconfigureerd voor uitvoer naar de juiste themamap, zodat WordPress je React componenten kan renderen.<\/li>\n<li>Bezoek de frontend van je WordPress site om de live wijzigingen te zien.<\/li>\n<\/ol>\n<figure 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=\"De homepage toont het nieuw aangemaakte op React gebaseerde WordPress thema met het bericht - Hello, WordPress and React.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">De homepage toont het nieuw aangemaakte op React gebaseerde WordPress thema met het bericht &#8211; Hello, WordPress and React.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Als je klaar bent om je thema te deployen, voer dan uit: <code>npm run build<\/code>. Dit commando compileert je React applicatie in statische assets in een build directory in de map van je thema.<\/p>\n<\/aside>\n\n<h2>React componenten ontwikkelen voor het thema<\/h2>\n<p>Volg vervolgens een component-gebaseerde aanpak om de basis React setup in je WordPress thema uit te breiden met specifieke componenten, zoals een header.<\/p>\n<h3>De header component maken<\/h3>\n<p>Maak in de <strong>src<\/strong> map van je thema een nieuw bestand voor de header component. Geef het een naam, zoals <strong>Header.js<\/strong>, en voeg de volgende code toe:<\/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>Deze code definieert een headercomponent met <code>'@wordpress\/element'<\/code> die de header dynamisch opmaakt op basis van <code>darkTheme prop<\/code>. Het bevat een knop om te wisselen tussen lichte en donkere thema&#8217;s door het callen van de <code>toggleTheme<\/code> method als een prop.<\/p>\n<h3>De footer component maken<\/h3>\n<p>Maak in de <strong>src-directory<\/strong> van je thema een nieuw bestand voor de footercomponent. Geef het een naam &#8211; bijvoorbeeld <strong>Footer.js<\/strong> &#8211; en voeg de volgende code toe:<\/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>Deze code definieert een footercomponent die een footer met dynamische styling weergeeft op basis van de <code>darkTheme<\/code> prop en het huidige jaar weergeeft.<\/p>\n<h3>Het bestand App.js bijwerken<\/h3>\n<p>Om gebruik te maken van de nieuwe header en footer vervang je de inhoud van het <strong>App.js<\/strong> bestand door de volgende code:<\/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>Het development build proces, dat let op wijzigingen en je code opnieuw compileert, zou nog steeds actief moeten zijn. Je laatste versie van de template zou er dus ongeveer zo uit moeten zien:<\/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=\"The home page shows a React-based WordPress theme including the header and footer\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">De startpagina met React gebaseerd WordPress thema inclusief header en footer.<\/figcaption><\/figure>\n<h2>Hoe om te gaan met WordPress data in React<\/h2>\n<p>Het integreren van WordPress content binnen React applicaties biedt een naadloze brug tussen de robuuste <a href=\"https:\/\/kinsta.com\/blog\/content-management-system\/\">content management<\/a> mogelijkheden van WordPress en het dynamische UI ontwerp van React. Dit is mogelijk met de WordPress REST API.<\/p>\n<p>Om toegang te krijgen tot de <a href=\"https:\/\/kinsta.com\/nl\/blog\/rest-api-wordpress\/\">WordPress REST API<\/a>, moet je deze inschakelen door de permalink instellingen bij te werken. Navigeer op het WordPress admin dashboard naar <b>Settings <\/b>&gt; <strong>Permalinks<\/strong>. Selecteer de optie <strong>Post name <\/strong>of een andere optie dan <b>Plain <\/b>en sla je wijzigingen op.<\/p>\n<p>Maak in de <strong>src-map<\/strong> van je thema een nieuw bestand met de naam <strong>Posts.js<\/strong> en voeg deze code toe:<\/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>De URL <code>fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')<\/code> kan iets anders zijn, afhankelijk van de deployment naam van WP &#8211; dat wil zeggen, de map waar je WP hebt ge\u00efnstalleerd. Je kunt ook de hostnaam van de site uit het DevKinsta dashboard nemen en het achtervoegsel <code>\/wp-json\/wp\/v2\/posts<\/code> toevoegen.<\/p>\n<p>Het component <code>Posts<\/code> is een uitstekend voorbeeld van deze integratie en demonstreert het proces van het ophalen en beheren van WordPress gegevens &#8211; met name berichten &#8211; met behulp van de WordPress REST API.<\/p>\n<p>Door een netwerkverzoek te initi\u00ebren binnen de levenscyclusmethode van het component, <code>componentDidMount<\/code>, haalt het component effici\u00ebnt berichten op van een WordPress site en slaat ze op in zijn status. Deze methode laat een patroon zien voor het dynamisch opnemen van WordPress gegevens, zoals pagina&#8217;s of aangepaste berichttypen, in React componenten.<\/p>\n<p>Om gebruik te maken van een nieuw component, vervang je de inhoud van het <strong>App.js<\/strong> bestand door de volgende code:<\/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>Je kunt nu de laatste en definitieve versie van je thema controleren. Naast de header en footer bestaat het uit een dynamisch contentgebied waarin de berichten worden gepresenteerd.<\/p>\n<figure 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=\"De homepage toont het definitieve op React gebaseerde WordPress thema, inclusief berichten.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">De homepage toont het definitieve op React gebaseerde WordPress thema, inclusief berichten.<\/figcaption><\/figure>\n<h2>Het React WordPress thema gebruiken in een WordPress project<\/h2>\n<p>Het integreren van een op React gebaseerd thema in een WordPress project begint met het transformeren van React code naar een WordPress compatibel format, door gebruik te maken van pakketten als <code>@wordpress\/scripts<\/code>. Deze tool vereenvoudigt het bouwproces, zodat je React applicaties kunt compileren tot statische assets die WordPress kan enqueuen.<\/p>\n<p>Het bouwen van het thema is eenvoudig met de npm-commando&#8217;s van <code>@wordpress\/scripts<\/code>. Door <code>npm run build<\/code> uit te voeren in de themamap wordt de React-code gecompileerd tot statische JavaScript- en CSS-bestanden.<\/p>\n<p>Vervolgens plaats je deze gecompileerde bestanden in de juiste map binnen het thema, zodat WordPress de React componenten correct kan laden en renderen als onderdeel van het thema. Eenmaal ge\u00efntegreerd kun je het React WordPress thema activeren zoals elk ander thema, waardoor de WordPress site direct een moderne, app-achtige gebruikerservaring krijgt.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Door een thema te bouwen en te integreren in WordPress met behulp van de krachtige UI-mogelijkheden van React, kun je het potentieel ontsluiten voor het maken van flexibele, zeer interactieve en gebruikersgerichte webervaringen.<\/p>\n<p>Als je klaar bent om je React WordPress thema&#8217;s live te zetten, biedt Kinsta een managed <a href=\"https:\/\/kinsta.com\/nl\/wordpress-hosting\/\">WordPress Hosting<\/a> dienst met een veilige infrastructuur, Edge Caching en andere features die de snelheid en prestaties van je site verbeteren.<\/p>\n<p><em>Overweeg je om een WordPress thema met React te bouwen? Deel dan je tips over waarom jij denkt dat dit het beste is en hoe je het moet aanpakken.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dit praktische artikel maakt gebruik van de flexibiliteit van WordPress en de krachtige gebruikersinterface (UI) van React voor het ontwikkelen van thema&#8217;s. Het laat zien hoe &#8230;<\/p>\n","protected":false},"author":199,"featured_media":59337,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[871,902],"class_list":["post-59336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-wordpress-themas"],"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>Zo bouw je een WordPress thema met React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer hoe je vanuit het niets een WordPress thema maakt met React door gebruik te maken van de krachtige features zoals herbruikbare componenten en API verzoeken.\" \/>\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\/nl\/blog\/wordpress-react-thema\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo bouw je een WordPress thema met React\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je vanuit het niets een WordPress thema maakt met React door gebruik te maken van de krachtige features zoals herbruikbare componenten en API verzoeken.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-14T08:38:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-31T12:43:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Leer hoe je vanuit het niets een WordPress thema maakt met React door gebruik te maken van de krachtige features zoals herbruikbare componenten en API verzoeken.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Zo bouw je een WordPress thema met React\",\"datePublished\":\"2024-05-14T08:38:22+00:00\",\"dateModified\":\"2024-05-31T12:43:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/\"},\"wordCount\":1849,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/\",\"name\":\"Zo bouw je een WordPress thema met React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg\",\"datePublished\":\"2024-05-14T08:38:22+00:00\",\"dateModified\":\"2024-05-31T12:43:33+00:00\",\"description\":\"Leer hoe je vanuit het niets een WordPress thema maakt met React door gebruik te maken van de krachtige features zoals herbruikbare componenten en API verzoeken.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress thema's\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-themas\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo bouw je een WordPress thema met React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo bouw je een WordPress thema met React - Kinsta\u00ae","description":"Leer hoe je vanuit het niets een WordPress thema maakt met React door gebruik te maken van de krachtige features zoals herbruikbare componenten en API verzoeken.","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\/nl\/blog\/wordpress-react-thema\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo bouw je een WordPress thema met React","og_description":"Leer hoe je vanuit het niets een WordPress thema maakt met React door gebruik te maken van de krachtige features zoals herbruikbare componenten en API verzoeken.","og_url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-05-14T08:38:22+00:00","article_modified_time":"2024-05-31T12:43:33+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Leer hoe je vanuit het niets een WordPress thema maakt met React door gebruik te maken van de krachtige features zoals herbruikbare componenten en API verzoeken.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme-1024x512.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Jeremy Holcombe","Geschatte leestijd":"13 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Zo bouw je een WordPress thema met React","datePublished":"2024-05-14T08:38:22+00:00","dateModified":"2024-05-31T12:43:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/"},"wordCount":1849,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/","url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/","name":"Zo bouw je een WordPress thema met React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg","datePublished":"2024-05-14T08:38:22+00:00","dateModified":"2024-05-31T12:43:33+00:00","description":"Leer hoe je vanuit het niets een WordPress thema maakt met React door gebruik te maken van de krachtige features zoals herbruikbare componenten en API verzoeken.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/05\/wordpress-react-theme.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-react-thema\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress thema's","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-themas\/"},{"@type":"ListItem","position":3,"name":"Zo bouw je een WordPress thema met React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/59336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=59336"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/59336\/revisions"}],"predecessor-version":[{"id":59528,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/59336\/revisions\/59528"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59336\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/59337"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=59336"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=59336"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=59336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}