Les Shortcodes WordPress, qu’est-ce que c’est ?

WordPress, même sans aucune extension installée, est si riche et vaste en fonctionnalités, qu’il n’est pas rare que seulement une partie soit exploitée, parce qu’on ignore combien ce système de gestion de contenu (= CMS) est puissant. Et parmi les outils disponibles dans WordPress, il y a ce qu’on appelle les ShortCodes. La traduction en français est simple, puisqu’il s’agit de Codes Courts.

Ces codes courts quand on les connaît, ne serait-ce que certains, permettent de nombreuses choses sur site WordPress, qu’il s’agisse de se faciliter la vie pour ajouter des éléments à une page (galeries photos ou sommaire d’un article) sans savoir « coder » ou de rendre son contenu encore plus dynamique afin de rendre l’expérience de l’internaute, plus agréable et active.

Aussi je vous propose sans détour, de découvrir ce que sont les codes courts WordPress, avec des exemples simples. Mais aussi de découvrir comment utiliser certains 🙂

Les Codes Courts WordPress – ShortCodes

Définition et présentation du code court WP

Aujourd’hui dans la Version 5.8.1 de WordPress au moment où je tape ces quelques motes, il faut savoir que les codes courts y sont introduits depuis déjà, la version 2.5. Cela fait donc un sacré paquet d’années que les shortcodes existent sur WordPress. Ils sont en effet au sein du CMS WordPress depuis déjà 2008.

Comme indiqué en introduction de cet article, un code court WP, est tout simplement un code, qui permet facilement lorsqu’il est saisi dans un champ de WordPress, que ce soit sur l’éditeur d’un article, d’une page ou même encore par exemple, d’un widget, d’ajouter à son contenu, un élément. Cet élément pourra selon le code court, être par exemple une galerie de photographie. Ou bien une vidéo YouTube ou TikTok.

Le code court WordPress se présente quasiment toujours entre deux crochets, avec un crochet « [ » pour ouvrir le code court et un crochet « ] » pour le fermer, comme suit :

[code court]

Les codes courts simples et les codes courts plus longs

Il est à noter qu’un code court peut être composé de seulement ses crochets et un mot à l’intérieur des crochets, notamment lorsqu’un shortcode a été créé par l’auteur d’une extension et qu’il sert à appeler par exemple, un sommaire dans un article WP. Mais il peut aussi être composé de différentes informations qui seront visibles et pourront être changées, à l’intérieur du code court.

Prenons le cas d’une galerie photo dont on va définir les 4 photos dans le code court :

Idem pour le shortcode qui permet d’insérer une vidéo dans un article :

Dans ce shortcode permettant d’ajouter une vidéo, on voit bien après le crochet d’ouverture, le mot « video ». Puis le terme « width pour en définir la largeur et la taille en pixels de la largeur. Idem ensuite avec « heigth » pour la hauteur, le nom de pixels pour la hauteur… Enfin l’url/adresse du dossier web dans lequel la vidéo est hébergée. Pour finir, on retrouve à nouveau le code court de la vidéo, à savoir « video » et le crochet de fermeture du code court.

Chaque information dans ce code court, peut être appelé un attribut. En somme, on indique dans le code court, les détails de l’élément qu’on souhaite afficher ou propulser.

Mais cela peut aller encore bien + loin ! Aussi découvrons ci-dessous des exemples 🙂

Exemples de codes courts par défaut déjà présents dans WP

Exemple du code court pour une galerie photo dans WP

Puisque dans la définition et présentation du code court, il est question d’afficher simplement une galerie de photos, alors découvrons tout de suite :

En tapant ou en collant ce code court, en ajoutant bien les crochets au début pour « ouvrir » le shortcode et à la fin pour le fermer, vous verrez d’ailleurs directement dans votre champ de saisie, un bloc apparaître. Ce blog correspond à votre future galerie. En effet, en tapant le code court correspondant à la galerie photo de WP, le code appelle celle-ci pour qu’elle s’affiche toute seule comme une grande ! Reste bien sûr ensuite pour vous, à la configurer 😉 La configuration consistant en le choix des photos à afficher, le choix du nombre de photos à afficher ou encore la mise en page de la galerie.

Les codes courts par défaut

WordPress contient par défaut plusieurs shortcodes. Dont celui de la galerie photos. Les autres étant :

• Le code court « video » pour intégrer une vidéo à son contenu
• Le code court « caption » pour insérer une légende à une image/photo
• Le code court « audio » pour ajouter des fichiers audio au contenu (ex : titre musical…)
• Le code court « embed » qui sert à insérer un média (ex : une vidéo TikTok, une publication Twitter…)
• Le code court « Playlist » pour insérer une liste de titres sonores ou vidéos.
• Le code court pour la galerie photo, déjà cité dans cette publication 🙂

Endroits où on peut utiliser un shortcode dans WordPress

On peut insérer des codes courts à différents endroits de WordPress, via le tableau de bord :

• Dans l’éditeur d’un article
• Dans l’éditeur d’une page
• Dans un widget…

Cependant, à l’usage, il faut bien constater que l’usage se fait la plupart du temps, quand on rédige un article.

Codes courts et blocs WordPress

