Comment créer un shortcode pour WordPress ?

Qu’est ce qu’un shortcode ?

Un shortcode est un balisage spécial qui permet d’afficher un élément au cœur d’un article ou d’une page.

Voici à quoi ressemble un shortcode :

[bienvenue]

Un shortcode peut également disposer d’attributs :

[bienvenue taille="grand"]

Il peut également englober un contenu à l’intérieur de votre post :

[mise-en-avant]Bonjour à toi ![/mise-en-avant]

Créer un shortcode simple avec un attribut

Pour créer un shortcode, il faut ajouter du code dans le fichier functions.php de WordPress. Vous pouvez aussi en créer un via la création d’un plugin mais nous ne verrons pas cette option dans ce tutoriel.

Voici le code nécessaire pour créer un shortcode qui affiche un message de bienvenue :

<?php
function bienvenue_shortcode($atts){
    $a = shortcode_atts([
        'taille' => 'moyenne'
    ], $atts);

    $sizes = [
        'petite' => '1rem',
        'moyenne' => '2rem',
        'grande' => '3rem'
    ];

    return '<p style="font-size: '.$sizes[$a['taille']].';">Bienvenue sur mon site</p>';
}
add_shortcode('bienvenue', 'bienvenue_shortcode');

A la ligne 2, on définit la fonction qui va gérer le shortcode. Cette fonction prend un paramètre « $atts » qui permet de récupérer les attributs du shortcode.

A partir de la ligne 3, on utilise la fonction « shortcode_atts » qui permet d’attribuer des valeurs par défaut aux attributs. Dans notre cas, la valeur par défaut est « moyenne ». Si l’attribut « taille » est renseigné au niveau du shortcode avec une autre valeur, c’est cette valeur qui sera prise.

A la ligne 7, on créer un tableau de valeur qui définit les différentes tailles de texte possibles.

Enfin, à la ligne 13, on retourne le code HTML qui sera affiché dans l’article. Ici, on affiche la phrase « Bienvenue sur mon site » dans un paragraphe. Dans ce paragraphe, on récupère la taille du texte dans le tableau « $sizes » grâce à notre attribut « $a[‘taille’] ».

Créer un shortcode englobant

Si vous voulez utiliser un shortcode englobant, le code change un peu. Pour rappel, voici un shortcode englobant.

[mise-en-avant]Ceci est un texte mis en avant[/mise-en-avant]

Voici le code que l’on pourrait créer :

<?php
function mise_en_avant_shortcode($atts, $content){
    $a = shortcode_atts([
        'taille' => 'moyenne'
    ], $atts);

    $sizes = [
        'petite' => '1rem',
        'moyenne' => '2rem',
        'grande' => '3rem'
    ];

    return '<p style="font-size: '.$sizes[$a['taille']].';">'.$content.'</p>';
}
add_shortcode('mise-en-avant', 'mise_en_avant_shortcode');

Ici, on ajoute le paramètre « $content » que l’on peut réutiliser dans la valeur de retour.

A partir de là, vous pouvez imaginer toutes sortes de fonctionnalités !

PS: n'oubliez pas de lire mon tutoriel principal sur comment créer un thème WordPress !