WebMade | Een headless Wordpress installatie opzetten

28/01/2023

niels v.
0

Een headless WordPress installatie opzetten

WordPress bevat tal van opties voor uitbreiding met behulp van gratis of betalende plug-ins en thema’s. Dit kan WordPress vrij log maken en moeilijk te beheren in de front-end. Bovendien is het ook moeilijk om de verschillende stukken front-end code met elkaar in verbinding te brengen. Een mogelijke oplossing is een headless WordPress installatie.

Headless WordPress

Bij een headless wordpress systeem verzorg je zelf de front-end in de plaats van WordPress. Het laat je toe om het CMS systeem te combineren met je favoriete front-end framework. Er wordt met de back-end gecommuniceerd via de WordPress Rest API, hetgeen meer opties biedt met betrekking tot het dynamisch inladen of ‘lazy-loaden’ van content.

Voordelen van headless

1. Gescheiden beheer

De back-end en de front-end zijn duidelijk van elkaar gescheiden en kunnen apart worden beheerd. Elk kan worden ingewisseld voor een ander framework of CMS. Bovendien is het gemakkelijker om te zien waar een fout juist vandaan komt.

2. Mee met de laatste (front-end) technologieën

Helemaal weg van React, Angular of een ander framework? Deze zijn eenvoudig op te zetten en te integreren met een headless WordPress installatie. Met npm zijn de dependencies met bepaalde libraries ook gemakkelijk en centraal te beheren. U bent verder niet gedwongen om met bepaalde WordPress dependency frameworks, zoals JQuery, te werken.

3.Testing

Een gewone WordPress installatie biedt out-of-the-box geen mogelijkheid om de front-end code te testen. De back-end biedt die mogelijkheid wel, met PHPUnit. Met een headless installatie kan u een front-end testing framework naar wens gebruiken.

4. Snelheid

Wordpress heeft een overaanbod aan trage plug-ins/thema’s. Het combineren van deze kan leiden tot lange laadtijden. Dit kan u vermijden met een headless installatie.

Nadelen van headless

1. Arbeidsintensief

Er is meer ontwikkeltijd nodig voor het opzetten en beheren van een headless installatie. Bovendien is er ook meer serverinfrastructuur nodig voor het opzetten en het beheren van meerdere instances.

2. Gebruiksgemak

Het grote voordeel aan WordPress is haar gebruiksgemak. Het is voor ontwikkelaars, medewerkers of klanten gemakkelijker om te zien hoe de installatie in elkaar zit.

Voorbeeld: een lokale headless WordPress omgeving opzetten

In dit voorbeeld gaan we een eenvoudige lokale headless WordPress installatie configureren. Langs de front-end maak ik gebruik van een WordPress + React starterkit van Postsight. Voor het opzetten van de webserver maak ik voor het gemak gebruik van Local. Local by Flywheel kan je hier installeren. Na het installeren van Local volg je de volgende stappen:

Klik ‘Add local site’ om een nieuwe WordPress instance te installeren. Klik vervolgens op ‘Start site’ om de webserver te starten en ga naar het ‘wp-admin’-gedeelte van de website.
Installeer de volgende plug-ins:
- ACF to REST API
- Advanced Custom Fields
- JWT Authentication for WP-API
- WP-REST-API V2 Menus
Download deze WordPress headless Starter Github repository
Vervang de wp-content folder door deze uit de repository
Voeg de ‘frontend’ folder uit de repository toe aan de project root
Open je terminal en navigeer naar de ‘frontend’ folder
Voer volgende commando’s in: yarn && yarn start
Wanneer u naar localhost:3000 surft, heeft u toegang tot de front-end server.

Heeft u hulp nodig met uw WordPress installatie? Neem contact met ons op.
Niels Vermeiren, WebMade