WordPress shortcodes worden gebruikt om 1) de hoeveelheid code die u moet schrijven te verminderen; 2) het gebruik van WordPress plugins, thema ‘ s en andere functies te vereenvoudigen. Ze gedragen zich als macro’ s, wanneer u een shortcode invoegt, wordt deze vervangen door een codefragment. Het kan van alles zijn.

WordPress wordt geleverd met enkele vooraf gedefinieerde shortcodes, zoals en , en ze zijn ook opgenomen met veel populaire plugins en thema ‘ s. U kunt ook uw eigen aangepaste shortcodes maken om dingen te doen zoals kolommen maken op uw WordPress website.

In dit bericht nemen we u stap voor stap door het proces van het maken en gebruiken van uw eigen aangepaste shortcodes. We begeleiden u door het hele proces van het maken van een nieuwe shortcode en laten u zien hoe u de shortcode-attributen en-functies kunt wijzigen en beheren.

houd er rekening mee dat dit een meer geavanceerd bericht is dat in details zal gaan over het maken van shortcodes. Als het werken met code is buiten uw technische expertise, en je wilt gewoon de makkelijkste manier om te beginnen met het maken en gebruiken van shortcodes kunt u beginnen met een shortcode plugin.

bij het maken van uw eigen shortcodes, zijn er twee dingen die u moet doen:

1. maak de shortcode handler functie. Een shortcode functie is een functie die optionele parameters (attributen) neemt en een resultaat retourneert.
2. Registreer de shortcode handler functie. Gebruik de ingebouwde WordPress add_shortcut functie om aangepaste shortcodes te registreren.

WordPress voorbereiden voor aangepaste Shortcodes

hoewel het niet nodig is, is het een goed idee om uw aangepaste shortcodes in hun eigen bestand te houden. U kunt ze ook toevoegen aan het functions.php bestand van uw thema.

maak eerst een nieuw bestand aan met de naam custom-shortcodes.php, en sla het op in dezelfde map als het functions.php bestand.

voeg vervolgens in het nieuw aangemaakte bestand het volgende blok code toe:

<?php ?>

open vervolgens hetfunctions.php bestand en voeg de volgende regel code toe:

include('custom-shortcodes.php');

u bent nu klaar om uw aangepaste shortcodes toe te voegen.

Basic Shortcodes

In dit eerste voorbeeld gaan we een basic WordPress shortcode maken die de dag van de indie avatar afbeelding hieronder invoegt.

het aanmaken van de Shortcode

de eerste stap is het aanmaken van de shortcode functie. Voeg in het custom-shortcodes.php bestand het volgende blok code toe:

function dotiavatar_function() { return '<img src="http://dayoftheindie.com/wp-content/uploads/avatar-simple.png" alt="doti-avatar" width="96" height="96" class="left-align" />';}

in het bovenstaande codevoorbeeld geeft de functie dotiavatar_function een vooraf bepaalde afbeelding met de naam avatar-simple.png.

de volgende stap is om de shortcode bij WordPress te registreren met behulp van de ingebouwde functie add_shortcode. Nog steeds binnen custom-shortcodes.php, voeg de volgende regel code toe:

add_shortcode('dotiavatar', 'dotiavatar_function');

wanneer u een shortcode registreert met behulp van de functie add_shortcode, geeft u de shortcode tag ($tag) en de bijbehorende functie ($func)/hook door die wordt uitgevoerd wanneer de snelkoppeling wordt gebruikt.

in dit geval is de sneltoets-tag dotiavatar en de hook is dotiavatar_function.

opmerking: gebruik bij het benoemen van tags alleen kleine letters en gebruik geen koppeltekens; underscores zijn aanvaardbaar.

met behulp van de Shortcode

Nu u de shortcode hebt aangemaakt en geregistreerd, is het tijd om het uit te proberen! Wanneer u de doti avatar wilt laten verschijnen in de post-inhoud, kunt u de shortcode gebruiken:

Shortcodes met Parameters (attributen)

in het vorige voorbeeld Er was niet veel ruimte om dingen te veranderen. Laten we zeggen, in plaats van het pushen van een enkele afbeelding, willen we in staat zijn om in te stellen welke afbeelding te gebruiken met behulp van een parameter. U kunt dat doen door enkele attributen toe te voegen ($atts).

voeg binnen custom-shortcodes.php een andere functie toe:

