De complete uitleg over WordPress shortcodes (incl. voorbeelden – maak je eigen shortcodes)

WordPress shortcodes zijn een krachtig hulpmiddel om met weinig moeite veel voor elkaar te krijgen. Je kan er nagenoeg alles mee doen! Je kunt shortcodes gebruiken om interactieve elementen in je pagina’s op te nemen of complexe lay-outs te maken. En dat door slechts een enkele regel code in te voegen.

Als je bijvoorbeeld een galerij wilt toevoegen, hoef je alleen maar de volgende code te typen:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Hiermee krijg je een galerij met de afbeeldingen met de genoemde ID’s. De galerij zal 4 kolommen hebben met een maximum grootte van ‘medium’ (zoals WordPress medium ziet).

Je hebt dus geen lelijke HTML-code nodig om dit gedaan te krijgen.

Door shortcodes te gebruiken heb je niet langer ingewikkelde scripts nodig. Zelfs als je weinig of geen ervaring met programmeren hebt, kun je zo moeiteloos dynamische content toevoegen.

Ze zijn ontzettend populair onder WordPress-ontwikkelaars, omdat ze zo handig zijn bij het snel produceren van content en design. Shortcodes zijn voor WordPress-ontwikkelaars wat macro’s zijn voor data-analisten, of sneltoetsen voor professionele grafisch ontwerpers.

In deze uitleg vertellen we je alles wat je moet weten over shortcodes. Je zult ook leren hoe je de Shortcode API kunt gebruiken om je eigen shortcodes te maken. En aan het einde zullen we ook kijken naar de toekomst van shortcode en wat je van shortcodes kan verwachten in de nieuwe blockeditor van WordPress.

Nieuwsgierig? Laten we beginnen!

Wat is een shortcode?

Kortgezegd: Shortcode = Shortcut + Code.

Over het algemeen worden rechte haken [] gebruikt om te definiëren hoe shortcodes werken. Elke shortcode voert een bepaalde actie uit binnen de website. Dat kan iets simpels zijn zoals het formateren van content iets complex als het definiëren van de volledige structuur van een website.

Zo kun je shortcodes gebruiken om sliders toe te voegen, maar ook formulieren of zelfs prijstabellen. Ze zijn ook erg handig om ontwerpsjablonen mee te maken die je steeds opnieuw kunt gebruiken.

Een korte geschiedenis van shortcodes

Shortcodes werden populair via een online softwareforum, genaamd Ultimate Bulletin Board (UBB). Dit forum introduceerde in 1998 de BBCode (Bulletin Board Code), een aantal tags waarmee gebruikers eenvoudig hun berichten konden opmaken.

BBCode is een lichtgewicht markup-taal, en werkt net als HTML, maar dan veel simpeler.

Bijkomend voordeel is dat vooraf gedefinieerde tags is ook veiliger zijn, omdat gebruikers niet zelf HTML toe kunnen voegen waarmee ze mogelijkerwijs beveiligingslekken kunnen creëren. Zo zou een gebruiker met slechte intenties de <script> tag kunnen gebruiken om iets met JavaScript uit te voeren en hiermee de site platlegt.

Nadat BBCode shortcodes introduceerde, voegden ook andere online forums al snel soortgelijke features toe, zoals phpBB, XMB Forum en vBulletin.

Shortcodes geven admins meer controle over wat gebruikers wel of niet kunnen doen. Tegelijk geeft het de gebruikers de mogelijkheid hun content met simpele tags te voorzien van opmaak.

Vanwege dezelfde veiligheidsredenen staat WordPress ook niet toe dat PHP-code wordt uitgevoerd binnen de content van de websites. Om de beperking die hierdoor ontstaat te omzeilen introduceerde WordPress 2.5 de shortcode-functie in 2008, door middel van de Shortcode API. Het is inmiddels één van de meest gebruikte features door ontwikkelaars van WordPress-plugins en thema’s.

Wat zijn WordPress shortcodes?

WordPress shortcodes zijn stukken tekst binnen rechte haken ( [ ] ) die op magische wijze veranderen in prachtige dingen aan de front-end van een website, het deel dat de bezoekers zien. Ze geven gebruikers een eenvoudige manier om gecompliceerde content te maken zonder moeilijke HTML of codes te hoeven gebruiken.

De 2 soorten shortcodes

Er zijn in feite 2 verschillende soorten shortcodes bij WordPress.

• Self-closing of zelfsluitende shortcodes: Deze hebben geen sluit-tag nodig.

