Créer ses propres shortcodes WordPress

 

Pour cet article, j’ai utilisé la version 4.9.1 de WordPress ; il se peut qu’il y ait des différences si vous utilisez une autre version.

 

Qu'est-ce qu'un shortcode WordPress ?

Un shortcode est un morceau de code que vous pouvez placer dans une page, un article ou encore un widget. Celui-ci permet d’appeler différentes actions afin d’ajouter des fonctionnalités à votre contenu, comme des images, des vidéos, etc. Les possibilités sont infinies puisque vous pouvez créer vous-même ces shortcodes :)

Grâce aux shortcodes, vous pourrez avoir un contenu plus dynamique et aussi plus facilement gérable. Je m’explique : vous avez un code HTML/CSS affichant un élément que vous placez souvent dans vos articles, mais vous devez le copier dans chaque article à l’aide de l’éditeur, ce qui est loin d’être pratique. Alors qu’avec un shortcode, la personne en charge de la rédaction des articles n’aura plus qu’à placer le shortcode correspondant à l’élément voulu, sans devoir y écrire la moindre ligne de code.

En fait, le shortcode WordPress fonctionne un peu comme un raccourci. Il permet de stocker du code pas forcément sexy dans un pseudo langage compréhensible. La puissance du shortcode vient aussi du fait qu’on peut les concevoir nous-même et qu’il est aussi possible de leur passer des paramètres, afin d’avoir une plus grande flexibilité.

Comment créer un shortcode personnalisé ?

Nous allons commencer par créer un shortcode très basique. Celui-ci n’utilisera pas de paramètre dynamique, mais il vous aidera tout de même à comprendre les bases du système. Par la suite, nous nous attaquerons à un shortcode un peu plus complexe, qui lui sera dynamique.

 

Mon premier shortcode statique

Où créer son shortcode ? On peut le faire directement dans le fichier function.php, mais ce n’est pas la solution la plus propre. En effet, en cas d’erreur, votre WordPress tout entier risque d’être hors service. Nous allons donc créer un plugin qui contiendra tous nos shortcode personnalisés. De plus, avec cette méthode nous pourrions très aisément utiliser ces shortcodes sur un autre de nos WordPress. Pour ce faire, il nous suffirait de copier le plugin d’un WordPress à un autre en utilisant le protocole FTP.

Dans le répertoire contenant les plugins WordPress, à savoir wp-content/plugins, nous allons créer un nouveau dossier que nous allons appeler mes-shortcodes. A l’intérieur de celui-ci, il nous faudra créer le fichier index.php contenant le code suivant :

<?php
/*
  Plugin Name: mes shortcodes
  Description: Plugin fournissant des shortcodes
  Author: Elliott
  Version: 1.0.0
 */

 

Maintenant que nous avons ajouté ce bout de code à index.php, notre plugin est fonctionnel. Vide mais fonctionnel :)

Activons-le via le panneau d’administration WordPress. Dans l’onglet Extensions, vous devriez voir le plugin que vous venez de créer. Activez-le.

 

Notre premier shortcode statique devra juste afficher : « bienvenue chez karac ! ». Attelons-nous à la tâche ! Ouvrez le fichier index.php et ajoutez-y le code suivant (en-dessous du code ajouté précédemment) :

function shortcode_bienvenue(){
    return "<h2>Bienvenue chez karac !</h2>";
}
add_shortcode('bienvenue', 'shortcode_bienvenue');

 

On crée notre shortcode à l’aide de la fonction add_shortcode, en définissant le nom de notre shortcode que nous voulons utiliser pour son appel, ainsi que la fonction (que nous allons appeler « shortcode_bienvenue ») incluant les fonctionnalités à proprement dites de notre cher shortcode. Dans notre exemple, la fonction shortcode_bienvenue() affichera un h2 ayant comme texte « Bienvenue chez karac ! ».

Il est l’heure de tester notre premier shortcode :) Dans une de vos pages WordPress, ajoutez-y le shortcode personnalisé que vous venez de créer. Puisque nous l’avons appelé « bienvenue », nous devons donc, dans notre éditeur de contenu WordPress, ajouter [bienvenue] à l’endroit où nous désirons afficher « Bienvenue chez karac ».

 

Enregistrons nos modifications en mettant à jour notre page, puis à l’aide du permalien, allons voir le résultat.

 

Le texte « Bienvenue chez karac » est bel et bien affiché, ce qui veut dire que notre shortcode fonctionne :)

Dans votre shortcode statique, vous pouvez y ajouter tout le contenu que vous voulez, mais, sans paramètre, votre shortcode n'offrira aucune flexibilité. C'est pourquoi je vous invite à lire le chapitre suivant.

 

Mon premier shortcode dynamique

Maintenant que nous savons comment créer un shortcode statique, attaquons-nous au (bien plus intéressant) shortcode dynamique.

Pour ce deuxième exemple, nous désirons avoir un nouveau shortcode qui affiche par défaut « karac, votre agence de communication digitale », mais avec un paramètre (« langue »), qui nous permet d'également afficher sa traduction anglaise : « karac, your digital communication agency ».

