Dit praktische artikel maakt gebruik van de flexibiliteit van WordPress en de krachtige gebruikersinterface (UI) van React voor het ontwikkelen van thema’s. Het laat zien hoe de integratie van WordPress en React je WordPress projecten verbetert door je door de stappen te leiden die nodig zijn om een thema te maken.

Vereisten

Om dit artikel te kunnen volgen, moet je over het volgende beschikken:

Een basis WordPress themastructuur maken

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.

  1. Ga naar de map van je site in je DevKinsta omgeving. Navigeer naar de map wp-content/themes.
  2. Maak een nieuwe map voor je thema. De mapnaam moet uniek en beschrijvend zijn – bijvoorbeeld my-basic-theme.
  3. Maak in de themamap deze essentiële bestanden aan en laat ze voor nu leeg:
    • style.css – Dit is het primaire stylesheetbestand. Het bevat ook de header-informatie voor je thema.
    • functions.php – Dit bestand definieert functies, klassen, acties en filters die door je thema worden gebruikt.
    • index.php – Dit is het belangrijkste templatebestand. Het is vereist voor alle thema’s.

    Als je React niet gebruikt, moet je de volgende bestanden ook maken. Maar met React zouden we er later componenten voor maken.

    • header.php – Bevat de headersectie van je site.
    • footer.php – Bevat het footergedeelte van je site.
    • sidebar.php – Voor de sidebarsectie, als je thema sidebars bevat.

Open vervolgens style.css en voeg het volgende toe bovenaan het bestand:

/*
Theme Name: My Basic Theme
Theme URI: http://example.com/my-basic-theme/
Author: Your Name
Author URI: http://example.com
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-background
Text Domain: my-basic-theme
*/

Dit codefragment is de headersectie voor het style.css bestand van een WordPress thema en bevat essentiële 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 dashboard, inclusief de beschrijving en tags voor categorisatie.

React integreren in WordPress

Door React te integreren in een WordPress thema kun je de op componenten gebaseerde architectuur van React gebruiken om dynamische, interactieve UI’s te bouwen binnen je WordPress site. Om React te integreren, gebruik je het pakket @wordpress/scripts.

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 JavaScript workflows, zoals React, in WordPress thema’s en plugins.

Deze toolset verpakt veelvoorkomende taken, waardoor het gemakkelijker wordt om met JavaScript te ontwikkelen in het WordPress ecosysteem.

Je thema aanpassen

Nu je een basisstructuur voor WordPress thema’s hebt, kun je je thema aanpassen.

  1. Plak in de map van je thema de volgende code in het bestand functions.php : 
    <?php
function my_react_theme_scripts() {
    wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true);
    wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'my_react_theme_scripts');

    Het functions.php bestand integreert React met je WordPress thema. Het gebruikt wp_enqueue_script en wp_enqueue_style functies om JavaScript en CSS bestanden (cascading style sheet) toe te voegen aan je thema.

    De wp_enqueue_script WordPress functie neemt verschillende argumenten aan:

    • De handle naam ('my-react-theme-app'), die het script uniek identificeert
    • Het pad naar het scriptbestand
    • De array van dependencies, array('wp-element'), die aangeeft dat het script afhankelijk is van WordPress’s wrapper voor React ('wp-element').
    • Het versienummer ('1.0.0')
    • De positie true, die aangeeft dat het script in de footer van het HTML document moet worden geladen om de laadprestaties van de pagina te verbeteren

    De functie wp_enqueue_style neemt de volgende argumenten aan:

    • De handle naam 'my-react-theme-style', die de stylesheet uniek identificeert
    • De bron get_stylesheet_uri(), die de URL naar het hoofd stylesheet van het thema (style.css) teruggeeft en ervoor zorgt dat de stijlen van het thema worden toegepast
    • Het add_action element, dat een aangepaste functie 'my_react_theme_scripts' koppelt aan een specifieke actie ('wp_enqueue_scripts'). Dit zorgt ervoor dat je JavaScript en CSS correct worden geladen wanneer WordPress de pagina gaat renderen.

    Deze code zorgt ervoor dat het gecompileerde JavaScript bestand van je React app, dat zich bevindt in <jouw-thema-directory>/build/index.js, en het hoofd stylesheet van je thema samen met je thema worden geladen.

    De /build directory is meestal afkomstig van het compileren van je React app met een tool als create-react-app of webpack, die je React code bundelt tot een productieklaar, geminificeerd JavaScript bestand.

    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.

  2. Werk vervolgens de inhoud van het bestand index.php bij: 
    <!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <div id="app"></div>
    <?php wp_footer(); ?>