Bijvoorbeeld: De gallery shortcode heeft geen sluit-tag nodig. Je kunt alle noodzakelijke dingen toevoegen via de verschillende attributen.

• Enclosing of omsluitende shortcodes: Deze hebben wel een sluit-tag nodig. Omsluitende shortcodes bewerken meestal de content tussen de openings-tags en sluit-tags in.

Bijvoorbeeld: De caption shortcode wordt gebruikt om een caption onder een stuk content te zetten. Het wordt natuurlijk vooral gebruikt om een onderschrift bij afbeeldingen te plaatsen, maar het werkt in principe bij elk HTML-element.

Sommige shortcodes werken zowel met als zonder attributen. Dat hangt af van hoe de shortcode gedefinieerd wordt.

De standaard shortcodes bij WordPress

WordPress heeft standaard 6 shortcodes:

• audio: Hiermee kun je audiobestanden invoegen op je website. Hier horen ook eenvoudige functies zoals starten en pauzeren bij.
• caption: Hiermee voeg je een ondertitel of caption in. Dit wordt meestal gebruikt bij afbeeldingen, maar je kunt het bij elk HTML-element gebruiken.
• embed: Dit is een uitgebreidere versie van de oEmbed feature. Deze shortcode maakt het mogelijk om verschillende attributen toe te voegen aan je insluitingen, zoals het instellen van de maximale afmetingen.
• gallery: Hiermee voeg je een eenvoudige galerij toe aan je website, zoals in het voorbeeld te zien was. Je kunt attributen gebruiken om te bepalen welke afbeeldingen worden gebruikt en hoe de galerij er precies uitziet.
• playlist: Je kunt een aantal audio- of videobestanden laten zien met deze omsluitende shortcode. Je kunt zelfs een fancy donkere modus instellen door middel van het style attribuut.
• video: Sluit een videobestand in en speel het af met een eenvoudige video-player. Deze shortcode ondersteunt het insluiten van video’s met verschillende bestandstypen: mp4, webm, m4v, ogv, wmv, flv.

Voor meer informatie hoe je de standaard shortcodes kunt gebruiken en welke attributen je kunt gebruiken kun je naar de gelinkte Codex-bestanden gaan.

Hoe gebruik je WordPress shortcodes

Het gebruiken van shortcodes binnen WordPress is eenvoudig. Maar het hangt er wel vanaf waar op je website je ze precies wilt hebben. Zorg dat je de volledige documentatie over de shortcode leest, zodat je goed snapt hoe ze werken. Zorg dat je weet welke attributen worden ondersteund en welke niet, zodat je precies krijgt waar je naar op zoek bent.

Het gebruiken van WordPress shortcodes binnen pagina’s en artikelen

Je gaat eerst naar de editor voor de pagina of het artikel waar je de shortcode in wilt voegen.

Als je de Gutenberg-editor gebruikt kun je de shortcode tag toevoegen in een apart Shortcode block. Deze is te vinden in de sectie Widgets.

Gebruik je nog altijd de Classic Editor (of de plugin)? Dan kun je de shortcode tags op de klassieke manier invoegen. Sommige shortcodes hebben zelfs een knop in de editor waarmee je ze met één klik kunt invoegen.

WordPress shortcodes gebruiken voor widgets in de zijbalk

Je kunt ook shortcodes invoegen in de widgets in de zijbalk. Om dit te doen ga je naar Weergave » Widgets en voeg je een Tekst widget toe aan het gedeelte waar je de shortcode wilt plaatsen.

Plak de shortcode in de Tekst widget en sla je wijzigingen op. Je kunt vervolgens je website bekijken om het resultaat te zien.

Opmerking: WordPress 4.8 en de versies daaronder ondersteunen geen shortcodes binnen widgets in de zijbalk. Lees meer over de verbeteringen aan widgets voor WordPress 4.9 voor meer details.

WordPress shortcodes gebruiken binnen de header en de footer

WordPress shortcodes zijn in principe bedoeld voor pagina’s, artikelen en widgets. Maar er is een makkelijke manier om shortcodes overal in je website toe te voegen.

Stel dat je een call-to-action knop in je footer wilt hebben of in al je artikelen net boven de reacties. Dan is de do_shortcode() callback function erg handig.

Je moet dan de volgende code toevoegen aan het header.php , footer.php of sjabloon-bestanden van je thema.

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

Hierdoor zal je het resultaat zien op de plek waar je de code hebt toegevoegd.

