fbpx
/ Accueil / English
3 techniques pour ajouter un pop up sur WordPress

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 :

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é :

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 :

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.

Auteur de l'article

Vincent Gaudreau

Programmeur Web
Son intérêt marqué pour l’informatique et les nouvelles technologies s’est déclaré très tôt chez Vincent. Dès sa jeune adolescence, en fait, et ce grâce à un grand frère qui étudiait l’infographie. C’est ainsi qu’il découvre l’objet de ses futures aspirations : un ordinateur. La curiosité bien aiguisée, il s’est empressé de partir à la découverte de diverses branches connexes, toutes ayant forgé le programmeur Web qu’il est devenu, diplômé depuis 2004 de l’Institut Supérieur en Informatique.

À découvrir sur notre blogue

2018-06-14

Est-ce que le Règlement général sur la protection des données (RGPD) me concerne ?

Davyd Quintal / Directeur des solutions novatrices

Aussi appelée « General Data Protection Regulation » (GDPR), le RGPD est une nouvelle réglementation qui a pris effet dans l’Union européenne le 25 mai 2018.

Lire la suite
2018-08-14

Guide WooCommerce : votre boutique en ligne rapidement et sans douleur

David Barbier / Shaman programmeur

Les options offertes pour la réalisation d’un site de commerce en ligne sont nombreuses et il peut être difficile de bien s’y retrouver. Si vous avez un site sur la plateforme Wordpress, nous vous proposons ici une introduction à WooCommerce; une solution e-commerce clé en main très complète.

Lire la suite
2020-08-03

Comment configurer le reCAPTCHA version 3 de Google sur un site WordPress ?

Josué Wilsi / Programmeur Web

Le but principal d’utiliser un reCAPTCHA est de protéger votre site WordPress contre le spam, les spammeurs et les hackers.

Lire la suite
2022-11-29

Thème WordPress sur mesure : 7 avantages et 4 inconvénients

Marie-Michel Tremblay / Intégratrice Web, Graphiste

Pour créer un thème WordPress sur mesure, il faut faudra des connaissances aiguisées en HTML, CSS, PHP et des techniques du Web.

Lire la suite

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site est protégé par reCAPTCHA et le GooglePolitique de confidentialité etConditions d'utilisation appliquer.