Qu’est ce qu’un shortcode dans WordPress ? Et comment le concevoir ?

Si vous aimez WordPress, vous les avez forcément déjà rencontrés au détour d’un thème ou d’un plugin des plus simples aux plus perfectionnés comme Elementor. Oui, vous avez peut-être deviné, il s’agit des shortcodes. Explications sur le fonctionnement et la création de ceux-ci.

Un shortcode, c’est quoi au juste ?

Les shortcodes sont ces petits morceaux de code entre crochets que l’on retrouve très fréquemment sur les sites qui utilisent notre CMS préféré. Ils fonctionnent un peu comme un raccourci, en faisant la liaison entre l’éditeur WordPress et la fonction PHP qui se trouve derrière. L’avantage de ces petits morceaux de code, c’est que généralement, ils sont personnalisables et ne nécessitent pas une grande connaissance en développement.

On peut citer les exemples les plus connus comme l’insertion d’une image avec légende, l’insertion d’une vidéo ou encore la galerie d’image. Mais on peut aussi utiliser des shortcodes pour concevoir l’architecture d’une page (colonnes, tableau, etc.)

[gallery]
Ma galerie d'image

 

Création de mon premier shortcode sous WordPress

Ici, nous prenons un exemple simple pour commencer en douceur. Disons que nous voulons un shortcode qui sert à afficher les derniers articles publiés sur notre site. Nous le nommons [mesderniers-posts]

Le processus est très simple ! En premier lieu, il nous faut créer la fonction qui sera appelée par notre fameux shortcode. Ensuite, il nous faut assigner un nom propre à notre shortcode. Et pour terminer, il suffit de lier la fonction d’enregistrement à une cation WordPress.

Pour réaliser ce shortcode, vous pouvez coder directement dans le fichier functions.php ou dans un autre fichier PHP qui est appelé dans le functions.php.

Pensez au thème enfant

Avant toute chose, vérifier bien que vous vous trouvez dans votre thème enfant sous peine de perdre vos ajouts lors d’une mise à jour du thème. Si vous n’avez jamais entendu la notion de thème enfant, nous vous invitons à suivre notre tutoriel sur le thème enfant.

Vous êtes prêt ? On se lance avec vous !

Création de la fonction de rappel

Lorsque WordPress détecte un shortcode, il est automatiquement remplacé par du code, qui sera notre fonction de rappel. Nous allons créer une fonction PHP qui va parcourir la base de données et récupérer les derniers articles publiés.fonction rappel

function recent_posts_function() {
   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;
}
Callback function

Ici, nous envoyons une requête à la base de données afin de récupérer le dernier article en triant par la date d’ajout puis nous retournons une chaîne de caractère ($return_string). Il faut savoir que la fonction de rappel sert uniquement à retourner une chaîne de caractère, en aucun cas, elle affiche quelque chose à l’écran.

Enregistrement de notre shortcode

Notre fonction PHP est désormais prête,on vous rassure le processus est plus simple que pour créer un hook. Il faut maintenant dire à WordPress que ceci est notre shortcode. Pour cela, rien de plus simple ! On vous montre:

 

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}
Enregistrement shortcode

Après cela, lorsque le shortcode [mesderniers-posts] se trouvera dans un article ou une page, notre fonction mesderniers_posts_function() sera automatiquement appelée. Faites bien attention à ce que le nom de votre shortcode soit unique pour éviter d’éventuels conflits.

Lier l’enregistrement à WordPress

Avant de passer à la phase de test, il nous reste une dernière chose à voir ensemble. Nous avons bien enregistrer notre shortcode, mais il nous faut lier cette action ( register_shortcodes() ) à l’initialisation de WordPress. Une seule ligne de code suffit, regardez:

add_action( 'init', 'register_shortcodes');
Lier à WordPress

Test du shortcode

Voilà, votre premier shortcode est crée ! Il ne reste plus qu’à l’essayer. Pour cela créer un nouvel article, ou une nouvelle page et insérer votre shortcode. Si tout s’est bien passé, vous devriez obtenir ce résultat:mon dernier article

 

Ajouter des paramètres à votre shortcode

Si vous souhaitez compléter un peu plus votre shortcode, vous pouvez y ajouter des paramètres. Dans notre exemple, on souhaite afficher tous nos derniers articles, or pour le moment notre shortcode affiche uniquement le dernier article. Il faut donc ajouter une option permettant de définir le nombre d’articles que l’on souhaite afficher à l’écran.

Pour cela nous allons avoir besoin de 2 fonctions de WordPress:

  • La fonction shortcode_atts(), présente de base dans WordPress, qui donc se charge de combiner les attributs personnalisés avec ceux par défaut en cas de besoin.
  • La fonction PHP extract(), qui elle se chargera d’extraire les attributs du shortcode.

Nous allons donc ajouter un argument qui sera un tableau d’attributs dont nous aurons extrait le paramètre du nombre d’articles souhaité. Ensuite, on lance un requête dans la base de données pour récupérer le nombre précédemment souhaité et puis on crée une liste en HTML pour les afficher.

function recent_posts_function($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;
}
Fonction de rappel avancée

Si l’utilisateur ne donne pas de paramètre, 1 sera la valeur par défaut. De la même manière, nous pouvons ajouter plus d’attributs, permettant au shortcode d’accepter plus de paramètres. Grace à cette fonction avancée, nous pouvons maintenant définir le nombre d’articles à afficher :

Si aucun paramètre n’est renseigné, par défaut, WordPress choisira la valeur 1. Évidemment, nous pouvons ajouter d’autres attributs qui permettrons au shortcode d’obtenir plus de paramètres.

Test du shortcode avancé

Pour cette exemple, nous voulons afficher les 3 derniers articles. Comme pour le premier test, on insère le shortcode mais en rajoutant cette fois le paramètre: [mesderniers-posts posts="3"]

Vous devriez avoir un résultat de ce genre:

affichage résultat avancé

Maintenant que vous avez compris le principe, amusez-vous à créer autant de shortcodes que vous avez besoin.

Plus de shortcodes…

Si vous souhaitez utiliser plus de shortcodes que WordPress n’en propose, il existe énormément de plugins pour parfaire votre collection ! Voici les plugins de shortcodes les plus en vogues en ce moment.

  • Shortcodes Ultimate
  • Supreme shortcodes
  • Easy Bootstrap Shortcode

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

[Total : 2    Moyenne : 3/5]

Laisser une réponse