Vergeet de rechte haken binnen de aanhalingstekens niet. Als je alleen de naam gebruikt werkt de shortcode niet.

Op dezelfde manier kun je de do_shortcode() callback-functie gebruiken om shortcodes overal binnen WordPress in te schakelen, bijvoorbeeld binnen de reacties.

Een korte introductie over de Shortcode API

De WordPress Shortcode API bepaalt hoe je shortcodes kunt gebruiken om de functionaliteit van je website te veranderen. Het zorgt ervoor dat ontwikkelaars unieke content (zoals formulieren, carrousels, sliders) kunnen maken die gebruikers dan kunnen toevoegen aan hun websites door de relatief simpele shortcodes te gebruiken.

Je kunt bijna elke denkbare feature aan je website toevoegen door shortcodes te gebruiken.

De API ondersteunt zowel zelfsluitende als omsluitende shortcodes. Het regelt alle lastige details en bevat helper-functies om standaard-attributen te laden en in te stellen.

Dankzij de API kun je zo met shortcodes beginnen, zonder dat je kostbare tijd kwijt bent aan het apart definiëren van algemene functies voor elke shortcode.

De basis van de Shortcode API

Elke keer dat je een pagina of artikel opent in WordPress, wordt er tijdens het laden van de content gezocht naar geregistreerde shortcodes.

Als inderdaad een bekende shortcode wordt gevonden, neemt de Shortcode API de taak over om de shortcode te verwerken. De resulterende output komt in de plaats van de shortcode-tag te staan.

Je kunt een shortcode bij WordPress registreren door de add_shortcode() functie. Dat doe je zo:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

• • • shortcode_name: Dat is de tag waar WordPress naar zal zoeken terwijl het content verwerkt. De Shortcode API raadt aan dat je alleen kleine letters, getallen en lage streepjes ( _ ) gebruikt om de tag te bepalen (dus geen koppeltekens – ).
    • shortcode_handler_function: De callback-functie die wordt uitgevoerd nadat WordPress bevestigd heeft dat er inderdaad een geregistreerde shortcode aanwezig is.

De shortcode handler-functie wordt zo gedefinieerd:

function shortcode_handler_function( $atts, $content, $tag ){ }

• • • $atts: Een bijbehorende selectie attributen (op precies te zijn een array van key-value paren) Als je geen attributen toewijst, wordt dit een lege string.
    • $content: De omsloten content, als je een omsluitende shortcode gebruikt. Het is de verantwoordelijkheid van de handler-functie om ervoor te zorgen dat de $content waarde teruggaat naar de output.
    • $tag: De waarde die de shortcode tag aanneemt (shortcode_name in het voorbeeld hierboven). Als twee shortcodes dezelfde callback-functie gebruiken (dat kan prima), helpt de waarde van $tag om te bepalen welke shortcode de handler-functie geactiveerd heeft.

De API verwerkt de tag, attributen en eventuele omsloten content van de shortcode door de data naar de handler-functie te sturen, die het allemaal verwerkt en output genereert.

Deze output (een string) vervangt vervolgens de shortcode macro aan de voorkant van je website. Wat je dus uiteindelijk ziet is deze output.

Waar kun je je eigen shortcode-scripts toevoegen?

Je kunt je eigen shortcode-scripts toevoegen aan het functions.php bestand van je thema of ze toevoegen met een plugin.

Als je het doet via een thema-bestand kun je dit rechtstreeks doen door add_shortcode() te gebruiken.

Maar als je een plugin gebruikt, raad ik je aan om deze pas te initialiseren nadat WordPress volledig is geladen. Dat kun je afdwingen door de add_shortcode() functie te ‘wrappen’ in een andere functie. Dat heet dan ook een wrapper-functie.

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

De add_action() functie zorgt ervoor dat de shortcodes_init functie pas geactiveerd wordt nadat WordPress volledig geladen is (dat heet de ‘init’ hook).

Hoe je je eigen shortcode kunt maken bij WordPress (voor beginners)

Nu we allemaal de basis begrijpen, kunnen we beginnen met het maken van onze eigen shortcode.

Om de stappen hieronder te kunnen volgen, is het handig als je al vaker PHP-code hebt gebruikt en je in het verleden al een of meerdere keren je eigen WordPress thema-bestanden hebt bewerkt. Nadat je deze uitleg hebt opgevolgd, dan heb je de beschikking over je eerste bloedeigen WordPress-shortcode!

We beginnen met de kortst mogelijke shortcode en werken van daaruit naar meer complexe shortcodes.

