💡 Comment ajouter une fenêtre popup dans WordPress

• Choisissez votre approche: le plugin Popup Maker pour un démarrage rapide ou du code sur mesure pour un contrôle total
• Installez Popup Maker via «Extensions → Ajouter» et activez-le
• Créez une nouvelle popup, définissez le contenu de l’article ou de la page, puis configurez un déclencheur (clic, minuteur ou défilement)
• Pour une solution personnalisée, ajoutez les styles CSS de la fenêtre modale dans le fichier de votre thème ou dans l’outil de personnalisation
• Mettez en file d’attente le fichier JavaScript avec wp_enqueue_script() en spécifiant une dépendance à jquery, et vérifiez l’ordre de chargement
• Ouvrez la page et testez la popup dans votre navigateur tout en surveillant la console pour détecter d’éventuelles erreurs

Ce qu’est une fenêtre modale et pourquoi votre site WordPress en a besoin

Une fenêtre modale est un bloc de contenu qui s’ouvre par-dessus la page tout en assombrissant l’arrière-plan. L’utilisateur ne quitte jamais l’URL en cours, mais voit une information complémentaire: texte d’un article, formulaire, vidéo ou galerie.

Pour un site WordPress, les fenêtres modales résolvent trois problèmes précis. Premièrement, un tableau de bord utilisateur: au lieu d’une page de profil séparée, vous affichez les paramètres, les commandes ou les messages dans un bloc popup. Deuxièmement, un aperçu rapide du contenu: un visiteur clique sur une fiche produit ou un teaser d’article et voit le contenu complet sans rechargement. Troisièmement, les formulaires de capture de leads: les formulaires d’abonnement, d’inscription et de contact apparaissent exactement au moment où le visiteur est prêt à agir.

Le principal avantage d’une fenêtre modale par rapport à une page séparée, c’est la rapidité. Il n’y a pas d’attente liée au chargement complet d’une page avec son en-tête, sa barre latérale et son pied de page. Vous chargez uniquement the_content(), le contenu pur. Cela fait gagner du temps à l’utilisateur et économise les ressources du serveur.

WP Post Popup: pourquoi le plugin vétéran a quitté la scène

Jusqu’en 2023, l’une des solutions les plus populaires pour les fenêtres modales dans WordPress était le plugin WP Post Popup (wp-post-modal). Il pouvait transformer n’importe quel article, page ou type de contenu personnalisé en popup; il suffisait de spécifier une URL avec un paramètre. Le plugin fonctionnait avec les shortcodes, Contact Form 7 et BuddyPress; il pouvait charger des pages externes et même afficher de manière sélective une div spécifique provenant d’un autre site.

En octobre 2023, le plugin a été fermé. La raison était une faille de sécurité. La page WordPress.org affiche désormais le statut «Ce plugin a été fermé… Motif: problème de sécurité». Depuis, il n’est plus disponible au téléchargement et les installations actives sont tombées à zéro.

Mais les idées derrière WP Post Popup n’ont pas disparu. La tâche consistant à afficher du contenu dans une popup sans rechargement reste tout à fait réalisable aujourd’hui, et ce par deux voies: des plugins modernes et du code pur.

3 Façons modernes d’ajouter une fenêtre modale dans WordPress

Voici les options actuelles pour 2026, des plugins prêts à l’emploi à une solution entièrement personnalisée.

Popup Maker est le plugin gratuit le plus populaire pour les popups: plus de 700 000 installations actives et une note de 4,9 sur WordPress.org. Il crée tout type de popup, des fenêtres modales avec contenu aux panneaux coulissants et bannières. Les déclencheurs incluent le clic, le minuteur, le défilement ou l’intention de sortie. Si vous avez besoin d’une solution rapide sans code, c’est le meilleur point de départ.

Bootstrap 5 est intégré dans de nombreux thèmes modernes. Son composant Modal natif fonctionne immédiatement: réactivité, animation, fermeture avec la touche Échap et clic en dehors de la fenêtre. Il suffit d’inclure Bootstrap dans votre thème et d’utiliser le balisage prêt à l’emploi avec les attributs de données.

