Les shortcodes WordPress sont utilisés pour 1) réduire la quantité de code que vous devez écrire; 2) simplifier l’utilisation des plugins, thèmes et autres fonctions WordPress. Ils se comportent comme des macros, lorsque vous insérez un shortcode, il est remplacé par un extrait de code. Ça pourrait être n’importe quoi.

WordPress est livré avec des codes courts prédéfinis, comme et , et ils sont également inclus avec de nombreux plugins et thèmes populaires. Vous pouvez également créer vos propres shortcodes personnalisés pour faire des choses comme créer des colonnes sur votre site Web WordPress.

Dans cet article, nous vous expliquerons étape par étape le processus de création et d’utilisation de vos propres shortcodes personnalisés. Nous vous guiderons tout au long du processus de création d’un nouveau shortcode et vous montrerons comment modifier et contrôler les attributs et les fonctions du shortcode.

Veuillez noter qu’il s’agit d’un article plus avancé qui expliquera en détail comment créer des shortcodes. Si travailler avec du code dépasse votre expertise technique et que vous voulez simplement le moyen le plus simple de commencer à créer et à utiliser des shortcodes, vous voudrez peut-être commencer avec un plugin shortcode.

Lors de la création de vos propres shortcodes, vous devez faire deux choses:

1. Créer la fonction de gestionnaire de shortcode. Une fonction shortcode est une fonction qui prend des paramètres facultatifs (attributs) et renvoie un résultat.
2. Enregistrez la fonction de gestionnaire de shortcode. Utilisez la fonction WordPress add_shortcut intégrée pour enregistrer des shortcodes personnalisés.

Préparation de WordPress pour les Shortcodes personnalisés

Bien que ce ne soit pas nécessaire, c’est une bonne idée de garder vos shortcodes personnalisés dans leur propre fichier. Vous pouvez également les ajouter au fichier functions.php de votre thème.

Tout d’abord, créez un nouveau fichier nommé custom-shortcodes.php, et enregistrez-le dans le même dossier que le fichier functions.php de votre thème.

Ensuite, à l’intérieur du fichier nouvellement créé, ajoutez le bloc de code suivant:

<?php ?>

Ensuite, ouvrez le fichier functions.php et ajoutez la ligne de code suivante:

include('custom-shortcodes.php');

Vous êtes maintenant prêt à commencer à ajouter vos shortcodes personnalisés.

Codes courts de base

Dans ce premier exemple, nous allons créer un shortcode WordPress de base qui insère le Jour de l’image de l’avatar indépendant ci-dessous.

Création du Shortcode

La première étape consiste à créer la fonction shortcode. Dans le fichier custom-shortcodes.php, ajoutez le bloc de code suivant:

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" />';}

Dans l’exemple de code ci-dessus, la fonction dotiavatar_function renvoie une image prédéterminée nommée avatar-simple.png.

L’étape suivante consiste à enregistrer le shortcode avec WordPress en utilisant la fonction intégrée add_shortcode. Toujours à l’intérieur de custom-shortcodes.php, ajoutez la ligne de code suivante:

add_shortcode('dotiavatar', 'dotiavatar_function');

Lorsque vous enregistrez un shortcode en utilisant la fonction add_shortcode, vous passez la balise shortcode ($tag) et la fonction correspondante ($func) / hook qui s’exécutera chaque fois que vous le raccourci est utilisé.

Dans ce cas, la balise de raccourci est dotiavatar et le crochet est dotiavatar_function.

Remarque : Lorsque vous nommez des balises, utilisez uniquement des lettres minuscules et n’utilisez pas de tirets ; les traits de soulignement sont acceptables.

Utilisation du Shortcode

Maintenant que vous avez créé et enregistré le shortcode, il est temps de l’essayer! Chaque fois que vous souhaitez que l’avatar DOTI apparaisse dans le contenu de la publication, vous pouvez utiliser le shortcode à la place:

Shortcodes avec Paramètres (attributs)

