WPLounge
Shortcode
Home » Developers » Je eigen shortcodes aan WordPress toevoegen

Je eigen shortcodes aan WordPress toevoegen

Shortcodes zijn codesnelkoppelingen waarmee je inhoud kunt toevoegen aan je WordPress-berichten, pagina’s en widgets. Veel Premium WordPress-thema’s hebben eigen shortcodes waarmee je bepaalde elementen kunt oproepen. Maar hoe maak je shortcodes en hoe pas je ze toe? In dit artikel zullen we je uitleggen hoe je je eigen shortcodes kunt toevoegen aan WordPress.

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.

Wat zijn Shortcodes?

Een shortcode is een code waarmee je een terugkerend element, zoals een telefoonnummer kan tonen op je pagina’s en berichten. Het voordeel van het gebruiken van een shortcode is dat wanneer je het telefoon nummer wijzigt, je dat slechts een keer hoeft te doen. Het wordt dan automatisch aangepast op alle pagina’s waar je de shortcode hebt gebruikt.

Om de shortcodes goed te kunnen begrijpen, moeten we eerst snappen waarom ze zijn toegevoegd.

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.

WordPress filtert alle content om zeker te zijn dat niemand via berichten en pagina’s schadelijke codes toevoegt aan de database. Dit betekent dat je gemakkelijk HTML kunt schrijven in je artikelen, maar je geen PHP code kunt schrijven.

Maar wat als je gewoon aangepaste code in je berichten wilt toevoegen om gerelateerde berichten, advertenties contactformulieren foto’s enz wilt weergeven? Dat is waar Shortcode van pas komt.

Een shortcode ziet er meestal als volgt uit.

Shortcode

Oftewel, het stelt ontwikkelaars in staat om hun code in een functie toe te voegen en die functie vervolgens in WordPress als een shortcode registreren. Wanneer WordPress de shortcode vindt, wordt de bijbehorende code automatisch uitgevoerd.

Wil je zelf bepaalde elementen oproepen door middel van een shortcode? Dat is een stuk makkelijker dan je denkt.

Een shortcode toevoegen aan je WordPress berichten en pagina’s

shortcode_head

In dit voorbeeld maken wij een shortcode waarmee we het logo van WordPress Lounge oproepen. Het volgende stukje code plak je in het functions.php-bestand van je thema.

Let op! Sommige thema’s hebben een speciaal bestand voor shortcodes, in dat geval plak je onderstaand stukje code in dat bestand. Ook kan het zijn dat je website niet meer werkt als je een foutje maakt, maak dus eerst een back-up OF gebruik een test-omgeving (je hoeft je niet te schamen; wij hebben ook een test-omgeving voor dit soort zaken).

function wploungelogo() {
return '<img alt="" src="https://www.wplounge.nl/wp-content/uploads/2012/11/wordpressloungelogoPNG1.png" />';
}
add_shortcode('WPL-LOGO', 'wploungelogo');

Het stukje code hierboven zorgt ervoor dat de shortcode die we hebben aangemaakt (hier onder) het logo van WordPress Lounge oproept.

[WPL-LOGO]

De functie die we hebben gekoppeld aan deze shortcode heet “wploungelogo“. Let op, de naam van de functie en de naam van de shortcode mogen niet hetzelfde zijn!

Ander voorbeeld

Je kunt natuurlijk een stuk meer doen met shortcodes dan alleen een plaatje oproepen. De shortcode hierboven roept ons logo op; een statisch element. Maar het is ook mogelijk om shortcodes met “parameters” toe te voegen.

Wil je bijvoorbeeld een button-shortcode toevoegen? Dan zou het fijn zijn om bij iedere button een andere link toe te voegen. Je wilt dan idealiter een shortcode als:

[wpl-button link="https://www.wplounge.nl"]WordPress Lounge[/wpl-button]

Hier geef je de gebruiker dus de mogelijkheid om zelf de link in te stellen voor de button. In je functions.php wordt het dan iets ingewikkelder:

function Button($atts, $content = null) {
extract(shortcode_atts(array('link' => '#'), $atts));
return '' . do_shortcode($content) . '';
}
add_shortcode('wpl-button', 'Button');

Hoe maak je je eigen aangepaste shortcode in WordPress

Shortcodes kunnen erg handig zijn als je content of code wilt toevoegen in je berichten of pagina’s. Als je een aangepaste shortcode wilt maken, vereist dit wel enige codeerervaring.

Als je vertrouwd bent met het schrijven van PHP-code, is hier een voorbeeldcode die je als sjabloon kunt gebruiken.

