Qu’est-ce qu’un shortcode WordPress ?

J’ai dû récemment m’intéresser à certaines optimisations de WordPress que je voulais faire sans avoir recours aux extensions WordPress.  J’en suis venu à insérer du PHP dans un article en utilisant un snippet WordPress et un shortcode. Je voulais revenir sur ce dernier point dans un nouvel article pour approfondir la notion de shortcode dans WordPress, un outil précieux pour les utilisateurs de WordPress, débutants ou confirmés.

Qu’est-ce qu’un shortcode WordPress ?

Le terme de shortcode peut être traduit en français par « code court » ou « bout de code ». Il s’agit d’une balise propre à WordPress qui est notée entre crochet. Comme pour la plupart des balises HTML, la balise doit être ouverte et fermée (shortcode enclosing en anglais) mais elle peut être aussi utilisée sans balise fermante (shortcode self-closing).

Exemples (fictifs) :

• shortcode enclosing : [shortcode][/shortcode]
  
• shortcode self-closing : [shortcode]

Un shortcode est un outil qui permet de faire appel dans vos contenus (pages, widgets ou articles WordPress) à des éléments dynamiques ou fonctions puissantes qui nécessiteraient normalement plusieurs lignes de codes. Ce sont donc comme des raccourcis, simples à utiliser même pour les débutants et utilisateurs n’ayant pas ou peu de connaissance en langage informatique.

Depuis quand les shortcodes sont-ils utilisés dans WordPress ?

Ils ont été introduits dans WordPress 2.5 et ne sont pas étrangers au succès de WordPress car ils ont permis aux utilisateurs d’utiliser facilement des fonctionnalités avancées où ils voulaient dans leurs articles ou leurs pages. Depuis la version 4.9 de WordPress, les shortcodes peuvent être directement copiés dans vos widgets, ils sont maintenant interprétés (ce qui n’était pas le cas auparavant)

Plus d’informations sur la page consacrée aux shortcodes sur le site officiel français de WordPress : https://codex.wordpress.org/fr:Shortcode

Quelques utilisations de shortcodes

WordPress propose un certain nombre de shortcodes, comme :

• afficher des images
• afficher une galerie photo dans vos pages
• insérer des vidéos
• créer des boutons
• personnaliser la mise en page
• etc.

Shortcodes et plugins WordPress

Beaucoup d’extensions pour WordPress proposent également leurs propres shortcodes que vous pouvez ensuite utiliser dans vos pages, articles, widgets ou même dans votre thème WordPress.

C’est par exemple le cas des plugins de formulaire comme Contact Form 7. Le plugin Caldera Forms proposait aussi cette fonctionnalité, mais n’est plus maintenu depuis 2021.
Après avoir créé votre formulaire, il vous suffira de coller le shortcode associé à votre formulaire dans votre page pour voir apparaître le formulaire. C’est bien plus simple comme système que de créer directement le formulaire dans la page.
Car vous pourrez ainsi utiliser le même formulaire dans différentes pages ou articles.
Si vous avez besoin de modifier votre formulaire, vous n’aurez qu’à le faire sur votre formulaire de base. Ainsi, les modifications seront répercutées sur tous les formulaires affichés par le shortcode associé.

Comment utiliser un shortcode dans WordPress ?

Pour se servir d’un shortcode dans un des contenus de votre site, rien de plus simple !

Avec l’éditeur Gutenberg, utilisez le bloc Shortcode prévu à cet effet. Si vous avez préféré désactiver Gutenberg, collez le shortcode dans l’éditeur classique.

Exemple pour afficher une galerie dans une page ou article WordPress : il vous suffit d’utiliser [ gallery ][/ gallery ] là où vous voulez voir apparaître votre galerie photo.

Avec l’éditeur classique, insérez le shortcode en mode texte plutôt qu’en mode visuel pour éviter que WordPress ne l’interprète directement.

Remarque : dans mon exemple, j’ai volontairement mis un espace entre les crochets, car sinon j’aurais affiché une galerie photo. Il faut bien sûr ne pas mettre d’espace entre les crochets et le nom du shortcode pour l’utiliser.

Paramètres d’un shortcode

