🎊 Explosion de confettis : mettez du fun dans votre site WordPress !

Envie d’ajouter une petite touche fun à votre site WordPress ? Pourquoi ne pas déclencher une pluie de confettis quand un visiteur clique sur un bouton 🎉 ? Ce petit effet ne sert à rien, avouons-le… si ce n’est à surprendre vos lecteurs et à marquer les esprits 😎.

Dans ce tutoriel, je vous montre comment mettre ça en place facilement grâce à la librairie Canvas Confetti et à un petit bout de code.

1 – Charger la librairie de confettis 🎉

Pour commencer, on a besoin d’embarquer la librairie JavaScript Canvas Confetti dans WordPress.

Pour cela, il vous suffit de copier-coller le code ci-dessous dans le fichier functions.php de votre thème enfant ou dans un code snippet à l’aide de l’extension éponyme Code Snippets ou de WPMasterToolKit.

function lw_enqueue_confetti_script() {
    wp_enqueue_script(
        'canvas-confetti',
        'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'lw_enqueue_confetti_script');

Ce code charge le script de confettis sur toutes vos pages.

2 – Ajouter le déclencheur JavaScript

Ensuite, on va indiquer à WordPress : « quand on clique sur un élément qui a la classe .btn-confetti, envoi des confettis 🎊 ! ».

Pour cela, ajoutez un nouveau snippet PHP, et collez le code suivant :

add_action('wp_footer', function() { ?>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        var button = document.querySelector(".btn-confetti");

        if (button) {
            button.addEventListener("click", function () {
                confetti({
                    particleCount: 150,
                    spread: 70,
                    origin: { y: 0.6 }
                });
            });
        }
    });
    </script>
<?php });

3 – Ajouter la classe .btn-confetti sur un élément de votre site

Il ne vous reste plus qu’à appliquer la classe btn-confetti à n’importe quel élément cliquable et sur n’importe quelle page de votre site :

• Dans Gutenberg → sélectionnez votre bouton et ajoutez la classe dans l’onglet Avancé > Classe CSS additionnelle.
• Dans Divi → ouvrez les options de votre bouton et ajoutez la classe dans Avancé > ID & Classes CSS.
• Dans Elementor → ouvrez le widget bouton et ajoutez la classe dans Avancé > Classes CSS.

💡 Et ce n’est pas réservé aux boutons : vous pouvez aussi l’appliquer sur n’importe quel élément, par exemple, une image, une icône, ou même un lien texte.

Voici le résultat sur un bouton Gutenberg 👇

4 – Personnaliser les confettis selon vos goûts

Vous pouvez jouer avec les paramètres pour varier le rendu des confettis. Il suffit de remplacer la petite section du code (de l’étape n°2) par des paramètres ou des valeurs différentes.

Par exemple, si vous souhaitez plus de confettis, une explosion plus large, un départ plus bas dans l’écran et des couleurs personnalisées, modifiez les paramètres suivants :

• particleCount → nombre de confettis
• spread → largeur de la dispersion
• origin → position de départ (ex. { y: 0 } = haut, { y: 1 } = bas)
• colors → palette personnalisée (codes hexadécimaux ou RGB)

Voici un exemple de personnalisation :

confetti({
    particleCount: 300,  // plus de confettis
    spread: 120,         // effet plus large
    origin: { y: 0.9 },  // part du bas de l’écran
    colors: ['#ff7500', '#896cee', '#f3f4ba'] // palette personnalisée
});

Et voici le résultat 👇

Voici un autre exemple de code qui agit sur la forme de l’explosion pour que les confettis explosent au centre et en cercle :

confetti({
    particleCount: 200,
    spread: 360,       // 360° au lieu de 70 par défaut
    startVelocity: 45, // vitesse initiale
    origin: { y: 0.6 }
});

Et voici le résultat 👇

Voilà, c’est tout simple et ultra-personnalisable, ce qui vous permet d’obtenir un résultat unique ! De nombreux autres paramètres existent, je vous invite à consulter la documentation officielle de cette librairie de confettis pour les découvrir.

5 – En conclusion… Confettis Party 🎊 !

Que dites-vous de ce petit effet de confettis au clic ? Même si cela n’a rien de vital pour votre site WordPress, il peut :

• apporter un côté fun et un effet de surprise,
• marquer vos visiteurs,
• et donner un petit supplément d’âme à votre design.

En plus, c’est compatible partout : Gutenberg, Divi, Elementor, ou tout autre constructeur de page où vous pouvez ajouter une classe CSS.

Personnellement, je vois régulièrement des confettis dans des SAAS ou des applications No-code et je dois avouer que je suis toujours aussi fan 🤩… Et vous ?