Professioneel ontwikkelen met Wordpress

Door Sam de Poorter, back-end developer
24 februari 2017 - 3851 x bekeken - Categorieën: Tech, Kennis

Qua marktaandeel (minstens 50%) domineert WordPress als content management systeem (CMS). Het systeem is laagdrempelig en makkelijk in te zetten, maar het mist mogelijkheden die je als professional nodig hebt om topkwaliteit te leveren. Jammer maar niet onoverbrugbaar! Wij zetten tools in uit de community, om dat gemis te verhelpen. In deze blogpost lees je hoe!

Scheiding aanbrengen in diverse lagen van logica

Om je code overzichtelijk, onderhoudbaar en uitbreidbaar te maken, heb je een structuur nodig die dat ondersteunt. Een structuur die een scheiding aanbrengt naar aanleiding van het doeleinde van je code. Je wil code die alleen bedoeld is voor je templates/views ook daar opnemen (en niet hoeven te herhalen, daar kom ik later op terug). Hetzelfde voor je business- en applicatie-logica. Een vanilla-Wordpres instaltie heeft geen structuur die zich hier voor leent. Dit maakt het moeilijk om bekende (en goede) principes als Separation of Concerns (SoC) en dont-repeat-yourself (DRY) toe te passen.

Timber



Laten we starten door kennis te maken met de open-source plug-in Timber

Timber omschrijft zich als volgt:

"Timber helps you create fully-customized WordPress themes faster with more sustainable code. With Timber, you write your HTML using the Twig Template Engine separate from your PHP files. This cleans-up your theme code so your PHP file can focus on supplying the data and logic, while your twig file can focus 100% on the display and HTML."

In de omschrijving komt de focus van Timber duidelijk naar voren: het structureren van je code door logica op te nemen waar het hoort. Precies waar we naar op zoek zijn! De basis van deze scheiding en de mogelijkheden hierin liggen bij de template-engine Twig.

Twig

Maar wat biedt Twig nu extra tegenover native WordPress-templating?

  • Auto-escaping
  • Standaard filters en helper functies van Twig
  • Extenden (template-inheritance) van templates, enorm fijne toevoeging bij het developen en onderhouden van themes
  • Separation of concerns, alleen view-logica, overige logica is niet verdwaald in dezelfde templates maar netjes gescheiden
  • Betere mogelijkheden om te debuggen: zoals de standaard Twig functionaliteit dump. Daarnaast is Timber ook geschikt voor de debug-bar van WordPress
  • Sterke leesbaarheid.

Belangrijk: de standaard WordPress view-functionaliteit kan je dankzij Timber aanvullend gebruiken binnen je Twig-templates!

Timber - meer dan een simpele Twig integratie

Twig brengt al veel functionaliteiten met zich mee, Timber vult dat verder aan met eigen filters die je vaak nodig hebt binnen (specifiek WordPress) sites.  Filters als time_ago, dat een datetime-object omzet naar 3 day's ago zijn een fijne aanvulling, maar stelen niet de show. Functies voor thumbnails of paginering heb je bijna elk project nodig en zijn goed uitgewerkt (figuur 1) binnen Timber.

Figuur 1, filter voor afbeeldingen. Let ook op de verwijzing naar 'medium', wat weggeeft dat al deze afmetingen ook centraal te beheren zijn.

Buiten filters biedt Timber ook wrappers als add_to_context (figuur 2) aan. Variabelen die je hier opneemt in je content, zijn beschikbaar binnen elke Twig-template zonder dat je daar nog iets voor hoeft te doen. 

Indruk qua code

Figuur 2, add_to_context, geschikt om variabelen globaal beschikbaar te maken.

Figuur 3, op basis van je type controller doet Timber slimme aannames voor welke post-types je wil ophalen, zonder dat specifiek mee te geven aan bijvoorbeeld get_posts. Als je dat wel doet is de functionaliteit direct en daarmee probleemloos overschreven.

Figuur 4, voorbeeld van een Twig-template. Hierin wordt alleen het blok 'content' overschreven vanuit de base-template. De rest erft de template over van de base-template.

Timber functioneert prima voor je theming en de voorkant van je site, maar bij een CMS-systeem als WordPress heb je natuurlijk ook een admin die je wil uitbreiden.

Advanced Custom Fields (ACF) voor uitbreiden van de admin

Tot nu hebben we veel aandacht besteed aan theming, structuur en het centraliseren van code. Timber doet dat prima voor de voorkant van je website, maar WordPress heeft ook een uitgebreide admin. Hoe vang je dit af? Hier hebben we een andere plug-in voor nodig, namelijk Advanced Custom Fields (ACF)

