Shortcodes worden door veel plugins en thema’s gebruikt om inhoud toe te kunnen voegen aan je posts en pagina’s. In dit artikel leg ik je uit wat een shortcode precies is, en laat ik je zien hoe je zelf in drie stappen een shortcode maakt, en hoe je deze kan uitbreiden met attributen.

Wat zijn shortcodes?

Shortcodes zijn te herkennen aan kleine stukjes tekst tussen blokhaken [ ], en zijn bedoeld om inhoud en/of functies die je regelmatig gebruikt op je WordPress website uit te voeren. Op die manier kan je jezelf heel wat tijd besparen! Als je een functionaliteit slechts eenmalig op je website gebruikt is het de moeite niet daar een shortcode voor aan te maken.

Een voorbeeld van hoe een shortcode er uit ziet:

[voorbeeld]

Een WordPress shortcode maken

Dankzij de WordPress shortcode API is het relatief eenvoudig om zelf shortcodes te maken. In dit artikel zullen we twee typen shortcodes maken:

  1. een ‘simpele’ shortcode
  2. en een shortcode met attributen

Je kan de code voor shortcodes plaatsen in het functions.php bestand van je thema, of in een site-specifieke plugin.

Een ‘simpele’ WordPress shortcode maken

Op wpsimpel verwijs ik in artikelen waar code in voorkomt bijna altijd naar dit en dit artikel om je te vertellen hoe je de code op de juiste manier toevoegt aan je website. Om deze links steeds met de hand te typen of te kopiëren en plakken uit andere artikelen is onnodig.

Mochten bovendien de URL’s van deze artikelen wijzigen, dan zou ik dit in alle artikelen waar deze links in voorkomen handmatig moeten aanpassen.

Dit kan eenvoudig worden opgelost met een shortcode. In drie stappen laat ik je zien hoe ik de shortcode heb gemaakt voor de links naar de artikelen.

Wat we gaan maken

/**
 * Adds a shortcode for showing the links to the 'how to
 * properly add code to your website' articles.
 */
function wpsimpel_code_tutorial_links() {
	return '
		<a href="' . home_url() . '/code-snippets-op-de-juiste-manier-aan-je-wordpress-website-toevoegen/">Lees hier hoe je code snippets op de juiste manier toevoegt aan je website.</a><br><a href="' . home_url() . '/wordpress-tutorials/een-site-specifieke-plugin-maken-voor-je-wordpress-website/">Lees hier hoe je een site specifieke plugin maakt.</a>';
}

add_shortcode('code_tutorials', 'wpsimpel_code_tutorial_links');

1. De shortcode functie maken

Laten we beginnen met het plaatsen van een ‘comment’ boven de functie om aan te geven waar de functie voor is.

/**
 * Adds a shortcode for showing the links to the 'how to
 * properly add code to your website' articles.
 */

Wanneer ik een functie maak, gebruik ik vaak functienamen die al uit zich zelf vertellen wat de functie doet. In dit geval heb ik mijn functie wpsimpel_code_tutorial_links genoemd. In de functie plaatsen we de links die we willen tonen in de artikelen. Gebruik hiervoor return en géén echo (lees hier waarom) om de links op de juiste plek op de pagina te tonen.

function wpsimpel_code_tutorial_links() {
	return '
		<a href="' . home_url() . '/code-snippets-op-de-juiste-manier-aan-je-wordpress-website-toevoegen/">Lees hier hoe je code snippets op de juiste manier toevoegt aan je website.</a><br><a href="' . home_url() . '/wordpress-tutorials/een-site-specifieke-plugin-maken-voor-je-wordpress-website/">Lees hier hoe je een site specifieke plugin maakt.</a>';
}

2. De shortcode ‘registreren’ in WordPress

De laatste stap is het ‘registeren’ van je shortcode functie, zodat deze uitgevoerd kan worden met de WordPress shortcode API. Dit doe je met de add_shortcode functie. Deze functie maakt gebruik van twee argumenten:

  1. De shortcode ‘tag’ die je gebruikt in de tekstvelden in WordPress. Deze waarde plaats je in je shortcode tussen de blokhaken [ ].
  2. De naam van de functie welke de shortcode moet uitvoeren.

Voeg onder de functie onderstaande regel code toe en sla vervolgens je wijzigingen op.

add_shortcode('code_tutorials', 'wpsimpel_code_tutorial_links');

3. De shortcode toevoegen aan een post of pagina

Nu is de shortcode klaar voor gebruik en kunnen de links die we er aan toegevoegd hebben getoond worden op pagina’s, posts, widgets etc. met onderstaande shortcode.

[code_tutorials]
Een shortcode toevoegen aan een post of pagina in de Gutenberg editor.
Een shortcode toevoegen aan een post of pagina in de Gutenberg editor.

Wanneer ik deze shortcode gebruik wordt het volgende getoond op de plekken waar ik de shortcode heb toegevoegd:

Lees hier hoe je code snippets op de juiste manier toevoegt aan je website.
Lees hier hoe je een site specifieke plugin maakt.

Je kan natuurlijk allerlei andere inhoud en functionaliteiten aan je eigen shortcodes toevoegen. Je kan shortcodes gebruiken om bijvoorbeeld advertenties of contactformulieren op je website te plaatsen.

