WPLounge
WordPress shortcode met attributen maken
Home » Developers » Een shortcode met attributen maken

Een shortcode met attributen maken

Als je WordPress gebruikt is de kans groot dat je bekend bent met zogeheten shortcodes. Eerder schreven we al een artikel over hoe je zelf shortcodes kunt maken. Dit kan met een plugin, maar je kunt het ook zelf doen.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Dit zelf doen kan door middel van een eigen WordPress-plugin maken of dezelfde code toevoegen aan het functions.php-bestand van je WordPress-theme.

Ik raad je aan om gebruik te maken van een eigen plugin. Zo weet je zeker dat je shortcode ook blijft werken wanneer je een nieuw theme activeert.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

Een eigen shortcode maken

Een eigen shortcode maken is erg eenvoudig. Het kan handig zijn voor bepaalde content die op veel plaatsen op je website terugkomt, zoals je telefoonnummer of adresgegevens. Als deze gegevens ooit veranderen hoef je ze maar op één plek te veranderen. Overal waar je de shortcode hebt gebruikt wordt de informatie automatisch geüpdatet.

Als je telefoonnummer bijvoorbeeld 020-12345678 is, kun je de shortcode [telefoonnummer] maken met de volgende code:

<?php
function shortcodetelefoonnummer() {
return '020-12345678';
}
add_shortcode('telefoonnummer', 'shortcodetelefoonnummer');

Deze code kun je toevoegen aan een eigen plugin. Wanneer de bovenstaande shortcode actief is op je WordPress-website, zal je telefoonnummer getoond worden in ieder bericht of pagina waar je de code [telefoonnummer] intikt.

Nieuwe function aanmaken

In de eerste regel (na <?php) maak je een nieuwe “function” aan. Deze moet een unieke naam hebben ten opzichte van alle andere functions. Die kunnen ook uit andere themes of plugins komen, dus let daar op. Wanneer je een Nederlands woord gebruikt is de kans groot dat de functie-naam uniek is. Wij hebben de function in het bovenstaande voorbeeld “shortcodetelefoonnummer” genoemd.

HTML-code

Na “return” is er tussen de ‘ en ‘ ruimte voor HTML-code. Dit kan dus gewoon tekst zijn (zoals in het voorbeeld hierboven), maar het kan ook een link, afbeelding of iets anders zijn.

Function linken aan shortcode

Op de laatste regel wordt de shortcode [telefoonnummer] aangemaakt en “gelinkt” aan de functie “shortcodetelefoonnummer”. Je kunt ook meerdere shortcodes dezelfde function laten oproepen door meer regels toe te voegen:

add_shortcode('telefoonnummer', 'shortcodetelefoonnummer');
add_shortcode('telefoon', 'shortcodetelefoonnummer');
add_shortcode('telnr', 'shortcodetelefoonnummer');

Zo kun je ook de shortcodes [telefoon] of [telnr] gebruiken.

Shortcodes met attributen

Het voorbeeld hierboven was een perfect voorbeeld van een hele simpele shortcode. Maar wil je een wat ingewikkeldere shortcode maken, met bijvoorbeeld een button? Dan heb je attributen nodig. In deze attributen kun je bijvoorbeeld de URL kwijt waar de knop naartoe moet linken.

De shortcode

In dit artikel gaan we de volgende shortcode maken als voorbeeld.

[knop url=”https://www.wplounge.nl/” target=”_blank” title=”WPLounge”]Tekst voor op de knop[/knop]

De attributen in bovenstaande shortcode zijn url, target en title. Je kunt bij deze delen van de shortcode invullen wat je zelf wilt; de URL hoeft niet https://www.wplounge.nl/ te zijn; hier kun je invullen wat je zelf wilt. Ook de shortcode content (“Tekst voor op de knop”) is vrij in te vullen. Dit wordt namelijk de tekst die op je knop getoond zal worden.

PHP

Je begint met de PHP. Deze kun je in een eigen plugin toevoegen, maar ook in het functions.php-bestand. Voor de shortcode hierboven zou je de volgende PHP kunnen gebruiken:

/* Knop shortcode */
function knopshortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
	'title'  =>  '',
	'target'  =>  '_self',
	'url'  =>  '#'
    ), $atts );

    return '<a href="'. esc_attr($a['url']) .'" class="knop" target="'. esc_attr($a['target']) .'" title="'. esc_attr($a['title']) .'">' . $content . '</a>';
}
add_shortcode( 'knopshortcode', 'knop' );

Zoals je kunt zien worden in de code hierboven eerst de drie attributen (title, target, url) aangemaakt. Achter ieder attribuut staat de standaard waarde tussen aanhalingstekens. Deze waarde wordt gebruikt wanneer het attribuut niet gebruikt wordt. Vul je bijvoorbeeld geen URL in, dan zal de knop naar “#” linken. De standaard target is “_self”, wat er voor zorgt dat de link in hetzelfde venster opent.

Wanneer de bovenstaande code in een (actieve) plugin of in je fuctions.php staat, wordt de shortcode die we hierboven lieten zien omgezet in de volgende HTML:

<a href="https://www.wplounge.nl" class="knop" target="_blank" title="WPLounge">Tekst voor op de knop</a>

CSS

Op je website zal deze HTML er uit zien als een normale link op de woorden “Tekst voor op de knop”. Om hier een knop van te maken, gaan we wat CSS-code toevoegen. Deze kun je bijvoorbeeld in het style.css-bestand van je theme zetten. Je kunt ook een CSS-bestand in je eigen plugin zetten. Als deze bijvoorbeeld “knop.css” heet en in de root folder van je plugin staat, kun je die als volgt oproepen in je plugin:

/* Stylesheet inladen */
function knopplugin_load_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'je-plugin', $plugin_url . '/knop.css' );
}
add_action( 'wp_enqueue_scripts', 'knopplugin_load_css' );

We hebben al de class “knop” aan de HTML toegevoegd. Deze class kunnen we gebruiken om er in de CSS een mooie knop van te maken. Daarvoor kun je bijvoorbeeld de volgende code gebruiken:

.knop {
    background-color: #189bf2;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.knop a {
    color: white;
    text-decoration: none;
}

Met de bovenstaande CSS zal je knop er zo uit komen te zien:

Knop met CSS opgemaakt
De knop met CSS opgemaakt

Je zou natuurlijk nog meerdere classes kunnen toevoegen waarmee je de kleur van de knop kunt veranderen, bijvoorbeeld blue, green, yellow en meer. Deze kun je dan als een extra attribuut aan je shortcode toevoegen. In dit artikel hebben we je de basis meegegeven voor het maken van shortcodes met attributen. Er is natuurlijk nog veel meer mogelijk!

Beoordeel dit artikel

Roger.Overdevest

Roger is een SEO specialist met veel passie voor WordPress

2 reacties

  • Hi Wplounge,

    Deze code voor het maken van de shortcode klopt niet (meer). In het voorbeeld staat add_shortcode(‘function’, ‘tag’), maar het moet zijn add_shortcode(‘tag’, ‘function’). Misschien helpt het anderen deze zoektocht te voorkomen bij debuggen waarom er niks getoond wordt!

  • Goedemorgen,

    Ik ben een website aan het maken met gebruik making van een gekochtte template in word press.
    Nu blijkt dat er in deze templates shortcodes zijn gebruikt maar ik kan nergens vinden hoe ik daar de teksten en kleuren kan aanpassen.
    Ik werk in wordpress met elementor en ook daar kan ik niets aanpassen.
    Weet u hier een oplossing voor?