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 🙂
Sommaire
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]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 🙂
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.
WordPress contient par défaut plusieurs shortcodes. Dont celui de la galerie photos. Les autres étant :
On peut insérer des codes courts à différents endroits de WordPress, via le tableau de bord :
Cependant, à l’usage, il faut bien constater que l’usage se fait la plupart du temps, quand on rédige un article.
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.
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.
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.
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.
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 :
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 :
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 !
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 !
Heureuse maman d’un petit garçon né en 2018, je tiens aujourd’hui cinq blogs. Après 17 années passées dans une grande entreprise de téléphonie, je travaille désormais en tant que webmaster à mon compte (via ma micro-entreprise créée en 2015).
@2014 -2022 | Designed with love by GG – All Right Reserved – Mentions Légales
L