10+ tools voor de WordPress Professional

Wat zijn de tools voor de WordPress Professional, die je in ieder geval zou moeten overwegen?

Wanneer je meerdere WordPress websites moet onderhouden -of het nu voor jezelf of voor je klanten of je werkgever is- dan is er een aantal gereedschappen, waar ik eigenlijk niet zonder zou willen of zonder zou kunnen. En omdat ik ervan uitga, dat jij -wanneer je meerdere websites hebt te onderhouden- eigenlijk ook best zo min mogelijk tijd aan ‘repeterende werkzaamheden’ besteed, deel ik graag mijn persoonlijke keuze van ‘favoriete gereedschappen’ met je.

Heb jij ook tips met betrekking tot goede gereedschappen voor de WordPress professional? Voel je vooral welkom om deze in de commentaren toe te voegen.

1. Visual Studio Code

Allereerst heb je natuurlijk een goede code editor of een goede ‘Integrated Development Environment’ (IDE) nodig. Op dit gebied is er heel wat te koop en te krijg. Jarenlang was NetBeans mijn absolute favoriet, maar bij ‘versie 8’ leek het dat Apache, de organisatie die tegenwoordig NetBeans onderhoud, een aantal van mijn favoriete plugins niet wilde blijven onderhouden. Dus ging ik op zoek naar een nieuwe IDE en met Visual Studio Code van Microsoft heb ik denk ik toch wel de ideale editor gevonden.

Het is een ‘folder based’ IDE (uitgangspunt is dus, dat je project zich in een bepaalde folder bevindt, je hoeft geen aparte ‘project files’ aan te maken), voor zowel Windows, Mac en Linux beschikbaar en er is een enorme hoeveelheid extensions beschikbaar om je het werk makkelijker te maken. Waaronder een aantal specifiek WordPress extensions, git integratie en PHP debugging.

Natuurlijk horen code completion en syntax highlighting ook bij het aanbod.

2. Emmet

Emmet is eigenlijk geen tool op zich, maar een enorm handige functie, die je in veel editors als extensie kan installeren, waardoor het schrijven van HTML en CSS code wel heel makkelijk wordt.

Word jij ook helemaal tureluurs van al die groter-dan en kleiner-dan tekens, open- en sluittags en wat al niet meer?

Dan kan je mooi aan de slag gaan met Emmet.

Stel, ik wil een ‘unsorted list’ maken met drie list items.

Wat ik dan aanvankelijk tik is :

div>ul>li+li+li

Daarna toets ik op de ‘emmet’ key. Dit is in veel editors een tab of een spatie, maar je kan dit ook anders instellen.

Emmet zal de code vervangen door

<div>
   <ul>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</div>

Het enige wat jij alleen nog maar hoeft de doen is de tekst er tussen te plaatsen.

Wanneer je eenmaal wat handigheid met Emmet krijgt, zal het je zeker uren tijd besparen.

3. Chrome DevTools

Doet een pagina niet helemaal wat je verwacht? Reageert een plugin niet? Is een webpagina langzaam, maar je weet niet waardoor? Dan zijn de Chrome DevTools een uitkomst.

Je hoeft niets extra’s te installeren, want ze zijn gewoon onderdeel van de Chrome browser. Je activeert het op Windows met CTRL-SHIFT-I, of door met je rechter muisknop op een pagina te gaan staan en op ‘Inspecteren’ te klikken. Ik vermoed dat het op de Mac CMD-SHIFT-I zal zijn, maar dat mag je even zelf uitzoeken, wanneer je een Mac gebruiker bent.

Je krijgt vervolgens naast of onder je pagina een aantal handige tabbladen. Ik zal ze niet allemaal bespreken, maar wel even de belangrijkste noemen.

Elements

Onder deze tab vind je de opbouw van je webpagina. Ga je op een bepaald element staan, dan zie je in het rechter paneel hoe de CSS is opgebouwd voor dat specifieke element. Wanneer ‘iets’ er niet uitziet zoals ik verwacht, dan is dit de eerste plaats waar ik normaliter kijk.

Console

Onder ‘Console’ vind je de output van het JavaScript console. Dit kan enorm handig zijn, wanneer na het installeren van een nieuwe plugin ineens ‘iets’ het niet meer doet. Doet ‘iets’ het niet meer door conflicterende JavaScripts, dan zie je hier de foutmelding. Vaak kan die foutmelding een goede aanwijzing bieden om te ontdekken, waar je de fout kan vinden.

Network

