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 à apprendre à un 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 un peu la notion de shortcode dans WordPress qui sont un réel atout 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 utiliser 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 nombres de shortcodes comme notamment :

• afficher des images
• afficher une galerie photo dans vos pages
• insérer de vidéos
• créer de 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 ou Caldera Forms.
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ées 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 !

Il suffit en effet de copier votre shortcode directement dans votre éditeur de texte (Gutenberg ou l’éditeur classique si vous avez préféré désactiver l’éditeur Gutenberg de WordPress).

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.

Je vous conseille de l’insérer dans l’éditeur en mode texte et pas en mode visuel. Car sinon WordPress va interpréter directement votre shortcode. Et vous serez alors obligé de passer dans le mode texte de l’éditeur pour le modifier.

Remarque : dans mon exemple, j’ai volontairement mis un espace entre les crochets. Car sinon j’aurai 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 ?

Il est également possible de créer ses propres shortcodes personnalisés. Il suffit pour cela de copier dans le fichier functions.php de votre thème. Créez ou copiez la fonction que vous souhaitez utiliser dans vos contenus puis déclarer le avec la fonction référence de WordPress add_shortcode.

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.