Si vous utilisez les blocs Gutenberg de WordPress, aucun souci ! La plupart du temps, vous pourrez collez votre code court simplement dans le corps du texte. Mais vous pouvez aussi tout simplement utiliser le bloc natif WordPress qui s’appelle : « Code court« .

Il ressemble d’ailleurs à ceci :

Ensuite une fois le bloc code court natif ajouté, il vous reste simplement à taper ou coller votre shortcode dans le champ. Enregistrez votre action et prévisualisez en frontal si tout test affiché comme vous le souhaitez ! C’est tout, simple et rapide. Une raison supplémentaire d’utiliser les blocs Gutenberg 😉

Le cas des codes courts propres à un thème ou une extension

Dans l’univers de WordPress, il y a d’un côté WordPress nu comme quand vous venez de l’installer sur un hébergeur ET d’un autre côté, ce qu’on viendra y ajouter, à savoir un thème et très probablement, des extensions.

Aussi, pour divers thèmes et extensions, des codes courts qui leur sont propres, peuvent être créés par leurs auteurs et donc être proposés. Ce n’est pas systématique, mais cela reste courant.

• C’est par exemple le cas avec l’extension Table of Contents Plus qui permet d’afficher un sommaire/table des matières à un article ou page WordPress et dont le code court simple est « toc » entre les deux crochets.
• Un autre exemple très courant est celui du plugin Contact Form 7 qui permet d’afficher des formulaires de contact simple ou complexe, avec des codes courts du type : 

Les Extensions dédiées exclusivement aux Shortcodes WordPress

Vu combien les codes courts peuvent être utiles et donc très utilisés sur un site WordPress, il n’est pas surprenant de découvrir que des extensions, gratuites ou payantes, leur sont intégralement dédiées. L’idée étant de télécharger, installer puis activer une extension afin d’accéder à une pléiade de nouveaux shortcodes. En supplément de ceux déjà présents par défaut sur WP.

Exemples de Plugins dédiés aux Codes courts WP

Extension gratuites

Parmi les plugins gratuits proposant des codes courts quasiment dédiés exclusivement aux shortcodes, il y a : Shortcodes by Angie Makes

Ce plugin n’est pas mis à jour depuis 2 ans au moment où j’écris cet article, mais il reste stable. Il permet de créer avec des codes courts assez faciles à manipuler, des mises en formes de pages ainsi que de nombreux autres éléments visuels.

Extensions premium

Et parmi les extensions premium, la plupart du temps gratuites pour une petite partie des codes, puis payantes pour accéder à tous les codes courts, il y a : Shortcodes Ultimate.

Cette extension est un peu la Rolls en matière de ShortCodes WP. On peut quasiment tout faire ! De la page FAQ à des affichages d’icônes en tout genre.

Les Shortcodes de WooCommerce

On ne peut pas aborder les codes courts WordPress sans aborder ceux propres à WooCommerce et qui  lui sont natifs. C’est à dire qui sont embarqués dans l’extension de vente en ligne sur WP.

Ces codes courts WooCommerce (= WC) permettent par exemple d’afficher à l’endroit de son choix sur son site, différents éléments relatifs à la partie e-commerce. Avec des codes courts permettant par exemple d’afficher :

• Le panier
• La page de paiement
• La page de compte du client

Mais ce n’est bien sûr pas tout puisqu’on pourra aussi, avec des shortcodes souvent plus complexes et avec attributs (ou arguments) qui permettront par exemple :

• De limiter ou non le nombre de produits affichés sur une page
• De filtrer l’affichage de produits sur une page en fonction de sa catégorie ou d’un attribut.
• D’afficher quelque part, uniquement les produits les mieux notés…

Vous l’aurez compris, on peut là encore, aller très loin, ne serait-ce qu’avec les codes courts inclus par défaut dans WC et WP. Alors si en plus on personnalise ses shortcodes, c’est encore plus puissant !

Les désavantages des shortcodes

Oui, les shortcodes sont très pratiques. Ils permettent par exemple d’ajouter un formulaire à la volée sur une page WordPress. Juste en cliquant sur un bouton qui ajoutera le shortcode et affichera le formulaire en frontal pour les internautes. Il s’agit là d’un exemple simple et courant de l’usage de shortcodes.

Pourtant, il peut aussi y avoir des désavantages à user de shortcodes. Prenons le cas de thèmes WordPress qui embarquent des shortcodes. Quand vous changer de thèmes, il faudra nettoyer dans chaque article, page ou widget les shortcodes. En les retirant à la main. Car non, un shortcode ajouté dans un contenu WP ne disparaîtra pas avec le retrait d’un thème. Même chose si vous utilisez pendant une période un plugin WP qui embarque des shortcodes. Vous mettez des shortcodes à droite à gauche puis vous changez d’extension. Là encore, il faudra aller retirer les shortcodes du plugin précédent qui est désormais désactivé et désinstallé.

Vous l’aurez compris, le shortcode ou code court doit aussi faire l’objet d’une maintenance à savoir probablement d’un retrait quand le système qui l’embarquait change ou est retiré. Qu’il s’agisse d’un plugin ou d’un thème.

Cet article sera très bientôt suivi d’autres portant sur des parties de WP où les ShortCodes peuvent jouer un rôle très important !