function dotirating_function( $atts = array() ) { // set up default parameters extract(shortcode_atts(array( 'rating' => '5' ), $atts)); return "<img src=\"http://dayoftheindie.com/wp-content/uploads/$rating-star.png\" alt=\"doti-rating\" width=\"130\" height=\"188\" class=\"left-align\" />";}

de bovenstaande functie accepteert een enkele parameter: rating. Als eenrating waarde niet wordt doorgegeven, gebruikt het een standaard string waarde van5. Het doet dit door het uitpakken van de array van attributen met behulp van de ingebouwde shortcode_atts functie, en het combineren van de standaard waarden met waarden die kunnen zijn doorgegeven aan de functie.

vergeet niet te registreren op de shortcode:

add_shortcode('dotirating', 'dotirating_function');

Met de shortcode functie gemaakt, en de haak toegevoegd, de shortcode is nu klaar om gebruikt te worden in je post inhoud:

u kunt Ook het weglaten van de rating, en ga gewoon met de standaard waarde:

En dat is het! Je weet nu hoe je zelfsluitende WordPress shortcodes te creëren. Maar er is een ander soort die je kunt creëren.

omsluitende Shortcodes

tot nu toe hebben we gewerkt met zelfsluitende shortcodes. Maar er is een ander type shortcode: het omsluiten van shortcodes.

met shortcodes kunt u een BBCode-achtige indeling gebruiken. Dat wil zeggen, een stijl die er als volgt uitziet:

content

ingesloten shortcodes zijn handig voor wanneer u de ingesloten inhoud moet manipuleren. Bijvoorbeeld, laten we zeggen dat je een bepaalde stijl van de knop die u uw website gebruikt; u kunt de HTML-code gebruiken om die knop/stijl te genereren elke keer dat u het nodig hebt om het te gebruiken, of u kunt in plaats daarvan een aangepaste ingesloten shortcode instellen.

door een omsluitende shortcode te gebruiken, kunt u de focus op de inhoud houden, in plaats van op de code.

maak de Shortcode

opnieuw, in het custom-shortcodes.php bestand, voeg het volgende blok code toe:

function dotifollow_function( $atts, $content = null ) { return '<a href="https://twitter.com/DayOfTheIndie" target="blank" class="doti-follow">' . $content . '</a>';}

In het codeblok hierboven wordt de $content = null gebruikt om deze functie te identificeren als een omsluitende shortcode. En binnen die functie wikkel je je inhoud ($content) binnen de HTML-code.

OK, nu is het tijd om de shortcode te registreren:

add_shortcode('dotifollow', 'dotifollow_function');

en dat is het! Uw shortcode is klaar voor gebruik.

het gebruik van de Shortcode

het gebruik van een omsluitende shortcode is niet veel anders dan het gebruik van een zelfsluitende shortcode. Net als HTML moet je er alleen voor zorgen dat je een openings-en een afsluitende instructie hebt:

Follow us on Twitter!

natuurlijk is dit slechts een basisvoorbeeld. U kunt ook parameters toevoegen aan een omsluitende shortcode, zoals u doet met een zelfsluitende shortcode.

Binnen custom-shortcodes.php, voeg nog een functie:

function dotibutton_function( $atts = array(), $content = null ) { // set up default parameters extract(shortcode_atts(array( 'link' => '#' ), $atts)); return '<a href="'. $link .'" target="blank" class="doti-button">' . $content . '</a>';}

En vervolgens op register de shortcode:

add_shortcode('dotibutton', 'dotibutton_function');

Deze nieuwe functie laat u een link voor de knop met behulp van de volgende syntaxis:

Shop Now!

Met bijvoeging van shortcodes, kan u veel doen met weinig code.

een woord over Widgets

standaard worden shortcodes alleen ondersteund in berichten, pagina ‘ s of aangepaste posttypen; ze worden niet ondersteund in zijbalkwidgets. Om ondersteuning voor widgets toe te voegen, moet u de volgende code toevoegen aan het functions.php bestand:

add_filter( 'widget_text', 'shortcode_unautop' );add_filter( 'widget_text', 'do_shortcode' );

zodra u dat doet, kunt u shortcodes gebruiken in widgets – net als in berichten/pagina ‘ s.

dingen afronden

het toevoegen van uw eigen shortcodes kost niet veel moeite – vooral als u begrijpt hoe ze worden geïmplementeerd. Als u meer wilt weten, bekijk dan de WordPress codex.