In een vorige blog heb ik je laten zien waar je je maatwerk code kunt laten in je WordPress website. Een van de mogelijke manieren om maatwerk weer te geven op je website is door middel van je eigen shortcode. Shortcodes zijn een soort snelkoppelingen waar je een stuk code mee uit kan laten voeren. Shortcodes kun je bijna overal op je website gebruiken.
Wat je kunt met een shortcode
Shortcodes kun je inzetten voor allerlei doelen. Het grote voordeel van een shortcode is dat je hem op meerdere plekken op je website kunt gebruiken. Zo kun je bijvoorbeeld een shortcode gebruiken om je telefoonnummer weer te geven op je website. Mocht je telefoonnummer ooit veranderen, dan hoef je deze maar op 1 plek in je code te wijzigen en het wordt automatisch overal in je website doorgevoerd. Een shortcode gebruik je door in je beheeromgeving een bepaalde term tussen blokhaken te zetten. Welke term dit is kun je zelf kiezen. In deze blog gebruiken we bijvoorbeeld [phone] en [random_cat].
Hoe je een eigen shortcode aanmaakt
Een shortcode toevoegen in WordPress doe je met behulp van de add_shortcode functie die in WordPress gebouwd zit. Deze functie vereist 2 parameters, een tagnaam en een callback functie. Het simpele voorbeeld van het telefoonnummer ziet er dan als volgt uit:
add_shortcode('phone', function () {
return "(010) 307 41 33";
});Wanneer je nu dus ergens in je website [phone] gebruikt, staat er (010) 307 41 33.
Een geavanceerder voorbeeld
Stel je hebt data van een externe partij die je op wilt halen en wilt weergeven op je website. Dan kun je dit doen met je eigen shortcode. Het enige wat je hiervoor hoeft te doen is de data ophalen en deze uit te voeren naar HTML. Om data op te halen van een externe partij gebruiken we de ingebouwde wp_remote_get functie van WordPress.
add_shortcode('random_cat', function () {
$response = wp_remote_get('https://aws.random.cat/meow');
$body = json_decode($response['body'], true);
return "<img src='$body[file]'/>";
});De uitkomst van deze shortcode zie je rechts op de pagina. De URL “https://aws.random.cat/meow” geeft een link naar een random plaatje uit de database van random.cat. Probeer de pagina maar eens te verversen. Er wordt dan een nieuw plaatje opgehaald.
