Come mostrare la conferma del popup di navigazione per i moduli in WordPress

Chiusura accidentale di una pagina senza inviare il tuo commento o con un modulo mezzo pieno è fastidioso. Di recente, uno dei nostri utenti ci ha chiesto se fosse possibile mostrare ai propri lettori un popup di navigazione di conferma? Questo piccolo pop-up avvisa gli utenti e impedisce loro di lasciare accidentalmente il modulo mezzo pieno e non inviato. In questo articolo, ti mostreremo come mostrare la conferma della navigazione popup per i moduli WordPress.

Cosa è Confirm Navigation Popup?

Supponiamo che un utente stia scrivendo un commento sul tuo blog. Hanno già scritto diverse righe, ma si distraggono e dimenticano di inviare commenti. Ora se hanno chiuso il browser, il commento verrà perso.

Il popup di navigazione di conferma dà loro la possibilità di terminare il loro commento.

Puoi vedere questa funzione in azione nella schermata dell'editor di post di WordPress. Se hai modifiche non salvate e tenti di uscire dalla pagina o chiudi il browser, verrà visualizzato un popup di avvertenza.

Vediamo come possiamo aggiungere questa funzione di avviso ai commenti di WordPress e ad altri moduli sul tuo sito.

Mostra popup di conferma navigazione per moduli non inviati in WordPress

Per questo tutorial, creeremo un plugin personalizzato, ma non preoccuparti, puoi anche scaricare il plugin alla fine di questo tutorial per installarlo sul tuo sito web.

Tuttavia, per una migliore comprensione del codice, ti chiederemo di provare a creare il tuo plugin. È possibile farlo prima su un'installazione locale o su un sito di staging.

Iniziamo.

Per prima cosa devi creare una nuova cartella sul tuo computer e nominarla conferma di maturità. All'interno della cartella di conferma, è necessario creare un'altra cartella e denominarla js.

Ora apri un editor di testo semplice come Blocco note e crea un nuovo file. All'interno, è sufficiente incollare il seguente codice:

  
Questa funzione php aggiunge semplicemente un file JavaScript al front-end del tuo sito web. 
 
Vai avanti e salva questo file come conferma-leaving.php all'interno della cartella principale di conferma. 
 
Ora dobbiamo creare il file JavaScript che questo plugin sta caricando. 
 
Crea un nuovo file e incolla questo codice al suo interno: 
 
 jQuery (document) .ready (function ($) $ (document) .ready (function () needToConfirm = false; window.onbeforeunload = askConfirm;); function askConfirm () if (needToConfirm) // Inserisci la tua messaggio personalizzato qui restituito "I tuoi dati non salvati andranno persi."; $ ("# commentform"). change (function () needToConfirm = true;);) 
 
Questo codice JavaScript rileva se l'utente ha modifiche non salvate nel modulo di commento. Se un utente tenta di allontanarsi dalla pagina o chiudere la finestra, verrà visualizzato un popup di avviso. 
 
È necessario salvare questo file come conferma-leaving.js all'interno della cartella js. 
 
Dopo aver salvato entrambi i file, questo è come dovrebbe essere la struttura della tua cartella: 
 
 
Ora devi connetterti al tuo sito WordPress usando un client FTP. Consulta la nostra guida su come utilizzare FTP per caricare file WordPress. 
 
Una volta connesso, è necessario caricare conferma di maturità cartella a / wp-contents / plugins / cartella sul tuo sito web. 
 
 
Successivamente è necessario accedere all'area admin di WordPress e visitare la pagina Plugin. Individua il plug-in "Conferma uscita" nell'elenco dei plug-in installati e fai clic sul link "attiva" sotto di esso. 
 
 
È tutto. È ora possibile visitare qualsiasi post sul proprio sito Web, scrivere del testo in qualsiasi campo del modulo di commento e quindi provare a lasciare la pagina senza inviarla. Apparirà un popup che ti avverte che stai per lasciare una pagina con modifiche non salvate. 
 
 
Aggiungere l'avviso ad altri moduli in WordPress
 
Puoi utilizzare lo stesso codice base per indirizzare qualsiasi modulo sul tuo sito WordPress. Qui ti mostreremo un esempio di come utilizzarlo per scegliere come target un modulo di contatto. 
 
In questo esempio, stiamo usando il plugin WPForms per creare un modulo di contatto. Le istruzioni saranno le stesse se utilizzi un plug-in diverso per i moduli di contatto sul tuo sito web. 
 
Vai alla pagina in cui hai aggiunto il tuo modulo di contatto. Porta il mouse sul primo campo nel modulo di contatto, fai clic con il pulsante destro del mouse, quindi seleziona Ispeziona dal menu del browser. 
 
 
Individua la linea che inizia con  etichetta. Nel tag del modulo, troverai l'attributo ID. 
 
In questo esempio, l'ID del nostro modulo è wpforms-form-170. Devi copiare l'attributo ID. 
 
Ora modifica il conferma-leaving.js file e aggiungi l'attributo ID dopo #commentform.
 
Assicurati di separarti #commentform e l'ID del tuo modulo con una virgola. Dovrai anche aggiungere # accedi come prefisso all'attributo ID del tuo modulo. 
 
Il tuo codice ora sarà simile a questo:
 
 jQuery (document) .ready (function ($) $ (document) .ready (function () needToConfirm = false; window.onbeforeunload = askConfirm;); function askConfirm () if (needToConfirm) // Inserisci la tua messaggio personalizzato qui restituito "I tuoi dati non salvati andranno persi."; $ ("# commentform, # wpforms-form-170"). change (function () needToConfirm = true;);) 
 
Salva le modifiche e carica il file sul tuo sito web. 
 
Ora puoi inserire qualsiasi testo in qualsiasi campo del modulo di contatto e quindi provare a lasciare la pagina senza inviare il modulo. Apparirà un popup con un avviso che hai modifiche non salvate. 
 
Puoi scaricare il plug-in di conferma qui. Si rivolge solo al modulo dei commenti, ma sentiti libero di modificare il plug-in per scegliere come target altri moduli. 
 
Questo è tutto, speriamo che questo articolo ti abbia aiutato a mostrare la conferma del popup di navigazione per i moduli di WordPress. Potresti anche provare a provare questi 8 migliori tutorial di jQuery per i principianti di WordPress. 
 
Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.