Je ziet het wel eens in sommige WordPress thema’s, en in veel premium thema’s: een stukje code dat tussen blokhaken “[ ]” staat. Zo’n stukje code heet een shortcode en het zorgt ervoor dat je een vooraf ingestelde handeling ermee kunt oproepen in je berichten. Dit kunnen bijvoorbeeld een knop of een waarschuwingskader zijn en in dit artikel kun je lezen hoe je zelf zo’n shortcode kunt maken.

In dit artikel nemen we als voorbeeld een waarschuwingskader zoals je hieronder kunt zien:

Later in dit artikel zal de shortcode worden uitgebreid zodat er ook andere kleuren kaders mee gemaakt kunnen worden.

Waarom Shortcodes
Shortcodes kunnen je veel werk uit handen nemen voor onderdelen die je vaak gebruikt. Zo hoef je zelf niet meer de code in als je iets voor elkaar wilt krijgen, maar hoef je enkel eenmalig een shortcode aan te maken en kan je hem vervolgens makkelijk gebruiken. Ook is het handig voor bijvoorbeeld contactinformatie die je op meerdere plekken in wilt voegen. Mocht er dan iets gewijzigd worden, bijvoorbeeld een email adres, dan hoef je dit alleen in je shortcode-code aan te passen en niet op alle plekken waar hij wordt gebruikt.

Shortcode aanmaken
Om een shortcode te maken, hoef je alleen een stukje code in je functions.php bestand te plaatsen. Vervolgens kun je hem dan met [shortcode] aanroepen in je berichten. Let er wel op dat sommige thema’s een speciaal bestand hebben voor shortcodes. In dat geval dien je de code niet in het functions.php bestand te plaatsen, maar juist in dat bestand. Voordat je de aanpassing doorvoert, is het verstandig om een backup te maken van het bestand dat je wijzigt. Bij een fout kan het namelijk voorkomen dat je website niet goed meer functioneert. Je kunt er ook voor kiezen om een child theme te gebruiken of het eerst op een test-omgeving uit te proberen.

De code voor het waarschuwingskader is als volgt:

function waarschuwingsbox($atts, $content = null) {
   return '<div class="waarschuwingsbox"><span>' . do_shortcode($content) . '</span></div>';
}
add_shortcode(‘waarschuwing’, ‘waarschuwingsbox'); 

Let er bij je shortcodes op dat de twee woorden in de add_shortcode() functie niet hetzelfde mogen zijn. De eerste geeft de naam weer van je shortcode en de tweede de naam van de functie die vervolgens wordt aangeroepen. Wanneer je die hetzelfde noemt, is er geen onderscheid meer mogelijk.

Voordat het waarschuwingskader er uitziet zoals in dit artikel, moeten we ook wat CSS toevoegen. Open hiervoor je style.css bestand en voeg daar de volgende code aan toe:

/**
* Waarschuwingsbox
*/
.waarschuwingsbox {
   border: 1px solid #FBC4C4; /* randkleur */
   background: #FFE9E9; /* achtergrondkleur */
   color: #DE5959; /* tekstkleur */
   font-family:Helvetica,Verdana,Arial;
   font-size: 13px;
   line-height: 24px;
   padding: 10px 10px 10px 10px;
   margin-bottom: 20px;
   width: 95%;
}

Wanneer je nu in een bericht een waarschuwingsbox wilt, gebruik je daarvoor de volgende regel: [waarschuwingsbox] Tekst die je in de waarschuwingsbox wilt hebben [/waarschuwingsbox] . Je kunt dit stukje op elke plaats in je bericht zetten waar je de waarschuwingsbox wilt hebben.

Andere kleuren met parameters
Het is natuurlijk mogelijk om voor verschillende kleuren verschillende shortcodes te maken, maar je kunt ook paramters gebruiken. Het voordeel van een parameter is dat je bijvoorbeeld de gewenste kleur kunt meegeven, en niet meerdere functies hoeft te schrijven die steeds ongeveer hetzelfde doen. In dit voorbeeld gaan we gebruik maken van een parameter “kleur” om de kleur van het kader mee te geven. De code die je hiervoor in je functions.php bestand moet plaatsen is als volgt:

function color_box($atts, $content = null) {
   extract(shortcode_atts(array(‘kleur’ => '#'), $atts));
   return '<div class="box_' . $kleur . '"><span>' . do_shortcode($content) . '</span></div>';
}
add_shortcode('colorbox', 'color_box'); 

De code let hierbij op of de parameter “kleur” wordt meegegeven en, zo ja, slaat deze op in de variabele $kleur. Aan de hand van de kleur wordt er een bepaalde klasse toegevoegd, bestaande uit “box_” gevolgd door de meegegeven kleur.

Vervolgens moeten we in onze style.css een aantal regels CSS plaatsen die de verschillende kleuren kaders opmaken:

.box_rood {
   border: 1px solid #FBC4C4; /* randkleur */
   background: #FFE9E9; /* achtergrondkleur */
   color: #DE5959; /* tekstkleur */
   font-family:Helvetica,Verdana,Arial;
   font-size: 13px;
   line-height: 24px;
   padding: 10px 10px 10px 10px;
   margin-bottom: 20px;
   width: 95%;
}

Deze code kun je meerdere malen plaatsen, waarnaar je de naam “box_rood” aan kunt passen naar de gewenste kleur (bijvoorbeeld box_groen en box_blauw). Vervolgens kun je de kleurcodes van de achtergrond, de rand en de tekst aanpassen. Kleurcodes kun je bijvoorbeeld vinden met behulp van een color picker.

Wanneer je nu in een bericht de shortcode [ colorbox kleur=rood ] [ /colorbox] plaatst, zal de tekst ertussen omringt worden door een rood kader. Wanneer je ook andere kleuren in je CSS bestand hebt toegevoegd, kun je die aanroepen door bijvoorbeeld [ colorbox kleur=blauw] te gebruiken.

Mocht je na het lezen van dit artikel vragen of opmerkingen hebben, dan kun je altijd contact opnemen of een reactie achterlaten.

Michel Kraaijeveld

Michel Kraaijeveld is oprichter van WPsitemaken. Hij is ervan overtuigd dat het voor iedereen mogelijk moet zijn om een eigen website te maken, zonder lastige handleidingen door te hoeven nemen. Zelf is hij al 6 jaar actief met WordPress en probeert zijn kennis op een simpele manier over te brengen aan anderen.