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.<\/p>\n
Detto questo, parliamo di incorporare facilmente le finestre di dialogo modali di WordPress con le librerie integrate.<\/p>\n
Finestre di dialogo modali di WordPress, parte 1<\/h2>\n
Per iniziare, presumo che tu abbia le basi di base di una pagina di amministrazione in atto.<\/p>\n
Sulle pagine dei plugin<\/h3>\n
Cio\u00e8, hai tutto il necessario per ottenere una configurazione del plug-in, attivarla e quindi visualizzare una pagina tramite un menu o un sottomenu.<\/p>\n
In caso contrario, dai un’occhiata a questo post<\/a> per vedere come iniziare.<\/p>\n Una volta fatto, avrai bisogno dell’infrastruttura di base per una pagina di plug-in. Questa pagina pu\u00f2 essere utilizzata per la semplice visualizzazione di informazioni oppure pu\u00f2 essere utilizzata sia per visualizzare informazioni che per dare all’utente la possibilit\u00e0 di salvare le opzioni.<\/p>\n Per questo tutorial, non sono particolarmente interessato a dare all’utente la possibilit\u00e0 di salvare le opzioni. Invece, dobbiamo creare un’ancora che visualizzer\u00e0 una finestra di dialogo modale ogni volta che viene cliccata.<\/p>\n E i dati che conterr\u00e0 saranno trattati in un tutorial successivo.<\/p>\n A questo punto, suppongo che tu abbia una pagina di plugin. Una struttura di base per esso pu\u00f2 assomigliare a questa<\/a> :<\/p>\n Da l\u00ec, ci sono due cose che sono necessarie:<\/p>\n Per incorporare la libreria Thickbox nella tua pagina del plugin, aggiungi semplicemente questo tag. Se stai seguendo uno standard di codifica, \u00e8 probabile che la tua pagina abbia un docblock nella parte superiore della pagina. Qui \u00e8 dove normalmente aggiungo il codice.<\/p>\n La\u00a0 funzione add_thickbox<\/a> \u00e8 quella fornita da WordPress che fa quanto segue:<\/p>\n Accoda il valore predefinito ThickBox js e css.<\/p>\n<\/blockquote>\n Un po’ vago, vero? Tecnicamente la descrizione pi\u00f9 lunga \u00e8:<\/p>\n ThickBox \u00e8 un widget di dialogo dell’interfaccia utente di una pagina Web scritto in JavaScript sopra la libreria jQuery. La sua funzione \u00e8 mostrare una singola immagine, pi\u00f9 immagini, contenuto in linea, contenuto iframe o contenuto servito tramite AJAX in una modalit\u00e0 ibrida.<\/p>\n<\/blockquote>\n E se sei interessato alla libreria Thickbox da sola, puoi vederla in questa pagina<\/a>.<\/p>\n Comunque, torniamo alla pagina. Ora che lo sto aggiungendo alla mia pagina del plug-in utilizzando la funzione API di WordPress, la mia pagina \u00e8 simile a questa<\/a> :<\/p>\n Successivamente, la creazione dell’ancora e dell’elemento per la visualizzazione dei dati vanno di pari passo, in particolare perch\u00e9 l’ancora necessita dell’ID dell’elemento che funger\u00e0 da finestra di dialogo modale.<\/p>\n L’ancora necessita delle seguenti informazioni:<\/p>\n Per questo esempio, imposter\u00f2 una finestra di dialogo che verr\u00e0 visualizzata a 800 \u00d7 600 pixel e avr\u00e0 l’ID di acme-modal-dialog<\/strong>.<\/p>\n Nota<\/strong>: ricorda che \u00e8 una buona idea anteporre ai tuoi elementi qualcosa relativo al nome del tuo plugin, in modo che non sorgano conflitti.<\/p>\n Quindi creer\u00f2 un’ancora che assomiglia a questa<\/a> :<\/p>\nUna pagina di plug-in di esempio<\/h3>\n
<?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n <!-- TODO -->\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n\n
\n
\n
<?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\nadd_thickbox();\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n <!-- TODO -->\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n\n
<?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\nadd_thickbox();\n?>\n\n<div id=\"acme-thickbox-demo\" class=\"wrap\">\n\n <h1>Acme Thickbox Demo<\/h1>\n <p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.<\/p>\n\n <div id=\"acme-thickbox-content\">\n <a href=\"#\">Display The Dialog<\/a>\n <\/div><!-- #acme-thickbox-content -->\n\n<\/div><!-- #acme-thickbox-demo --><\/code><\/pre>\n
![\"Aggiunta](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165812-61e789a51e4aa.png\")
<\/a><\/p>\n