Integra la finestra di dialogo modale utilizzando ThickBox integrato in WordPress
Le finestre di dialogo modali a volte devono necessariamente integrarsi con un sito Web WordPress. Utilizzando la finestra modale, possiamo visualizzare il contenuto nella parte superiore della pagina corrente.
Quando si tratta di pop-up modale, normalmente le persone preferiscono utilizzare la libreria Lightbox o Fancybox. Queste sono le librerie popolari e funzionano abbastanza bene.
Per includere queste librerie in WordPress, dobbiamo scaricare i file JS e CSS di una libreria e includerla nel progetto attraverso il modo standard. Dopodiché, come da documentazione della libreria, dobbiamo avvolgere il contenuto, chiamare il metodo per aprire la finestra modale.
WordPress includeva il plug-in jQuery di ThickBox con la versione modificata nel suo core. E può essere utilizzato al posto di librerie esterne. Usando questa funzione principale, otteniamo l’interfaccia che è la stessa dei popup modali nell’amministrazione di WordPress come sul pulsante multimediale.
Puoi provare questa funzione integrata. Se soddisfa le tue esigenze, risparmia tempo nell’integrazione di librerie esterne.
Usando ThickBox con contenuto in linea, otterrai un output simile a quello mostrato nello screenshot qui sotto.
Finestra di dialogo modale utilizzando ThickBox
WordPress ThickBox funziona bene con il contenuto in linea. Si può usare lo shortcode anche nella finestra modale. Ad esempio, puoi mostrare il modulo di contatto nella finestra modale utilizzando lo shortcode del modulo di contatto 7.
Detto questo, vediamo come usare ThickBox in WordPress.
Ad esempio, stiamo visualizzando contenuto fittizio in linea al clic del tag di ancoraggio. Quindi, posiziona il codice seguente ovunque desideri utilizzare ThickBox.
<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>Per utilizzare il Thichbox, dobbiamo includere il primo add_ThickBox()metodo. Questa funzione carica la libreria dal core. Successivamente, sull’attributo href sul tag di ancoraggio dobbiamo passare #TB_inline insieme a larghezza, altezza e id di un contenitore in cui è racchiuso il nostro contenuto in linea.
Allo stesso modo, se è necessario visualizzare il modulo di contatto nella finestra di dialogo modale, al posto del contenuto fittizio è necessario inserire lo shortcode utilizzando la do_shortcode()funzione di WordPress.
<?php echo do_shortcode('[shortcode_here]'); ?>Questo è tutto! Ci auguriamo che tu capisca come aggiungere una finestra di dialogo modale utilizzando ThickBox in WordPress. Vorremmo sentire i tuoi pensieri nel commento qui sotto.
Potresti anche leggere i nostri articoli Reindirizza alla pagina di ringraziamento dopo l’invio del modulo di contatto 7 e come salvare gli invii del modulo di contatto 7 al database di WordPress