Intégrer la boîte de dialogue modale à l’aide de ThickBox intégré dans WordPress

Les boîtes de dialogue modales doivent parfois nécessairement s’intégrer à un site Web WordPress. En utilisant la boîte de dialogue modale, nous pouvons afficher le contenu en haut de la page actuelle.

En ce qui concerne les fenêtres contextuelles modales, les gens préfèrent normalement utiliser la bibliothèque Lightbox ou Fancybox. Ce sont les bibliothèques populaires et elles fonctionnent plutôt bien.

Pour inclure ces bibliothèques dans WordPress, nous devons télécharger les fichiers JS et CSS d’une bibliothèque et l’inclure dans le projet via la méthode standard. Après cela, conformément à la documentation de la bibliothèque, nous devons envelopper le contenu, appeler la méthode pour ouvrir la fenêtre modale.

WordPress a inclus le plugin ThickBox jQuery avec une version modifiée dans son noyau. Et il peut être utilisé à la place de bibliothèques externes. En utilisant cette fonctionnalité de base, nous obtenons l’interface qui est la même que les popups modaux dans l’administration WordPress comme sur le bouton multimédia.

Vous pouvez essayer cette fonctionnalité intégrée. S’il répond à vos besoins, il vous fait gagner un temps d’intégration de bibliothèque externe.

En utilisant ThickBox avec du contenu en ligne, vous obtiendrez une sortie semblable à celle illustrée dans la capture d’écran ci-dessous.

Boîte de dialogue modale utilisant ThickBox

WordPress ThickBox fonctionne bien avec le contenu en ligne. On peut également utiliser le shortcode dans la boîte de dialogue modale. À titre d’exemple, vous pouvez afficher le formulaire de contact dans la fenêtre modale en utilisant le shortcode du formulaire de contact 7.

Cela dit, voyons comment utiliser ThickBox dans WordPress.

Par exemple, nous affichons un contenu en ligne factice sur le clic de la balise d’ancrage. Alors, placez le code ci-dessous là où vous souhaitez utiliser le ThickBox.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>
 
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

Pour utiliser la Thichbox, nous devons inclure la première add_ThickBox()méthode. Cette fonction charge la bibliothèque depuis le noyau. Ensuite, sur l’attribut href de la balise d’ancrage, nous devons transmettre #TB_inline avec la largeur, la hauteur et l’identifiant d’un conteneur dans lequel notre contenu en ligne est enveloppé.

De la même manière si vous devez afficher le formulaire de contact dans la boîte de dialogue modale, alors au lieu d’un contenu factice, vous devez placer un shortcode à l’aide de la do_shortcode()fonction de WordPress.

<?php echo do_shortcode('[shortcode_here]'); ?>

C’est ça! Nous espérons que vous comprendrez comment ajouter une boîte de dialogue modale à l’aide de ThickBox dans WordPress. Nous aimerions entendre vos pensées dans le commentaire ci-dessous.

Vous pouvez également lire nos articles Rediriger vers la page de remerciement après la soumission du formulaire de contact 7 et Comment enregistrer les soumissions du formulaire de contact 7 dans la base de données WordPress