Pagina1 van 1

Eigen Shortcodes voor WordPress

Eigen Shortcodes voor WordPress
   0

In dit artikel een korte beschrijving hoe je zelf ShortCodes kunt toevoegen aan jouw WordPress website.

Een van de redenen waarom WordPress zo geliefd is, is omdat je het zo snel een eenvoudig kunt aanpassen aan jouw persoonlijke voorkeuren. Dit kan d.m.v. de enorme selectie (vaak gratis) plugins, of omdat het schrijven van eigen aanpassingen zo erg eenvoudig kan zijn.

Een van deze opties die je zelf kunt “bouwen” zijn de zogenaamde “Shortcodes” waarbij een simpele code in een artikel of een pagina een hoop werk van je overneemt.

In dit artikel laat ik je zien wat Shortcodes zijn en hoe je ze zelf kunt maken aan de hand van een simpel voorbeeld.




Short-watte?

Shortcodes worden vaak gebruikt in de tekst editor van WordPress, bijvoorbeeld wanneer je een Post of Page bewerkt.

Je kunt het misschien het beste met een “macro” vergelijken;
Een simpele code voert automatisch een aantal, soms zelfs complexe, bewerkingen uit.

 Merk op … 

De Shortcode wordt niet uitgevoerd terwijl je een tekst aan het bewerken bent.De Shortcode wordt pas uitgevoerd als een pagina zichtbaar gemaakt wordt naar de gebruiker. Als je dus een Shortcode later veranderd, dan reflecteren deze veranderingen ook in de “oude” artikelen waar je dezelfde Shortcode gebruikte!

Laat ik dit illustreren met een eenvoudig voorbeeld.

Stel we hebben de simplistische Shortcode:


[link naar="http://www.weethet.nl" naam="WeetHet"]

Bij weergave door WordPress zou dit bijvoorbeeld de volgende HTML code kunnen genereren:


<a href="http://www.weethet.nl"><img src="link_pijltje.gif">WeetHet</a>

Ik weet dat dit natuurlijk een wel heel erg simpel voorbeeld is.

Bedenk echter, dat je zo’n beetje alles door zo een Shortcode gedaan kunt krijgen – het is maar net wat je zelf in de “functie” van de Shortcodes definieert. Zo gebruik ik op Tweaking4ll een Shortcode om alle details van een download bestand te laten zien in een hint-window (naam, omvang, categorie, link, etc).

Bijvoorbeeld de volgende Shortcode:


[download id=172]

genereert dit:

Download - Name My TV Series Windows (32 bits) 

Bestandsnaam:  Name-My-TV-Series-v1.8.4-Windows-x86.zip
Platform:  Microsoft Windows
Versie:  1.8.4b
Omvang:  15.4 MB
Datum:  2017-09-30
 Download Nu  Stuur me Koffie    

Shortcodes kunnen ook gebruikt worden om rond een stuk tekst te zetten.

Op tweaking4ll zie je dat bijvoorbeeld bij de gekleurde informatie blokken. Shortcode in de tekst editor ziet er dan ongeveer zo uit:


[mijn_infoblok]Wat handige informatie, een tip, of een waarschuwing[/mijn_infoblok]

Informatie-blok als Voorbeeld

Terwijl ik WeetHet.nl aan het revampen was naar tweaking4ll en meteen migreerde naar WordPress, liep ik al snel tegen de beperkingen (voor mijn gevoel) van de tekst editor TinyMCE aan, welke standaard door WordPress gebruikt wordt in de admin pagina’s.

Niet zo zeer de beperking van de editor als zodanig, maar meer het feit dat ik de verwend was door de programma’s die ik voorheen gebruikte om artikelen te schrijven.

Ik zocht naar eenvoudige manier om een infobox te maken – omdat het altijd dezelfde stappen zijn die ik moest doen om zo’n informatie blokje netjes en consistent weer te geven. Al snel vond ik de zogenaamde Shortcodes van WordPress en wilde graag een Shortcodes hebben die dit allemaal voor mij zou doen.

Als voorbeeld wilde ik de volgende (versimpelde) HTML code automatisch rond mijn tekst zien:


1
2
3
4
<div class="een_stijl">
    <img src="info_icon.png">
    De Tekst
</div>

Met een Shortcodes zou dit er als volgt uit kunnen zien:


[mijn_infoblok]De Tekst[/mijn_infoblok]

Hieronder een voorbeeld van zo een block:

 Merk op … 

Wat extra CSS voor het HTML voorbeeld kan het e.e.a. er natuurlijk wat leuker uit laten zien.Bijvoorbeeld; De afbeelding links bovenin, een passende achtergrond kleur en gekleurde rand.De benodigde CSS kan bijvoorbeeld worden toegevoegd aan het style.css bestand dat bij het theme hoort wat je gebruikt.
Je vindt dit bestand in de thema folder van jouw thema (wp-content/theme/thema-naam).

Je kunt overigens van alles in zo’n blok zetten – behalve … Shortcodes … (tenzij je een speciale functie aanroept in jouw functie welke we als laatste bespreken)

PHP Code voor de Shortcode

Het gedrag van een Shortcode wordt bepaald door een functie die je in PHP schrijft. Deze functie moet geplaatst worden in het functions.php bestand van het thema dat je gebruikt (zie de theme folder: wp-content/theme/thema-naam).


