Shortcodes WordPress : ajouter du dynamisme à votre projet

En 2008, l’équipe de développement WordPress a introduit une fonctionnalité appelée « shortcodes » permettant d’ajouter facilement des éléments dynamiques à vos publications. Bien que WordPress utilise depuis la version 5.0 l’éditeur de blocs Gutenberg, qui offre de nombreuses fonctionnalités auparavant disponibles uniquement avec des raccourcis, ces derniers restent largement utilisés dans de nombreux plugins et thèmes.

Qu’est-ce qu’un shortcode ?

Les shortcodes ont été ajoutés avec la version 2.5 de WordPress. Il s’agit de courtes commandes placées au sein d’un texte et reliées à un code PHP. Elles peuvent être placées dans un dossier relié, functions.php, ou dans un fichier .php séparé, intégré au fichier functions.php. Si les pages sont chargées avec un shortcode, WordPress se charge de l’exécution et de l’interprétation des scripts respectifs. Le visiteur voit ainsi le contenu créé via la fonction PHP plutôt qu’avec le code. Le shortcode sert donc en fait de substitut, par exemple pour des éléments simples tels qu’un extrait de texte ou pour des types de contenu dynamiques tels que des pop-ups ou une galerie d’images.

L’implémentation d’un shortcode dans WordPress ne représente pas de grand défi : il est directement ajouté à l’éditeur à la place correspondante dans la publication. Pour que WordPress reconnaisse ces derniers en tant que code, ils sont placés entre crochets « [ ] ». Un shortcode de forum peut par exemple ressembler à cela : « [publications_actuelles] ». Reliées à la fonction PHP adaptée, les contributions récentes sont ainsi affichées à l’emplacement défini. Avec des paramètres supplémentaires, il est possible d’ajouter des spécifications aux shortcodes WordPress.

Bien que les shortcodes continuent de fonctionner, WordPress offre désormais un moyen plus intuitif d’insérer des fonctions similaires directement dans les blocs grâce à l’éditeur de blocs. Ainsi, de nombreux shortcodes classiques ont été remplacés par des blocs Gutenberg, ce qui permet aux utilisateurs d’insérer du contenu dynamique de manière encore plus simple. Si vous ne souhaitez pas renoncer à l’utilisation de shortcodes, WordPress met à disposition le bloc spécial shortcode, grâce auquel vous pouvez insérer des shortcodes directement dans l’éditeur de blocs.

Pourquoi les shortcodes WordPress sont-ils si importants ?

L’introduction de l’éditeur de blocs a modifié l’utilisation de ces raccourcis. De nombreuses anciennes fonctions ont été remplacées par des blocs : les utilisateurs peuvent maintenant insérer du contenu par glisser-déposer, sans utiliser de code. Cependant, les shortcodes restent utiles, en particulier pour les plugins spécialisés ou pour certaines fonctions personnalisées qui n’ont pas encore leur propre alternative de bloc.

Dans les installations WordPress existantes, les shortcodes restent une solution utile pour assurer la compatibilité avec les anciens thèmes et plugins. Ces derniers continuent souvent à utiliser des shortcodes lorsqu’ils ne sont pas encore entièrement passés aux blocs. Ils sont aussi adaptés au contenu dynamique et aux fonctions complexes et utiles à ceux qui souhaitent développer leurs propres fonctionnalités. En effet, ils permettent d’intégrer des fonctionnalités spécifiques sans avoir à travailler directement sur le code du thème.

Bien que WordPress évolue de plus en plus vers les blocs, les shortcodes restent un complément précieux, en particulier pour les utilisateurs avancés et les cas d’utilisation spécifiques.

Comment créer ses propres shortcodes WordPress ?