ACF kan onder andere het volgende voor je betekenen:

  • Configureren van je velden binnen de admin op een intuïtieve manier (figuur 5).
  • Keuze uit verschillende invoertypes: tekst, tekstveld, wysiwyg, afbeelding, bestand, paginalink, berichtobject, relatie, keuzelijst, checkbox, radiobutton, datepicker, waar/niet waar, herhaalveld, flexibele content, galerij en meer in het vooruitzicht!
  • Bovenstaande 'velden' eenvoudig inladen via een simpele en vriendelijke API.
  • Sterke ondersteuning binnen Timber, de aangemaakte velden zijn direct beschikbaar in je template (in het post object).

 

Figuur 5, Voorbeeld van het toevoegen van meerdere velden aan een specifieke post-type. Of een enkele template als 'homepage'

ACF geeft je dus de mogelijkheid om velden te configureren aan een door jouw geconfigureerde groep. Ik gebruik dit om unieke velden per template/post-type beheerbaar te maken. Als voorbeeld een drietal USP's die alleen op de homepage naar voren komen. Je wil ze beheerbaar maken, maar niet de hele post-type hiermee vervuilen. Dat voorkomt dus dat je die drietal velden bij elke pagina ziet die je aanmaakt, maar alleen bij de pagina's waar ze daadwerkelijk worden uitgelezen. Met ACF maak je deze velden aan, koppel je ze aan de template 'homepage' en verloopt dit probleemloos.

Belangrijk: De configuratie wordt opgeslagen in de database. Een uitbreiding waarin je de velden kan configureren, exporteren in code en kan opnemen in je publicatieproces (a la Drupal8 ) is zeker mijn wens! Voor nu betekent het vaker je database synchronizeren (tussen omgevingen in je OTAP), of ze alsnog handmatig per omgeving aanmaken. Timber in combinatie met ACF combineert lekker en vangt veel problemen af.

WPScan (vulnerability scanner) om zwakheden in je site op te sporen

Wat we native niet in WordPress vinden, hebben we in grote lijnen verholpen door het inzetten van plug-ins. Dit brengt ook nieuwe zorgen met zich mee, plug-in's zijn vaak de oorzaak van gevonden security-risico's bij WordPress-sites. Timber en ACF zijn plug-ins die op grote schaal worden ingezet, getest en  worden bijgehouden: maar extra maatregelen qua security zijn altijd welkom. Zeker als je ook nog andere plug-in's inzet buiten Timber en ACF. De derde tool die ik deze post wil meegeven is WPScan.

"WPScan is a black box WordPress vulnerability scanner."

WPScan is een fijne tool om specifieke en bekende WordPress-zwakheden van je site aan het licht te brengen. Hiervoor wordt een database gebruikt met bekende WordPress-specifieke zwakheden. Onder andere Plug-ins en themes worden nagelopen, om te zien of er security-issues bekend zijn. Dit doet de tool door naar de HTML-broncode van je website te kijken. Daardoor hoeft de tool alleen de URL van de site die je wilt scannen te weten en hoef je niks additioneel te installeren.

Na het installeren van WPScan kan je in je terminal het volgende commando ingeven:

ruby wpscan.rb --url <absolute url van de website> --enumerate vp

Dit geeft een resultaat vergelijkbaar met dat van Figuur 6.

 
Figuur 6, onderdeel van de rapportage van WPScan

Buiten kritieke problemen, zal je vaak waarschuwingen door krijgen dat een readme.txt online te raadplegen is, waardoor de versie van je Wordpress-site bekend is. Zeker als je niet tijdig updatet, verhoogt dat de kans op problemen in WordPress. Neem deze dan ook serieus.

Belangrijk: Als je WordPress-site de scan succesvol doorloopt, kan je deze zeker nog niet als veilig beschouwen. Risico's als Sql-injection, XSS en zelf-ontwikkelde formulieren enzovoort worden niet nagelopen. Gebruik de tool dan ook als aanvulling om te zien of je configuratie klopt, plug-in's  en WordPress up-to-date zijn en de meest bekende WordPress risico's bij jouw site afgevangen zijn.

Aan de slag!

Ik hoop jullie een beetje geïnspireerd te hebben met de mogelijkheden van deze tools. Als developers leren we binnen frameworks als Symfony een hoop best-practises rondom DRY en SOC. Zonder Timber, Advanced Custom Fields(ACF) en WPscan wordt dat nagenoeg onmogelijk om toe te passen binnen WordPress. Je wil de kwaliteitsnormen van je code hoog houden en deze tools zorgen voor een hoger kwaliteitsniveau dan je kan bereiken met een standaard WordPress-installatie. Succes!

Fronteers meetup 'CSS'

Door Iain van der Wiel

Loop je als front-ender ook weleens tegen problemen aan bij het doorontwikkelen van de CSS van een project? Kom naar de nieuwe Fronteers meetup op 24… - Lees meer

Lees verder