Utiliser et créer des shortcodes dans WordPress

Dans ce tutoriel, je vais vous faire découvrir le fonctionnement des shortcodes et leur utilisation. Les shortcodes sont des balises placées entre des crochets [ ] et offrent de nombreuses possibilités sans avoir besoin de coder puisqu’ils utilisent des fonctions de votre thème ou du CMS.

Beaucoup de plugins les utilisent comme WooCommerce ou WpForms.

Les codes courts natifs de WordPress

Au-delà du thème, WordPress lui-même embarque des shortcodes natifs pour diverses fonctionnalités (supprimez les espaces pour les faire fonctionner).

• [ gallery ] : insérer une galerie d’images à partir de la bibliothèque média.
• [ audio ] : ajouter un lecteur audio pour diffuser des fichiers audio.
• [ video ] : intégrer un lecteur vidéo pour lire des vidéos.
• [ embed ] : insérer du contenu embarqué provenant de sites externes comme YouTube, Twitter, Instagram, etc.
• [ caption ] : ajouter une légende à une image.
• [ playlist ] : créer une liste de lecture audio ou vidéo.
• [ wp_caption ] : ajouter une légende à une image avec une mise en forme spécifique pour les thèmes WordPress.
• [ embed_post ] : insérer le contenu d’un autre article ou page.
• [ archives ] : afficher une liste d’archives du site.
• [ tag_cloud ] : afficher un nuage de tags basé sur le contenu.

Ces shortcodes peuvent également être personnalisés.

[ gallery ids="1,2,3" ] affichera une galerie d'images qui ont les identifiants 1, 2 et 3

Vous trouverez toutes les explications sur les shortcodes de WordPress dans le codex.

Créer des shortcodes dans WordPress

Vous pouvez également créer vos propres shortcodes personnalisés dans le fichier functions.php de votre thème.

Exemple : créer un shortcode pour afficher votre adresse e-mail partout où vous le souhaitez (mentions légales, footer…).

L’avantage est que si vous devez la modifier, vous n’aurez qu’à le faire dans le fichier functions.php.

function inumedia_mail_shortcode() {
    $monmail = "monemail@gmail.com";

    return '<a href="mailto:' .antispambot($monmail). '">'. antispambot($monmail).'</a>';
}
add_shortcode('inu-email', 'inumedia_mail_shortcode');

Explications

• Je déclare ma fonction
• Je place mon e-mail dans la variable
• Je lui indique de me retourner un lien avec mon e-mail
• Je mets la balise antispambot() pour protéger l’e-mail des bots
• Il suffira de saisir [inu-email] pour afficher cette donnée

Créer des shortcodes personnalisés dans WordPress : utilisation avancée

Nous pouvons aller plus loin dans la création de nos shortcodes en leur attribuant des options et des arguments.

function inu_bouton_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'color' => 'blue',
            'target' => '',
            'link' => '#',
        ),
        $atts
    );

    $color = sanitize_text_field($atts['color']);
    $target = sanitize_text_field($atts['target']);
    $link = esc_url($atts['link']);

    if (empty($content)) {
        return '<span style="color: red;">Erreur : le contenu du bouton est manquant.</span>';
    }

    return '<a class="button ' . $color . '" target="' . $target . '" href="' . $link . '">' . $content . '</a>';
}
add_shortcode('inu-bouton', 'inu_bouton_shortcode');

Explications

• Dans la déclaration, j’ai inséré un attribut qui sera dynamique ainsi qu’un contenu vide par défaut
• J’utilise sanitize_text_field pour nettoyer les valeurs des attributs color et target, et esc_url() pour valider et échapper correctement l’URL du lien.
• J’ai mis en place un message d’erreur si jamais mon bouton ne contient pas de texte.

Dans mon shortcode, j’ai donné 3 attributs par défaut à mon bouton :

• La couleur : ceci ajoutera une classe qui indiquera la couleur de mon bouton pour que je puisse le paramétrer en css
• La cible : si on le remplit, on le mettra en «_blank » afin d’ouvrir le lien dans un nouvel onglet
• Le lien : la cible de notre lien

Il suffira de remplir le shortcode par nos propres variables

Notre shortcode ressemblera à ceci :

[inu-bouton color="has-rouge-background-color" target="_blank" link="https://www.google.com"]Google[/inu-bouton]

Ajouter des shortcodes dans mon thème WordPress

Pour cet exemple, je reprends mon shortcode d’e-mail

Ajouter le shortcode dans Gutenberg, cherchez le bloc « Code court »

Dans l’éditeur de WordPress, ajoutez simplement

[inu-email]

Dans le code php de votre thème, ajoutez ces quelques lignes

<?php
echo do_shortcode('[inu-email]');
?>

Conclusion

Les shortcodes sont des outils puissants pour créer des fonctionnalités personnalisées dans WordPress. Ils offrent une flexibilité et une simplicité d’utilisation, même si les blocs Gutenberg les ont en partie remplacés. N’oubliez pas de protéger vos données, de garder vos shortcodes optimisés et d’éviter d’alourdir votre site avec des fonctions trop complexes. Exploitez pleinement le potentiel des shortcodes pour améliorer votre site WordPress.