Nel post precedente, ho esaminato il processo necessario per far apparire le finestre di dialogo modali di WordPress nel contesto dell’area di amministrazione.
Questo utilizza:
- l’API WordPress integrata,
- la libreria Thickbox fornita,
- e un codice di esempio per farlo visualizzare.
In questo tutorial, illustrerò il popolamento della finestra di dialogo modale con i dati. Successivamente, condividerò come popolare i dati in modo dinamico utilizzando Ajax.
Finestre di dialogo modali di WordPress: dati statici
Per questo post, presumo che tu abbia letto il post iniziale della serie e che tu abbia una comprensione di cosa sta facendo il codice (anche se è ancora meglio se hai del codice funzionante nel tuo ambiente di sviluppo locale).
Indipendentemente da ciò, parliamo di popolare la meta box con le informazioni. Cioè, esamineremo:
- inserire le informazioni nel corpo della meta box,
- popolando il titolo con il contenuto.
Una volta fatto ciò, passeremo all’acquisizione di informazioni dal server in modo asincrono e quindi alla compilazione del codice che abbiamo finora.
1 Definizione dei dati
Aggiungere contenuto alla meta box è davvero facile. Richiamo dal post precedente; abbiamo un elemento HTML che ha un display: none; valore per il suo attributo di stile .
Ecco il succo originale :
<?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 -->Aggiungere contenuto alla finestra di dialogo modale è facile. Basta individuare l’elemento acme-modal-dialog e poi compilarlo con tutte le informazioni che si desidera visualizzare all’utente.
Ad esempio, vedere questo esempio di codice :
<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 -->Quando l’utente fa clic sull’ancora nel post precedente (quello che legge Visualizza il dialogo ), verrà visualizzato il modale con il contenuto che vedi sopra.
In generale, dovrebbe apparire come quello che vedi sopra in base al codice delineato nel succo.
2 Impostazione di un titolo
Successivamente, nota che la finestra di dialogo modale include un’opzione per ignorarla ogni volta che l’utente ha finito di leggerla. Oltre a offrire questa capacità, nota che l’area della finestra di dialogo ha molto spazio bianco.
Sai cosa intendo: è un’area che di solito è relegata ad essere utilizzata come barra del titolo. Grazie all’API Thickbox e alla sua integrazione con WordPress, possiamo facilmente aggiungerlo al nostro titolo. Può essere dinamico (come se le informazioni dovessero arrivare tramite Ajax) o può essere statico.
E poiché stiamo lavorando con informazioni statiche in questo particolare post, configuriamolo. Per fare ciò, dobbiamo aggiungere un attributo title all’ancora responsabile della visualizzazione del modale.
Una volta individuata l’ancora responsabile dell’attivazione della visualizzazione (ricorda, contiene il testo Display The Dialog ), aggiungi un attributo title in modo che il codice assomigli a questo :
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>Ora, quando fai clic sull’ancora per attivare la visualizzazione, non solo mostrerà la finestra di dialogo come nell’immagine sopra, ma conterrà anche un titolo:
Utile, vero? Ma se fosse più dinamico?
Ora verso l’Ajax
E la natura dinamica è ciò che sto cercando di coprire in seguito. In particolare, sto cercando di seguire il processo per prendere ciò che abbiamo qui, che sono dati statici e sostituirli con informazioni recuperate in modo asincrono.
Cioè, l’utente fa clic sull’ancora Visualizza la finestra di dialogo e quindi:
- viene fatta una richiesta al server,
- i dati vengono recuperati,
- e quindi le informazioni vengono convogliate nel titolo e nelle aree del contenuto della finestra di dialogo.
È un po’ meglio dell’utilizzo di informazioni statiche e rende l’applicazione più dinamica.