Le code pur est la voie pour ceux qui ont besoin d’un contrôle total sur chaque pixel et chaque comportement de la fenêtre. Pas de scripts supplémentaires, pas de dépendances, pas de conflits avec d’autres plugins. C’est la méthode que nous allons détailler étape par étape.

La vidéo ci-dessus est un tutoriel pratique pour créer une fenêtre modale personnalisée dans WordPress à partir de zéro: 12 minutes de code pur avec un résultat fonctionnel à la fin.

Guide pas à pas: construire une fenêtre modale à partir de zéro

Cette méthode fonctionne sur n’importe quel site WordPress, quel que soit le thème. Nous allons écrire un framework CSS pour styliser le bloc popup, corriger une erreur JavaScript typique et ajouter un préchargeur intelligent pour que le contenu apparaisse de manière fluide, sans scintillement.

Étape 1: framework CSS pour la fenêtre modale

Le style de base accomplit trois choses: il centre la fenêtre sur l’écran, assombrit l’arrière-plan et adapte les tableaux à l’intérieur du bloc modal. Voici le code fonctionnel pour le fichier style.css de votre thème ou l’onglet «CSS additionnel» dans l’outil de personnalisation:

1
/* Modal window — basic styles */
2
.modal.show {
3
    max-width: 650px;
4
}
5
 
6
.modal.show .kk-star-ratings.bottom-right.rgt {
7
    display: none;
8
}
9
 
10
/* Tables inside the modal window */
11
.modal.show table {
12
    border-collapse: separate;
13
    max-width: 100%;
14
    overflow: auto;
15
    table-layout: fixed;
16
    border: none;
17
    width: auto;
18
}
19
 
20
.modal.show table th {
21
    background: #F8F0F8;
22
    padding: 17px 10px;
23
    vertical-align: middle;
24
    color: #7F617E;
25
    font-size: 12px;
26
    text-align: left;
27
}
28
 
29
.modal.show table th:first-child {
30
    border-radius: 5px 0 0 5px;
31
}
32
 
33
.modal.show table th:last-child {
34
    border-radius: 0 5px 5px 0;
35
}
36
 
37
.modal.show table th.th-border {
38
    border-left: 1px solid #ECE1EC;
39
}
40
 
41
.modal.show table td {
42
    color: #424242;
43
    font-size: 13px;
44
    border-bottom: 1px dashed #E5E5E5;
45
    padding: 10px 5px 5px 4px;
46
    text-align: left;
47
}
48
 
49
.modal.show table tr:last-child td {
50
    border-bottom: none;
51
    padding-bottom: 20px;
52
}
53
 
54
.modal.show table td {
55
    border-right: 1px solid #F7F7F7;
56
}
57
 
58
.modal.show table td:last-child {
59
    border-right: none;
60
}
61
 
62
.modal.show table tr:first-child td {
63
    padding-top: 20px;
64
}

Le point clé: le sélecteur .modal.show garantit que les styles ne s’appliquent que lorsque la fenêtre modale est active. À l’état réduit, le bloc n’affecte pas la mise en page. Les tableaux à l’intérieur du bloc modal bénéficient d’un traitement séparé: coins arrondis sur les en-têtes, séparateurs de lignes en pointillés et défilement adaptatif.

Étape 2: les erreurs JavaScript et comment les corriger

Le problème le plus courant lorsqu’on travaille avec des fenêtres modales dans WordPress est l’erreur Uncaught ReferenceError: wp is not defined. Elle survient lorsqu’un plugin ou un script personnalisé tente d’utiliser l’objet wp (l’API JavaScript de WordPress) avant que le cœur ne l’ait chargé.

Dans le cas de WP Post Popup, le problème se situait dans la fonction modalCustomizer(), qui récupérait les paramètres depuis l’administration via wp.customize. Voici à quoi cela ressemblait dans le code du plugin:

1
// Window load
2
$(window).on('load', function () {
3
    modalCustomizer();
4
});

La correction est simple: commentez l’appel si vous stylisez la fenêtre via votre propre CSS:

1
// Window load
2
$(window).on('load', function () {
3
    // modalCustomizer();
4
});

Une règle générale pour tout script modal dans WordPress: vérifiez toujours l’ordre de chargement des dépendances. Mettez vos scripts en file d’attente via wp_enqueue_script() avec des dépendances explicites sur jquery et wp-util. Et n’insérez jamais de <script> directement dans le corps d’un article; c’est le chemin assuré vers des erreurs comme $ is not defined et wp is not defined.

