Comment créer un shortcode sous WordPress ?

Partager sur

Quel utilisateur de WordPress n’a jamais été confronté aux shortcodes (ou code court en français) ?

 

Dans cet article je t’explique comment créer un shortcode et les rouages de base.

 

Présentation des shortcodes

Qu'est ce qu'un shortcode ?

Un shortcode (ou code court) est un texte entre crochet « [] » qui sera remplacé à l’exécution de WordPress par le contenu d’une fonction d’un fichier PHP. 

 

Où trouve t-on les shortcodes ?

Généralement les shortcodes sont fournis dans les documentations des thèmes et plugin vous permettant ainsi d’intégrer facilement certaines des fonctionnalités proposées.

 

Nous allons voir un exemple avec le plugin Shortcode for Current Date, si l’on se rent sur la page de l’extension on voit cela :

☝🏻 On peut voir qu’il y a un shortcode pour cette extension et qu’on peut lui passer des paramètres :
  • [current_date] : affichera ici la date actuelle, exemple 7th May 2017
  • [current_date format='d/m/Y'] : affichera la date actuelle mais au format d/m/Y, exemple 07/05/2017

Comment utiliser un shortcode ?

Pour utiliser un shortcode il te suffit de l’écrire dans ton contenu WordPress ou d’utiliser le block Gutenberg nommé « code court » ou encore celui d’Elementor, de Divi ou autre…

 

Comment créer un shortcode

Un shortcode simple

Pour créer un shortcode simple, tu devras le faire via la fonction PHP add_shortcode() de WordPress, qui prend en premier argument le nom du shortcode et en second la fonction de callback. Voici un exemple basique :

				
					<?php
function shortcode_qui_dit_hello() {
    return 'hello';
}
add_shortcode( 'je_dis_hello', 'shortcode_qui_dit_hello');
				
			

Dans l’exemple ci-dessus, si j’utilise le shorcode ainsi : [je_dis_hello] affichera : hello

Un shortcode avec argument(s)

Comme on l’a vu plus haut il est possible de passer des arguments dans un shortcode WordPress et voici comment faire :

				
					<?php
function mon_premier_shortcode_avec_arguments( $atts ) {
    $data = shortcode_atts( array(
        'date_format' => 'd/m/Y',
        "tag" => "p",
    ), $atts );
    $date = wp_date( $data['date_format'] );
    if( !empty($data['tag']) ) {
        $date = "<" . $data['tag'] . ">" .$date . "</" . $data['tag'] . ">";
    }
    return $date;
}
add_shortcode( 'exemple', 'mon_premier_shortcode_avec_arguments' );
				
			

Dans cet exemple, si nous avons deux arguments :

  1. date_format : permet de donnée le format de date exemple d/m/Y
  2. tag : permet de changer la balise qui entoure notre date par exemple on peut mettre span
 

Si l’on utilise ce shortcode comme suit [exemple date_format="Y" tag="span"] le shortcode retournera quelque chose comme 2022.

Erreur à éviter avec les shortcodes

Vous ne devez pas mettre directement de l’HTML dans votre shortcode comme suit :

 
				
					<?php
function shortcode_mal_fait() {
    ?>
    <p>Ne pas faire comme ça !!!</p>
    <?php
}
add_shortcode( 'ne_pas_faire_cela', 'shortcode_mal_fait');

function shortcode_mal_fait_2() {
    echo 'Ne fais pas ça !'
}
add_shortcode( 'ne_pas_faire_cela_non_plus', 'shortcode_mal_fait_2');
				
			

Si tu fais cela le code s’affichera en back office et en front et surtout il ne s’affichera tout en haut de l’HTML ce qui n’est pas l’effet voulu.

 

Comment éviter cette erreur et utiliser l'HTML directement dans nos shortcodes

Il existe une fonction PHP qui permet de stocker l’HTML qui est echo au lieu de « l’imprimer » et permet de l’utiliser utltérieurement il s’agit de « ob_start ».

Je vais te faire un exemple ultra simple pour voir comment l’utiliser dans le cadre d’un shortcode :

 
				
					<?php
function shortcode_qui_dit_hello() {
    ob_start();
    echo "Ici l'HTML sera affiché comme on veut"
    ?>
    <p>Ici aussi !</p>
    <?php
    return ob_get_clean();
}
add_shortcode( 'je_dis_hello', 'shortcode_qui_dit_hello');
				
			

Conclusion

Les shortcodes ne sont vraiment pas sorcier, même pour un débutant en PHP ou encore une personne n’ayant que quelques notions.

 

Ceci dit il ne faut vraiment pas sous estimer le champ des possibles…

 

Je te laisse imaginer tout ce que tu peux faire avec ces fameux shortcodes !

 

Réservez un coaching WordPress

Vous avez besoin de conseils pour votre projet sous WordPress.

Ces articles pourraient vous intéresser

👇 Me contacter 👇