Chiudere accidentalmente una pagina senza inviare il modulo compilato a metà è fastidioso. Di recente, uno dei nostri utenti ci ha chiesto se fosse possibile visualizzare una finestra pop-up che conferma l'azione dell'utente sui moduli? Questo minuscolo avvisa gli utenti e impedisce loro di chiudere accidentalmente pagine con moduli compilati a metà.

In questo tutorial, ti mostreremo come visualizzare una finestra di conferma dell'azione di chiusura per i tuoi moduli. blog WordPress.

conferma della chiusura di una finestra su WordPress

Cos'è un popup di conferma della navigazione

Supponiamo che un utente stia scrivendo un commento sul tuo blog. ha giĂ  scritto un buon numero di righe, ma si distraggono e dimenticano di inviare il commento. Ora, cliccando ad esempio su un collegamento, tutto il contenuto che ha iniziato a scrivere andrĂ  perso.

La conferma della navigazione dĂ  loro la possibilitĂ  di completare il loro commento.

Puoi vedere questa funzione dall'interfaccia dell'editor di articoli / pagine. Se hai modifiche non salvate e provi a uscire dalla pagina o chiudere il browser, verrĂ  visualizzato un avviso popup.

Vediamo come possiamo aggiungere questa funzione di avviso sui commenti di WordPress e altri moduli sul tuo blog.

Come visualizzare un popup di conferma sui moduli non inviati in WordPress

Per questo tutorial, ci sarĂ  creare un plug-in personalizzatoTi abbiamo giĂ  mostrato come creare un WordPress Plugin rapidamente.

Cominciamo.

Per prima cosa devi creare una nuova cartella sul tuo computer e chiamarla "confirm-action". In questa cartella è necessario creare un'altra cartella e denominarla js.

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

<?php
/**
 * Conferma l'azione
 * Nome plugin: Conferma azione
 *URI del plugin: https://blogpascher.com
 * Descrizione: questo plugin mostra un avviso agli utenti quando provano a dimenticare di premere il pulsante di invio in un modulo di commento.
 * Versione: 1.0.0
 * Autore: TuoNOME
 * URI dell'autore: https://blogpascher.com
 * Licenza: GPL-2.0+
 * URI della licenza: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
funzione bpc_confirm_leaving_js() {

     wp_enqueue_script( 'Conferma abbandono', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Questa funzione php aggiunge semplicemente un file javascript al front-end del tuo sito web.

Vai avanti e salva questo file come "confirm-action.php" nella cartella confermare l'azione "(Root del tuo plugin).

Ora dobbiamo creare il file JavaScript che questo plugin caricherĂ . Crea un nuovo file e incolla questo codice all'interno:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); la funzione askConfirm () {if (needToConfirm) {// Metti il ​​tuo messaggio personalizzato qui tornare "I tuoi dati non salvati verranno persi.";}} $ ( "# CommentForm") di scambio (function () {needToConfirm = true;}).})

Rinomina questo file conferma-leaving.js", Spostalo nella" sottocartella " js "Di" confermare l'azione".

Questo codice JavaScript rileva se l'utente ha modifiche non salvate nel modulo dei commenti. Se l'utente tenta di uscire dalla pagina, visualizzerĂ  un avviso a comparsa.

Tutto quello che devi fare ora è caricare il tuo file sul tuo server usando il tuo client preferiti FTP. DopodichĂ©, tutto ciĂ² che devi fare è attivare il plug-in dalla tua dashboard.

Azione confermare plugin WordPress

Ăˆ tutto. Ora puoi visitare un articolo sul tuo sito web, provare a scrivere un commento quindi fare clic su un collegamento, noterai un popup simile a questo.

Chiusura conferma demo

Aggiunta dell'avviso su altri moduli di WordPress

Puoi utilizzare lo stesso codice per indirizzare tutti i moduli sul tuo sito WordPress. Qui ti mostreremo un esempio su a modulo di contatto.

In questo esempio, usiamo il plugin WPForms per creare un modulo di contatto. Le istruzioni saranno le stesse se ne usi un altro modulo di contatto plug-in sul tuo sito.

Vai alla pagina in cui hai aggiunto il tuo modulo di contatto. Sposta il mouse sul primo campo del modulo di contatto, fai clic con il pulsante destro del mouse, quindi seleziona " ispezionare“, Per accedere al codice sorgente.

recupero del codice dal campo di testo di WordPress

Individuare la riga che inizia con il tag <form>. Nel tag del modulo troverai l'attributo ID. In questo esempio, l'ID del nostro modulo è formulaire . Devi copiare l'attributo ID.

Ora modifica il confirmer-leaving.js file e aggiungi l'attributo ID dopo " #commentform Separato da una virgola.

Il tuo codice dovrebbe apparire così:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); la funzione askConfirm () {if (needToConfirm) {// Metti il ​​tuo messaggio personalizzato qui tornare "I tuoi dati non salvati verranno persi.";}} scambio $ ( "# CommentForm, modulo #") (function () {needToConfirm = true;}).})

Salvare le modifiche e installare il plug-in sul tuo blog WordPress.

Questo è tutto per questo tutorial. Spero che ti aiuti ad aggiungere una finestra pop-up di conferma al tuo blog. Non esitate a fare domande se non capite un punto.