Voorbeeld 1: Shortcode die [current_year] gebruikt

Laten we een shortcode maken die [current_year] aanroept om het huidige jaar op je website te laten zien.

Deze shortcode is vooral handig als je content op je website hebt die elk jaar bijgewerkt moet worden. Denk bijvoorbeeld aan je copyright onderaan je website.

Ik zal een eenvoudige, lege plugin gebruiken om mijn shortcode-functies in te plaatsen. Als alternatief kan je deze code ook toevoegen aan het functions.php bestand van je thema, maar dat zou ik niet aanraden. Om een beetje mee te oefenen en experimenteren kan het echter prima.

Laten we beginnen door een plugin te maken. Maak een nieuw map binnen wp-content/plugins/.

Ik noem mijn plugin “salcodes”, maar je kunt het zo noemen als je wilt.

In de salcodes plugin map, maak je een PHP-bestand met dezelfde naam (salcodes.php). Daarna voeg je de volgende header toe aan je plugin-bestand:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Deze simpele header is goed genoeg voor wat wij willen. Je kunt meer info krijgen over plugin header-eisen in de WordPress-Codex. Sla dit bestand op, en ga naar je WordPress dashboard om de plugin te activeren.

Nu gaan we de shortcode en de handler-functie registreren. Daarvoor moet je de volgende code toevoegen aan je plugin-bestand:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

• • • @return tag in het PHP-commentaar definieert wat voor type output er gemaakt wordt. Hierna geef je een korte beschrijving van die output.
    • current_year is de tag of naam van de shortcode. Hiermee definieer je ook welke zelfsluitende tag je moet toevoegen aan je content, in dit geval dus [current_year].
    • salcodes_year is de naam van de shortcode handler-functie die de output zal aanleveren. We zullen deze callback-functie zometeen definiëren. Aangezien we een eenvoudige zelfsluitende shortcode maken, hoef je geen variabelen aan te geven, zoals $attributes, $content of $tag.
    • salcodes_init is de wrapper-functie die vastzit zit (hook) aan ‘init’ om af te dwingen dat de shortcode pas geregistreerd en uitgevoerd wordt nadat WordPress klaar is met laden. De ingebouwde add_action()-functie van WordPress maakt dit mogelijk.
    • getdate() is een PHP-functie die een array met datum-informatie op basis van de huidige timestamp teruggeeft. De jaar-key bevat de waarde voor het huidige jaar (als een string met 4 cijfers). Zo geeft getdate()[‘year’] dus het huidige jaar terug. Deze output is precies wat we willen.

Sla nu je plugin-bestand op. Nu moeten we checken of de shortcode inderdaad werkt.

Voeg de shortcode ergens toe in je website (pagina, artikel, zijbalk, widget, etc). Ik voeg het zelf toe aan de Text widget in mijn zijbalk.

En zoals verwacht werkt alles perfect.

Gefeliciteerd met je eerste succesvolle shortcode!

De shortcode die je nu net gemaakt hebt heeft geen $attributes of $content variabelen nodig. In de volgende voorbeelden zullen we shortcodes gebruiken die ze wel hebben.

Voorbeeld 2: Shortcode voor een CTA-knop

We gaan nu een eigen shortcode voor een CTA-knop maken. Deze zal ook zelfsluitend zijn (sorry $content, nog even wachten).

Ik wil dat gebruikers de grootte en kleur van de CTA-knop aan kunnen passen via de attributen van de shortcode.

Aangezien het uiteindelijke resultaat een knop-element is, kunnen HTML-attributen zoals href, id, class, target & label gebruikt worden om het naar smaak aan te passen.

Je kunt de id en class attributen gebruiken om de knop te stylen aangezien het beide gebruikelijke CSS-selectors zijn.

Om het voorbeeld overzichtelijk te houden, ga ik geen wrapper-functie voor mijn handler-functie schrijven.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Snap je het nog? Geen paniek,ik zal per regel een uitleg geven, zodat je precies snapt hoe het werkt.