Nous allons ajouter ce shortcode dans le plugin créé précédemment. Dans notre fichier index.php du répertoire « mes-shortcode », ajoutons le code suivant :

function shortcode_agence($atts){
    extract(shortcode_atts(
        array(
    	    'langue' => 'FR'
    ), $atts));

    if($langue== "EN"){
        $text = "karac, your digital communication agency ";
    }
    else{
    	$text = "karac, votre agence de communication digitale";
    }
    return '<h2>' . $text . '</h2>';
}
add_shortcode('agence', 'shortcode_agence');

 

Décortiquons brièvement le code.

À l’appel de notre fonction shortcode_agence, nous y passons une variable « $atts », contenant les paramètres entrants.

function shortcode_agence($atts)

 

Puis, nous allons extraire ces différents attributs (dans notre exemple il n’y en a qu’un seul, à savoir celui utilisé pour la langue), en leur attribuant un nom de variable plus parlant, dans notre exemple « langue ».

extract(shortcode_atts(
     array(
          'langue' => 'FR'
), $atts));

Par défaut, la langue affichée sera celle liée au paramètre "FR", car celui-ci est défini ici : 'langue' => 'FR'.

La boucle if permet de contrôler si le paramètre entré (« langue ») correspondant à « EN » ou non. Si c’est le cas, nous allons stocker le texte en anglais dans une variable $text, sinon nous stockerons le texte en français dans $text.

if($langue== "EN"){
     $text = "karac, your digital communication agency ";
}
else{
     $text = "karac, votre agence de communication digitale";
}

 

Dans notre return, nous allons renvoyer une balise h2 intégrant le contenu de notre variable $text.

return '<h2>' . $text . '</h2>';

 

Comme d’habitude, on finit par enregistrer notre shortcode à l’aide de la fonction « add_shortcode », en lui définissant un nom (« agence ») ainsi que la fonction contenant le corps du shortcode (« shortcode_agence »).

add_shortcode('agence', 'shortcode_agence');

 

Testons notre shortcode en l’ajoutant dans une de nos pages.

 

Le texte apparaît-il en Français ? Oui ? Alors ça fonctionne !

 

Essayons maintenant de lui définir en paramètre la langue « EN ».

 

Vous devriez voir apparaître le texte que vous avez défini pour la version anglaise.

 

Notre second shortcode fonctionne :)

Les shortcodes WordPress peuvent utiliser un éventuel contenu. Dans notre prochain exemple, nous allons créer un shortcode nous permettons de changer la couleur d’un contenu textuel.

Pour ce faire, retournons une dernière fois dans notre fichier index.php, puis ajoutons-y le code suivant :

function shortcode_color($atts, $content){
    extract(shortcode_atts(
        array(
    	      'color' => 'black'
    ), $atts));
    return '<h2 style="color:'.$color.';">'.$content.'</h2>';
}
add_shortcode('text-color','shortcode_color');

 

Grâce à la variable entrante $content que nous passons à notre fonction shortcode_color, nous pouvons récupérer le contenu se trouvant entre les balises du shortcode. Oui, il est effectivement possible d’ouvrir et de fermer une balise shortcode comme une balise HTML :)

Dans notre exemple, nous allons ouvrir le shortcode [text-color] en lui définissant la couleur voulue, écrire le texte dont nous voulons changer la couleur, puis la fermer la balise avec [/text-color]. Ce qui nous donne :

[text-color color="red"]karac est basé en Suisse, à Pully [/text-color]

 

Le texte « karac est basé en Suisse, à Pully », s’affiche désormais en rouge :)

 

Dans le cas où l’on ne définit pas de valeur pour le paramètre color, WordPress va utiliser l’attribut par défaut, à savoir, dans notre cas 'color' => 'black'.

 

Le texte est bel et bien affiché en noir.

 

Nos deux exemples sont tout simples, mais en utilisant du PHP, javascript, HTML, et du CSS, les possibilités sont infinies ! Soyez imaginatifs :D

 

Des plugins proposant des shortcodes

Shortcodes Ultimate

Ce plugin propose plus de 50 shortcodes allant de l’intégration de vidéos Youtube à l’ajout de boutons, en passant par l’intégration d’un carrousel. Les options proposées pour chaque shortcode sont nombreuses et sont très bien documentées directement dans le plugin.

Télécharger

 

Uix Shortcode

La librairie fournie par Uix Shortcode remplacerait presque un builder ! Elle propose des tabs, un élément pour présenter la team, des menus accordéons, et j’en passe ! S’il vous intéresse, je vous invite à regarder leur vidéo de démonstration.

Télécharger

 

Simple Shortcodes

Comme son nom l’indique les shortcodes proposés par le plugin ne font pas de chichi. Ils peuvent être utilisés pour mettre en forme une page en utilisant un système de colonne par exemple. Si vous voulez quelque chose de basique, ce plugin pourrait vous satisfaire.

Télécharger

 

Sources :

• Documentation officielle de WordPress
• Shortcodes Ultimate
• Uix Shortcode
• Simple Shortcodes

Catégories :

Tech web

Tags :

PHP Wordpress

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !