Met een headless WordPress-oplossing kunt u de voor- en achterkant van uw website volledig gescheiden houden. Met deze methode kunt u statische kopieën van uw website maken, waardoor de laadtijden bij het bezoeken van de website aanzienlijk worden verkort.
We zullen later in dit stuk bespreken hoe je headless WordPress kunt instellen en bouwen en hoe het werkt. Daarna begeleiden we u bij het maken van een basisconfiguratie die gebruikmaakt van Amazon Web Services om statische kopieën van uw website op te slaan en frameworks te gebruiken om headless WordPress in te stellen.
Wat betekent ‘headless WordPress’ precies?
Wanneer u uw site aanpast met behulp van het administratieve dashboard, ook wel de backend genoemd, ziet u de equivalente effecten op de frontend (wat betekent dat de livepagina's waar bezoekers toegang toe hebben). WordPress is verantwoordelijk voor zowel de achterkant als de voorkant van uw website wanneer u deze conventionele strategie gebruikt.
Als we het hebben over headless WordPress , hebben we het over een configuratie waarin je WordPress niet gebruikt om de voorkant van je website te produceren. Het is de regeling die we bedoelen als we het hebben over headless WordPress. In plaats daarvan is WordPress alleen verantwoordelijk voor de achterkant van de website. U kunt een statische website voor de front-end maken, een ander platform gebruiken dat via de API aan WordPress linkt, of WordPress gebruiken.
Hoe zet u een Headless WordPress-website op?
We gaan twee methoden delen om een headless WordPress-site op te zetten. Laten we eens kijken:
Methode 1: Hedless WordPress opbouwen met AWS en plug-ins
In principe kunt u een statische websiteversie hosten bij elke gewenste provider. Ter wille van deze demonstratie zullen we echter AWS gebruiken omdat het compatibel is met de plug-in die we zullen benadrukken. De eerste stappen worden hieronder voor u uiteengezet.
Stap 1. Maak een account aan bij AWS
Eerst moet u een account aanmaken bij AWS.
Beginnen met AWS vergt iets meer arbeid dan een conventionele webserver. Aan de andere kant kan het gebruik van dit platform resulteren in magere kosten voor statische websites. Het kan u iets meer dan een halve dollar per maand opleveren.
U moet de Amazon S3-laag kiezen, die 12 maanden gratis hosting biedt, om een headless WordPress-installatie op te zetten:
De website voor de S3-service van Amazon.
Het zou voor u niet al te moeilijk moeten zijn om uw account in te stellen; het enige wat u hoeft te doen is op de knop "Aan de slag met Amazon S3" te klikken en de benodigde informatie in te vullen in de daarvoor bestemde gebieden op het registratieformulier.
Houd er rekening mee dat op de knop Aanmelding voltooien staat in plaats van de standaardaanmelding wanneer u al bent aangemeld bij een Amazon-account. De procedure verloopt op dezelfde manier; U hoeft echter op geen enkel moment uw e-mailadres en inloggegevens opnieuw in te voeren.
Stap 2: Maak een replica van uw website in een statisch formaat.
Je zult WordPress nog steeds ergens moeten installeren om deze configuratie correct te laten werken. Hiermee kunt u WordPress gebruiken als de backend van uw website en statische inhoud voor de frontend maken. Een lokale WordPress-installatie is een alternatief dat kan worden gebruikt om te voorkomen dat u voor de diensten van twee afzonderlijke hostingproviders moet betalen.
Een lokale WordPress-website kan op verschillende manieren worden opgezet, waaronder de volgende:
- Met behulp van een programma als XAMPP een complete WordPress-instelling op je thuiscomputer ontwikkelen
- Het installeren van gelokaliseerde versies van WordPress kan worden bereikt met behulp van tools zoals Local by Flywheel.
- In dit specifieke scenario biedt Local by Flywheel een gebruiksvriendelijkere techniek. Download en installeer eerst het programma en maak een nieuwe website op uw lokale computer.
Pas daarna uw website aan en personaliseer deze op elke manier die u nodig acht. Zorg ervoor dat uw instellingen up-to-date zijn, kies een thema en begin met het schrijven van uw pagina's en artikelen. Nadat u een punt heeft bereikt waarop u er tevreden mee bent, kunt u een statische kopie maken die u voor de voorkant van uw website kunt gebruiken.
U kunt hetzelfde doen door een van de verschillende plug-ins te gebruiken. WP2Static is daarentegen compatibel met verschillende platforms, inclusief maar niet beperkt tot AWS, Netlify, GitHub Pages en nog veel meer.
Wanneer de plug-in voltooid is, heeft u toegang tot de instellingen door op het tabblad WP2Static op uw dashboard te klikken. Het opent rechtstreeks naar het tabblad met het label 'Statische website implementeren', en dat is precies waar u wilt zijn:
Vul in dit gebied het vak Bestemmings-URL in met de URL die gebruikers zullen opgeven om toegang te krijgen tot uw website (uw Amazon S3-configuratie zal dit bepalen). Kies daarna Amazon S3 uit het menu dat helemaal bovenaan het scherm verschijnt:
Om uw website te implementeren, moet u eerst een paar parameters aanmaken en vervolgens AWS aan uw website koppelen. Dit doe je in de volgende fase van het proces.
Stap 3: Publiceer automatisch statische pagina's naar Amazon Web Services
Wanneer u de Amazon S3-optie kiest, komen er nog veel meer velden voor u beschikbaar, waaronder de volgende:
Voordat u met het implementatieproces begint, moet u uw toegangssleutel-ID en geheime toegangssleutel invoeren. Houd er rekening mee dat de toegangssleutel-ID die u gebruikt de juiste machtigingsniveaus moet hebben om de implementatie te laten slagen. Het volgende is een korte tutorial die u door het proces leidt van het extraheren van beide sleutels uit uw AWS-account.
Methode 2: Headless WordPress bouwen met behulp van Frameworks
Het is tijd om te kijken naar de beste frameworks als je headless WordPress wilt opzetten. Hier zijn de drie belangrijkste raamwerken die u kunt gebruiken om uw headless WordPress-site op te zetten:
1. Reageren
React, een van de meest populaire raamwerken, is een gratis en open-source Javascript-bibliotheek voor de front-end waarmee ontwikkelaars krachtige gebruikersinterfaces kunnen bouwen. Enkele van de functies zijn onder meer JavaScript Syntax Extension (JSX), gegevensbinding in één richting, virtuele DOM, gebruik van componenten en levenscyclusmethoden
2. Fau st.js
Faust.js is het headless WordPress-framework dat zowel ontwikkelaars als uitgevers een set tools biedt om hen te helpen front-end-applicaties te bouwen met WordPress als het headless CMS. Dit raamwerk bestaat uit WordPress-plug-ins en een reeks npm-pakketten en ondersteunt Server Side Rendering en Static Generation.
3. Gatsby
Gatsby is een open-source statische sitegenerator. Gatsby is bovenop Node.js gebouwd met behulp van React en GraphQL. Het kan extreem snelle laadtijden bieden door statische HTML-, CSS- en Javascript-bestanden te genereren. Het raamwerk hecht enorm veel belang aan SEO en zorgt ervoor dat het voldoet aan de Core Web Vitals-beoordeling van Google.
U kunt deze populaire raamwerken ook gebruiken om headless WordPress te bouwen:
4. Volgende . js
5. Sintel
6. Frontiteit
7. Hoekig
8. jQuery
9. Vue.js
Optie 3: neem professionele hulp bij het opzetten van Headless WordPress!
Bepaalde websites kunnen niet profiteren van het gebruik van een headless WordPress-strategie. Aan de andere kant kan het overschakelen naar een statische front-end de snelheid en veiligheid van de site helpen verbeteren als uw website niet substantieel afhankelijk is van dynamische componenten. Daarnaast heb je waarschijnlijk lagere hostingkosten.
Wil je headless WordPress opzetten, maar ken je het installatieproces niet? Het creëren van uw eerste headless WordPress-project kan een lastige taak zijn. Maak je geen zorgen! Seahawk Media kan met het juiste team en de juiste tools een flexibele, multi-platform headless opstelling voor u creëren. Als je vragen hebt over hoe je aan de slag kunt gaan met headless WordPress of een van de hierboven besproken tools, neem dan professionele hulp van onze WordPress-experts. Ons deskundige team staat altijd klaar om u te helpen!
Ik hoop dat je deze handleiding over het opzetten van een headless WordPress leuk vond.
