Short­codes WordPress : ajouter du dynamisme à votre projet

En 2008, l’équipe de dé­ve­lop­pe­ment WordPress a introduit une fonc­tion­na­lité appelée « short­codes » per­met­tant d’ajouter fa­ci­le­ment des éléments dy­na­miques à vos pu­bli­ca­tions. Bien que WordPress utilise depuis la version 5.0 l’éditeur de blocs Gutenberg, qui offre de nom­breuses fonc­tion­na­li­tés au­pa­ra­vant dis­po­nibles uni­que­ment avec des rac­cour­cis, ces derniers restent largement utilisés dans de nombreux plugins et thèmes.

Qu’est-ce qu’un shortcode ?

Les short­codes 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’in­ter­pré­ta­tion des scripts res­pec­tifs. 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 dy­na­miques tels que des pop-ups ou une galerie d’images.

L’im­plé­men­ta­tion d’un shortcode dans WordPress ne re­pré­sente pas de grand défi : il est di­rec­te­ment ajouté à l’éditeur à la place cor­res­pon­dante dans la pu­bli­ca­tion. Pour que WordPress re­con­naisse ces derniers en tant que code, ils sont placés entre crochets « [ ] ». Un shortcode de forum peut par exemple res­sem­bler à cela : « [pu­bli­ca­tions_actuelles] ». Reliées à la fonction PHP adaptée, les con­tri­bu­tions récentes sont ainsi affichées à l’em­pla­ce­ment défini. Avec des pa­ra­mètres sup­plé­men­taires, il est possible d’ajouter des spé­ci­fi­ca­tions aux short­codes WordPress.

Bien que les short­codes con­ti­nuent de fonc­tion­ner, WordPress offre désormais un moyen plus intuitif d’insérer des fonctions si­mi­laires di­rec­te­ment dans les blocs grâce à l’éditeur de blocs. Ainsi, de nombreux short­codes clas­siques ont été remplacés par des blocs Gutenberg, ce qui permet aux uti­li­sa­teurs d’insérer du contenu dynamique de manière encore plus simple. Si vous ne souhaitez pas renoncer à l’uti­li­sa­tion de short­codes, WordPress met à dis­po­si­tion le bloc spécial shortcode, grâce auquel vous pouvez insérer des short­codes di­rec­te­ment dans l’éditeur de blocs.

Pourquoi les short­codes WordPress sont-ils si im­por­tants ?

L’in­tro­duc­tion de l’éditeur de blocs a modifié l’uti­li­sa­tion de ces rac­cour­cis. De nom­breuses anciennes fonctions ont été rem­pla­cées par des blocs : les uti­li­sa­teurs peuvent main­te­nant insérer du contenu par glisser-déposer, sans utiliser de code. Cependant, les short­codes restent utiles, en par­ti­cu­lier pour les plugins spé­cia­li­sés ou pour certaines fonctions per­son­na­li­sées qui n’ont pas encore leur propre al­ter­na­tive de bloc.

Dans les ins­tal­la­tions WordPress exis­tantes, les short­codes restent une solution utile pour assurer la com­pa­ti­bi­lité avec les anciens thèmes et plugins. Ces derniers con­ti­nuent souvent à utiliser des short­codes lorsqu’ils ne sont pas encore en­tiè­re­ment passés aux blocs. Ils sont aussi adaptés au contenu dynamique et aux fonctions complexes et utiles à ceux qui sou­hai­tent dé­ve­lop­per leurs propres fonc­tion­na­li­tés. En effet, ils per­met­tent d’intégrer des fonc­tion­na­li­tés spé­ci­fiques sans avoir à tra­vail­ler di­rec­te­ment sur le code du thème.

Bien que WordPress évolue de plus en plus vers les blocs, les short­codes restent un com­plé­ment précieux, en par­ti­cu­lier pour les uti­li­sa­teurs avancés et les cas d’uti­li­sa­tion spé­ci­fiques.

Comment créer ses propres short­codes WordPress ?

Le noyau d’un shortcode est le script PHP qui est exécuté. Il ne s’agit pas ici d’expliquer comment pro­gram­mer un tel script, car cela re­vien­drait à effectuer un cours de base en pro­gram­ma­tion PHP et nous éloig­ne­rait du sujet. Vous dé­cou­vri­rez plutôt comment intégrer des rac­cour­cis à votre projet, et comment les dé­sac­ti­ver. Ajoutez pour cela le code PHP dans le dossier functions.php du thème utilisé ou dans un fichier PHP séparé que vous in­té­gre­rez en con­sé­quence. Pour vous assurer que vos short­codes ne dis­pa­raî­tront pas lors de la prochaine mise à jour du thème, vous devriez créer un « thème enfant ». Cette démarche est re­la­ti­ve­ment 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 en­re­gistre 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 pa­ra­mètres définis sous certaines con­di­tions. La fonction exemple suivante fouille la base de données et produit un lien vers la con­tri­bu­tion é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 ca­rac­té­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 sou­dai­ne­ment dans le contenu actuel.

