Shortcodes in WordPress: een introductie

WordPress shortcodes vormen een krachtige feature om met minimale inspanning hele coole dingen te doen. Je kunt er eigenlijk van alles mee! In dit artikel geven we een introductie tot shortcodes in WordPress.

Hoe zijn shortcodes ontstaan?

Shortcodes werden voor het eerst geïntroduceerd door de online forum software Ultimate Bulletin Board (UBB) in 1998. Ze noemden het BBCode (Bulletin Board Code), en het was in feite een verzameling van tags (gebaseerd op een gesimplificeerde HTML) waarmee gebruikers gemakkelijk hun posts konden formatteren. Bovendien droeg het bij aan de veiligheid, omdat gebruikers niet zomaar malafide scriptjes konden toevoegen. Vanwege dezelfde veiligheidsredenen staat WordPress niet toe om PHP code binnen in de content te draaien. Om deze beperking te omzeilen introduceerde WordPress 2.5 (in 2008) de Shortcode API met shortcode functionaliteit. En deze feature wordt nog steeds veel gebruikt.

Wat zijn shortcodes in WordPress?

De term ‘shortcode’ is een samenvoeging van shortcut + code. Ze worden op verschillende platformen gebruikt, echter zullen we ons in dit artikel uitsluitend focussen op shortcodes in WordPress. WordPress shortcodes zijn kleine stukjes code die aan de front-endop magische wijze transformeren in iets fascinerends. Shortcodes in WordPress bieden gebruikers een simpele manier om ingewikkelde content te creëren en te veranderen, zonder dat ze kennis nodig hebben van HTML of complexe embed codes.

De meeste shortcodes worden omsloten door vierkante haakjes ([ ]). Elke shortcode voert een specifieke functie uit. Dat kan zo simpel zijn als het formatteren van de content of zo ingewikkeld als het definiëren van de structuur van een complete website. Zo kun je shortcodes gebruiken voor het embedden van slides, formulieren of prijstabellen.

Shortcodes elimineren de noodzaak voor ingewikkelde scripts. Zelfs zonder programmeervaardigheden kun je met shortcodes dynamische content toevoegen. 

Welke soorten shortcodes zijn er in WordPress?

We onderscheiden twee primaire soorten shortcodes in WordPress:

• Self-closing shortcodes hebben geen sluittag nodig. Een voorbeeld van een self-closing shortcode in WordPress is de Gallery shortcode.

• Enclosing shortcodes hebben wel een sluittag nodig. Dit type shortcodes manipuleert de content die tussen de begintag en sluittag staat. Een voorbeeld van een enclosing shortcode in WordPress is de Caption shortcode, die je gebruikt om bijvoorbeeld een onderschrift toe te voegen aan een afbeelding.

Wat zijn de standaard WordPress Shortcodes?

WordPress heeft 6 standaard shortcodes:

• Audio: Met deze shortcode embed je audiobestanden op je WordPress site. De output bevat eenvoudige afspeelknoppen zoals Play en Pause.
• Caption: Deze shortcode wordt voornamelijk gebruikt om onderschriften bij afbeeldingen te plaatsen, maar je kunt hem voor elk HTML element gebruiken.
• Embed: Deze shortcode breidt de standaard oEmbed feature uit zodat je verschillende attributen aan je embeds kunt toevoegen, zoals de maximale afmetingen.
• Gallery: Hiermee voeg je een eenvoudige fotogalerij aan je site toe. Middels attributen kun je definiëren welke afbeeldingen er gebruikt worden en hoe de galerij eruit moet zien.
• Playlist: Met deze shortcode kun je een collectie van meerdere audio- of videobestanden weergeven.
• Video: Hiermee kun je een videobestand embedden en afspelen met een eenvoudige videospeler. Maar zorg wel dat je weet waarom video’s uploaden naar WordPress geen goed idee is!

Een breed scala aan WordPress plugins maakt ook gebruik van shortcodes. Deze werken echter alleen als de betreffende plugin op jouw site geïnstalleerd en geactiveerd is. 

Hoe gebruik je WordPress shortcodes?

Eerst ga je naar de pagina of het bericht waar je een shortcode wilt toevoegen. Als je gebruik maakt van de Gutenberg editor, kun je het Shortcodes block gebruiken. Maak je gebruik van de Klassieke editor, dan kun je gewoon direct in het veld typen.

Wil je bijvoorbeeld een fotogalerij toevoegen, dan typ je de volgende code:

gallery ids="42, 22, 17" columns="3" size="medium"

Vergeet niet om dit tussen [ ] te zetten!

Sla de wijzigingen op. Als je de pagina nu aan de front-end bekijkt, zie je een fotogalerij met drie kolommen, met de afbeelding ID’s 42, 22 en 17.

Makkelijk toch?