Shortcodes WordPress

Mis à jour le 23 octobre 2026

Les shortcodes WordPress sont des raccourcis qui permettent d'insérer facilement des éléments ou des fonctionnalités spécifiques dans votre contenu. Ils ressemblent à de petits bouts de code, placés entre crochets [ ], que WordPress interprète et remplace ensuite par le contenu qu'ils définissent.

Shortcode veut dire "code court".

Les shortcodes peuvent servir à de nombreux usages, comme l'intégration de galeries d'images, de formulaires de contact, de boutons de partage sur les réseaux sociaux, etc.

WordPress propose un ensemble de shortcodes de base, et de nombreux thèmes et extensions en ajoutent d'autres pour leurs fonctionnalités spécifiques.

L'arrivée de l'éditeur de blocs de WordPress (Gutenberg) a progressivement réduit l'utilisation des shortcodes en faveur d'une approche plus visuelle par blocs. Cependant, les shortcodes restent encore utilisés.

Exemple de shortcode :

[mon_shortcode]

Certains shortcodes acceptent des attributs, par exemple :

[mon_shortcode id="123" size="medium"]

Pour savoir si votre thème et les plugins que vous utilisez proposent des shortcodes, vous pouvez vous référer à leur documentation respective.

Exemples de shortcodes

Un exemple de plugin qui offre plusieurs shortcodes est "The Events Calendar" (plugin WordPress connu pour la gestion d'événements).

Voici une partie de la liste des shortcodes de ce plugin :

Comment insérer un shortcode dans WordPress

Insérer un shortcode dans WordPress est simple comme bonjour : une fois que vous savez exactement quel shortcode vous voulez utiliser et sa syntaxe, vous n'avez qu'à le coller au bon endroit.

Dans un block Gutenberg

Il y a un block Gutenberg dans le core WordPress qui vous permet d'insérer un shortcode facilement :

Dans le Classic Editor

Insérez directement le shortcode où vous voulez :

Bonjour

[mon_shortcode]

Avec Divi

Pour insérer un shortcode avec Divi, vous pouvez soit coller le shortcode dans un module "Texte", soit dans un module "Code".

Dans une template PHP

Pour utiliser un shortcode WordPress dans une template PHP, on utilise la fonction do_shortcode() comme ceci :

<?php echo do_shortcode("[votre_shortcode]"); ?>

Comment créer un shortcode dans WordPress

Vous pouvez créer un shortcode en le programmant en PHP, par exemple dans le fichier functions.php de votre thème enfant. La fonction add_shortcode('nom_shortcode', 'fonction_a_appeler') crée un shortcode 'nom_shortcode' qui appelle la fonction 'fonction_a_appeler' (documentation).

Exemple simple :

// fonction lancée quand le shortcode est appelé (ideoforge.com)
function mon_shortcode(){
	return 'Bonjour';
}

// déclaration du shortcode [saluer]
add_shortcode('saluer', 'mon_shortcode');

Ce shortcode s'appelle en écrivant [saluer] et va écrire "Bonjour".

Pour aller plus loin, il faut connaître le PHP et les fonctions de WordPress.

Comment « échapper » les crochets des shortcodes de WordPress pour les afficher sans les exécuter ?

Comment faire si vous voulez afficher un shortcode pour le montrer à vos visiteurs en tant que texte, sans que son code soit exécuté ou interprété, par exemple dans une documentation, ou un article comme celui-ci ?

Pour info pour vos recherches, cela se dit en anglais : How to escape shortcodes brackets in WordPress ou display a shortcode without executing it

Solution 1 : on double les crochets afin que le shortcode soit affiché au lieu d’être interprété

[mon_shortcode] devient [[mon_shortcode]]
Vous écrivez [[mon_shortcode]] et vos visiteurs verront [mon_shortcode]

C'est sensé marcher, mais pas de bol, ça ne marche pas à chaque fois.

Solution 2 : on remplace les crochets par leur entité HTML

Voici les correspondances des crochets en entité HTML :

Pour pouvoir écrire des entités HTML, vous passez du mode "Visuel" au mode d'édition HTML.

Cela paraît être une bonne solution, mais pas de bol, lorsque vous repassez au mode édition visuelle depuis le mode HTML, WordPress va gentiment remplacer vos entités HTML par ce que à quoi elles correspondent = des crochets, et donc interpreter votre shortcode.

Solution 3 : utiliser <code></code> à l'intérieur des crochets

Solution trouvée ici. En mode édition HTML, utilisez cette syntaxe :

Pas pratique, et visuellement un peu bizarre selon la manière dont le code est stylé dans votre thème ou dans vos CSS.

Solution 4 : afficher le code dans une image

Au pire, affichez le shortcode dans une image, au moins vous êtes sûr que ça marche à tous les coups.

Vous avez une meilleure solution ? Partagez-la en commentaire ci-dessous !