De gevorderde WordPress ontwikkelaar zal vast en zeker eens de term ‘endpoint’ tegen gekomen zijn binnen WordPress. Met de WordPress endpoints API is het mogelijk om eenvoudige ‘rewrite rules’ toe te voegen voor het afhandelen van de normale WordPress URL’s met een beetje extra aan het einde van de URL. Je kunt bijvoorbeeld een endpoint ‘fotos’ toevoegen aan de WordPress berichten URL’s om alle foto’s van een bericht te tonen: example.com/mijn-bericht/fotos. Jon Cave heeft in 2012 in het bericht “Rewrite endpoints API” uitgelegd hoe dit werkt. In dit bericht lees je hoe je custom endpoints kunt verwerken in het “Breadcrumb NavXT” broodkruimelpad.
Custom endpoints voorbeelden
Voordat we de code induiken zal ik nog een aantal voorbeelden geven waar de custom endpoints API voor ingezet kan worden. In de introductie gaf ik al aan dat je een custom endpoint kunt inzetten om de foto’s gekoppeld aan een bericht beschikbaar te stellen via een unieke URL. Er zijn echter nog talloze andere toepassingen voor te bedenken. Zo gebruikt de WordPress AMP plugin de endpoint amp om een mobiel geoptimaliseerde versie van een WordPress bericht/pagina te tonen (bijvoorbeeld example.com/mijn-bericht/amp). En het embedden van WordPress berichten werkt met de endpoint embed (bijvoorbeeld example.com/mijn-bericht/embed). Hieronder nog een aantal voorbeelden waar je custom endpoints voor kunt inzetten:
Custom post type ‘woning’
Binnen veel WordPress makelaar websites is een custom post type ‘woning’ gedefinieerd zodat de makelaar zijn aanbod kan publiceren. Per woning kunnen er vaak allerlei kenmerken en details ingevoerd worden en soms kan dit niet op één pagina getoond worden. Met custom endpoints per onderdeel kan dit eenvoudig opgesplitst worden, bijvoorbeeld via de volgende URL structuur:
- makelaar.example.com/woningen/
- makelaar.example.com/woningen/straat-1-drachten/
- makelaar.example.com/woningen/straat-1-drachten/kenmerken/
- makelaar.example.com/woningen/straat-1-drachten/beschrijving/
- makelaar.example.com/woningen/straat-1-drachten/fotos/
- makelaar.example.com/woningen/straat-1-drachten/fotos/hal/
- makelaar.example.com/woningen/straat-1-drachten/fotos/badkamer/
- makelaar.example.com/woningen/straat-1-drachten/videos/
- makelaar.example.com/woningen/straat-1-drachten/plattegrond/
- makelaar.example.com/woningen/straat-1-drachten/plattegrond/kelder
- makelaar.example.com/woningen/straat-1-drachten/plattegrond/begane-grond
Binnen deze URL structuur zijn de vetgedrukte onderdelen custom endpoints. Via de WordPress endpoints API kunnen deze gedefinieerd worden en binnen de templates kan vervolgens de juist content getoond worden.
Custom post type ‘accommodatie’
Op WordPress websites van campings of vakantieparken zie je vaak weer een custom post type ‘accommodatie’. Voor accommodaties zou je met custom endpoints de volgende URL structuur kunnen creëren:
- camping.example.com/accommodaties/
- camping.example.com/accommodaties/6-persoons-vakantiehuis/
- camping.example.com/accommodaties/6-persoons-vakantiehuis/prijslijst/
- camping.example.com/accommodaties/6-persoons-vakantiehuis/prijslijst/2017
- camping.example.com/accommodaties/6-persoons-vakantiehuis/prijslijst/2018
- camping.example.com/accommodaties/6-persoons-vakantiehuis/boeken/
- camping.example.com/accommodaties/6-persoons-vakantiehuis/boeken/01-07-2018
- camping.example.com/accommodaties/6-persoons-vakantiehuis/boeken/03-07-2018
- camping.example.com/accommodaties/6-persoons-vakantiehuis/reviews/
- camping.example.com/accommodaties/6-persoons-vakantiehuis/reviews/familie-tolsma/
- camping.example.com/accommodaties/6-persoons-vakantiehuis/reviews/familie-jansen/
Orbis
Bij Pronamic maken we gebruik van een eigen ontwikkeld intranet op basis van WordPress genaamd Orbis. Binnen dit intranet houden we veel administratie zaken bij, hierbij moet je denken aan bedrijven, contacten, projecten, werkregistraties, taken, abonnementen, deals, domeinnamen, etc. Doordat veel post types aan elkaar gekoppeld zijn kunnen endpoints hier ook van pas komen:
- intranet.example.com/bedrijven/
- intranet.example.com/bedrijven/google/
- intranet.example.com/bedrijven/google/contacten/
- intranet.example.com/bedrijven/google/contacten/larry-page/
- intranet.example.com/bedrijven/google/contacten/sergey-brin/
- intranet.example.com/bedrijven/google/projecten/
- intranet.example.com/bedrijven/google/projecten/gmail/
- intranet.example.com/bedrijven/google/projecten/gsuite/
- intranet.example.com/contacten/
- intranet.example.com/contacten/larry-page/
- intranet.example.com/contacten/larry-page/bedrijven/
- intranet.example.com/contacten/larry-page/bedrijven/google/
- intranet.example.com/contacten/larry-page/bedrijven/abc/
- intranet.example.com/projecten/
- intranet.example.com/projecten/ontwikkelen-website-1/
- intranet.example.com/projecten/ontwikkelen-website-1/taken/
- intranet.example.com/projecten/ontwikkelen-website-1/taken/domein-registreren/
- intranet.example.com/projecten/ontwikkelen-website-1/taken/thema-ontwikkelen/
- intranet.example.com/projecten/ontwikkelen-website-1/werkregistraties/
- intranet.example.com/projecten/ontwikkelen-website-1/facturen/
- intranet.example.com/projecten/ontwikkelen-website-1/facturen/20170001/
- intranet.example.com/projecten/ontwikkelen-website-1/facturen/20170002/
- intranet.example.com/abonnementen/
- intranet.example.com/abonnementen/webhosting-example-com/
- intranet.example.com/abonnementen/webhosting-example-com/facturen/
- intranet.example.com/abonnementen/webhosting-example-com/facturen/20160012/
- intranet.example.com/abonnementen/webhosting-example-com/facturen/20170003/
Breadcrumb NavXT kruimelpad uitbreiden
Kruimelpad plugins zoals “Breadcrumb NavXT” hebben standaard geen voorzieningen voor custom endpoints. Als je endpoints echter inzet zoals in bovenstaande voorbeelden kan dat wel gewenst zijn. Als we als voorbeeld de makelaar website pakken dan is het wel zo mooi als de custom endpoints ook in het kruimelpad staan:
- Home » Woningen » Straat 1, Drachten
- Home » Woningen » Straat 1, Drachten » Kenmerken
- Home » Woningen » Straat 1, Drachten » Beschrijving
- Home » Woningen » Straat 1, Drachten » Foto’s
- Home » Woningen » Straat 1, Drachten » Foto’s » Hal
- Home » Woningen » Straat 1, Drachten » Foto’s » Badkamer
- Home » Woningen » Straat 1, Drachten » Video’s
- Home » Woningen » Straat 1, Drachten » Plattegrond
- Home » Woningen » Straat 1, Drachten » Plattegrond » Kelder
- Home » Woningen » Straat 1, Drachten » Plattegrond » Begane grond
Om dit te realiseren moet er in gehaakt worden op de Breadcrumb NavXT plugin code. De Breadcrumb NavXT is opensource en op GitHub terug te vinden: https://github.com/mtekk/Breadcrumb-NavXT. Hierdoor kunnen we de code bestuderen en zien hoe de plugin werkt. Een ontwikkelaar zal zien dat de plugin werkt met een PHP-klasse bcn_breadcrumb_trail en een PHP-klasse nbcn_breadcrumb. Een bcn_breadcrumb_trail object bevat alle informatie van het kruimelpad en nbcn_breadcrumb objecten (de kruimels). De bcn_breadcrumb_trail klasse bevat verder een add-functie waarmee een broodkruimel toegevoegd kan worden aan het kruimelpad. Verder zien we in de plugin code dat de bcn_before_fill en bcn_after_fill acties uitgevoerd worden waarop ingehaakt kan worden. In onderstaande code is te zien hoe we dit inzetten voor de “Foto’s” endpoint:
Op deze manier zijn WordPress custom endpoints nog mooier op te nemen binnen een WordPress website of applicatie. Bovenstaande kan uiteraard nog abstracter opgezet worden om het eenvoudiger toe te passen voor meerdere endpoints. Mocht je hier vragen of opmerkingen over hebben laat dan gerust een reactie achter. We vinden het ook altijd leuk om van andere WordPress ontwikkelaars te horen hoe ze bijvoorbeeld custom endpoints inzetten.
PS. Op vrijdag 9 en zaterdag 10 februari is WordCamp Noord-Nederland 2018 in Schouwburg De Lawei te Drachten. Volg WordCamp Noord-Nederland via Twitter en Facebook om op de hoogte te blijven van het programma en de kaartverkoop!