</body>
</html>

    De code in het index.php bestand definieert de basis HTML structuur van het WordPress thema, inclusief haken voor WordPress om de nodige headers (wp_head) en footers (wp_footer) in te voegen en een div met de ID app waar de React applicatie is gemonteerd.

React instellen met @wordpress/scripts

  1. Open je terminal en navigeer naar de map van je thema: 
    cd wp-content/themes/my-basic-theme
  2. Initialiseer een nieuw Node.js project: 
    npm init -y
  3. Installeer @wordpress/scripts en @wordpress/element: 
    npm install @wordpress/scripts @wordpress/element --save-dev

    Letop dat deze stap enkele minuten kan duren.

  4. Wijzig je package.json bestand om een start en een build script toe te voegen: 
    "scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
},

    Het '@wordpress/scripts' wordt gebruikt om een ontwikkelingsserver te starten met hot reloading voor ontwikkelingsdoeleinden (start) en om de React-applicatie te compileren in statische assets voor productie (build).

Een React project maken

  1. Maak een nieuwe map met de naam src voor je React bronbestanden binnen je thema.
  2. Maak in de map src twee nieuwe bestanden: index.js en App.js.
  3. Plaats de volgende code in index.js: 
    import { render } from '@wordpress/element';
import App from './App';
render(, document.getElementById('app'))

    Bovenstaande code importeert de render functie van @wordpress/element en het App component. Vervolgens wordt de component App gekoppeld aan het Document Object Model (DOM).

  4. Plak deze code vervolgens in het bestand App.js: 
    import { Component } from '@wordpress/element';
export default class App extends Component {
  render() {
    return (
      <div> 
        <h1>Hello, WordPress and React!</h1>
        {/* Your React components will go here */}
      </div>
);
    }
}

Je thema voltooien en activeren

Om je thema te activeren:

  1. Start de ontwikkelserver met npm start.
  2. Activeer je nieuwe thema in het WordPress dashboard door te navigeren naar Appearance > Themes, zoek je thema op en klik op Activate.
  3. 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.
  4. Bezoek de frontend van je WordPress site om de live wijzigingen te zien.
De homepage toont het nieuw aangemaakte op React gebaseerde WordPress thema met het bericht - Hello, WordPress and React.
De homepage toont het nieuw aangemaakte op React gebaseerde WordPress thema met het bericht – Hello, WordPress and React.

React componenten ontwikkelen voor het thema

Volg vervolgens een component-gebaseerde aanpak om de basis React setup in je WordPress thema uit te breiden met specifieke componenten, zoals een header.

De header component maken

Maak in de src map van je thema een nieuw bestand voor de header component. Geef het een naam, zoals Header.js, en voeg de volgende code toe:

import { Component } from '@wordpress/element';
class Header extends Component {
    render() {
        const { toggleTheme, darkTheme } = this.props;
        const headerStyle = {
            backgroundColor: darkTheme ? '#333' : '#EEE',
            color: darkTheme ? 'white' : '#333',
            padding: '10px 20px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
        };
        return (
            <header style={headerStyle}>
                <div>My WP Theme</div>
                <button onClick={toggleTheme}>{darkTheme ? 'Light Mode' : 'Dark Mode'}</button>
            </header>
        );
    }
}
export default Header;

Deze code definieert een headercomponent met '@wordpress/element' die de header dynamisch opmaakt op basis van darkTheme prop. Het bevat een knop om te wisselen tussen lichte en donkere thema’s door het callen van de toggleTheme method als een prop.

De footer component maken

Maak in de src-directory van je thema een nieuw bestand voor de footercomponent. Geef het een naam – bijvoorbeeld Footer.js – en voeg de volgende code toe:

import { Component } from '@wordpress/element';
class Footer extends Component {
    render() {
        const { darkTheme } = this.props;
        const footerStyle = {
            backgroundColor: darkTheme ? '#333' : '#EEE',
            color: darkTheme ? 'white' : '#333',
            padding: '20px',
            textAlign: 'center',
        };
        return (
            <footer> style={footerStyle}>
                © {new Date().getFullYear()} My WP Theme
            </footer>
        );
    }
}
export default Footer;

Deze code definieert een footercomponent die een footer met dynamische styling weergeeft op basis van de darkTheme prop en het huidige jaar weergeeft.