// function that runs when shortcode is called
function wpb_demo_shortcode() { 
 
// Things that you want to do. 
$message = 'Hello world!'; 
 
// Output needs to be return
return $message;
} 
// register shortcode
add_shortcode('welkom', 'wpb_demo_shortcode');

In deze code hebben we eerste een functie gemaakt die een code uitvoert en retourneert. Daarna hebben we een nieuwe shortcode gemaakt genaamd ‘welkom’ en WordPress voert deze code uit.

Je kunt nu deze shortcode toevoegen aan je berichten, pagina’s en widgets met behulp van de volgende code;

[welkom]

Laten we eens kijken naar een wat praktischer gebruik van een shortcode. In dit voorbeeld geven we een Google AdSense-banner weer in een shortcode;

// The shortcode function
function wpb_demo_shortcode_2() { 
 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string; 
 
}
// Register shortcode
add_shortcode('Advertentie_banner'), 'wpb_demo_shortcode_2');

Vergeet niet om de advertentiecode te vervangen door je eigen advertentiecode.

Je kunt nu de shortcode [Advertentie_banner] gebruiken voor in je WordPress berichten, pagina’s en widgets. WordPress voert automatisch de functie uit die gekoppeld is aan de shortcode en geeft de advertentiecode weer.

Een shortcode toevoegen in WordPress Sidebar Widgets

Je kunt ook shortcodes in een WordPress sidebar Widget gebruiken. Ga naar de pagina Weergave > Widgets en voeg de widget Tekst toe aan je zijbalk of Footer.

Tekst zijbalk

Je kunt hier dan je shortcode in het tekstgebied van de widget plakken. Vergeet niet om op ‘Opslaan‘ te klikken om je instellingen op te slaan. Daarna kan je je site bezoeken om de live preview te zien.

Een shortcode toevoegen in de oude WordPress Classic Editor

Bij de klassieke editor kan je als volgt shortcodes toevoegen aan je WordPress berichten en pagina’s. Bewerk het bericht of pagina waar je de shortcode wilt toevoegen. Je kunt de shortcode overal in plakken waar je deze wilt weergeven. Zorg er wel voor dat de shortcode op zijn eigen regel staat. Vergeet niet om de wijzigingen op te slaan.

Classic Editor

Shortcode toevoegen in je WordPress thema

Shortcodes zijn bedoeld om te gebruiken in berichten, pagina’s en widgets. Maar soms wil je een shortcode in een WordPress themabestand gebruiken. Je kunt een shortcode toevoegen (aan elk WordPress themasjabloon) door de volgende code toe te voegen.

<?php echo do_shortcode("[your_shortcode]"); ?>

WordPress zoekt nu naar de shortcode en geeft de uitvoer hiervan weer in jouw thema.

Meestgestelde vragen samengevat

🔐 Wat zijn shortcodes?

Een shortcode is een code waarmee je een terugkerend element, zoals een telefoonnummer kan tonen op je pagina's en berichten. Wanneer je een keer je telefoonnummer wijzigt bijvoorbeeld, wordt deze automatisch aangepast bij alle shortcodes.

➡️ Hoe voeg je een shortcode toe?

De shortcode die je hebt plak je in het functions.php-bestand van je thema toe, of in het speciale bestand voor shortcodes.

🧬 Hoe kom je aan een shortcode?

Om een aangepaste shortcode te maken, heb je enige codeerervaring nodig. In ons artikel staan verschillende shortcodes.

Beoordeel dit artikel

Roger.Overdevest

Roger is een SEO specialist met veel passie voor WordPress

4 reacties

  • Ik maak 360º presentaties van produkten. een vb vind je hier: http://leoheerkens.nl/wp-content/uploads/360/1/index.html
    Nu werk ik als volgt.: Ik plaats een afbeelding en maak dan een koppeling naar de 360 presentaties. Graag zou ik de presentatie meteen op de pagina maken. Kan dit mbv shortcode en kun je me vertellen hoe ik dit moet doen?

    Ik dank je bijvoorbaat voor je hulp.
    Met vriendelijke groeten,
    Dion de Bakker

  • Beste Wouter, Hartelijk dank voor deze tip. Vraag , als ik op deze manier in WordPress een shortcode aanmaak. Werkt deze dan ook in velden van andere plugins? Want dan zou ik makkeliijk in functions adres kunnen aanpassen en dan wordt het overal veranderd.

    Alvast bedankt

  • Wat een slechte code…

    add_shortcode(‘Advertentie_banner’), ‘wpb_demo_shortcode_2’);

    MOET ZIJN:

    add_shortcode(‘Advertentie_banner’, ‘wpb_demo_shortcode_2’);