La plupart des débutants restent confus quant à la véritable signification des shortcodes. Traduit, ce terme signifie « Code Court ou raccourci », en bref un code que l’on utilise pour afficher/exécuter une fonctionnalité rapidement.

Je précise rapidement, car ces fonctionnalités peuvent être affichées/executées autrement, en modifiant le code source, mais cela prend bien évidemment beaucoup de temps.

Que vous soyez un développeur ou un simple utilisateur de WordPress, vous devez apprendre à utiliser les shortcodes. Ces derniers sont dans la plupart des cas ajoutés par des plugins/thèmes, mais d’autres sont disponibles par défaut.

Ces shortcodes sont généralement utilisés sur l’éditeur visuel ou dans certains widgets.

Comment se présente les shortcodes

Le shortcode est généralement précédé d’un crochet ouvert « [ » et prend généralement fin à la suite d’un crochet fermé « ] ».

Les shortcodes sont de deux types :

  • Les shortcodes simples, ils sont uniquement constitués d’un crochet ouvrant et fermant dans ce style : « [shortcode] ».
  • Les shortcodes en paire, il s’agit de deux shortcodes qui sont légèrement différents dans leur forme mais qui demeurent indépendants l’un envers l’autre. Ils sont généralement utilisés pour capturer de très grandes données. Ils se présentent généralement sous cette forme : [shortoce_paire] contenu à capturer [/shortcode_paire]

Les shortcodes code acceptent exceptionnellement des paramètres. Il s’agit des informations additionnelles ajoutées à un shortcode. Ils se présentent sous cette forme « parametre=’valeur’ ». Voici un exemple d’un shortcode avec paramètre :

« [shortcode parametre=’valeur’] ».

Remarque : Les shortcodes en paire acceptent également des paramètres.

Comment utiliser les shortcodes disponibles par défaut

Il s’agit ici des shortcodes fourni avec WordPress après son installation. Il s’agit plus précisément :

Pour les vidéos : [ video ]

Ce shortcode prend comme paramètres les attributs suivant :

  • « src » pour indiquer la source de la vidéo, exemple : [ video src=’http://example.com/video.mp4’ ]
  • « mp4 » pour indiquer à certains navigateurs que le fichier est au format mp4.
  • « mov » pour indiquer à certains navigateurs que le fichier est au format mov.
  • « ogv » pour indiquer à certains navigateurs que le fichier est au format ogv.
  • « height », « width » pour définir la hauteur et la largeur de l’image.
  • « autoplay » pour activer la lecture automatique. Prend une valeur « on » ou « off ».
  • « preload » pour activer le chargement anticipé de la vidéo. Prend une valeur « on » ou « off ».
  • « Loop » pour une lecture en boutique. Prend une valeur « on » ou « off ».

Pour les fichiers audio : [ audio ]

Ce shortcode permet d’ajouter un lecteur audio sur votre blog. Il prend les mêmes paramètres du shortcode video, excepté les paramètres « height » et « width ».

Pour les galeries : [ gallery ]

Ce shorcode vous permet de créer une galerie photo sur WordPress. Il vous faut cependant fournir l’identifiant des différentes images de votre blog au paramètre « ids », de sorte à avoir un shortcode identique à celui-ci.

« [ gallery ids=’1,200,434,50’ ] »

Pour plus d’information, je vous invite à consulter cette documentation offerte sur WordPress.org.

Quelques plugins spécialisés dans l’affichage d’éléments Web

Certains plugins WordPress ajoutent des fonctionnalités qui vous permettent d’afficher des éléments web. Vous n’avez donc plus nécessairement besoin de maitriser le language HTML/CSS pour personnaliser vos pages.

Comme plugins, je peux citer :

Shotcodes Ultimate

Shortcodes-Ultimate

En ajoutant ce plugin sur votre blog, vous remarquerez un nouveau bouton « insérer le shortcode » disponible sur éditeur visuel. En réalité, ce plugin ajoute de nouvelles fonctionnalités à votre blog. C’est le cas :

  • Des lightbox
  • Des fichiers audios, vidéo (vidéo Youtube, Vimeo)
  • Des documents
  • Des articles
  • Des utilisateurs
  • Des templates (des thèmes)
  • Des tableaux
  • Des onglets
  • Des accordéons
  • Etc.

Il y a un bon nombre d’éléments proposés par ce plugin, et je suis convaincu qu’il vous simplifiera énormément la vie.

Easy Bootstrap shortcode

Voici un plugin plutôt intéressant, il ajoute de nouvelles fonctionnalités graphiques à votre blog.

easy-bootstrap-shortcode-plugin-de-shortcodes

Lorsque je parle de graphique je fais allusion aux différentes composantes du framework Bootstrap, c’est-à-dire des panels, des accordéons, des sliders, des tableaux, des images, des galeries bref une panoplie de fonctionnalités très intéressantes pour créer une bonne « landing page ».

easy-bootstrap-shortcuts

C’est tout pour cette astuce sur les shortcodes de WordPress. N’hésitez pas à partager ce tutoriel sur vos réseaux sociaux préférés.