Ajout de dialogues modaux WordPress (à l’aide de données statiques)

Dans le post précédent, j’ai parcouru le processus requis pour que les boîtes de dialogue modales WordPress apparaissent dans le contexte de la zone d’administration.

Cela utilise :

• l’API WordPress intégrée,
• la bibliothèque Thickbox fournie,
• et un exemple de code pour l’afficher.

Dans ce didacticiel, je vais parcourir le remplissage de la boîte de dialogue modale avec des données. Après cela, je partagerai comment remplir dynamiquement les données à l’aide d’Ajax.

Dialogues modaux WordPress : données statiques

Pour cet article, je suppose que vous avez lu l’article initial de la série et que vous comprenez ce que fait le code (bien que ce soit encore mieux si vous avez du code fonctionnel sur votre environnement de développement local).

Quoi qu’il en soit, parlons de remplir la méta-boîte avec des informations. C’est-à-dire que nous allons regarder :

1. mettre des informations dans le corps de la meta box,
2. remplissant le titre avec du contenu.

Une fois que nous aurons fait cela, nous passerons à la récupération des informations du serveur de manière asynchrone, puis au remplissage du code que nous avons jusqu’à présent.

1 Définir les données

Ajouter du contenu à la méta-boîte est vraiment facile. Rappel du post précédent ; nous avons un élément HTML qui a un display: none ; valeur pour son attribut de style .

Voici l’essentiel original :

<?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 -->

L’ajout de contenu à la boîte de dialogue modale est facile. Localisez simplement l’élément acme-modal-dialog, puis remplissez-le avec les informations que vous souhaitez afficher à l’utilisateur.

Par exemple, voir cet exemple de code :

<div id="acme-modal-dialog" style="display:none;">
  <h2>Hello World</h2>
  <p>Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.</p>
  <p>Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.</p>
  <p>Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.</p>
  <p>
    <ul>
      <li>Bajic asajj boba raymus dug piell moddell jax darth.</li>
      <li>Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.</li>
    </ul>
  </p>
  <p>
    Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.
    Ben dodonna askajian teevan palpatine lobot beru.
  </p>
</div><!-- #acme-modal-dialog -->

Lorsque l’utilisateur clique sur l’ancre dans le post précédent (celui qui lit Display The Dialog ), alors le modal sera affiché avec le contenu que vous voyez ci-dessus.

D’une manière générale, cela devrait ressembler à ce que vous voyez ci-dessus en fonction du code décrit dans l’essentiel.

2 Définition d’un titre

Ensuite, notez que la boîte de dialogue modale inclut une option pour la fermer lorsque l’utilisateur a fini de la lire. En plus d’offrir cette capacité, notez que la zone de la boîte de dialogue a beaucoup d’espace blanc.

Vous savez ce que je veux dire: c’est une zone qui est généralement reléguée à être utilisée comme barre de titre. Grâce à l’API Thickbox et à son intégration avec WordPress, nous pouvons facilement lui ajouter notre titre. Il peut être dynamique (comme si l’information devait venir via Ajax) ou il peut être statique.

Et puisque nous travaillons avec des informations statiques dans cet article particulier, configurons cela. Pour ce faire, nous devons ajouter un  attribut title à l’ancre responsable de l’affichage du modal.

Une fois que vous avez localisé l’ancre responsable du déclenchement de l’affichage (rappelez-vous qu’elle contient le texte Display The Dialog ), ajoutez-lui un attribut title pour que le code ressemble à ceci :

<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>

Désormais, lorsque vous cliquez sur l’ancre pour déclencher l’affichage, elle affichera non seulement la boîte de dialogue comme dans la photo ci-dessus, mais elle contiendra également un titre :

Utile, non? Et s’il devait être plus dynamique ?

Passons maintenant à l’Ajax

Et la nature dynamique est ce que je cherche à couvrir ensuite. Plus précisément, je cherche à parcourir le processus consistant à prendre ce que nous avons ici, à savoir des données statiques, et à les remplacer par des informations récupérées de manière asynchrone.

C’est-à-dire que l’utilisateur clique sur l’  ancre Afficher la boîte de dialogue, puis :

• une requête est faite au serveur,
• les données sont récupérées,
• puis les informations sont dirigées vers le titre et les zones de contenu de la boîte de dialogue.

C’est un peu mieux que d’utiliser des informations statiques et cela rend l’application plus dynamique.