{"id":32545,"date":"2020-06-11T00:03:03","date_gmt":"2020-06-11T07:03:03","guid":{"rendered":"https:\/\/kinsta.com\/?p=72202"},"modified":"2023-08-09T08:40:17","modified_gmt":"2023-08-09T06:40:17","slug":"wordpress-hooks","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-hooks\/","title":{"rendered":"WordPress hooks bootcamp: zo gebruik je actions, filters en custom hooks"},"content":{"rendered":"

Hooks zijn \u00e9\u00e9n van de belangrijkste tools in het arsenaal van de WordPress ontwikkelaar<\/a>. Ze vormen de basis van het ontwikkelen van WordPress plugins en thema’s. Je kunt de vele ingebouwde hooks van WordPress gebruiken om je eigen code te “aan te haken” bij de WordPress Core en iets te doen<\/strong> of te bewerken<\/strong>.<\/p>\n

Er zijn twee soorten WordPress hooks: actions<\/strong> en filters<\/strong>. Hooks zijn zo veelvoorkomend dat ook de WordPress Core zelf ze veel gebruikt. WordPress bevat een manier om je eigen custom hooks<\/strong> te defini\u00ebren zodat andere ontwikkelaars weer kunnen aanhaken bij jouw code.<\/p>\n

Leer hier hoe het werken met actions, filters en custom hooks essentieel is om een expert te worden in WordPress development.<\/p>\n

De eerste helft van dit artikel behandelt de basics van WordPress hooks en legt uit hoe ze werken, aan de hand van praktische voorbeelden. In de tweede helft zul je leren hoe je hooks kunt gebruiken om WordPress te customizen, je eigen custom hooks te maken en ze te gebruiken om je eigen, uitbreidbare plugins te bouwen.<\/p>\n

Klinkt spannend, toch? Laten er dan meteen induiken!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Wat zijn WordPress hooks?<\/h2>\n

Een WordPress<\/a> pagina is opgebouwd uit busladingen functions en database-query\u2019s. De WordPress kern, plugins en het thema werken allemaal samen om de elementen op een pagina te produceren, zoals de tekst, afbeeldingen<\/a>, scripts en styling. Als alles is opgebouwd, stelt de browser alles samen en geeft de pagina weer.<\/p>\n

WordPress hooks maken het mogelijk om op specifieke punten “aan te haken” bij dit bouwproces en daarin je eigen custom code te draaien. De voornaamste functie van hooks is om het mogelijk te maken om features aan WordPress toe te voegen of te bewerken, zonder dat je de kernbestanden<\/a> hoeft aan te passen.<\/p>\n

\"Hooks
Hooks kunnen je zodoende helpen om WordPress uit te breiden met je eigen code.<\/figcaption><\/figure>\n

De WordPress Plugin API<\/a> maakt de functionaliteit van WordPress hooks mogelijk. Je kunt hooks gebruiken door specifieke WordPress functions aan te roepen (te callen), die hook functions<\/strong> worden genoemd, binnen specifieke instances tijdens de WordPress runtime.<\/p>\n

Door hook functions te gebruiken kun je je eigen custom code bundelen met een callback function<\/strong> en dat registeren met elke hook die je wilt. Als die eenmaal geregistreerd is, zal deze callback function altijd gaan draaien waar de hook is, waardoor je de standaard features van WordPress kunt vervangen of veranderen.<\/p>\n

De positie van de hook binnen het uitvoeringsproces van de code is een belangrijke factor. In de komende secties zul je hier meer over leren.<\/p>\n\n

Twee typen WordPress hooks: Actions en Filters<\/h3>\n

WordPress heeft twee verschillende typen hooks, die actions<\/strong> en filters<\/strong> genoemd worden. Actions laten je iets doen<\/strong> op bepaalde vooraf gedefinieerde punten in de WordPress runtime. Filters bewerken<\/strong> de data die door WordPress worden verwerkt en return<\/code><\/strong>deze.<\/p>\n

Actions worden zo gedefinieerd binnen de WordPress code:<\/p>\n

do_action( 'action_name', [optional_arguments] );<\/code><\/pre>\n
De string action_name<\/strong><\/code> is de naam van de action. Je kunt de variabele [optional_arguments]<\/strong><\/code> specificeren om extra arguments naar de callback function te sturen. Als je dit veld niet specificeert, zal de default value deze leeg laten.<\/p>\n
Voorbeeld:<\/strong> De do_action('wp_head')<\/strong><\/code> action kan gehookt worden om custom code uit te laten voeren elke keer dat WordPress de site header<\/a> verwerkt. Deze action heeft geen andere arguments.<\/p>\n
Filters worden zo gedefinieerd binnen de WordPress code:<\/p>\n
apply_filters( 'filter_name', 'value_to_be_filtered', [optional_arguments] );<\/code><\/pre>\n
De string filter_name<\/strong><\/code> is de naam van het filter, de variable value_to_be_filtered<\/strong><\/code> is de value waarop gefilterd wordt en die geretourneerd wordt en de variable [optional_arguments]<\/strong><\/code> kan net als bij actions extra arguments doorgeven.<\/p>\n
Voorbeeld:<\/strong> Het filter apply_filters( 'admin_footer_text' , string $text )<\/code><\/strong> kan gehookt worden aan de tekst die in de admin footer wordt weergegeven om de footer te bewerken. Sinds WordPress 5.4 zal de default value de zin Thank you for creating with <\/em>WordPress<\/em><\/a>.<\/em><\/code> weergeven in de footer van het admin-gebied.<\/p>\n
Je zult verderop leren hoe je actions en filters kun aanhaken met allerlei voorbeelden uit de WordPress kern.<\/p>\n
Als je code eenmaal gehookt is, kun je je code iets laten doen<\/strong> of bewerken<\/strong> op je site. Zo kun je bijvoorbeeld hooks gebruiken om een automatische mail<\/a> te versturen nadat je een artikel hebt gepubliceerd, of custom stylesheets<\/a> te laden om de weergave van je site te veranderen.<\/p>\n
\"WordPress
WordPress hooks helpen je om je website te bewerken of iets te laten doen<\/figcaption><\/figure>\n
De eenvoudigste manier om hooks te begrijpen is door je WordPress website<\/a> voor te stellen als het bouwen van een huis.<\/p>\n
Hooks lijken dan op een hijskraan waarmee onderdelen worden verplaatst. De items die verplaatst worden zijn de callback functions<\/strong>, waaronder jouw custom code<\/a>. Deze items (of functions) kunnen je helpen bij het bouwen of veranderen van je huis.<\/p>\n
\"Voorbeeld
Voorbeeld van aanhaken bij de ‘wp_head’ action in WordPress<\/figcaption><\/figure>\n
Callback functions kunnen normale PHP functions zijn, standaard WordPress functions of custom functions die je zelf gedefinieerd hebt.<\/p>\n
We kunnen alleen de bijpassende items hangen aan dragers die bij specifieke hooks horen. Zo kunnen actions alleen gehookt worden met action functions<\/strong>. En kunnen filters alleen gehookt worden aan filter functions<\/strong>.<\/p>\n
Bij een hijskraan is het een hoop gedoe om dragers te veranderen, maar WordPress maakt dit gelukkig supersimpel doordat het meer dan 2200 types standaard hooks<\/a> bevat.<\/p>\n
\"WordPress
WordPress 5.1 heeft 2200+ native hooks (bron: Adam Brown)<\/figcaption><\/figure>\n
Je kunt hooks door de hele WordPress kern vinden, waardoor je aan kunt haken op de positie waar jij dat wilt, en precies op die plek je custom code kunt uitvoeren.<\/p>\n\n
Hooks vs actions vs filters<\/h2>\n
Het WordPress Plugin Handbook<\/a> zegt het volgende:<\/p>\n
“Hooks zijn een manier waarop een stukje code een ander stukje code kan bewerken… Er zijn twee soorten hooks: Actions en Filters.<\/em>“<\/p><\/blockquote>\n
Er bestaat veel verwarring over hoe de termen hook<\/strong>, action<\/strong> en filter<\/strong> gebruikt moeten worden. Een aantal tutorials en gidsen verwarren ze namelijk met de bijbehorende functions. Een belangrijke oorzaak van deze verwarring is de complexe werking van hooks.<\/p>\n
Wanneer je goed in de WordPress kern kijkt, zul je zien dat er weinig verschil zit in het toevoegen van een action of een filter. Dit is bijvoorbeeld de broncode voor de add_action() function<\/a> van het bestand wp-includes\/plugin.php<\/strong><\/code>:<\/p>\n
function add_action( $tag, $function_to_add, $priority = 10, $accepted_args = 1 ) {\u00a0 \u00a0 \u00a0 \n    return add_filter( $tag, $function_to_add, $priority, $accepted_args );\n}<\/code><\/pre>\n
De add_action()<\/strong><\/code> function vraagt de add_filter()<\/strong><\/code> function op en retourneert die value. Waarom? Omdat ze fundamenteel gezien op dezelfde manier werken, op \u00e9\u00e9n belangrijk verschil na.<\/p>\n
De apply_filters()<\/strong><\/code> function retourneert een value die bestaande data types kan veranderen, terwijl de do_action()<\/strong><\/code> function niks retourneert (NULL value binnen PHP<\/a>).<\/p>\n
Als je het nog niet begrijpt, geen zorgen! Als je eenmaal de eerste helft van dit artikel gelezen hebt zal het helemaal duidelijk zijn. Wij zullen ons in dit artikel houden aan de offici\u00eble WordPress Codex terminologie, aangezien die duidelijk, precies en universeel is. Zoals je waarschijnlijk gemerkt hebt, gebruiken we vaktermen als value (waarde), function (functie) in het Engels. Dit doen we om verwarring te voorkomen, aangezien verreweg de meeste ontwikkelaars (uitsluitend) bekend zijn met de Engelse terminologie.<\/p>\n
Voor nu is vooral belangrijk om vertrouwd te raken met de hook-routine hieronder.<\/p>\n
\"De
De hook routine: hooks, hook functions en callback functions<\/figcaption><\/figure>\n
Laten we eerst het verschil bekijken tussen actions en hooks.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WordPress Hooks<\/strong><\/td>\n<\/tr>\n
Actions<\/strong><\/td>\nFilters<\/strong><\/td>\n<\/tr>\n
Actions worden gebruikt om custom functions uit te voeren op een specifiek punt tijdens de uitvoering van de WordPress kern.<\/td>\nFilters worden gebruikt om data te bewerken of customizen die door andere functions worden gebruikt.<\/td>\n<\/tr>\n
Actions worden gedefinieerd\/gemaakt via de function do_action('action_name')<\/code><\/strong> in de WordPress kern.<\/td>\nFilters worden gedefinieerd\/gemaakt via de function apply_filters('filter_name','value_to_be_filtered; )<\/code><\/strong> in de WordPress kern.<\/td>\n<\/tr>\n
Actions worden ook wel action hooks<\/strong> genoemd.<\/td>\nFilters worden ook wel filter hooks<\/strong> genoemd.<\/td>\n<\/tr>\n
Actions kunnen alleen gehookt worden aan action functions. Bijv.\u00a0add_action()<\/code><\/strong>,\u00a0remove_action()<\/code><\/strong>.<\/td>\nFilters kunnen alleen gehookt worden aan filter functions. Bijv. \u00a0add_filter()<\/code><\/strong>,\u00a0remove_filter()<\/code><\/strong>.<\/td>\n<\/tr>\n
Action functions hoeven niet per se arguments door te geven aan hun callback functions.<\/td>\nFilter functions moeten tenminste \u00e9\u00e9n argument doorgeven aan hun callback functions.<\/td>\n<\/tr>\n
Action functions kunnen allerlei soorten taken uitvoeren, waaronder het gedrag van hoe WordPress werkt.<\/td>\nFilter functions bestaan alleen om de data die ze krijgen door hun filters te laten gaan.<\/td>\n<\/tr>\n
Actions functions moeten niks return<\/code><\/strong>. Maar ze kunnen wel de output echo<\/code><\/strong>‘en of met de database werken.<\/td>\nFilter functions moeten hun veranderingen return<\/code><\/strong> als output. Zelf als een filter niks verandert, moet de niet-aangepaste input nog altijd return<\/code><\/strong> worden.<\/td>\n<\/tr>\n
Actions kunnen bijna alles uitvoeren, zolang de code maar logisch is.<\/td>\nFilters moeten op een ge\u00efsoleerde manier werken, waardoor ze bijna nooit onbedoelde bijeffecten hebben.<\/td>\n<\/tr>\n
Samenvatting:<\/strong> Een action onderbreekt de normale uitvoering van de code om iets te doen met de informatie die de function krijgt, maar retourneert verder niks, en sluit dan af.<\/td>\nSamenvatting:<\/strong> Een filter verandert de informatie die het krijgt en stuurt deze terug naar de calling hook function, en eventuele andere functions kunnen deze value ook gebruiken.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Soms kun je zowel een action als een filter gebruiken om een bepaald doel te bereiken. Als je bijvoorbeeld de tekst van een artikel wilt aanpassen, kun je een callback function registreren bij de publish_post<\/a> action en de inhoud van het artikelen veranderen op het moment dat het opgeslagen wordt in de database<\/a>.<\/p>\n
\/\/ definieer de callback function om de tekst te veranderen\nfunction change_text_callback() { \n    \/\/ voeg de code hier toe om de tekst te veranderen\n}\n\n\/\/ haak hier aan bij de 'publish_post' action met de add_action() function\nadd_action( 'publish_post', 'change_text_callback' );<\/code><\/pre>\n
Of je kunt een andere callback function registreren met de the_content<\/a> filter om de inhoud van het artikel aan te passen voor het wordt weergegeven in de browser.<\/p>\n
\/\/ definieer de callback function om de tekst te veranderen\nfunction change_text_another_callback( $content ) { \n    \/\/ voeg code toe om de tekst te veranderen en het vervolgens te retourneren\n    return $filtered_content;\n}\n\n\/\/ haak aan bij de 'the_content' filter met de add_filter() function\nadd_filter( 'the_content', 'change_text_another_callback');<\/code><\/pre>\n
De twee verschillende manieren geven uiteindelijk hetzelfde resultaat. Weten wanneer je beter de ene en wanneer beter de andere kunt gebruiken is de sleutel om een echt goede WordPress ontwikkelaar<\/a> te worden.<\/p>\n
Hoe werken WordPress hooks?<\/h2>\n
Het eerdere voorbeeld van het huis legt een beetje uit hoe je de basis van hooks kunt zien, maar geeft nog niet de complexiteit weer van h\u00f3e ze precies functioneren. De belangrijkste concepten daarbij zijn hook position en hook specificity, oftewel de plek van een hook en hoe specifiek een hoek is.<\/p>\n
Een beter voorbeeld is door je het proces van het samenstellen van een WordPress webpagina voor te stellen als het productieproces van een auto. Maar anders dan bij het produceren van een auto, dat een tijdje kan duren, is het in elkaar zetten van een webpagina nagenoeg onmiddellijk gedaan.<\/p>\n
\"Het
Het in elkaar zetten van een webpagina lijkt op het assembleren van een auto<\/figcaption><\/figure>\n
Net zoals er steeds een onderdeel toegevoegd wordt aan een auto in een moderne assemblagelijn, wordt een WordPress webpagina ook per element opgebouwd door de server en client samen.<\/p>\n
De WordPress kern is te vergelijken met de motor, het chassis en de andere essenti\u00eble onderdelen, die de “kern”-functionaliteit mogelijk maken.<\/p>\n
Je kunt wel een functionele website maken met alleen maar de WordPress kern, maar dat zou vrij saai zijn. Je hebt daarnaast gave features nodig. En dat is waarbij WordPress plugins<\/a> en thema’s<\/a> om de hoek komen kijken, die trouwens allebei veel hooks gebruiken.<\/p>\n
In het voorbeeld hierboven kun je elk genummerd station binnen de productielijn zien als een hook binnen de WordPress kern. Er zijn twee soorten stations, net zoals de actions en filters. Elk station bevat een specifiek type sleuf waar alleen bepaalde tools in passen, te vergelijken met de action functions en filter functions.<\/p>\n
Al deze stations worden op regelmatige intervallen neergezet om zo effici\u00ebnt en modulair mogelijk te zijn.<\/p>\n
Afhankelijk van de benodigdheden op een specifieke plek, kunnen we het meest geschikte stuk gereedschap aanhaken op dat specifieke stations. Deze tools zijn de callback functions die gebruikt worden om met WordPress te communiceren.<\/p>\n
Sommige tools kunnen de werking van een auto aanzienlijk veranderen, net zoals callback die bij actions geregistreerd zijn. Andere tools zijn er alleen maar om het uiterlijk van een auto te veranderen, zoals callbacks van filters.<\/p>\n
Het is cruciaal om op het juiste station het juiste gereedschap te gebruiken als je een functionele auto wilt maken. Op dezelfde manieren helpen hooks ons om WordPress aan te passen aan onze unieke behoeften.<\/p>\n
Als je deze vergelijking verder doortrekt, kun je plugins vergelijken met het toevoegen van handige features aan de auto, zoals airbags, een radio, sleutelloos beveiligingssysteem, etc (zoals bijvoorbeeld deze om de functionaliteit van WordPress uit te breiden<\/a>). Thema’s kun je dan vergelijken met het aanpassen van het uiterlijk van de auto, zoals het algehele design, de kleur, wieldoppen, etc (hier lees je hoe je het WordPress thema kunt customizen<\/a>).<\/p>\n
Waar registreer je hooks en hun functions?<\/h2>\n
Er zijn twee aanbevolen manieren om hooks toe te voegen binnen WordPress:<\/p>\n