Chaque fois qu’il s’agit de développer des solutions pour les clients, il y aura des moments où vous serez probablement chargé d’afficher des informations dans les boîtes de dialogue modales de WordPress.
Il existe de nombreuses solutions disponibles pour ce faire et plus vous êtes familiarisé avec JavaScript, les différentes bibliothèques et les bibliothèques dont elles disposent, plus il est difficile (ou peut-être même plus facile) de choisir laquelle utiliser.
Mais WordPress a une infrastructure intégrée qui rend simple l’intégration de fonctionnalités dans WordPress. Donc, dans trois articles à venir, je couvrirai les points suivants :
- Comment incorporer des boîtes de dialogue modales WordPress à l’aide de bibliothèques intégrées,
- Remplir les dialogues modaux avec des données,
- Remplir la boîte de dialogue modale avec des données dynamiques via Ajax.
En raison de la nature de la série, les publications ne seront pas consécutives, mais elles utiliseront toutes une balise unique que vous pourrez utiliser pour ajouter un signet et faire référence à une série une fois les publications terminées.
Cela dit, parlons de l’intégration facile des boîtes de dialogue modales WordPress avec des bibliothèques intégrées.
Dialogues modaux WordPress, partie 1
Pour commencer, je suppose que vous avez mis en place les bases d’une page d’administration.
Sur les pages de plugins
Autrement dit, vous avez tout ce dont vous avez besoin pour obtenir une configuration de plugin, activée, puis une page affichée via un menu ou un sous-menu.
Si ce n’est pas le cas, consultez cet article pour savoir comment commencer.
Une fois que vous avez fait cela, vous aurez besoin de l’infrastructure de base pour une page de plugin. Cette page peut être utilisée pour afficher simplement des informations ou elle peut être utilisée à la fois pour afficher des informations et donner à l’utilisateur la possibilité d’enregistrer des options.
Pour ce tutoriel, je ne suis pas particulièrement intéressé à donner à l’utilisateur la possibilité d’enregistrer des options. Au lieu de cela, nous devons créer une ancre qui affichera une boîte de dialogue modale à chaque clic.
Et les données qu’il contiendra seront couvertes dans un tutoriel ultérieur.
Un exemple de page de plugin
À ce stade, je suppose que vous avez une page de plugin. Une structure de base pour cela peut ressembler à ceci :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
?>
<div id="acme-thickbox-demo" class="wrap">
<!-- TODO -->
</div><!-- #acme-thickbox-demo -->A partir de là, deux choses sont nécessaires :
- incorporant la bibliothèque Thickbox
- ajouter une ancre et un conteneur qui affichera une boîte de dialogue modale
Pour intégrer la bibliothèque Thickbox dans votre page de plugin, ajoutez simplement cette balise. Si vous suivez des normes de codage, votre page a probablement un docblock en haut de la page. C’est là que j’ajoute normalement le code.
La fonction add_thickbox est celle fournie par WordPress qui fait ce qui suit :
Met en file d’attente les js et css ThickBox par défaut.
Un peu vague, non? Techniquement, la description plus longue est :
ThickBox est un widget de dialogue d’interface utilisateur de page Web écrit en JavaScript au-dessus de la bibliothèque jQuery. Sa fonction est d’afficher une seule image, plusieurs images, du contenu en ligne, du contenu iframe ou du contenu diffusé via AJAX dans un mode hybride.
Et si vous êtes intéressé par la bibliothèque Thickbox seule, vous pouvez la voir sur cette page.
Quoi qu’il en soit, retour à la page. Maintenant que je l’ajoute à ma page de plugin en utilisant la fonction API de WordPress, ma page ressemble à ceci :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<!-- TODO -->
</div><!-- #acme-thickbox-demo -->Ensuite, la création de l’ancre et de l’élément d’affichage des données va de pair, notamment parce que l’ancre a besoin de l’ID de l’élément qui servira de dialogue modal.
L’ancre a besoin des informations suivantes :
- l’ID de l’élément qui affichera le modal,
- les dimensions dudit dialogue modal
Pour cet exemple, je vais configurer une boîte de dialogue qui s’affiche à 800 × 600 pixels et elle aura l’ID de acme-modal-dialog.
Note: N’oubliez pas que c’est une bonne idée de préfixer vos éléments avec quelque chose lié au nom de votre plugin, afin qu’aucun conflit ne se produise.
Je vais donc créer une ancre qui ressemble à ceci :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="#">Display The Dialog</a>
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->Et puis je vais créer un élément comme celui -ci :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" class="thickbox">Display The Dialog</a>
<div id="acme-modal-dialog" style="display:none;"></div><!-- #acme-modal-dialog -->
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->Et le code ci-dessus est à quoi ressemblera également la version finale de la page du plugin. Lorsque vous cliquez sur l’ancre, une boîte de dialogue vide doit apparaître avec les dimensions spécifiées (c’est-à-dire 800 × 600 pixels).
Bien sûr, il sera vide en ce sens qu’il n’affichera aucune donnée.
Affichage des données
Dans le prochain article de la série, j’expliquerai comment afficher les données dans le contexte de la boîte de dialogue.
C’est facile, mais c’est un bon point de départ si vous cherchez à commencer à incorporer des données dynamiques via l’API REST ou Ajax. Mais je couvrirai cela avant la fin de ceci.