3 techniques pour ajouter un pop up sur WordPress

Un pop up c’est quoi ?

Un pop up (ou fenêtre contextuelle en français), est une fenêtre qui s’ouvre par dessus le site. Ça sert à plusieurs choses, notamment afficher de la publicité, ouvrir des fenêtres d’informations additionnelles, etc.

Il y a quelque années de ça, les pop ups ouvraient dans une nouvelle fenêtre du navigateur ou dans un nouvel onglet. Aujourd’hui, c’est plus souvent dans la même fenêtre du navigateur par dessus le site.

En apprendre plus en lisant l’article d’Émilie :

2022-10-18

Pop up sur WordPress : avantages et inconvénients des fenêtres intempestives

Lire l'article

Les différentes techniques pour ajouter un pop up sur WordPress

Il existe 3 techniques pour ajouter un pop up sur votre site WordPress. Voici les avantages de chacune pour vous aider à faire un choix éclairé :

• Avec une extension WordPress
• Avec le thème de votre site WordPress
• Programmer votre propre pop up pour votre site WordPress
• Des conseils et de l’aide pour la mise en place d’un pop up sur WordPress

1- Avec une extension WordPress

Il existe énormément d’extensions qui permettent d’ajouter des pop ups à votre site, ce qui permet de gagner du temps plutôt que de les programmer sur mesure.

Voici une liste d’extensions populaires :

• Popup Maker – Popup for opt-ins, lead gen, & more
• Popup Builder – Create highly converting, mobile friendly marketing popups.
• WP Popups – WordPress Popup builder

Il en existe beaucoup d’autres dans la libraire wordpress.org ou sur des sites de revente tels Yith et CodeCanyon.

Pourquoi cette option ?
Cette option est avantageuse car elle est simple, peu coûteuse (ou gratuite) et rapide.

2- Avec le thème de votre site WordPress

Certains thèmes permettent d’ajouter des pop ups via un module inclut avec le thème sans devoir installer une extension additionnelle. C’est, entre autres, le cas avec l’élément Model du thème Avada. Divi vous permet aussi d’ajouter des pop ups, mais il faudra alors installer une extension qui ajoutera un élément dans le thème permettant de créer des pop ups. La technique varie d’un thème à l’autre.

Pourquoi cette option ?
Cette option est avantageuse parce qu’elle évite de devoir ajouter une autre extension sur votre site qui en a probablement déjà trop(!). Apprenez pourquoi c’est préférable d’avoir moins d’extensions en lisant mon article Extensions WordPress : 4 impacts d’en avoir un (trop) grand nombre ?

3- Programmer votre propre pop up pour votre site WordPress

Si vous avez des aptitudes de programmation, ce qui suit est pour vous! Il existe plusieurs manières de coder un pop up, en voici une rapidement :

Avec du CSS/jQuery vous pouvez créer un pop up. Vous pourrez créer une page avec un gabarit vide que vous appellerez via Ajax ou bien vous pouvez créer un bloc dans votre page et lui assigner une classe CSS pour la masquer à l’ouverture. Dans votre code jQuery, vous exécutez la fonction show() avec la classe CSS ce qui va faire afficher le bloc. Ajoutez un bouton de fermeture et lui ajoutez une action onclick (u clic) qui fermera avec hide() associé à la classe CSS.

Voici le code pour créer la pop up en CSS/jQeury :

<script type="text/javascript">
jQuery(document).ready(function($){
     // ferme la pop up à l'ouverture
     $("#mon-popup").hide();
             
     // ouvre la pop up au clique du lien avec la classes CSS open-popup
     $("a.open-popup").on("click",function(e){
          e.preventDefault();  
          $("#mon-popup").show();
     });

     // lien dans la pop up qui ferme la po up au clique
     $("a.close-popup").on("click",function(e){
          e.preventDefault();
          $("#mon-popup").hide();
     });


     // ouverture automatique après 5 secondes
     setTimeout(function(){
          $("#mon-popup").show();
     },5000);
});
</script>

<style>
.mon-popup{
     display: flex;
     top:0;
     bottom:0;
     left:0;
     right:0;
     align-items:center;
     justify-content:center;
     background-color:rgba(0,0,0,0.6);
     position:absolute;
     z-index:9999;
}
.mon-popup .close-popup{
     position:relative;
     left:-40px;
     top:-40px;
     text-decoration: none;
     background-color:#000000;
     color: #ffffff;
     border-radius:50%;
     width:30px;
     height:30px;
     display: flex;
     align-items: center;
     justify-content: center;
}
.mon-popup > div{
     width:300px;
     height:200px;
     padding:30px;
     background-color:#ffffff;
}
</style>

<a href="#" class="open-popup">Ouvrir la pop up</a>
<div id="mon-popup">
     <div class="mon-popup">
          <div>
               <a href="#" class="close-popup">X</a>
               <div>Mon contenu</div>
          </div>
     </div>
</div>

À vous de personnaliser le reste!

Pourquoi cette option ?
Cette option est avantageuse pour la même raison que la #2 en plus de vous donner l’opportunité d’avoir 100% contrôle sur le fonctionnement du pop up et de son design.

Des conseils et de l’aide pour la mise en place d’un pop up sur WordPress

Si vous ne savez quel technique choisir ou si vous voulez que nous nous en occupions pour vous, contactez-nous! Cela nous fera plaisir de vous aider.