Le noyau d’un shortcode est le script PHP qui est exécuté. Il ne s’agit pas ici d’expliquer comment programmer un tel script, car cela reviendrait à effectuer un cours de base en programmation PHP et nous éloignerait du sujet. Vous découvrirez plutôt comment intégrer des raccourcis à votre projet, et comment les désactiver. Ajoutez pour cela le code PHP dans le dossier functions.php du thème utilisé ou dans un fichier PHP séparé que vous intégrerez en conséquence. Pour vous assurer que vos shortcodes ne disparaîtront pas lors de la prochaine mise à jour du thème, vous devriez créer un « thème enfant ». Cette démarche est relativement simple et est expliquée dans notre article « Créer un thème enfant Wordpress ».

Créer une fonction de rappel

La fonction PHP qui est exécutée dès que WordPress enregistre un shortcode est ce qu’on appelle en anglais callback function, ou « fonction de rappel » en français. Elle est transmise à une autre fonction, avec des paramètres définis sous certaines conditions. La fonction exemple suivante fouille la base de données et produit un lien vers la contribution écrite pour le shortcode [publications_actuelles] :

function fonction_publications_actuelles () {
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
endwhile;
endif;
wp_reset_query();
return $return_string;
}

Le texte qui doit remplacer le shortcode se trouve sur la variable $return_string (PHP caractérise toutes les variables avec $). La fonction PHP (fonction_publications_actuelles) donne cette variable en retour. Si vous utilisez la commande echo par erreur au lieu de cela, l’élément introduit par shortcode atterrit soudainement dans le contenu actuel.

Enregistrer des shortcodes sur WordPress

Vous devez indiquer à WordPress que la fonction que vous avez créée est un shortcode qui doit être exécuté automatiquement lorsqu’une page consultée contient le raccourci [publications_actuelles]. Pour ce faire, ajoutez le code suivant à votre fichier PHP :

add_shortcode('publications_actuelles', 'fonction_publications_actuelles');

Vous avez maintenant le nom du shortcode [publications_actuelles], qui sera plus tard utilisé dans l’éditeur, et la fonction fonction_publications_actuelles bien définie. Pour qu’aucun conflit n’apparaisse entre les différents shortcodes WordPress, il est important de choisir un nom clair et unique.

Définir des paramètres pour les shortcodes aux fonctions les plus importantes

Pour apporter plus de flexibilité à votre shortcode WordPress, vous avez la possibilité d’ajouter des paramètres optionnels. Avec l’exemple utilisé jusqu’ici, il s’agit de déterminer combien d’articles peuvent être affichés. Vous avez besoin d’une seconde fonction pour cela : la fonction shortcode_atts() d’une part, qui combine les attributs shortcode générés par l’utilisateur avec des attributs natifs et qui entre automatiquement les valeurs par défaut nécessaires. D’un autre côté, la fonction PHP extract() est présupposée pour extraire les attributs de shortcodes. Indiquez la valeur 1 par défaut dans le cas où le champ d’argument reste libre, de la manière suivante ('posts' => 1) :

function fonction_publications_actuelles($atts){
extract(shortcode_atts(array(
'posts' => 1,
), $atts));
$return_string = '<ul>';
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .='<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
endwhile;
endif;
$return_string .= '</ul>';
wp_reset_query();
return $return_string;
}

Spécifiez maintenant le raccourci dans le texte, par exemple publications_actuelles posts="5", ce n’est pas seulement le dernier article qui apparaitra, mais bien une liste des cinq derniers articles.

Utiliser certains contenus comme paramètres de shortcode

Vous pouvez modifier l’exemple présenté plus haut et y ajouter un élément de contenu précis comme paramètre. Dans notre exemple, ce paramètre de contenu doit définir un titre h3. Complétez pour cela le script callback avec la variable $content et insérez le titre HTML <h3> devant l’élément de liste <ul> :

function fonction_publications_actuelles($atts, $content = null) {
extract(shortcode_atts(array(
'posts' => 1,
), $atts));
$return_string = '<h3>'.$content.'</h3>';
$return_string .= '<ul>';
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
endwhile;
endif;
$return_string .= '</ul>';
wp_reset_query();
return $return_string;
}

De la même manière qu’un tag HTML, encadrez maintenant le titre souhaité dans votre texte avec un shortcode ouvrant et fermant :

[publications_actuelles posts="5"]Nom de la liste des articles récents [/publications_actuelles]

