WordPress - Eigen Shortcodes


Shortcodes in WordPress, dit zijn kleine stukjes code die je aan een bericht of pagina kunt toevoegen. Denk bijvoorbeeld aan een plugin om formulieren mee te maken, middels een shortcode kan dan het formulier worden toegevoegd aan een bericht of aan een pagina.

Op deze manier is het ook mogelijk om zelf shortcodes te maken zodat je eenvoudig bepaalde elementen kunt toevoegen aan meerdere berichten of aan meerdere pagina's. Voeg hiervoor de onderstaande code aan het functions.php bestand van het thema.

In de code op de tweede regel zie je de tekst die is opgenomen. Dit kun je vervangen naar wens met eigen tekst, een afbeelding, een formulier of andere gewenste content.

function phone_shortcode() {
        return '<p>Bel ons op 0900-8888</p>';
}
add_shortcode('telefoon', 'phone_shortcode');


Na het toevoegen van de bovenstaande code kan deze in een bericht of pagina simpelweg opgeroepen worden op de onderstaade manier. Dit is de naam (telefoon) die ingesteld is in de code hierboven op de laatste regel direct na add_shortcode, geplaatst tussen haken.

[telefoon]

Openen en afsluiten

Het is ook mogelijk om een shortcode in te stellen om bijvoorbeeld kolommen te kunnen maken of om bijvoorbeeld afbeeldingen te voorzien van een div. Dit kan op de onderstaande manier. In de code gaat het om de shortcode image, in de wysiwyg editor plaats je dan eerst [image] en sluit je af met [/image]. Alles ertussen zal dan een DIV om zich heen gaan krijgen met in dit geval de classnaam image.

function sc_image($atts, $content = null) {
        return '<div class="image">' . $content . '</div>';
}
add_shortcode('image', 'sc_image');

Attributen

Eventueel kunnen shortcodes ook worden voorzien van attributen. Zoals in het onderstaande geval heet het attribuut 'label' en heeft het attribuut een bepaalde waarde. In het onderstaande geval zal het attribuut worden uitgelezen en worden voorzien van een div met classnaam. De code om in functions.php te plaatsen om een attribuut uit te lezen zie je hieronder, er kunnen meerdere attributen gebruikt worden op deze manier.

[telefoon label="Vestiging 1"]0900-9999[/telefoon]


function add_label($atts, $content = null) {
        $data = shortcode_atts(
        array(
                'label' => TRUE
                ),$atts
        );
        $label = esc_attr($data['label']);
        return '<div class="label">' . $label . '</div><div class="phone">' . $content . '</div>';
}
add_shortcode('telefoon', 'add_label');

Shortcode aanroepen in template

Een shortcode rechtstreeks aanroepen in de template kan ook. Gebruik dan de onderstaande code in de template en plaats de correcte shortcode.

<?php
        echo do_shortcode('[contact-form-7 id="62" title="Contactformulier 1"]');
?>