Een shortcode met attributen maken

We gaan een stapje verder door de functionaliteit van de zojuist gemaakte shortcode uit te breiden. In het voorbeeld hierboven is namelijk geen mogelijkheid om iets aan te passen aan de inhoud van de shortcode. Voor het uitbreiden van de shortcode gebruik je ‘attributen’ (parameter $atts).

Een shortcode met een attribuut heeft de volgende opbouw:

[shortcode attribuut="waarde"]

Als voorbeeld laat ik je zien hoe je met één shortcode verschillende knoppen kan maken die naar je social mediakanalen linken.

De basis is een ‘simpele’ shortcode. Deze bevat nog geen attributen, en is dus nog niet dynamisch.

/**
 * Creating a shortcode to link to our Twitter account.
 */
function social_button_shortcode() {
	return '<a href="http://twitter.com/wpsimpel" class="twitter-button">' . __( 'Follow us on Twitter' , 'your-text-domain' ) . '</a>';
}
add_shortcode('social_button', 'social_button_shortcode');

Deze button tover je op je website door in dit geval de shortcode [social_button] te gebruiken.

Deze knop is nog niet dynamisch, en hierin kan je dus ook nog niets aanpassen. Om mogelijk te maken welk type knop er getoond moet worden op de website voeg ik het attribuut type aan de shortcode toe.

[social_button type=""]

De functie van de shortcode moet hiervoor aangepast worden. Dit doe ik in onderstaande functie.

Allereerst moet het attribuut worden toegevoegd aan de shortcode (1), en vervolgens checkt de functie welke waarde het attribuut heeft (2), en toont aan de hand van een switch case (vergelijkbaar met een if/else-statement) de juiste content.

/**
 * Creating a shortcode to add links to 
 * various social media accounts.
 */
function social_button_shortcode( $atts ) {

	// 1. Add attributes to the shortcode
	$atts = shortcode_atts(
		array(
			'type' => 'type',
		), $atts );

	// 2. Check the value of the attribute
	switch ( $atts['type'] ) {
		
		case 'twitter':
			return '<a href="http://twitter.com/wpsimpel" class="twitter-button">' . __( 'Follow us on Twitter' , 'your-text-domain' ) . '</a>';
			break;

		case 'facebook':
			return '<a href="http://facebook.com/wpsimpel.nl" class="facebook-button">' . __( 'Like us on Facebook' , 'your-text-domain' ) . '</a>'
			break;
	}
}

add_shortcode('social_button', 'social_button_shortcode');

Nu kan kan je met behulp van een extra parameter aangeven welke button je wilt laten zien met je shortcode. Dit doe je op de volgende manier:

[social_button type="twitter"]
[social_button type="facebook"]

Een ‘insluitende’ shortcode maken

Een ‘insluidende’ shortcode maakt het mogelijk om inhoud toe te voegen binnen je shortcode. Een insluitende shortcode heeft de volgende opbouw:

[shortcode]Inhoud van de shortcode[/shortcode]

Stel dat je de tekst op de knoppen in het voorbeeld van de social mediaknoppen hierboven aanpasbaar zou willen maken, dan kan dat op de volgende manier:

/**
 * Creating a shortcode to add links to 
 * various social media accounts and making
 * the text of the buttons dynamic.
 */
function social_button_shortcode( $atts, $content = null ) {

	// 1. Add attributes to the shortcode
	$atts = shortcode_atts(
		array(
			'type' => 'type',
		), $atts );

	// 2. Check the value of the attribute
	switch ( $atts['type'] ) {
		
		case 'twitter':
			return '<a href="http://twitter.com/wpsimpel" class="twitter-button">' . $content . '</a>';
			break;

		case 'facebook':
			return '<a href="http://facebook.com/wpsimpel.nl" class="facebook-button">' . $content . '</a>'
			break;
	}
}

add_shortcode('social_button', 'social_button_shortcode');

In de functie voeg je tussen de haakjes naast de parameter $atts de parameter $content = null toe, welke de inhoud van de shortcode zal gaan bevatten.

Op de plek waar eerst de tekst van de knoppen stond in de shortcode, staat nu de variabele $content. Op die plek komt uiteindelijk dus de tekst die je aangeeft in je insluitende shortcode.

Je gebruikt deze shortcode op de volgende manier:

[social_button type="twitter"]We zijn ook te vinden op Twitter![/social_button]

… wat als resultaat zal geven:

<a href="http://twitter.com/wpsimpel" class="twitter-button">We zijn ook op Twitter te vinden!</a>

Zoals je kan zien is het maken van verschillende soorten shortcodes geen rocket science. Hopelijk heb je er wat aan om shortcodes te kunnen maken voor je eigen website.

Heb je een vraag of opmerking over het maken van shortcodes, of wil je jouw eigen favoriete shortcodes delen? Laat gerust een reactie achter onder dit artikel!

Beoordeel deze post:

Gemiddeld: 0 / 5. Aantal beoordelingen: 0

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?

Reacties

0 reacties op "Een eigen WordPress shortcode maken".

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.