Een Introductie tot WordPress Shortcodes (Met Voorbeelden)

WordPress shortcodes kunnen je website eenvoudig verrijken met boeiende, interactieve elementen die over berichten en pagina’s herhaald kunnen worden. Voorbeelden zijn afbeeldingsgalerijen, contactformulieren en afspeellijsten om je inhoud nuttiger en aantrekkelijker te maken.

In deze post bespreken we WordPress shortcodes en waarom ze nuttig zijn. Vervolgens zullen we vier methoden schetsen om shortcodes op je site te gaan gebruiken. Laten we beginnen!

WordPress Shortcodes 101

WordPress shortcodes zijn fragmenten waarmee je snel verschillende bestanden, objecten of stukken inhoud in je website kunt integreren. Het zijn enkele regels HTML-code die interactieve elementen voor berichten kunnen bevatten.

Een shortcode ziet er zo uit, omhuld door twee vierkante haakjes:

[exampleshortcode]

Shortcodes zijn geïntroduceerd in 2008 om het maken van complexere berichten en pagina’s gemakkelijker te maken. Ze bieden een eenvoudige manier om dynamische contentelementen in je site te plaatsen en te laden.

Bijvoorbeeld, je wilt misschien je WordPress voorpagina aanpassen door een Google map in te sluiten om je winkellocatie te tonen. Je zou zelfs een introductievideo kunnen toevoegen met behulp van een shortcode:

Website-eigenaren gebruiken doorgaans shortcodes in de inhoud van berichten, pagina’s en aangepaste berichttypen. Gelukkig, naarmate de Gutenberg-blokeditor zich heeft ontwikkeld, is het gebruik van shortcodes nog gebruiksvriendelijker geworden. We zullen dit later in het artikel bespreken.

Waarom Je Zou Kunnen Overwegen Om WordPress Shortcodes Te Gebruiken

Er zijn verschillende redenen waarom je WordPress-shortcodes zou willen gebruiken. Om te beginnen zijn ze vaak makkelijker toe te voegen aan je pagina dan het leren en schrijven van een lange HTML-code.

Bovendien kunnen shortcodes je inhoud schoon en georganiseerd houden. Ze nemen niet zoveel ruimte in beslag in de HTML van je hele bericht. Dit kan je helpen fouten gemakkelijk te identificeren wanneer je de code-editor gebruikt.

Shortcodes zijn ook herbruikbaar. Je hoeft niet handmatig dezelfde functies, zoals een oproep tot actie (CTA) of socialemediaknoppen, aan elke post toe te voegen. In plaats daarvan kun je gewoon je shortcode plakken.

WordPress Shortcodes 101 (4 Manieren Om Deze Snippets Te Gebruiken)

Er zijn twee basissoorten shortcodes waar je jezelf mee moet familiariseren: zelfsluitend en insluitend. Zelfsluitende staan op zichzelf en hebben geen sluitende tags nodig:

[myshortcode]

Omsluitende shortcodes wikkelen zich rond een specifiek stukje inhoud om dit te wijzigen. Daarom moeten omsluitende shortcodes handmatig worden gesloten. Ze zien er doorgaans zo uit:

[myshortcode] inhoud [/myshortcode]

Je kunt ook de eigenschappen van shortcodes wijzigen met verschillende attributen. Deze zullen van invloed zijn op hoe het element wordt weergegeven op de frontend.

Bijvoorbeeld, je kunt de grootte van een gallery shortcode wijzigen door een grootte-attribuut toe te voegen:

[gallery id="123" size="medium"]​​

Als je door de WordPress Plugin Directory bladert, zul je zien dat er veel opties zijn om shortcodes te gebruiken op je WordPress-site. Hier zijn vier verschillende opties!

1. Standaard WordPress Shortcodes

WordPress wordt geleverd met basis ingebouwde shortcodes. Deze snippets stellen je in staat om extra media rechtstreeks in je berichten in te sluiten.

Deze shortcodes omvatten:

• [caption]: Omsluit bijschriften rond inhoud.
• [gallery]: Toont afbeeldingsgalerijen.
• [audio]: Voegt audiobestanden in en speelt deze af.
• [video]: Voegt videobestanden in en speelt deze af.
• [playlist]: Toont een collectie van audio- of videobestanden.
• [embed]: Omsluit ingebedde items.

Je kunt ook een verscheidenheid aan extra shortcodes inschakelen via de Jetpack plugin.

Zorg er eerst voor dat de Jetpack-module is ingeschakeld door in je WordPress-dashboard op Jetpack te klikken:

Selecteer dan Settings:

Ga naar het tabblad Schrijven, scrol naar beneden naar de sectie Samenstellen en activeer Samenstellen met behulp van shortcodes om media van populaire sites in te sluiten:

Zodra je deze optie hebt ingeschakeld, kun je de [tweet] shortcode gebruiken om een specifieke tweet in je bericht te embedden. Kopieer gewoon de URL van de tweet en plak deze binnen je shortcode-haken:

Dit zal de gelinkte tweet in je bericht embedden. Het resultaat zal er zo uitzien:

Je kunt deze extra shortcodes gebruiken om een scala aan andere media in je inhoud in te sluiten, inclusief Spotify-afspeellijsten, Google Docs of recepten.

2. Gutenberg Shortcodes