Encore mieux, vous pouvez préciser des attributs à votre shortcode pour utiliser certains paramètres précis.

Ex : [ gallery id= »2″ size= »medium » ][/ gallery ]

Ici, j’utilise l’attribut id et size du shortcode gallery. C’est pour préciser que je veux afficher l’image numéro 2 et que je veux utiliser des miniatures de taille moyenne pour ma galerie photos.

L’exemple suivant permet d’afficher plusieurs photos dans une même galerie en les séparant par une virgule : [ gallery ids= »2,3,4″ size= »medium » ][/ gallery ]

Comment créer un shortcode WordPress ?

Vous pouvez aussi créer vos propres shortcodes personnalisés. Ajoutez dans le fichier functions.php de votre thème enfant la fonction que vous souhaitez utiliser, puis déclarez-la avec la fonction add_shortcode de WordPress.

C’est ainsi que j’ai procédé pour afficher l’IP d’un visiteur comme je le raconte dans mon article expliquant comment utiliser du PHP dans des articles WordPress.

Je remets pour vous donner un exemple un shortcode personnalisé à copier dans votre fichier functions.php. Il permet d’afficher l’adresse IP des visiteurs :

/* code complet pour afficher une adresse IP */
function ip_visiteur() {
	if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
		$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
	}
	elseif(isset($_SERVER['HTTP_CLIENT_IP']))
	{
		$ip = $_SERVER['HTTP_CLIENT_IP'];
	}
	else
	{
		$ip = $_SERVER['REMOTE_ADDR'];
	}
	return $ip;
}
add_shortcode( 'affiche_ip', 'ip_visiteur' );

Pour utiliser ce shortcode, il faut copier cette balise dans votre éditeur : [affiche_ip][/affiche_ip]

Petit rappel au passage. Si vous n’utilisez pas de thème enfant, votre fichier functions.php et les modifications que vous lui aurez apporté seront écrasées à la première mise à jour de votre thème. Il est donc vital d’utiliser un thème enfant dans son site WordPress si vous modifiez les fichiers de votre thème.

Où trouver des shortcode WordPress ?

Il est bien sûr possible de trouver des shortcodes WordPress en faisant une recherche sur votre moteur de recherche préféré ou dans le moteur de recherche d’extensions de WordPress. Il est également possible d’utiliser un plugin dédié comme Uix Shortcodes (compatible avec Gutenberg) ou  Shortcodes Ultimate qui regroupe plus de 50 shortcodes qui vous permettront de créer facilement des carrousels, utiliser des boutons, onglets etc.

Foire aux questions

Quelle est la différence entre un shortcode et un bloc Gutenberg ?

Un shortcode est un code court entre crochets qui fonctionne dans tous les éditeurs WordPress. Un bloc Gutenberg est un élément visuel propre au nouvel éditeur, avec une interface de configuration graphique. Les shortcodes restent compatibles avec Gutenberg via le bloc Shortcode dédié.

Les shortcodes ralentissent-ils WordPress ?

Un shortcode bien codé n’a pas d’impact notable sur les performances. Les ralentissements surviennent quand un plugin charge des scripts et styles CSS sur toutes les pages, même celles qui n’utilisent pas le shortcode. Vérifiez que vos plugins ne chargent leurs ressources que là où c’est utile.

Comment trouver le shortcode d’un plugin WordPress ?

La plupart des plugins affichent leur shortcode dans leur page de configuration. Vous le trouverez aussi dans la documentation du plugin ou sur sa page WordPress.org. Certains plugins ajoutent un bouton dans l’éditeur pour insérer le shortcode automatiquement.

Peut-on utiliser un shortcode dans un widget WordPress ?

Oui, depuis WordPress 4.9, les shortcodes sont interprétés dans les widgets texte. Collez simplement le shortcode dans un widget Texte ou HTML personnalisé et il sera exécuté normalement.

Comment créer un shortcode personnalisé sans coder ?

Des plugins comme Shortcodes Ultimate proposent une bibliothèque de shortcodes prêts à l’emploi. Pour créer un shortcode personnalisé sans toucher au fichier functions.php, utilisez un plugin de snippets comme Code Snippets qui permet d’ajouter du code PHP depuis l’administration WordPress.