WordPress is een van ’s werelds populairste content management systemen (CMS) en wordt gebruikt door 810 miljoen mensen – dat is 41% van het hele internet! Het is de keuze bij uitstek voor iedereen die snel een website wil bouwen, omdat het eenvoudig en gebruiksvriendelijk is, een groot aantal aanpassingsmogelijkheden biedt, en bovendien een sterk ecosysteem van plugins en andere tools heeft.
Een manier om het maximale uit WordPress te halen is door headless te gaan.
Een headless CMS, ook wel headless systeem genoemd, is een type backend CMS dat uitsluitend wordt gebruikt voor het beheren van content. Hiermee kun je inhoud integreren in elk systeem of website door simpelweg de de API’s van het headless CMS te callen.
De frontend moet dan echter apart worden beheerd. Hier komt een API om de hoek kijken.
Met API’s kunnen twee of meer verschillende applicaties gegevens uitwisselen. In dit geval wordt de API gebruikt om de gegevens van het CMS over te brengen naar een frontend website, wat meer flexibiliteit en snellere prestaties oplevert.
In dit artikel onderzoeken we wat een headless CMS is, waarom je er een zou willen bouwen, en hoe je er een instelt voor WordPress.
Wat is headless WordPress?
Een headless WordPress website is een type site dat voornamelijk WordPress gebruikt als CMS, een afkorting voor content management system, en andere frontend technologieën gebruikt zoals React of Vue voor de voorkant.
De JavaScript bibliotheken en frameworks worden gebruikt om de content van de website weer te geven. Een headless WordPress heeft dus een aparte frontend en backend, en voor de communicatie wordt een API gebruikt.
Eenvoudiger gezegd betekent een headless architectuur dat het CMS alleen gebruikt wordt voor het opslaan en beheren van je content, en dat het zich niets aantrekt van de voorkant van de website.
De hoofdtaak van de frontend daarentegen is het weergeven van de content, en het maakt niet uit waar de inhoud wordt opgeslagen of beheerd, zolang het er maar bij kan.
Een headless WordPress heeft betere prestaties omdat de frontend verzoeken worden afgehandeld door snellere technologieën zoals React, en alleen de backend wordt beheerd door WordPress. De scheiding van frontend en backend maakt het mogelijk om componenten onafhankelijk van elkaar te schalen.
Voordelen en nadelen van headless WordPress
Zoals bij alle ontwikkelingsopties zijn er zowel voor- als nadelen aan het gaan met een headless WordPress oplossing. Het is belangrijk om beide te begrijpen voordat je een beslissing neemt.
Voordelen van Headless WordPress
Enkele van de belangrijkste voordelen van een headless WordPress implementatie zijn de volgende:
- Flexibiliteit: Headless WordPress stelt developers in staat om aangepaste frontend ervaringen te creëren zonder beperkt te worden door het traditionele WordPress thema systeem. Dit betekent dat je unieke gebruikersinterfaces en ervaringen kunt creëren voor specifieke behoeften.
- Prestaties: Het scheiden van de frontend en de backend van een WordPress site kan ervoor zorgen dat je website sneller laadt en beter presteert, omdat de server alleen gegevens levert via een API, in plaats van ook HTML te renderen voor elk verzoek.
- Beveiliging: Door de frontend en backend te scheiden kan headless WordPress een extra beveiligingslaag bieden door de toegang tot de onderliggende WordPress codebase en database te beperken.
Nadelen van headless WordPress
De nadelen van headless WordPress kunnen zijn:
- Gebrek aan thema’s: Omdat headless WordPress niet vertrouwt op vooraf gebouwde thema’s, zul je zelf aangepaste thema’s moeten maken. Dit kan tijdrovend zijn en extra middelen vereisen.
- Kosten: Het ontwikkelen van een headless WordPress site kan duurder zijn dan een traditionele WordPress site, omdat het meer technische expertise en middelen vereist om op te zetten en te onderhouden.
- Pluginbeperkingen: Sommige WordPress plugins werken mogelijk niet met headless WordPress, omdat ze afhankelijk zijn van WordPress thema’s om goed te functioneren.
Wat is de WordPress REST API?
De WordPress REST API wordt gebruikt als interface tussen de backend en frontend. Met de API kunnen gemakkelijk gegevens van de site worden verzonden of opgehaald, omdat de API controletoegang heeft tot de gegevens van de site. Het zorgt er ook voor dat alleen bevoegde gebruikers ermee kunnen interageren.
De API kan een groot aantal gegevensformaten ondersteunen, waaronder JSON, wat de interactie met het systeem vergemakkelijkt.
WordPress REST API is een krachtig hulpmiddel voor developers om gegevens aan te maken, bij te werken of te verwijderen, naast het creëren van aangepaste functionaliteit voor sites of het integreren met een andere dienst. Bovendien zijn er plugins beschikbaar die de functionaliteit van de API uitbreiden, zoals het integreren van extra authenticatiemethoden.
Wat is React?
React is een JavaScript bibliotheek voor het bouwen van gebruikersinterfaces. Het is een open-source, herbruikbare, op componenten gebaseerde frontend bibliotheek waarmee developers user interface (UI) componenten kunnen bouwen met declaratieve syntaxis.
React creëert een interactieve UI en rendert de componenten wanneer de gegevens veranderen. De bibliotheek is zeer populair bij developers die complexe, herbruikbare componenten willen maken, de state efficiënt willen beheren en de gebruikersinterface gemakkelijk in real time willen bijwerken.
De sterke developerscommunity van React heeft een reeks tools, bibliotheken en hulpmiddelen gecreëerd om de functionaliteit van de bibliotheek te verbeteren. Veel organisaties en bedrijven gebruiken React als hun technologie voor het bouwen van complexe, dynamische en snel presterende webapplicaties.
Waarom React gebruiken?
React biedt vele voordelen die het een uitstekende keuze maken voor het ontwikkelen van complexe en dynamische webapplicaties.
Hier zijn enkele van de belangrijkste voordelen van het gebruik van React:
- Declaratieve syntaxis: React gebruikt een declaratieve benadering voor het bouwen van UI componenten, waardoor het gemakkelijk is om herbruikbare en zeer efficiënte componenten te maken.
- Grote gemeenschap en ecosysteem: React heeft een grote en actieve gemeenschap van developers, wat heeft geleid tot de creatie van een breed scala aan tools en bibliotheken om de functionaliteit ervan te verbeteren.
- Virtual DOM: React gebruikt virtual DOM om de UI in real-time bij te werken. Dit betekent dat wanneer de state verandert, het alleen de onderdelen bijwerkt die gewijzigd moeten worden, in plaats van de hele pagina opnieuw te renderen.
- Herbruikbaarheid: React.js biedt herbruikbare componenten die in verschillende toepassingen kunnen worden gebruikt, wat de ontwikkelingstijd en -inspanning aanzienlijk vermindert.
Zo maak je een Headless WordPress Site met React
Nu is het tijd om onze handen vuil te maken en te leren hoe we een headless WordPress site met React kunnen maken en deployen.
Blijf lezen om alles te weten te komen.
Voorwaarden
Voordat je met deze tutorial begint, moet je ervoor zorgen dat je beschikt over:
- Een goed begrip van React
- Node.js v14 of hoger geïnstalleerd hebt op je machine
Stap 1: Zet een WordPress website op
Laten we beginnen met het opzetten van de WordPress website, want die zal dienen als databron voor de React applicatie. Als je al een WordPress website hebt opgezet, kun je dit gedeelte overslaan; anders kun je gewoon doorgaan.
In deze handleiding gebruiken we DevKinsta, een veelgebruikte snelle en betrouwbare lokale ontwikkelomgeving voor het maken, ontwikkelen en deployen van WordPress sites. Het is volledig gratis te gebruiken – download het van de officiële website en installeer het op je systeem.
Zodra de installatie voltooid is, open je het DevKinsta dashboard en klik je op New WordPress site om een nieuwe WordPress site te maken.
Vul de vereiste gegevens in en druk op de knop Create site om verder te gaan.
Dit kan een paar minuten duren, maar als je website eenmaal gemaakt is, kun je hem en zijn beheerderspaneel openen door respectievelijk op “Open site” of WP Admin opties te klikken.
Om vervolgens de JSON API in te schakelen, moet je de permalinks van je website bijwerken.
Klik in het WordPress admindashboard op Settings, gevolgd door Permalinks. Kies de optie Post name en klik op Save changes.
Je kunt ook tools als Postman gebruiken om eenvoudig verzoeken naar WordPress REST API’s te testen en te versturen.
Stap 2: Zet een React Applicatie op
Nu we onze WordPress website hebben opgezet, kunnen we aan de voorkant gaan werken. Zoals gezegd gebruiken we in deze tutorial React voor de voorkant van onze applicatie.
Om te beginnen voer je de onderstaande code uit in je terminal om een React applicatie te maken.
npm create vite@latest my-blog-app
cd my-blog-app
npm installDe bovenstaande commando’s zullen een React applicatie maken en de vereiste dependencies installeren.
We moeten ook Axios installeren, een JavaScript bibliotheek voor het doen van HTTP verzoeken. Voer het onderstaande commando uit om het te installeren.
npm install axiosOm nu de ontwikkelingsserver te starten, kun je in de terminal npm run dev uitvoeren. De server zou dan je app moeten initialiseren op http://127.0.0.1:5173.
Open vervolgens je project in je favoriete code editor en verwijder alle onnodige bestanden die je niet nodig hebt, zoals de assets map, index.css en app.css.
Je kunt ook de code binnen main.jsx en App.jsx vervangen door de volgende code:
// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)// App.jsx
import React from 'react'
export default function App() {
return (
<App />
)
}Stap 3: Haal de berichten op uit WordPress
Nu is het tijd om de berichten van onze WordPress website op te halen.
Voeg in de App.jsx de onderstaande state toe en importeer <code>useState</code> van React:
const [posts, setPosts] = useState([])useState is een ingebouwde hook in React die wordt gebruikt om states toe te voegen aan een component, een states die verwijst naar data of een property.
posts wordt gebruikt om de data uit de state te halen, en setPosts wordt gebruikt om nieuwe data toe te voegen aan post. We hebben ook standaard een lege array doorgegeven aan state.
Voeg vervolgens de volgende code toe na de state om de posts op te halen uit de WordPress REST API:
const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])Bovenstaande code voert de fetchPosts() functie uit bij het laden van de pagina. Binnen de fetchPosts() functie sturen we een GET verzoek naar de WordPress API met behulp van Axios om berichten op te halen en vervolgens op te slaan in de state die we eerder hebben aangegeven.
Stap 4: Maak een blog component aan
Maak in de hoofdmap een nieuwe map genaamd components, en maak daarin twee nieuwe bestanden: blog.jsx en blog.css.
Voeg eerst de volgende code toe aan blog.jsx:
import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedimage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedimage(response.data.source_url);
});
};
useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}In bovenstaande code hebben we een kaartcomponent gemaakt die de eigenschap posts aanneemt die de informatie over de blogpost bevat uit de WordPress API.
In de functie getImage() gebruiken we Axios om de URL van de uitgelichte afbeelding op te halen en die informatie vervolgens op te slaan in state.
Vervolgens hebben we een useEffect hook toegevoegd om de getImage() functie te callen zodra de component is gemount. We hebben ook een return statement toegevoegd waarin we de postdata, titel, excerpt en afbeelding renderen.
Voeg vervolgens de onderstaande stijlen toe aan het bestand blog.css:
@import url("https://fonts.googleapis.com/css?family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}
.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}
.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}Voeg vervolgens in het App.jsx bestand de volgende code toe in het return statement om het blog component te renderen:
<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;Tot slot moet je App.jsx er zo uitzien:
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("http://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}
useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}Sla het bestand op en ververs je browsertabblad. Nu zou je je blogberichten op de pagina moeten kunnen zien.
Samenvatting
Headless WordPress biedt een geweldige manier om snel presterende websites te maken met een schaalbare architectuur. Met het gebruik van React en de WordPress REST API is het eenvoudiger dan ooit om dynamische en interactieve websites te maken met WordPress als content management system.
Net zo belangrijk voor de snelheid is waar je je WordPress site host. Kinsta is uniek gepositioneerd om een bliksemsnelle WordPress hostingervaring te bieden met top-of-the-line Google C2 machines op hun Premium Tier Netwerk, plus een Cloudflare integratie om je site te beschermen tegen gegevensverlies en kwaadaardige aanvallen.
Heb jij een headless WordPress website met React gebouwd – of ben je van plan dat te doen? Laat het ons weten in de commentsectie hieronder!
Suhail is een software developer gespecialiseerd in full-stack web en mobiele applicatie ontwikkeling. Hij is een actieve contributor aan open-source projecten en bouwt graag Web3 applicaties.
Laat een reactie achter