En­re­gis­trer des short­codes sur WordPress

Vous devez indiquer à WordPress que la fonction que vous avez créée est un shortcode qui doit être exécuté au­to­ma­ti­que­ment 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 main­te­nant 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’ap­pa­raisse entre les dif­fé­rents short­codes WordPress, il est important de choisir un nom clair et unique.

Définir des pa­ra­mètres pour les short­codes aux fonctions les plus im­por­tantes

Pour apporter plus de flexi­bi­lité à votre shortcode WordPress, vous avez la pos­si­bi­lité d’ajouter des pa­ra­mètres op­tion­nels. Avec l’exemple utilisé jusqu’ici, il s’agit de dé­ter­mi­ner 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’uti­li­sa­teur avec des attributs natifs et qui entre au­to­ma­ti­que­ment les valeurs par défaut né­ces­saires. D’un autre côté, la fonction PHP extract() est pré­sup­po­sée pour extraire les attributs de short­codes. 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 main­te­nant le raccourci dans le texte, par exemple publications_actuelles posts="5", ce n’est pas seulement le dernier article qui ap­pa­rai­tra, mais bien une liste des cinq derniers articles.

Utiliser certains contenus comme pa­ra­mè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 main­te­nant 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

Au­pa­ra­vant, les short­codes devaient être activés ma­nuel­le­ment pour les widgets. Cependant, depuis WordPress 5.8, de nombreux contenus peuvent être insérés di­rec­te­ment dans les widgets via l’éditeur de blocs, ce qui élimine le besoin de short­codes dans de nombreux cas. Si vous souhaitez continuer à utiliser un shortcode, vous pouvez sim­ple­ment l’insérer dans un bloc shortcode au sein d’un widget.

Dé­sac­ti­ver les short­codes inutiles

Si vous n’avez plus besoin d’un shortcode WordPress, vous avez deux pos­si­bi­li­tés pour le dé­sac­ti­ver. La solution optimale est de supprimer la fonction de rappel du fichier PHP, ainsi que toutes les saisies de code de votre con­tri­bu­tion. Si vous n’effacez que la fonction de rappel, WordPress ne re­con­naî­tra plus le shortcode en tant que tel et le code ap­pa­raî­tra en clair au milieu de l’article. Etant donné que cette méthode signifie un fort in­ves­tis­se­ment pour les short­codes fré­quem­ment utilisés, il existe une seconde pos­si­bi­lité : au lieu de supprimer le code et la fonction PHP, la fonction de rappel est étendue par une ins­truc­tion qui ne renvoie rien et est ainsi quasiment bloquée.

add_shortcode('publications_actuelles', '__return_false');

Short­codes pratiques pour votre blog

Main­te­nant que vous avez un aperçu de la structure des short­codes et leur in­té­gra­tion à WordPress, découvrez quelques exemples de short­codes 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 sim­ple­ment entre des short­codes 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 sim­ple­ment le nom du menu respectif comme paramètre, par exemple :

[menu name="Menu principal"]

Intégrer Google Maps

Vous pouvez intégrer sim­ple­ment et ra­pi­de­ment 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 pa­ra­mètres : hauteur (height), largeur (width) et source Google Maps (src). Un tel code devrait donc res­sem­bler à 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 sou­hai­tent pas créer leurs propres short­codes ni im­plé­men­ter ma­nuel­le­ment des exem­plaires existants dans les fichiers PHP déjà men­tion­nés, il existe une autre pos­si­bi­lité de débloquer des rac­cour­cis utiles pour leur projet Web. Sur le site officiel de WordPress, vous trouverez un grand choix de plugins qui ajoutent des short­codes à votre ins­tal­la­tion WordPress. Voici quelques exemples desdits plugins :

• Short­co­der : créer son propre shortcode WordPress en quelques étapes : vous créez votre shortcode au sein d’un éditeur visuel et le munissez fa­ci­le­ment de snippets HTML et Ja­vaS­cript.
• Short­codes Ultimate : ce plugin contient plus de 50 short­codes WordPress pré­dé­fi­nis et prend en charge l’éditeur de blocs.