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 :
[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 :
- date_format : permet de donnée le format de date exemple d/m/Y
- 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 !
