Im vorherigen Beitrag bin ich durch den Prozess gegangen, der erforderlich ist, damit modale WordPress-Dialoge im Kontext des Verwaltungsbereichs erscheinen.

Dies verwendet:

• die integrierte WordPress-API,
• die bereitgestellte Thickbox-Bibliothek,
• und einige Beispielcodes, um es anzuzeigen.

In diesem Lernprogramm werde ich durch das Füllen des modalen Dialogfelds mit Daten gehen. Danach zeige ich Ihnen, wie Sie die Daten dynamisch mit Ajax füllen.

Modale WordPress-Dialoge: Statische Daten

Für diesen Beitrag gehe ich davon aus, dass Sie den ersten Beitrag der Serie gelesen haben und verstehen, was der Code tut (obwohl es noch besser ist, wenn Sie über funktionierenden Code in Ihrer lokalen Entwicklungsumgebung verfügen).

Lassen Sie uns unabhängig davon darüber sprechen, wie Sie die Metabox mit Informationen füllen. Das heißt, wir werden uns ansehen:

1. Informationen in den Körper der Metabox einfügen,
2. Füllen des Titels mit Inhalt.

Sobald wir das erledigt haben, werden wir damit fortfahren, Informationen asynchron vom Server zu holen und dann den Code, den wir bisher haben, zu füllen.

1 Definition der Daten

Das Hinzufügen von Inhalten zur Metabox ist wirklich einfach. Rückruf vom vorherigen Beitrag; wir haben ein HTML-Element, das eine Anzeige hat: none; Wert für sein style- Attribut.

Hier ist der ursprüngliche Kern :

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

Das Hinzufügen von Inhalten zum modalen Dialog ist einfach. Suchen Sie einfach das Element acme-modal-dialog und füllen Sie es mit den Informationen, die Sie dem Benutzer anzeigen möchten.

Siehe zum Beispiel dieses Codebeispiel :

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

Wenn der Benutzer auf den Anker im vorherigen Post klickt (der mit Display The Dialog lautet ), wird das Modal mit dem Inhalt angezeigt, den Sie oben sehen.

Im Allgemeinen sollte es so aussehen, wie Sie es oben sehen, basierend auf dem im Kern umrissenen Code.

2 Titel festlegen

Beachten Sie als Nächstes, dass der modale Dialog eine Option enthält, um ihn zu schließen, wenn der Benutzer mit dem Lesen fertig ist. Beachten Sie, dass der Bereich des Dialogs nicht nur diese Möglichkeit bietet, sondern auch viel Leerraum hat.

Sie wissen, was ich meine: Es ist ein Bereich, der normalerweise als Titelleiste verwendet wird. Dank der Thickbox-API und ihrer Integration mit WordPress können wir sie ganz einfach zu unserem Titel hinzufügen. Es kann dynamisch sein (als ob die Informationen über Ajax kommen würden) oder es kann statisch sein.

Und da wir in diesem speziellen Beitrag mit statischen Informationen arbeiten, lassen Sie uns das einrichten. Dazu müssen wir dem Anker, der für die Anzeige des Modals verantwortlich ist, ein Titelattribut hinzufügen.

Sobald Sie den Anker gefunden haben, der für das Auslösen der Anzeige verantwortlich ist (denken Sie daran, dass er den Text Display The Dialog enthält ), fügen Sie ihm ein Titelattribut hinzu, sodass der Code wie folgt aussieht :

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

Wenn Sie jetzt auf den Anker klicken, um die Anzeige auszulösen, wird nicht nur der Dialog wie in der obigen Aufnahme angezeigt, sondern er enthält auch einen Titel:

Nützlich, oder? Aber was wäre, wenn es dynamischer wäre?

Nun zu Ajax

Und die dynamische Natur ist das, was ich als nächstes behandeln möchte. Insbesondere möchte ich durch den Prozess gehen, das zu nehmen, was wir hier haben, nämlich statische Daten, und sie durch asynchron abgerufene Informationen zu ersetzen.

Das heißt, der Benutzer klickt auf den Anker Display The Dialog und dann:

• eine Anfrage an den Server gestellt wird,
• Daten werden abgerufen,
• und dann werden die Informationen in den Titel und die Inhaltsbereiche des Dialogs geleitet.

Es ist ein bisschen besser als die Verwendung statischer Informationen und sorgt für eine dynamischere Anwendung.