• • • We kennen de add_shortcode() functie al van het vorige voorbeeld.
    • shortcode_atts() is een WordPress-functie die shortcode-attributen van gebruikers combineert met bekende attributen. De functie vult standaardwaarden in waar nodig (die kun je zelf aanpassen). Het resultaat is een array met elke key van bekende attributen, samengevoegd met de waarden van de shortcode-attributen van de gebruiker.
    • Binnen de handler-functie van de shortcode definiëren we een variabele ($a) en wijzen die toe aan de array die teruggestuurd wordt door shortcode_atts(). We wijzen de standaardwaarden (default value) voor de attributen toe met de syntax: ‘attribute’ => ‘default-value’. In de bovenstaande code stellen we bijvoorbeeld de standaardwaarde van het attribuut ‘label’ in op ‘Button’, met de syntax ‘label’ => ‘Button’.
    • We kunnen de waarden voor elke attribuut-key ophalen met de PHP-syntax voor arrays: $a[‘attribute’].
    • De $output variabele slaat de HTML-code van het knop-element op (<a> tag met de ‘button’ class). En dat is dan de string die als output uit de functie komt.

Als je als standaardwaarde de URL van de startpagina van je website wilt hebben, kun je de home_url() WordPress-functie gebruiken.

Laten we de shortcode uitproberen zoals het er nu uitziet, zonder verdere attributen, om te kijken wat de output is.

Als je je afvraagt waar de rechte haken voor zijn ([[cta_button]]), die heten een escaping shortcode, of in goed (of slecht) Nederlands: een shortcode ontsnapper. Ze helpen je om een geregistreerde shortcode in je site weer te geven als gewone tekst, zoals in de afbeelding hieronder.

Gebruikers kunnen de grootte en kleur van de knop aanpassen via de shortcode. We hebben alvast standaardwaarden in de handler-functie ingesteld, maar we moeten ook de stylesheet registreren en toevoegen aan de wachtlijst voor beschikbare resources. Deze stylesheet moet alle classes gedefinieerd hebben die voorkomen in de shortcode.

Je kunt deze classes ook instellen vanuit de globale stylesheet van je thema, maar we raden je aan om ze apart in te stellen. Op die manier weet je zeker dat ook wanneer je je WordPress-thema verandert of update, deze classes nog precies zo blijven samenwerken met de shortcode.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

De salcodes_enqueue_scripts() functie definieert de $post global variabele, en bevestigt dan twee voorwaarden via:

• • • is_a(): checkt of $post een instantie is van het WP_Post Dit refereert naar alle post-types binnen WordPress.
    • has_shortcode(): checkt of de content van het artikel een [cta_button] shortcode bevat.

Als aan beide voorwaarden voldaan wordt, zal de functie de style.css stylesheet uit de CSS-map registreren en in de wachtlijst plaatsen. De plugin_dir_url($file) functie maakt het makkelijk om de URL van de map van plugin op te halen.

Ik zal je hier niet de CSS-code laten zien, maar je kunt de code vinden in de bron die ik vermeld aan het einde van dit gedeelte.

Laten we ter afsluiting de [cta_button] shortcode testen door het toe te voegen aan een artikel:

De afbeelding hieronder laat zien hoe de CTA-knop er aan de voorkant uitziet:

Nu je weet hoe je je eigen attributen kunt definiëren en hoe je styles kunt invoegen, kun je ook allerlei andere functionaliteit toevoegen aan je CTA-knop shortcode. Zo kun je bijvoorbeeld gebruikers de mogelijkheid geven om animaties te gebruiken, tooltips, en allerlei andere opmaken voor knoppen.

Voorbeeld 3: Shortcode met $content

Voor ons laatste voorbeeld gaan we een omsluitende (enclosing) shortcode maken met de naam [boxed]. Deze shortcode zal alle content binnen de tags in een box plaatsen, samen met een mooie titel.

Laten we beginnen door de shortcode te registreren en de handler-functie te definiëren.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

• • • $content = null: dit bepaalt dat de shortcode een omsluitend type is. Je kunt de $content variabele binnen je handler-functie gebruiken om de output zo te veranderen als je zelf wilt.
    • $tag = “: dit definieert de $tag variabele van de shortcode. In dit voorbeeld is het eigenlijk niet nodig, maar het is een goede gewoonte om het altijd te definiëren.

In dit voorbeeld gaan we de content aanpassen door inline CSS-styles te gebruiken.

Styles voor classes binnen de shortcode worden net zo geregistreerd en in de lijst geplaatst als in het vorige voorbeeld.

Maar als je twee shortcodes hebt die dezelfde stylesheet gebruiken, betekent dat wel dat je de stylesheet moet laden zodra één van beiden wordt gebruikt. Laten we dus de salcodes_enqueue_scripts()-functie bijwerken:

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

• • • $has_shortcode: is een variabele die door de gebruiker wordt gedefinieerd en die checkt of één van beide shortcodes bestaan binnen de pagina. De || (OR operator) maakt dat mogelijk.

