Modale simple par shortcode

Extension WordPress légère créée par Qwen permettant d’afficher des fenêtres modales (popups) via des shortcodes simples. Aucune dépendance externe, pas de jQuery, juste du code pur pour des performances optimales.

Installation

Copiez le dossier modale-shortcode dans /wp-content/plugins/
Activez l’extension depuis l’administration WordPress > Extensions
Utilisez les shortcodes dans vos pages, articles ou widgets

Utilisation des shortcodes

Shortcode – Bouton déclencheur

[modal_btn]
Ce shortcode crée un bouton cliquable qui ouvre la modale correspondante.

Syntaxe :

[modal_btn id="ID_UNIQUE"]Texte du bouton[/modal_btn]

Attributs disponibles :

id (obligatoire) : identifiant unique de la modale à ouvrir
class (optionnel) : classes CSS supplémentaires pour styliser le bouton
style (optionnel) : style prédéfini (ex: `default`, `minimal`, `rouge`, `vert`). Par défaut : `default`.

Exemples

[modal_btn id="contact"]Nous contacter[/modal_btn]
[modal_btn id="promo" class="btn-principal"]Voir l'offre spéciale[/modal_btn]

Shortcode `[modal]` – Contenu de la modale

Ce shortcode définit le contenu de la fenêtre modale qui s’affichera.

Syntaxe

[modal id="ID_UNIQUE" titre="Titre optionnel"]
Contenu de la modale ici
[/modal]

Attributs disponibles

id (obligatoire) : Doit correspondre exactement à l’ID du bouton déclencheur
titre (optionnel) : titre affiché en haut de la modale
style (optionnel) : style prédéfini de la fenêtre (ex: `default`, `minimal`, `rouge`, `sombre`). Par défaut : `default`.

Exemples

[modal id="contact" titre="Formulaire de contact"]
<p>Remplissez le formulaire ci-dessous :</p>
[contact-form-7 id="123"]
[/modal]

[modal id="promo"]
<h2>Offre spéciale !</h2>
<p>Profitez de -20% sur tous nos produits jusqu'à dimanche.</p>
<a href="/boutique" class="btn">Voir la boutique</a>
[/modal]

Important : correspondance des ID

L’attribut id doit être identique dans le bouton et dans la modale :

[modal_btn id="ma-modale"]Ouvrir[/modal_btn]
[modal id="ma-modale"]
Contenu de la modale
[/modal]

Vous pouvez avoir plusieurs modales sur une même page, chacune avec son ID unique.

Styles prédéfinis

L’extension inclut plusieurs styles prêts à l’emploi. Il suffit d’ajouter style="nom_du_style" au shortcode.

Pour les boutons (`[modal_btn]`)

style="default" : bouton bleu standard (WordPress).
style="rouge" : bouton rouge vif (idéal pour les alertes ou actions urgentes).
style="vert" : bouton vert (idéal pour les validations ou succès).
style="minimal" : bouton avec fond transparent et bordure fine (idéal pour un design épuré).

Pour les fenêtres modales (
×
)

style="default" : Modale blanche avec ombre portée et coins arrondis.
style="rouge" : Modale avec une bordure supérieure rouge et un titre assorti.
style="minimal" : Modale sans ombre, avec une fine bordure grise et un fond d’écran moins sombre.
style="sombre" : Modale avec un fond bleu nuit et du texte clair (idéal pour les sites en mode sombre).

Exemple d’utilisation combinée

[modal_btn id="offre" style="rouge"]Profiter de l'offre[/modal_btn]
[modal id="offre" style="rouge" titre="Offre Limitée !"]
<p>Cette offre expire dans 24 heures.</p>
[/modal]

Personnalisation des styles

Tous les styles CSS sont définis dans le fichier modale-shortcode.php (fonction msps_modal_assets). Voici les classes principales que vous pouvez modifier :

Structure HTML générée

<!-- Bouton déclencheur -->
<a href="#" class="msps-modal-trigger" data-modal-id="ID">Texte</a>
<!-- Modale -->
<div id="ID" class="msps-modal">
    <div class="msps-modal-content">
        <span class="msps-modal-close">&times;</span>
        <h2 class="msps-modal-title">Titre</h2>
        <div class="msps-modal-body">Contenu</div>
    </div>
</div>

Classes CSS modifiables

.msps-modal - Overlay de fond
.msps-modal {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6); /* Fond semi-transparent */
    backdrop-filter: blur(3px); /* Effet de flou */
}

Modifications courantes

background-color: rgba(0,0,0,0.8) : Fond plus sombre
backdrop-filter: blur(0) : Supprimer l’effet de flou
z-index: 100000 : Ajuster la superposition si conflit avec d’autres éléments

.msps-modal-content – Conteneur principal

.msps-modal-content {
    background-color: #fff; /* Fond blanc */
    padding: 30px; /* Espacement intérieur */
    width: 90%;
    max-width: 600px; /* Largeur maximale */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Ombre */
}

Modifications courantes

max-width: 800px : Modale plus large
border-radius: 0 : Coins carrés
padding: 20px : Moins d’espace intérieur
background-color: #f5f5f5 : Fond gris clair

.msps-modal-close – Bouton de fermeture (croix)

.msps-modal-close {
    color: #999; /* Couleur grise */
    font-size: 28px;
    position: absolute;
    top: 15px; right: 20px;
}
.msps-modal-close:hover {
    color: #000; /* Noir au survol */
}

Modifications courantes :

color: #ff0000 : Croix rouge
font-size: 24px : Croix plus petite
top: 10px; right: 15px : Repositionner