1
2
3
4
function make_infobox($att, $content = null) {
    return '<div class="een_stijl">'.
           '<img src="info_icon.png">'.$content.'</div>';
}

Dit is een simpel voorbeeld natuurlijk, en als je niet goed bekend bent met PHP dan raad ik je aan daar even naar te kijken.

In het kort:
Definieer functie make_infobox die de parameters $att en $content accepteerd welke leeg (null) zijn als ze niet opgegeven worden.
Stuur de volgende tekst terug (return) ‘<div class=”een_stijl”>’, ‘<img src=”info_icon.png”>’, $content, ‘</div>’. De punt tussen die stukken tekst plakt ze zeg maar aan elkaar.

 LET OP! 

Iedere definitie van een Shortcode heeft deze twee parameters, waarbij $att een array is en $content een string (‘De Tekst’ in het voorbeeld).Iedere functie stuur een tekst terug! Gebruik dus niet echo of zoiets dergelijks!

 

De $content is iets wat beschikbaar is als je een Shortcode maakt die een begin en een sluit ’tag’ heeft, hier: [mijn_infoblok] (begin) en [/mijn_infoblok] (sluiten).

Het symbool om te sluiten herken je misschien van HTML of XML: ‘/’.

Stel voor je hebt een Shortcode: [mijn_tag code=”123″]

Dan zal de $att array deze waarde bevatten. Je roept het aan met $att[“code”].

In ons info-blok voorbeeld gebruiken we dit niet, maar zoals je ziet werkt het vrij simpel.

Toevoegen van de ShortCode

We hebben nu dus een functie die het werk voor ons doet – nu moeten we WordPress laten weten dat het deze code moet gebruiken.

We gebruiken hiervoor de WordPress functie add_shortcode() welke je moet toevoegen in het functions.php bestand van het theme dat je gebruikt, bij voorkeur na de definitie van de functie die we zojuist gedefineerd hebben:


1
add_shortcode("mijn_infoblok", "make_infobox");

De eerste parameter (mijn_infoblok) definieerd de Shortcode die we invoeren in de tekst editor (zonder vierkante haakjes), de tweede parameter (make_infobox) vertelt WordPress welke functie in het functions.php bestand gebruikt dient te worden wanneer het tegen onze Shortcode aan loopt.

Alles op een rijtje …

In het functions.php bestand vinden we dus (positie maakt niets uit – maar wel in deze volgorde):


1
2
3
4
5
6
function make_infobox($att, $content = null) {
    return '<div class="een_stijl">'.
           '<img src="info_icon.png">'.$content.'</div>';
}

add_shortcode("mijn_infoblok", "make_infobox");

Als je het hebt toegevoegd aan functions.php probeer het dan in een nieuw (of bestaand) artikel en klik op “Preview Changes“.

 TIP 

Wanneer je afbeeldingen gebruikt (zoals in dit voorbeeld), zorg er dan voor dat de afbeelding in de theme folder staat ne het is dan ook aan te raden om het correcte pad toe te voegen aan de functie zoals hieronder aangegeven (get_bloginfo(“template_url”)):


1
2
3
4
5
function make_infobox($content = null) {
    return '<div class="een_stijl"><img src="'.
            get_bloginfo("template_url").'/info_icon.png">'.
            $content.'</div>';
}

Shortcodes in een Shortcode?

De tekst die $content doorstuurt naar jouw Shortcode functie wordt door WordPress niet nog eens bestudeerd om te kijken of er Shortcodes in staan. Een Shortcode in een Shortcode wordt dus niet correct behandeld en gewoon als simpele tekst weergegeven.

 

Je kunt dit (indien nodig!) oplossen door de tekst ($content) nog eens door de WordPress molen te halen.

Vervang dan $content door do_shortcode($content):


1
2
3
4
function make_infobox($att, $content = null) {
    return '<div class="een_stijl">'.
           '<img src="info_icon.png">'.do_shortcodes($content).'</div>';
}

Meer informatie

Meer, en zeker meer geavanceerde informatie vindt je op de WordPress Codex pagina’s.

 

Ondersteun ons ...


Jouw ondersteuning wordt zeer gewaardeerd, en hoeft zelfs niets te kosten. Bijvoorbeeld door links naar ons te delen op social media, of andere websites.

Andere vormen kunnen ook gratis zijn (b.v. shoppen op Amazon).
Alle opbrengsten worden gebruikt voor web-hosting kosten, project hardware en software, koffie, etc.

Hartelijk dank voor wie al heeft bijgedragen!
Het is altijd geweldig om te zien hoe men mijn artikeltjes en applicaties weet te waarderen.

Merk op dat het klikken op affiliate links een kleine commissie voor ons kunnen genereren - dit wordt zeer gewaardeerd.

Reacties


Er zijn nog geen reacties geplaatst.
Je kunt jouw eigen opmerkingen plaatsen m.b.v. dit formulier, of een reactie op een bestaande opmerking plaatsen door op de "Beantwoorden" knop te klikken.



Jouw Opmerking ...

Plaats hier geen grote bestanden (zoals source codes, log files of config files). Gebruik hiervoor het Forum.

Delen:
*
*
Laat me per email weten als er nieuwe reacties zijn.
       Je kunt jouw RSS reader gebruiken om reacties te volgen.


Tweaking4All gebruikt de gratis Gravatar dienst voor Avatar weergave.