Utiliser un shortcode WordPress dans un widget

Auparavant, les shortcodes devaient être activés manuellement pour les widgets. Cependant, depuis WordPress 5.8, de nombreux contenus peuvent être insérés directement dans les widgets via l’éditeur de blocs, ce qui élimine le besoin de shortcodes dans de nombreux cas. Si vous souhaitez continuer à utiliser un shortcode, vous pouvez simplement l’insérer dans un bloc shortcode au sein d’un widget.

Désactiver les shortcodes inutiles

Si vous n’avez plus besoin d’un shortcode WordPress, vous avez deux possibilités pour le désactiver. La solution optimale est de supprimer la fonction de rappel du fichier PHP, ainsi que toutes les saisies de code de votre contribution. Si vous n’effacez que la fonction de rappel, WordPress ne reconnaîtra plus le shortcode en tant que tel et le code apparaîtra en clair au milieu de l’article. Etant donné que cette méthode signifie un fort investissement pour les shortcodes fréquemment utilisés, il existe une seconde possibilité : au lieu de supprimer le code et la fonction PHP, la fonction de rappel est étendue par une instruction qui ne renvoie rien et est ainsi quasiment bloquée.

add_shortcode('publications_actuelles', '__return_false');

Shortcodes pratiques pour votre blog

Maintenant que vous avez un aperçu de la structure des shortcodes et leur intégration à WordPress, découvrez quelques exemples de shortcodes pratiques qui peuvent vous servir.

Ajouter un lien sous forme de bouton

Pour ajouter un lien sous forme de bouton, il suffit d’un raccourci avec la fonction de rappel suivante :

function link_button_function( $atts, $content = null ) {
return '<button type="button">'.do_shortcode($content).'</button>';
}
add_shortcode('link-button', 'link_button_function');

Vous pouvez décider du graphisme du bouton à mettre en place simplement entre des shortcodes ouvrants et fermants :

[link-button]Cliquez ici ![/link-button]

Afficher le menu WordPress

Vous pouvez afficher le menu choisi de votre projet WordPress dans un article avec le code suivant :

function menu_function($atts, $content = null) {
extract(
shortcode_atts(
array( 'name' => null, ),
$atts
)
);
return wp_nav_menu(
array(
'menu' => $name,
'echo' => false
)
);
}
add_shortcode('menu', 'menu_function');

Si vous souhaitez utiliser ce shortcode, indiquez simplement le nom du menu respectif comme paramètre, par exemple :

[menu name="Menu principal"]

Intégrer Google Maps

Vous pouvez intégrer simplement et rapidement des portions de cartes issues de Google Maps à votre projet, sans avoir à adapter le code source. Voici le code à ajouter dans le fichier PHP :

function googlemap_function($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));
return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&key=VOTRE_CLE_API"></iframe>';
}
add_shortcode("googlemap", "googlemap_function");

Le shortcode qui fait partie des commandes standard est lié à trois paramètres : hauteur (height), largeur (width) et source Google Maps (src). Un tel code devrait donc ressembler à cela dans votre éditeur :

[googlemap width="640" height="480" src="https://www.google.com/maps/place/Tour+Eiffel/@52.5158015,13.3776636,233m?hl=fr"]

Plugins de shortcode WordPress : la solution de facilité

Pour ceux qui ne souhaitent pas créer leurs propres shortcodes ni implémenter manuellement des exemplaires existants dans les fichiers PHP déjà mentionnés, il existe une autre possibilité de débloquer des raccourcis utiles pour leur projet Web. Sur le site officiel de WordPress, vous trouverez un grand choix de plugins qui ajoutent des shortcodes à votre installation WordPress. Voici quelques exemples desdits plugins :

• Shortcoder : créer son propre shortcode WordPress en quelques étapes : vous créez votre shortcode au sein d’un éditeur visuel et le munissez facilement de snippets HTML et JavaScript.
• Shortcodes Ultimate : ce plugin contient plus de 50 shortcodes WordPress prédéfinis et prend en charge l’éditeur de blocs.