Dans l’exemple précédent, il n’y avait pas beaucoup de place pour changer les choses. Disons qu’au lieu de pousser une seule image, nous aimerions pouvoir définir quelle image utiliser à l’aide d’un paramètre. Vous pouvez le faire en ajoutant quelques attributs ($atts).

Encore une fois, à l’intérieur de custom-shortcodes.php, ajoutez une autre fonction, comme ceci:

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\" />";}

La fonction ci-dessus accepte un seul paramètre : rating. Si une valeur rating n’est pas transmise, elle utilise une valeur de chaîne par défaut 5. Il le fait en déballant le tableau d’attributs à l’aide de la fonction shortcode_atts intégrée et en combinant les valeurs par défaut avec des valeurs qui peuvent avoir été transmises à la fonction.

N’oubliez pas d’enregistrer le shortcode:

add_shortcode('dotirating', 'dotirating_function');

Avec la fonction shortcode créée et le crochet ajouté, le shortcode est maintenant prêt à être utilisé dans le contenu de votre message:

Alternativement, vous pouvez omettre le rating, et allez simplement avec la valeur par défaut:

Et c’est tout! Vous savez maintenant comment créer des shortcodes WordPress à fermeture automatique. Mais il existe un autre type que vous pouvez créer.

Shortcodes enfermants

Jusqu’à présent, nous avons travaillé avec des shortcodes à fermeture automatique. Mais il existe un autre type de shortcode: les shortcodes englobants.

Les shortcodes englobants vous permettent d’utiliser un format de style BBCode. Autrement dit, un style qui ressemble à ceci:

content

Les shortcodes enfermants sont utiles lorsque vous devez manipuler le contenu inclus. Par exemple, disons que vous avez un style particulier de bouton que vous utilisez votre site Web; vous pouvez utiliser le code HTML pour générer ce bouton / style chaque fois que vous devez l’utiliser, ou vous pouvez configurer un shortcode personnalisé à la place.

En utilisant un shortcode englobant, vous pouvez vous concentrer sur le contenu plutôt que sur le code.

En créant le Shortcode

Encore une fois, dans le fichier custom-shortcodes.php, ajoutez le bloc de code suivant:

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

Dans le bloc de code ci-dessus, le $content = null est utilisé pour identifier cette fonction en tant que shortcode englobant . Et, à l’intérieur de cette fonction, vous encapsulez votre contenu ($content) dans le code HTML.

OK, il est maintenant temps d’enregistrer le shortcode:

add_shortcode('dotifollow', 'dotifollow_function');

Et c’est tout! Votre shortcode est prêt à être utilisé.

L’utilisation du Shortcode

L’utilisation d’un shortcode englobant n’est pas très différente de l’utilisation d’un shortcode à fermeture automatique. Comme HTML, il vous suffit de vous assurer d’avoir une déclaration d’ouverture et une déclaration de clôture:

Follow us on Twitter!

Bien sûr, ce n’est qu’un exemple de base. Vous pouvez également ajouter des paramètres à un shortcode englobant, comme vous le faites avec un shortcode à fermeture automatique.

Dans custom-shortcodes.php, ajoutez une fonction supplémentaire:

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>';}

Puis enregistrez le shortcode:

add_shortcode('dotibutton', 'dotibutton_function');

Cette nouvelle fonction vous permet de définir un lien pour le bouton en utilisant la syntaxe suivante:

Shop Now!

Avec les shortcodes enfermés, vous pouvez faire beaucoup avec très peu de code.

Un mot sur les widgets

Par défaut, les shortcodes ne sont pris en charge que dans les publications, les pages ou les types de publications personnalisés; ils ne sont pas pris en charge dans les widgets de la barre latérale. Pour ajouter la prise en charge des widgets, vous devez ajouter le code suivant au fichier functions.php:

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

Une fois cela fait, vous pouvez utiliser des shortcodes dans les widgets – tout comme vous le faites dans les publications / pages.

Envelopper les choses

Ajouter vos propres shortcodes ne demande pas beaucoup d’efforts – surtout une fois que vous comprenez comment ils sont implémentés. Si vous voulez en savoir plus, consultez le codex WordPress.