Mini PopUp, un plugin wordpress pour afficher une fenêtre modale facilement
On peut être pour ou contre les popups, en utiliser peut être utile. Vous pouvez les utiliser pour promouvoir votre dernier produit à peine sorti, une newsletter ou votre page de réseau social (facebook, twitter etc…).
Les popups ont mauvaise réputation puisqu’ils s’ouvrent souvent dans une nouvelle fenêtre du navigateur et qu’ils ne sont pas ciblés. Le plugin que je vous propose, ouvre une simple fenêtre modale en JS avec un délai réglable entre 2 visionnages pour les visiteurs (cookie).
Et le tout simplement et gratuitement.
J’avais tout d’abord tester: Popup to Share mais il y avait un problème de compatibilité avec mon thème. J’ai cherché 5 mins mais n’ayant pas trouvé le problème, je me suis orienté vers Mini PopUp qui est vraiment simple à paramétrer et si besoin, à modifier.
Comment faire pour créer un popup dans Mini PopUp?
Après avoir activer le plugin, allez dans réglages et sélectionnez Mini PopUp. Vous obtiendrez cette page normalement:
Vous n’avez plus qu’à indiquer le lien de votre page facebook et choisir le nombre de jours où le cookie sera sauvegardé chez le client.
Note: vous ne pouvez pas insérer 0 dans le champ mais vous pouvez rentrer une valeur comme: 0.00000000001 qui aura le même résultat.
Deux solutions, soit mettre votre page facebook était votre seul but et l’article s’arrête là pour vous avec ce résultat:
Soit vous voulez rajouter d’autres infos et c’est parti.
Modifier Mini PopUp
Pour modifier Mini PopUp, ça se passe dans ce fichier: minipopup.php.
Cherchez le et si vous voulez supprimer la fanbox, vous pouvez transformer ceci:
<iframe src="//www.facebook.com/plugins/likebox.php?href=<?php echo esc_url(get_option('c1_minipopup')); ?>&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false&appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;margin-left: 8px;" allowTransparency="true"></iframe>
en:
<!--<iframe src="//www.facebook.com/plugins/likebox.php?href=<?php echo esc_url(get_option('c1_minipopup')); ?>&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false&appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;margin-left: 8px;" allowTransparency="true"></iframe>-->
Vous avez désormais la fenêtre complètement vide.
Vous pouvez soit supprimer la fanbox (cette fois sans la mettre en commentaire) soit vous souhaitez rajouter d’autres infos.
Si vous remplacez la fanbox par du texte perso, faites attention à bien écrire dans:
<div id="fanbox"> </div>
Si vous souhaitez rajouter d’autres infos en plus de la fanbox, votre code pourrait ressembler à ça:
<iframe src="//www.facebook.com/plugins/likebox.php?href=<?php echo esc_url(get_option('c1_minipopup')); ?>&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false&appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;margin-left: 8px;" allowTransparency="true"></iframe>
je vends un produit<br />un second<br />un troisième etc...
Bon du coup ça dépasse du cadre. Sortez votre firebug et on corrige ça.
Pour ça il faut modifier le style.css dans le dossier css (toujours du plugin).
Modifions la hauteur du cadre:
#fanbox{
height: 270px;
}
en
#fanbox{
height: 332px;
}
Me parait pas mal pour l’exemple proposé.
Si le line-height vous saoule:
#footer #copyright{
line-height: 200%;
}
Supprimez le ou changez le 😉
Et enfin si vous voulez supprimer le fond noir, ça passe par ici:
#fanback{
background: url("../images/bg.png") repeat scroll 0 0 transparent;
}
Soit vous supprimez la ligne, soit vous importez une autre image.
Je pense avoir tout dit, bon dev 😉
) :
8 réflexions au sujet de « Mini PopUp, un plugin wordpress pour afficher une fenêtre modale facilement »
Temps approximatif pour la lecture des commentaires : 6 mins-
jeje Le 17 septembre 2013 à 9 h 41 min
|
-
john Le 17 septembre 2013 à 19 h 26 min
|
-
jeje Le 18 septembre 2013 à 7 h 42 min
|
-
john Le 18 septembre 2013 à 17 h 42 min
|
-
Alain Le 22 décembre 2013 à 13 h 00 min
|
-
Alain Le 22 décembre 2013 à 14 h 23 min
|
-
john Le 22 décembre 2013 à 15 h 06 min
|
-
Alain Le 22 décembre 2013 à 16 h 43 min
|
Bonjour,
Merci pour ce tuto. Je voudrais modifier l’apparition de la fenetre sur autre page que la page d’accueil. Auriez vous une solution svp?
Merci
Bonsoir,
Je propose d’utiliser la fonction is_home() et modifier le contenu de la fenêtre (ou autre).
Quelque chose comme:
if(is_home()) // traitement home
else //autre traitement
Est-ce que vous comprenez le raisonnement ou avez-vous besoin de plus de précisions?
Bonjour,
Oula… je suis pas du tout programmeur… je comprends quelques fonctions mais faut m’expliquer longtemps…lol
dans la page: minipopup.php?
Bonsoir,
En effet dans la page minipopup.php, modifiez la fonction (enfin remplacez) minipopup_add_box() comme ceci:
function minipopup_add_box() { ?> <div id="fanback"> <div id="fan-exit"></div> <div id="fanbox"> <div id="fanclose"></div> <div class="remove-borda"></div> <?php if(is_home()) { echo "Message page d'accueil"; } else { echo "Message hors accueil"; } echo ' </div> </div>'; }Je n’ai pas pu tester mais ça devrait fonctionner. Tenez-moi au courant.
Bonjour
Cà fait longtemps que je cherche une fenêtre modale comme celle là pour FaceBook, mais à chaque fois, il y a un truc qui fait que çà ne fonctionne pas…
Idem pour Mini Popup : il m’affiche une fenêtre blanche avec rien dedans.
J’utilise WP 3.7.1 avec le thème Graphène et j’ai bien une page FaceBook.
Auriez-vous une idée SVP ?
Pour exemple de site sur lequel çà existe, il y a celui là : geekpress.fr. En plus il ouvre en bas à droite un petit popup de temps en temps. J’ai déjà demandé au webmaster comment il faisait çà, mais il ne répond pas…
Cordialement,
Alain
Re-bonjour
Problème résolu, çà fonctionne !
Erreur de frappe dans l’adresse de ma page FaceBook !
Alain
Bonjour,
Je me disais bien. Mini Popup est le plugin le plus simple que j’avais trouvé (et qui a marché du premier coup).
Content que ce soit résolu 😉
Bonnes fêtes de fin d’année
Oui, tout marche nickel !
D’ailleurs, pour vérifier, vous pouvez cliquez dessus !
Bonnes fêtes à vous également !
Cordialement
Alain