Les shortcodes

Définition

Les shortcodes sont des éléments de balisage qui permetent d'étendre simplement et de façon sécurisée les fonctionnalités de base du CMS sans avoir à écrire de code. Par exemple, pour intégrer des fonctionnalités avancées ou insérer des contenus dynamiques tels que : formulaires de contact, carrousels, vidéos, images, galeries, fichiers audio.

Exemple d'utilisation

Voici le shortcode qui va permettre d'insérer une vidéo YouTube :

si on veut jouer la vidéo suivante : https://www.youtube.com/watch?v=j800SVeiS5I
il suffit d'écrire :

input
[youtube j800SVeiS5I ]
output

Liste des shortcodes disponibles

  • Certains ne sont pas bien documentés pour le moment, car ils sont encore en cours de développement.
  • D'autres seront ajoutés à l'avenir.

Quoi qu'il en soit, voici la liste :

Syntaxe des shortcodes

Les shortcodes sont écrits entre crochets, avec le nom spécifique du shortcode suivi éventuellement de paramètres.

[shortcode "paramètre1" "paramètre2"]

Lorsqu'au moment du rendu de la page le CMS rencontre un shortcode, il le remplace par le contenu ou la fonctionnalité correspondante.

Voici une explication détaillée de la syntaxe :

  1. Les shortcodes sont encadrés par des crochets [ ].
  2. Un shortcode commence par le nom du shortcode, suivi éventuellement de paramètres séparés par des espaces.
  3. Les paramètres sont généralement écrits au format clé="valeur", où clé est le nom du paramètre et valeur est la valeur attribuée à ce paramètre. Les guillemets doubles peuvent être utilisés pour entourer la valeur.
  4. Certains paramètres peuvent être facultatifs, tandis que d'autres peuvent être obligatoires. La syntaxe exacte des shortcodes varie selon les shortcodes. Il faut donc se référer à la documentation pour obtenir des détails précis sur la syntaxe des shortcodes disponibles.
  5. Les shortcodes peuvent contenir du texte ou d'autres balises HTML à l'intérieur d'eux.

Voici un exemple générique de syntaxe de shortcode :

[nom_du_shortcode paramètre1="valeur1" paramètre2="valeur2" ...]

Certain shortcode ont justes des clés pour paramètre, comme par exemple le shortcode pour la vidéo Youtube.

[nom_du_shortcode "valeur1" "valeur2" ...]

Les doubles guillemets peuvent être facultatif si la valeur ne contient pas d'espace.

[youtube j800SVeiS5I ]

Prenons un exemple :

[button text="Cliquez ici" color="blue" link="https://example.com"]

Dans cet exemple, le shortcode est [button] et il utilise trois paramètres : text, color et link. La valeur du paramètre text est "Cliquez ici", la valeur du paramètre color est "blue" et la valeur du paramètre link est "https://example.com". Ce shortcode pourrait être utilisé pour générer un bouton avec le texte "Cliquez ici", de couleur bleue et qui redirige vers le lien spécifié.

Shortcodes à balise fermante

Certains shortcodes peuvent avoir une structure de balise de début et de fin. Ils sont appelée shortcode à balise fermante. Ce type de shortcode est utilisé lorsque vous souhaitez entourer un contenu spécifique avec le shortcode, ce qui permet des options de personnalisation plus avancées.

Exemple d'utilisation avec le shortcode quote pour afficher une citation :

input
[quote source="origine"]
Voici le texte de la citation.
[/quote]
output

Voici le texte de la citation.

Dans cet exemple, le contenu de la citation est placé entre la balise ouvrante et fermante.