Ogni volta che si tratta di sviluppare soluzioni per i clienti, ci saranno momenti in cui probabilmente avrai il compito di visualizzare le informazioni nelle finestre di dialogo modali di WordPress.
Ci sono molte soluzioni disponibili per fare questo e più hai familiarità con JavaScript, varie librerie e le librerie che hanno a disposizione, più difficile (o forse è ancora più facile) è scegliere quale usare.
Ma WordPress ha un’infrastruttura integrata che rende banale incorporare funzionalità in WordPress. Quindi, in tre prossimi post, tratterò quanto segue:
- Come incorporare le finestre di dialogo modali di WordPress utilizzando le librerie integrate,
- Popolando le finestre di dialogo modali con i dati,
- Popolamento della finestra di dialogo modale con dati dinamici tramite Ajax.
A causa della natura della serie, i post non saranno consecutivi, ma utilizzeranno tutti un tag univoco che puoi utilizzare per aggiungere un segnalibro e fare riferimento a una serie una volta completati i post.
Detto questo, parliamo di incorporare facilmente le finestre di dialogo modali di WordPress con le librerie integrate.
Finestre di dialogo modali di WordPress, parte 1
Per iniziare, presumo che tu abbia le basi di base di una pagina di amministrazione in atto.
Sulle pagine dei plugin
Cioè, hai tutto il necessario per ottenere una configurazione del plug-in, attivarla e quindi visualizzare una pagina tramite un menu o un sottomenu.
In caso contrario, dai un’occhiata a questo post per vedere come iniziare.
Una volta fatto, avrai bisogno dell’infrastruttura di base per una pagina di plug-in. Questa pagina può essere utilizzata per la semplice visualizzazione di informazioni oppure può essere utilizzata sia per visualizzare informazioni che per dare all’utente la possibilità di salvare le opzioni.
Per questo tutorial, non sono particolarmente interessato a dare all’utente la possibilità di salvare le opzioni. Invece, dobbiamo creare un’ancora che visualizzerà una finestra di dialogo modale ogni volta che viene cliccata.
E i dati che conterrà saranno trattati in un tutorial successivo.
Una pagina di plug-in di esempio
A questo punto, suppongo che tu abbia una pagina di plugin. Una struttura di base per esso può assomigliare a questa :
<?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 -->Da lì, ci sono due cose che sono necessarie:
- incorporando la libreria Thickbox
- aggiungendo un’ancora e un contenitore che visualizzerà una finestra di dialogo modale
Per incorporare la libreria Thickbox nella tua pagina del plugin, aggiungi semplicemente questo tag. Se stai seguendo uno standard di codifica, è probabile che la tua pagina abbia un docblock nella parte superiore della pagina. Qui è dove normalmente aggiungo il codice.
La funzione add_thickbox è quella fornita da WordPress che fa quanto segue:
Accoda il valore predefinito ThickBox js e css.
Un po’ vago, vero? Tecnicamente la descrizione più lunga è:
ThickBox è un widget di dialogo dell’interfaccia utente di una pagina Web scritto in JavaScript sopra la libreria jQuery. La sua funzione è mostrare una singola immagine, più immagini, contenuto in linea, contenuto iframe o contenuto servito tramite AJAX in una modalità ibrida.
E se sei interessato alla libreria Thickbox da sola, puoi vederla in questa pagina.
Comunque, torniamo alla pagina. Ora che lo sto aggiungendo alla mia pagina del plug-in utilizzando la funzione API di WordPress, la mia pagina è simile a questa :
<?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 -->Successivamente, la creazione dell’ancora e dell’elemento per la visualizzazione dei dati vanno di pari passo, in particolare perché l’ancora necessita dell’ID dell’elemento che fungerà da finestra di dialogo modale.
L’ancora necessita delle seguenti informazioni:
- l’ID dell’elemento che visualizzerà il modale,
- le dimensioni di detta finestra modale
Per questo esempio, imposterò una finestra di dialogo che verrà visualizzata a 800 × 600 pixel e avrà l’ID di acme-modal-dialog.
Nota: ricorda che è una buona idea anteporre ai tuoi elementi qualcosa relativo al nome del tuo plugin, in modo che non sorgano conflitti.
Quindi creerò un’ancora che assomiglia a questa :
<?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 -->E poi creerò un elemento come questo :
<?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 -->E il codice sopra è come apparirà anche la versione finale della pagina del plugin. Quando si fa clic sull’ancora, dovrebbe apparire una finestra di dialogo vuota con le dimensioni specificate (ovvero 800×600 pixel).
Ovviamente, sarà vuoto in quanto non visualizzerà alcun dato.
Visualizzazione dei dati
Nel prossimo post della serie, illustrerò come visualizzare i dati nel contesto della finestra di dialogo.
È facile, ma è un buon punto di partenza se stai cercando di iniziare a incorporare dati dinamici tramite l’API REST o Ajax. Ma lo tratterò prima della fine di questo.