Les shortcodes dans WordPress vous permettent d’ajouter du contenu dynamique à votre site Web en fonction de vos besoins. Dans cet article, je vous expliquerai ce qu’est un shortcode, leur utilité et comment en ajouter à votre site.
Nous entrons dans le monde fabuleux du dévelopement PHP / WordPress. Il est donc conseillé d’avoir des base de code et, idéalement, du langage PHP.
Wordress est le CMS leader du marché. En 2016, une étude révélait que 60% des sites Internet du Surface Web utilisaient WordPress. En tant que créateur Web, j’utilise le célèbre CMS dans 80% de mes travaux. Avec la pratique et les années, j’ai appris tout un tas d’astuces pour contourner les limitations du système, sans avoir recours à des extensions payantes. Dans ce premier article d’une nouvelle série sur WordPress, je me penche sur la création d’ un shortcode.
Un shortcode : kesako ?
Si vous connaissez WordPress vous en avez certainement déjà utilisé. Il s’agit d’un texte saisi entre crochets. Une fois saisi sur une page WordPress, comme du texte classique, il va générer à l’affichage un contenu spécifique définit par le développeur. Par exemple si on utilise l’extension Contact Form 7 pour générer des formulaires de contact, en tapant :
[contact-form-7 id=2]
WordPress saura qu’il devra afficher à l’utilisateur le formulaire de l’extension Contact Form 7 avec l’id numéro 2 . Ce shortcode a été développé par les créateurs de Contact Form 7 et il est spécifique à cette extension. Si on entrait l’id d’un formulaire inexistant, Wordress ne générerait rien.
À quoi sert un shortcode ?
Un shortcode peut-être utile pour beaucoup de chose. Son but premier est de vous permettre de prendre le contrôle en générant exactement le contenu dont vous avez besoin, dynamiquement.
Dans WordPress, il est tout à fait possible d’aller dans le code d’une page pour y modifier l’HTML. Mais le shortcode vous permettra en plus d’exécuter du code PHP. Vous pourrez alors accéder à la base de données de votre site WordPress ou d’une API externe ou exécuter des fonctions PHP spécifique comme afficher la date du jour, effectuer un calcul, etc.
Voilà 2 exemples de shortcode que j’ai créé au sein de mes projets :
- Pour le site Internet du Music Festival Promo, j’ai ajouté des champs personnalisés (date, heure et lieu) sur les pages des concerts. Ensuite j’ai généré la page de la line-up du festival dynamiquement grâce à un shortcode, en affichant mes champs personnalisés sur les liens vers chaque concert.
- Pour un autre projet, en cours de développement, le client désirait disposer d’un site pour son entreprise et d’un site pour l’une de ses marques. J’ai créé un shortcode qui, sur le site de la marque, affichait la liste des articles du blog de l’entreprise, dont la catégorie était spécifique à la marque en question.
D’ailleurs c’est ce dernier exemple qui m’a donné l’idée de cet article et, au fil de plusieurs articles, c’est le shortcode que je vais vous proposer de réaliser.
Créer un shortcode
La base
Pour l’exemple, créons un simple shortcode qui affichera à l’utilisateur Hello Earth (original non ?). Pour commencer, et si ce n’est pas déjà fait, il faut créer un thème enfant pour le thème que vous utilisez.
Et vous savez quoi ? Vous avez de la chance ! Si vous ne connaissez pas ce concept, découvrez mon générateur de thème enfant WordPress ! Il vous donnera toutes les informations à ce sujet et surtout, vous permettra de générer votre thème enfant en un clic ! Un véritable jeu… d’enfant 🙂
C’est fait ? Bon. Alors commencez par ouvrir le fichier functions.php à la racine du dossier de votre thème enfant. Vous n’avez pas de fichier functions.php ? Alors créez-le ! Ce fichier est appelé par WordPress au chargement de chaque page. Il peut être utilisé pour intégrer des fonctions personnalisées, changer le comportement de certains modules, de parties de thèmes, etc. Nous allons de notre côté l’utiliser pour ajouter un shortcode à WordPress.
Pour commencer, si votre fichier est vide, entrez une balise d’ouverture et de fermeture PHP.
<?php ?>
Tout ce qui se trouve entre ces deux expressions sera du PHP et sera interprété par le serveur et par WordPress. Voilà le code complet pour afficher Hello Earth :
<?php
function hello_earth($atts) {
return "Hello Earth";
}
add_shortcode('hello_earth_shortcode','hello_earth');
?>
Petite explication : on commence par créer une fonction appelée hello_earth qui prendra un paramètre (optionnel) nommé $atts. Cette méthode retourne simplement le texte « Hello Earth ».
Ensuite on ajoute le shortcode. La fonction add_shortcode est une méthode existante de WordPress, elle prend deux paramètres : le nom du shortcode (hello_earth_shortcode) et la fonction à exécuter pour ce shortcode (notre méthode hello_earth).
Si vous enregistrez ce document et que vous entrez, dans une de vos page WordPress, le texte [hello_earth_shortcode] vous verrez alors s’afficher « Hello Earth » en visionnant la page.
Utiliser des paramètres
Lorsqu’on utilise un shortcode il est possible de lui ajouter des paramètres comme indiqué plus haut. Vous avez remarqué dans l’exemple que je vous donnait au début, que le shortcode que je était :
[contact-form-7 id=2]
Ce shortcode appelait donc contact-form-7 avec en paramètre id de valeur 2. Cet id=2 est en fait le paramètre passé à la fonction d’affichage du formulaire. Imaginons que vous tapions ce shortcode :
[hello_earth_shortcode hello="World"]
Dans ce cas, nous ajouterions un nouveau paramètre hello ayant comme valeur "World". Donc en modifiant notre code, voici comment afficher ce paramètre hello à l’utilisateur :
function hello_earth($atts) {
$atts = shortcode_atts(array('hello' => 'Earth'), $atts);
return "Hello".$atts['hello'] ;
}
Ça se complique mais rien de grave. En paramètre l’attribut $atts est en fait un tableau de clés / valeurs. Une clé / valeur se définit simplement comme une clé descriptive (ici hello) et de la valeur qui lui est assignée (ici Earth). Donc en tapant le shortcode :
[hello_earth_shortcode hello="World"]
On donne en fait en paramètre un tableau contenant hello => "World". Si on avait tapé :
[hello_earth_shortcode hello="World" goodbye="Moon"]
On aurait en paramètre un tableau contenant hello => "World" et goodbye => "Moon". Dans la suite du code, on donne une valeur à $atts. Comme le champ est optionnel, par défaut si on entrait notre shortcode sans paramètres :
[hello_earth_shortcode]
Aucune valeur n’aurait été passé et $atts serait vide. Mais comme on appel par la suite $atts['hello'], qui va chercher dans le tableau $atts la clé hello et retourner sa valeur, il ne faut pas qu’il soit vide.
On défini donc que, par défaut, la valeur de $atts est de array('hello' => 'Earth')mais que si $atts n’est pas null (comprendre : vide), on le fusionne avec la valeur donnée.
Donc au final si on tapait :
[hello_earth_shortcode goodbye="Moon"]
Le contenu de $atts deviendrait :
Hello => 'Earth' // Valeur par défaut
Goodbye => ‘Moon’ // Valeur passée en paramètres
WordPress préserverait la valeur par défaut donnée pour hello car l’utilisateur n’a pas spécifié d’autre valeur et ajouterait la clé goodbye avec la valeur Moon donnée en paramètre.
En revenant à notre code de base, on récupère donc les attributs $atts, on s’assure qu’il ne soit pas null en donnant une valeur au champ hello qui sera utilisé ensuite et on affiche le texte Hello suivi du contenu du champ hello. Le résultat :
Hello world
Conclusion
C’est un exemple très basique mais j’espère qu’il aura été assez clair pour les néophytes. Par la suite nous creuserons des concepts un peu plus complexes. Dans le prochain article de la série j’évoquera l’API de WordPress, les possibilités qu’elle offre et des exemples d’utilisation.
Le but final sera de proposer le shortcode personnalisé dont je vous ai parlé plus, vous permettant d’afficher une liste d’articles d’une catégorie spécifique, provenant d’un autre site WordPress.