Hier zie je hoe de verschillende bestanden die samen een pagina opbouwen door de tijd geladen worden. ‘Network’ biedt een ’time line’, waar je precies kan zien, welke onderdelen zijn geladen en welke onderdelen de meeste tijd hebben gekost.

Kan ook heel nuttig zijn bij het bepalen waar een performance bottleneck zit.

Performance

Wil je anders zoeken naar een mogelijke oorzaak van een performance bottleneck, dan is het tabblad ‘Performance’ een goed punt om aan het werk te gaan. Je begint met het klikken op de ‘Record’ (Opnemen) knop. Je krijgt opnieuw een tijdlijn te zien met daarnaast een overzicht van de belasting van het systeem, eventueel het geheugen en de inmiddels zo belangrijke Core Web Vitals (dat laatste alleen wanneer je een relatief recente versie van Chrome hebt).

Zeer leerzaam dus.

Application

Onder deze tab vind je vooral lokaal opgeslagen gegevens zoals bijvoorbeeld cookies. Dit is ook de plaats waar je waarde van cookies kan inspecteren en eventueel verwijderen of aanpassen.

Lighthouse

Lighthouse is Google’s ‘benchmark’ om de snelheid van pagina’s te meten. De meettools ‘Network’ en ‘Performance’ stammen van veel eerder, Lighthouse is een tool waar je de snelheid van een pagina kan meten met suggesties voor verbetering. Dus zeker de moeite waard op op jouw en jouw klanten hun websites te gebruiken, wanneer een pagina traag is.

4. GIT version control

Wanneer je maatwerk maakt voor je klanten dan is het nogal eenvoudig om op een gegeven moment door de bomen het bos niet meer te zien. Git is een versie-management tool (Github is een online opslag punt, waar je de code met de wereld of je team ka ndelen), waarmee je jouw programmacode makkelijk ‘bij kan houden’.

Na een aantal veranderingen ‘commit’ je de code naar GIT en zowel de oude als de nieuwe versies blijven bewaard. Heb je een specifieke oudere versie nodig? Die kan je heel makkelijk weer downloaden.

GIT is voornamelijk een commandline tool, maar wel heel makkelijk om mee te werken.

5. Filezilla (pro)

Wanneer je professioneel met WordPress werkt, zal je vroeg of laat een FTP programma nodig hebben. Zelf gebruik ik hiervoor het liefst Filezilla. Filezilla is er in twee ‘smaken’, de gratis en de betaalde. En eigenlijk voldoet Filezilla aan al je denkbare wensen om bestanden te kunnen uploaden naar een server, en heb je Filezilla pro niet echt nodig. Behalve dan, wanneer je ook wilt uploaden naar cloud opslagdiensten als OneDrive, Amazon S3, GoogleDrive, DropBox of welke andere dienst ook. Dan is Filezilla Pro toch echt een uitkomst. En voor die twee tientjes die het programma (eenmalig) op dit moment kost, hoef je het echt niet te laten. Bovendien ondersteun je hiermee de doorontwikkeling van één van de beste FTP programma’s beschikbaar.

NB: Denk eraan, dat je de Filezilla client en niet de Filezilla server moet downloaden!

6. Postman

Postman is een app waarmee kan onderzoeken, wat er nu precies gebeurt, wanneer er naar een bepaalde site gepost wordt. Voor mij is dit een ideale tool om API koppelingen met andere diensten uit te proberen.

Je kan GET, POST, PUT en DELETE informatie naar andere sites sturen en kijken wat het antwoord is. Verdraaide handig, wanneer je probeert een REST koppeling te maken en blijkt, dat de documentatie onvolledig of verouderd is.

7. ImageMagick

ImageMagick is een heleboel. De ‘core’ van ImageMagick is een bibliotheek om afbeeldingbestanden te bewerken. Het wordt veel op webservers gebruikt, om het mogelijk te maken online afbeeldingen te vergroten, verkleinen of te converteren.

Er is echter ook een ‘ImageMagick CLI’ waarmee je op je eigen computer door middel van command line opdrachten in één keer grote aantallen afbeeldingen kan converteren.

Stel je voor. Je hebt zojuist van je fotograaf 4000 afbeeldingen voor je webshop gekregen, maar allemaal in een veel te groot formaat. Je wilt deze bestanden dus eerst verkleinen. En dat kan je mooi doen met ImageMagick.

Voor alle duidelijkheid: ImageMagick is niet bedoeld om afbeeldingen te bekijken. Je werkt vanaf een tekst prompt. Heb je regelmatig veel van hetzelfde soort behandelingen te doen? ImageMagick heeft ook een krachtige scriptingtaal.

Waarom hiervoor geen Photoshop gebruiken?

Nu kan je met Photoshop ‘batch verwerking’ hetzelfde bereiken. Het grote nadeel van Photoshop is echter, dat Photoshop al deze afbeeldingen in zal laden en daarna gaat bewerken. Dat maakt Photoshop, wat toch al niet het meest snelle programma is, ineens nog veel trager. Bij een testje wat ik een aantal maanden geleden heb uitgevoerd, duurde het converteren van 50 afbeeldingen met Photoshop 12x zo lang als met ImageMagick. Bij 100 afbeeldingen duurte het 33x zo lang en bij 200 afbeeldingen maar liefst 82x zo lang.

8. WP-CLI

WP CLI is een commandline interface voor WordPress. Ofwel, met commando’s kan je bepaalde taken uitvoeren.

Om maar gelijk met de grootste teleurstelling te beginnen: WP-CLI is niet verkrijgbaar voor Windows, maar mijn ervaring is, dat het onder het WSL2 subsysteem werkt.

Het installeren van WP-CLI kan een uitdaging zijn, wanneer je niet zo gewend bent met command lines te werken, maar waarom zou je een WordPress commandline interface willen, wanneer je het voordeel van een commandline niet ziet?

Het aardige is dat je WP CLI kan gebruiken voor het uitvoeren van een groot aantal routine taken zonder dat je direct WordPress zelf op hoeft te starten. Veel grotere plugins bieden ook specifieke uitbreidingen op de WP CLI om bepaalde taken uit te voeren.

Wat je ondermeer met WP CLI kan

• Een nieuwe site installeren
• Plugins installeren, activeren, updaten, deactiveren, verwijderen
• Gebruikers beheren
• Rollen en bevoegdheden beheren
• Entries toevoegen aan de WP Config
• Content exporteren
• Content importeren
• Commentaar modereren
• Afbeeldingen opnieuw genereren (net zoals met de plugin ‘Regenerate Thumbnails‘, maar dan op afstand).

en nog veel meer.

9. Een lokale XAMP stack.

Wanneer we het hebben over Linux, Apache, MySQL en PHP dan noemen we dat traditioneel een LAMP stack. En op dit moment wordt zo ongeveer 80% of meer van alle websoftware ‘aangedreven’ door zo’n LAMP stack.

Wanneer je op je PC thuis WordPress wilt installeren, dan moet je dus ook zo’n ‘stack’ hebben, maar niet iedereen heeft thuis Linux op zijn computer staan. En hoewel het in een productieomgeving absoluut niet aan te raden is om een Mac of een Windows PC als server te gebruiken voor Apache en PHP, is het om ‘lokaal te werken’ op je PC thuis wel heel handig.

Draait zo’n stack op Windows, dan noemen we het een WAMP stack, draait het op de MAC, noemen we het een MAMP stack. Je mag zelf raden waarom.

Verwijzen we naar een configuratie, waarbij het Operating System een ‘onbekende factor’ is, hebben we het over een XAMP stack.

Nu zijn er vele manieren om zelf zo’n XAMP stack op je PC op te zetten, maar tot voor kort gebruikte ik het liefst de ‘DesktopServer’ hiervoor. Tegenwoordig gebruik ik echter steeds vaker Docker. Voor andere alternatieven kan ik je aanbevelen om gewoon eens te googelen op de woorden WAMP (voor Windows) MAMP (Mac) of XAMP.

10. MainWP

Er zijn meerdere mogelijkheden, maar wanneer je meerdere websites hebt te beheren, dan wil je eigenlijk ook een goede beheerstool hebben. En zelf ben ik zeer te spreken over MainWP, een self-hosted platform, waarmee je meerdere WordPress websites kan beheren.

Ten slotte

Wanneer je een WordPress website beheert dan loop je wel eens tegen problemen aan. Dat hoort erbij. Dan kan het makkelijk zijn, wanneer je een paar ‘extra handjes’ hebt, die je helpen een probleem op te lossen, waar je zelf niet zo snel uitkomt. En wanneer je dat ook nog relatief voordelig wilt, dan kan de ‘WordXPression Support Strippenkaart‘ een uitkomst zijn. Op voorhand koop je een aantal uren in en heb je het even druk, of gaat iets boven je pet, dan roep je gewoon deskundige hulp in, om je verder te helpen.

Scheelt je een hoop tijd en ergernis!