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).

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

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:

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:

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.

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;

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.

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

Beoordeel dit artikel

Roger Overdevest

Roger is eigenaar van de website WPLounge en van zoekmachine marketing bureau Kliq Internet

Gratis op de hoogte blijven?

Meld je gratis aan voor onze nieuwsbrief om op de hoogte
te blijven over ontwikkelingen in WordPress!

3 reacties

Scroll Up Skip to content