Étape 3: préchargeur intelligent avec jQuery

Le rôle du préchargeur est d’afficher un indicateur de chargement pendant que le contenu de l’article se charge via AJAX. Une fois les données arrivées, le préchargeur disparaît en fondu. Pour suivre les modifications du DOM, nous utilisons la micro-bibliothèque jquery-watch (25 lignes de code qui surveillent les changements d’attributs et de propriétés sur un élément).

CSS pour le préchargeur: un indicateur gif en arrière-plan centré dans le bloc modal:

1
/* Modal window preloader */
2
.modal-wrapper.styled .modal {
3
    min-height: 385px;
4
    background-color: white;
5
    background-size: inherit;
6
}
7
 
8
div#modal-content {
9
    background-color: white;
10
}
11
 
12
.modal-wrapper.styled .modal {
13
    background: white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll;
14
}
15
 
16
#single-post-meta-manager {
17
    opacity: 0;
18
}
19
 
20
div.modal-content-post-wrapped.load {
21
    opacity: 1;
22
}

Comment cela fonctionne: initialement, le contenu est masqué (opacity: 0) et le préchargeur d’arrière-plan est visible. Lorsque les données sont chargées, jQuery ajoute la classe .load, le contenu apparaît en fondu et le préchargeur disparaît. Voici le code JS:

1
jQuery(document).ready(function($) {
2
 
3
    // Smooth appearance of content in the modal window
4
    $("div#single-post-meta-manager").animate({ 'opacity': '1' }).fadeIn('slow');
5
 
6
    // Add class-informer "content loaded"
7
    $("div.modal-content-post-wrapped").addClass("load");
8
 
9
    // Track modal window changes via jquery-watch
10
    $(".modal-wrapper").watch({
11
        properties: "top,left,opacity,display,attr_class",
12
        watchChildren: true,
13
        callback: function (data, i) {
14
            // Set preloader as background image
15
            $('.modal-wrapper.styled .modal').css(
16
                'background',
17
                'white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll'
18
            );
19
            // If content is loaded — remove preloader
20
            if ($('.modal-content-post-wrapped').is('.load')) {
21
                $('.modal.show').css('background', 'white');
22
            }
23
        }
24
    });
25
 
26
});

Avertissement important. Le code ci-dessus utilise jQuery et le plugin jquery-watch. Avant de l’insérer, assurez-vous que jQuery est mis en file d’attente et se charge avant votre script. Sur les sites WordPress modernes, jQuery est livré avec le cœur, donc aucune inclusion supplémentaire n’est nécessaire. Ajoutez le script via wp_enqueue_script() dans functions.php, pas directement dans le corps de l’article.

Que faire si la fenêtre modale ne se charge pas

En plus de 6 ans de travail avec les modales WordPress, j’ai compilé une liste de causes typiques, des plus évidentes aux plus obscures. Voici une checklist de diagnostic:

• jQuery n’est pas chargé ou est en conflit. Vérifiez la console du navigateur (F12 → Console). L’erreur $ is not defined signifie que jQuery n’est pas mis en file d’attente ou que votre script s’est exécuté trop tôt. Solution: wp_enqueue_script('my-modal', ..., array('jquery')).
• Le template de page n’affiche pas the_content(). Certains templates personnalisés comme page-modal.php utilisent get_the_content() au lieu de the_content(). Le premier n’applique pas les filtres, donc les shortcodes et la mise en forme sont cassés.
• Conflit avec les plugins de cache. Si vous chargez du contenu AJAX et que le site utilise WP Rocket ou LiteSpeed Cache, désactivez la mise en cache pour les URL que la fenêtre modale récupère.
• Erreur CORS lors du chargement d’une page externe. Le navigateur bloque les requêtes vers un domaine différent. Cela se résout en passant par un proxy via l’API REST de WordPress ou en configurant les en-têtes CORS sur le serveur cible.
• Point de rupture. Sur les appareils mobiles, la fenêtre modale est souvent remplacée par un lien direct afin que l’utilisateur navigue simplement vers la page. Vérifiez les règles @media dans votre CSS: en dessous de 768px, la fenêtre peut ne pas apparaître intentionnellement.