Het bestand App.js bijwerken

Om gebruik te maken van de nieuwe header en footer vervang je de inhoud van het App.js bestand door de volgende code:

import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
export default class App extends Component {
    state = {
        darkTheme: true,
    };
    toggleTheme = () => {
        this.setState(prevState => ({
            darkTheme: !prevState.darkTheme,
        }));
    };
    render() {
        const { darkTheme } = this.state;
        return (
            <div>
                <Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
                <main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>               
                </main>
                <Footer darkTheme={darkTheme} />
            </div>
        );
    }
}

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:

The home page shows a React-based WordPress theme including the header and footer
De startpagina met React gebaseerd WordPress thema inclusief header en footer.

Hoe om te gaan met WordPress data in React

Het integreren van WordPress content binnen React applicaties biedt een naadloze brug tussen de robuuste content management mogelijkheden van WordPress en het dynamische UI ontwerp van React. Dit is mogelijk met de WordPress REST API.

Om toegang te krijgen tot de WordPress REST API, moet je deze inschakelen door de permalink instellingen bij te werken. Navigeer op het WordPress admin dashboard naar Settings > Permalinks. Selecteer de optie Post name of een andere optie dan Plain en sla je wijzigingen op.

Maak in de src-map van je thema een nieuw bestand met de naam Posts.js en voeg deze code toe:

import { Component } from '@wordpress/element';
class Posts extends Component {
    state = {
        posts: [],
        isLoading: true,
        error: null,
    };
    componentDidMount() {
        fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Something went wrong');
                }
                return response.json();
            })
            .then(posts => this.setState({ posts, isLoading: false }))
            .catch(error => this.setState({ error, isLoading: false }));
    }
    render() {
        const { posts, isLoading, error } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>;
        }
        if (isLoading) {
            return <div>Loading...</div>;
        }
        return (
            <div>
                {posts.map(post => (
                    <article key={post.id}>
                        <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
                        <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
                    </article>
                ))}
            </div>
        );
    }
}
export default Posts;

De URL fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') kan iets anders zijn, afhankelijk van de deployment naam van WP – dat wil zeggen, de map waar je WP hebt geïnstalleerd. Je kunt ook de hostnaam van de site uit het DevKinsta dashboard nemen en het achtervoegsel /wp-json/wp/v2/posts toevoegen.

Het component Posts is een uitstekend voorbeeld van deze integratie en demonstreert het proces van het ophalen en beheren van WordPress gegevens – met name berichten – met behulp van de WordPress REST API.

Door een netwerkverzoek te initiëren binnen de levenscyclusmethode van het component, componentDidMount, haalt het component efficiënt 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’s of aangepaste berichttypen, in React componenten.

Om gebruik te maken van een nieuw component, vervang je de inhoud van het App.js bestand door de volgende code:

import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
import Posts from './Posts'; // Import the Posts component

export default class App extends Component {
    state = {
        darkTheme: true,
    };
    toggleTheme = () => {
        this.setState(prevState => ({
            darkTheme: !prevState.darkTheme,
        }));
    };
    render() {
        const { darkTheme } = this.state;
        return (
            <div>
                <Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
                <main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
                    <Posts /> {/* Render the Posts component */}
                </main>

                <Footer darkTheme={darkTheme} />
            </div>
        );
    }
}

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.

De homepage toont het definitieve op React gebaseerde WordPress thema, inclusief berichten.
De homepage toont het definitieve op React gebaseerde WordPress thema, inclusief berichten.

Het React WordPress thema gebruiken in een WordPress project

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 @wordpress/scripts. Deze tool vereenvoudigt het bouwproces, zodat je React applicaties kunt compileren tot statische assets die WordPress kan enqueuen.

Het bouwen van het thema is eenvoudig met de npm-commando’s van @wordpress/scripts. Door npm run build uit te voeren in de themamap wordt de React-code gecompileerd tot statische JavaScript- en CSS-bestanden.

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ïntegreerd kun je het React WordPress thema activeren zoals elk ander thema, waardoor de WordPress site direct een moderne, app-achtige gebruikerservaring krijgt.

Samenvatting

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.

Als je klaar bent om je React WordPress thema’s live te zetten, biedt Kinsta een managed WordPress Hosting dienst met een veilige infrastructuur, Edge Caching en andere features die de snelheid en prestaties van je site verbeteren.

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.

Jeremy Holcombe Kinsta

Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).