.msps-modal-title – Titre de la modale

.msps-modal-title {
    margin-top: 0;
    color: #333; /* Couleur du texte */
}

Modifications courantes

color: #0073aa : Titre en bleu
font-size: 28px : Titre plus grand
text-align: center : Centrer le titre

.msps-modal-trigger – Bouton déclencheur

.msps-modal-trigger {
display: inline-block;
padding: 10px 20px;
background-color: #0073aa; /* Bleu WordPress */
color: #fff; /* Texte blanc */
border-radius: 5px;
font-weight: bold;
text-decoration: none;
}
.msps-modal-trigger:hover {
background-color: #005177; /* Bleu foncé au survol */
}

Modifications courantes :

background-color: #ff6600 : Bouton orange
border-radius: 25px : Bouton arrondi (pill shape)
padding: 15px 30px : Bouton plus grand
Utiliser la classe class du shortcode pour créer plusieurs styles de boutons

Animation d’apparition

@keyframes msps-fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

Pour modifier l’animation :

translateY(-20px) → translateY(0) : La modale glisse du haut vers le bas
translateY(0) → scale(0.9) : La modale apparaît en grossissant
Supprimer l’animation : Retirer animation: msps-fadeIn 0.3s ease-out; de .msps-modal-content

Personnalisation via CSS externe

Vous pouvez surcharger les styles sans modifier le fichier de l’extension. Ajoutez ce code dans Apparence > Personnaliser > CSS additionnel :

/* Exemple : Modale avec thème sombre */
.msps-modal-content {
    background-color: #2c3e50;
    color: #ecf0f1;
}
.msps-modal-title {
    color: #ecf0f1;
}
.msps-modal-close {
    color: #95a5a6;
}
.msps-modal-close:hover {
    color: #fff;
}
/* Exemple : Bouton déclencheur rouge */
.msps-modal-trigger {
    background-color: #e74c3c;
}
.msps-modal-trigger:hover {
    background-color: #c0392b;
}

Fonctionnalités

✅ Ouverture/fermeture avec le bouton ou la croix
✅ Fermeture en cliquant en dehors de la modale
✅ Fermeture avec la touche Échap (à ajouter si nécessaire)
✅ Animation fluide d’apparition
✅ Responsive (s’adapte aux mobiles)
✅ Accessible (navigation au clavier possible)
✅ Compatible avec tous les navigateurs modernes
✅ Zéro dépendance (pas de jQuery)
✅ Léger (< 5 Ko)

Exemples d’utilisation avancés

Modale avec formulaire Contact Form 7

[modal_btn id="contact-rapide"]Contactez-nous[/modal_btn]
[modal id="contact-rapide" titre="Demande de devis"]
<p>Remplissez ce formulaire et nous vous répondrons sous 24h.</p>
[contact-form-7 id="456" title="Devis rapide"]
[/modal]

Modale avec vidéo YouTube

[modal_btn id="video-demo"]Voir la démo[/modal_btn]
[modal id="video-demo" titre="Démonstration produit"]
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen>
</iframe>
[/modal]

Plusieurs boutons pour la même modale

[modal_btn id="promo"]Bouton 1[/modal_btn]
[modal_btn id="promo"]Bouton 2[/modal_btn]
[modal_btn id="promo"]Bouton 3[/modal_btn]

[modal id="promo"]
Contenu unique affiché par les trois boutons
[/modal]

Dépannage

La modale ne s’ouvre pas

Vérifiez que les ID correspondent exactement (respectez la casse)
Désactivez temporairement les autres extensions pour identifier un conflit
Vérifiez la console du navigateur (F12) pour voir les erreurs JavaScript

Le style est cassé

Votre thème a peut-être des styles qui entrent en conflit
Utilisez le sélecteur CSS externe pour forcer vos styles
Vérifiez le z-index de .msps-modal (augmentez-le si nécessaire)

La modale apparaît en double

Vous avez probablement placé le shortcode
×
plusieurs fois sur la page
Chaque modale doit avoir un ID unique

Support

Pour toute question ou suggestion, contactez le développeur ou consultez la documentation WordPress sur les shortcodes : https://developer.wordpress.org/plugins/shortcodes/

Licence

GPL v2 ou ultérieure – Libre d’utilisation et de modification.

Installation

Utilisation des shortcodes

Shortcode – Bouton déclencheur

Syntaxe :

Attributs disponibles :

Exemples

Shortcode [modal] – Contenu de la modale

Syntaxe

Attributs disponibles

Exemples

Important : correspondance des ID

Styles prédéfinis

Pour les boutons ([modal_btn])

Pour les fenêtres modales (×)

Exemple d’utilisation combinée

Personnalisation des styles

Structure HTML générée

Classes CSS modifiables

Modifications courantes

.msps-modal-content – Conteneur principal

Modifications courantes

.msps-modal-close – Bouton de fermeture (croix)

Modifications courantes :

.msps-modal-title – Titre de la modale

Modifications courantes

.msps-modal-trigger – Bouton déclencheur

Modifications courantes :

Animation d’apparition

Pour modifier l’animation :

Personnalisation via CSS externe

Fonctionnalités

Exemples d’utilisation avancés

Modale avec formulaire Contact Form 7

Modale avec vidéo YouTube

Plusieurs boutons pour la même modale

Dépannage

La modale ne s’ouvre pas

Le style est cassé

La modale apparaît en double

Support

Licence

Shortcode `[modal]` – Contenu de la modale

Pour les boutons (`[modal_btn]`)

Pour les fenêtres modales (
×
)