Laten we nu onze [boxed] shortcode eens uitproberen.

Hieronder zie je het resultaat.

Nu je geleerd hebt hoe je een eigen shortcode kunt maken, kun je out of the [box] denken en zelf aan de slag gaan. Vergeet niet je creaties met ons te delen!

Als je wilt, kun je hier de Shortcode Plugin broncode downloaden.

WordPress shortcodes: Voor- en nadelen

Voordelen

• • • Shortcodes maken het eenvoudig om complexe features toe te voegen aan WordPress-websites. Je kunt bijna alles toevoegen door middel van een enkele regel code.
    • Shortcodes automatiseren je workflow. Je hoeft niet langer complexe scripts te schrijven elke keer dat je een complexere feature wilt gebruiken.
    • Shortcodes zijn gebruiksvriendelijker dan HTML-code of PHP-scripts.
    • Shortcodes kun je verzamelen binnen een plugin. Zelfs als je WordPress updatet of je thema verandert, zullen de shortcodes nog steeds werken.
    • Door shortcodes samen te voegen in een plugin kun je ze ook makkelijk op verschillende WordPress-websites gebruiken. Als je een ontwikkelaar bent die veel websites beheert, is het echt heel erg handig als je al je zelfgemaakte shortcodes in één pakket klaar hebt staan.
    • Aangezien shortcodes ook attributen accepteren, kunnen gebruikers shortcodes makkelijk aanpassen door de attributen te wijzigen.

Nadelen

• • • Shortcodes zijn niet erg intuïtief in het gebruik voor de eindgebruiker, zeker niet als er veel op één pagina worden gebruikt. In die gevallen zijn ze vooral handig voor ontwikkelaars.
    • Je kunt bijna niet zeggen wat een shortcode precies doet als je er een ziet. Het WordPress-team heeft ze daarom ook de toepasselijke naam “mystery meat embed codes” genoemd.
    • Shortcodes die binnen thema’s gebruikt worden zullen niet langer werken als je je thema verandert.
    • Shortcodes zijn onduidelijk qua syntax. Sommige ondersteunen bijvoorbeeld optionele afsluitende tags, dus je kunt ze zowel zelfsluitend of omsluitend gebruiken. Dan wordt het natuurlijk snel ingewikkeld.
    • Shortcodes kunnen de HTML binnen je site laten crashen door conflicterende tags. Dat ziet er natuurlijk niet best uit aan de front-end.
    • Shortcodes creëren meer laadtijd op je server. Zeker naarmate je meer shortcodes gebruikt, wordt deze laadtijd steeds langer. Als je echt veel shortcodes gebruikt kan je website echt traag worden (vergelijkbaar met de output van veel page builders).

Shortcodes en Gutenberg blokken

Door de introductie van Gutenberg zijn shortcodes minder aantrekkelijk. Gebruikers kunnen nu direct blocks toevoegen in de editor interface, wat nóg makkelijker is dan shortcodes gebruiken.

En als je toch shortcodes wilt toevoegen heeft Gutenberg daar zelfs een speciaal block voor. Blocks zijn eigenlijk de nieuwe shortcodes.

“Als je het met een shortcode kunt doen, kun je het met een block doen.” — James Huff, Happiness Engineer bij Automattic

Dit verklaart waarom alle populaire shortcodes zijn omgezet in blocks. Veel WordPress-ontwikkelaars zijn overgestapt naar het exclusief gebruik maken van de blockeditor (Gutenberg).

Maar dat betekent nog niet het einde van de wereld voor shortcodes. Het WordPress kernteam heeft nog veel verbeteringen in de blockeditor beloofd, zoals te zien in Twenty Twenty. Tot dan blijven shortcodes nog steeds heel handig.

Samenvatting

Het toevoegen van complexe functionaliteit aan je WordPress-website is makkelijk als je shortcodes gebruikt. Ze geven gebruikers makkelijke tags die ze kunnen gebruiken zonder na te hoeven denken over moeilijke code.

Alhoewel het leven moeilijk is, zijn shortcodes dat niet. Mijn favoriete shortcodes zijn Shortcodes Ultimate en Shortcodes by Angie Makes.

En als je niet de juiste shortcode kunt vinden, weet je nu hoe je eenvoudig je eigen maakt.

Je kunt dat zelfs nóg makkelijker maken door de Shortcode plugin te gebruiken. Die regelt alles voor je. En onthoud: life is short, use shortcodes!