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.

1. Définition du shortcode
2. Comment faire un shortcode ?
3. Shorcode et thème enfant
4. Fonction Rappel
5. Enregistrement du shortcode
6. Lier à WordPress
7. test du short code
8. Paramètres
9. Tests avancés
10. Plus de shortcodes

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]

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 pour la création du shortcode

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

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;
}

à 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

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');
}

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');

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:

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;
}

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:

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