⁉️🤔 Foire aux questions

Plugin ou code pur: que dois-je choisir pour une fenêtre modale?

Si vous avez besoin d’une solution prête en 5 minutes, installez Popup Maker. Il couvre la plupart des scénarios typiques: formulaires d’abonnement, aperçus rapides, notifications. Si vous avez un design non standard, une logique AJAX complexe ou des exigences de performance (pas un seul kilo-octet supplémentaire), codez-la vous-même. Le code pur donne un contrôle total au prix de plusieurs heures de développement. Popup Maker ajoute environ 40 à 60 Ko de scripts et de styles à une page. Une solution personnalisée tient en 2 à 5 Ko, soit une différence d’un facteur 10 à 30. Pour un site à fort trafic, c’est significatif.

Puis-je ouvrir une page externe dans une fenêtre popup?

Oui, mais avec des limitations. WordPress ne proxyfie pas le contenu tiers par défaut. Si le site cible n’envoie pas l’en-tête CORS Access-Control-Allow-Origin: *, le navigateur bloquera la requête AJAX. La solution de contournement consiste à écrire votre propre proxy côté serveur en utilisant wp_remote_get() ou à configurer un point de terminaison d’API REST qui récupère le contenu et le délivre à votre frontend. Pour les API publiques et les sources de confiance, CORS est généralement déjà configuré. L’API GitHub et l’API WordPress.org sont ouvertes en lecture depuis n’importe quel domaine.

Quel est l’impact de l’utilisation de fenêtres modales sur le SEO?

Le contenu à l’intérieur d’une fenêtre modale chargée via AJAX est moins visible pour les moteurs de recherche que le HTML statique d’une page dédiée. La règle est simple: si le contenu est important pour le classement, il doit avoir sa propre page canonique avec une URL directe. Utilisez la fenêtre modale comme un point d’entrée supplémentaire, pas comme un remplacement de page. Googlebot exécute JavaScript depuis 2019, mais l’indexation du contenu chargé dynamiquement reste instable. Il est plus prudent de jouer la sécurité et d’avoir une version statique.

Pourquoi WP Post Popup a-t-il été fermé et par quoi le remplacer?

Le plugin wp-post-modal a été fermé en octobre 2023 en raison d’une faille de sécurité non résolue. S’il est encore installé sur votre site, supprimez-le immédiatement. Comme alternatives, envisagez Popup Maker (gratuit, universel) ou la solution personnalisée décrite dans cet article. Les deux options sont sécurisées et maintenues en 2026.

jQuery est-il obligatoire pour une fenêtre modale dans WordPress?

Non, ce n’est pas obligatoire. Le JavaScript natif moderne (ES6+) couvre toutes les opérations nécessaires: fetch() pour AJAX, classList pour basculer les classes CSS et addEventListener pour gérer les clics. Cependant, jQuery est encore profondément intégré au cœur de WordPress et à la plupart des thèmes, il est donc plus simple d’utiliser ce qui est déjà chargé que d’inclure un framework supplémentaire.

Les fenêtres modales en 2026: quoi installer et comment construire

Si vous êtes arrivé jusqu’à cette section, vous avez trois voies toutes tracées. Popup Maker est pour ceux qui ont besoin d’une solution «installez et oubliez». 700 000 installations actives ne mentent pas: le plugin est stable, flexible et gratuit dans sa version de base. Bootstrap 5 Modal: si votre thème fonctionne déjà sur Bootstrap, utilisez le composant natif et ne créez pas de dépendances supplémentaires. Le code pur est pour les perfectionnistes et tous ceux qui veulent contrôler chaque ligne.

Personnellement, en 2026, je choisis la deuxième ou la troisième voie. Les plugins de fenêtres modales résolvent le problème ici et maintenant, mais le code personnalisé le résout pour toujours, sans mises à jour, sans vulnérabilités et sans conflits. Et 2 à 5 Ko au lieu de 40 à 60 Ko par page, c’est un argument difficile à ignorer.

Testez les deux approches sur un sous-domaine de test et comparez. WordPress a survécu 20 ans précisément parce qu’il offre la liberté de choix, du zéro code à un plugin prêt à l’emploi en une minute.