Gutenberg blocks maken het toevoegen van dynamische inhoud aan je berichten nog makkelijker. De blokeditor stelt je in staat om individuele secties gemakkelijk te wijzigen en blokspecifieke instellingen en opmaakregels toe te passen zonder plugins te gebruiken.

De Gutenberg editor is geëvolueerd om het nog makkelijker te maken om WordPress berichten en pagina’s samen te stellen. Het biedt een gebruiksvriendelijke manier om shortcodes in te voegen. De meeste Gutenberg blokken vervangen standaard shortcodes, maar de blokeditor is gebleken een beetje een bewegend doel te zijn, dus het leren over het gebruik van shortcodes voor functionaliteit is een goed idee.

Bijvoorbeeld, je kunt een Gutenberg blok gebruiken om de tweet uit ons vorige voorbeeld in te sluiten in plaats van een shortcode. Je hoeft alleen maar op het + icoon te klikken en het Twitter blok te selecteren:

Deze methode laat je de URL van de tweet direct in het blok plakken zonder de shortcode tussen vierkante haken te schrijven.

Verder beschikt de Gutenberg Block Editor over een Shortcode blok. Hiermee kun je je snippets beheren in de visuele editor zonder de code direct in HTML te schrijven:

Gutenberg stelt je ook in staat om herbruikbare blokken te maken, wat handig kan zijn voor het gebruik van dezelfde inhoudssnippets in je berichten. We kunnen dit concept demonstreren met een socialemedia-CTA die je mogelijk aan het einde van berichten gebruikt die je op je site zou kunnen schrijven.

Je kunt beginnen met het selecteren van het Shortcode-blok uit het pop-upvenster:

Nadat je je CTA-snippet hebt toegevoegd, klik je op de drie puntjes voor een optiemenu en selecteer je Add to Reusable blocks:

Je kunt het herbruikbare blok dan een naam geven:

Je snippet wordt dan opgeslagen onder het herbruikbare tabblad, waardoor je het overal op je website kunt gebruiken, inclusief berichten, pagina’s en widgetgebieden.

3. Plugin Shortcodes

Verschillende WordPress plugins komen ook met hun eigen shortcodes. Sommige van deze tools kunnen je zelfs helpen om aanpasbare parameters toe te voegen aan bestaande standaard shortcodes.

Bijvoorbeeld, je kunt kant-en-klare shortcodes voor contactformulieren van de Participants Database plugin krijgen. Je zou simpelweg [pdb_signup] kunnen typen om een inschrijfformulier in een bericht te plaatsen:

Het formulier wordt dan weergegeven op de frontend:

Als dit je interesseert, kun je meer lezen over andere WordPress plugins die je website kunnen verbeteren. Deze omvatten de Enhanced Media Library plugin, die je kan helpen bij het aanpassen van de parameters voor de ingebouwde Playlist en Gallery shortcodes.

Denk er echter aan om je WordPress shortcode plugins bijgewerkt te houden. Hierdoor kan je ervoor zorgen dat je site zo snel mogelijk draait en niet kwetsbaar is voor beveiligingsdreigingen.

4. Aangepaste Shortcodes

Als je nog meer functionaliteit van shortcodes nodig hebt, is het mogelijk om aangepaste te maken. Ze kunnen waardevolle hulpmiddelen zijn voor ontwikkelaars die tijd willen besparen op repetitieve codering.

Je moet weten dat het maken van aangepaste shortcodes enige technische kennis vereist. Als je je niet zeker voelt over coderen, wil je misschien bij een van de andere strategieën blijven die we hebben genoemd.

Als je deze methode wilt proberen, overweeg dan het gebruik van een generator zoals GenerateWP om je te helpen met het formatteren van je code vanaf het begin. Je kunt verschillende attribuutvelden invullen om het uiterlijk van het element naar wens aan te passen.

Je kunt deze shortcodes vervolgens implementeren met de add_shortcode functie. In actie ziet het er zo uit:

add_shortcode( string $tag, callable $callback )

Echter, als je je niet prettig voelt bij het vanaf nul maken van een aangepaste shortcode, is er nog een andere manier! Je kunt contact opnemen met ons team voor aangepaste webontwikkeling, en wij kunnen je helpen:

Met DreamHost Pro Services hoef je alleen maar een webontwikkelingsverzoek in te vullen. We stellen je een paar eenvoudige vragen over je website en je vereisten. Daarna kunnen we aan de slag met het implementeren van je wijzigingen op een staged versie van je site. Zodra je de laatste aanpassingen hebt goedgekeurd, kunnen we de nieuwe code toepassen op je live website!

Gebruik WordPress Shortcodes Om Je Inhoud Te Verbeteren

WordPress shortcodes kunnen de inhoud van je website verrijken met boeiende functies voor bezoekers. Ze zorgen ervoor dat lezers interactie hebben met je site en blijven terugkomen voor meer.

In deze post hebben we vier methoden beschreven om WordPress shortcodes op je site te gebruiken:

1. Standaard shortcodes van WordPress
2. Gutenberg shortcodes
3. Plugin shortcodes
4. Aangepaste shortcodes

Als je het gevoel hebt dat je niet de technische expertise of de tijd hebt om shortcodes of Blocks te schrijven, maak je geen zorgen! Je kunt onze Website Development Pro Services bekijken om te leren hoe we jouw site kunnen aanpassen met hoogwaardige code.