¿Qué es la ventana emergente Confirmar navegación?
Supongamos que un usuario está escribiendo un comentario en su blog. Ya han escrito bastantes líneas, pero se distraen y olvidan enviar comentarios. Ahora, si cerraron su navegador, el comentario se perderá.
La ventana emergente de confirmación de navegación les da la oportunidad de terminar su comentario.
Puede ver esta función en acción en la pantalla del editor de publicaciones de WordPress. Si tiene cambios sin guardar e intenta salir de la página o cerrar el navegador, verá una ventana emergente de advertencia.
Veamos cómo podemos agregar esta función de advertencia a los comentarios de WordPress y otros formularios en su sitio.
Mostrar ventana emergente Confirmar navegación para formularios no enviados en WordPress
Para este tutorial, crearemos un plugin, pero no te preocupes, también puedes descargar el plugin al final de este tutorial para instalar en su sitio web.
Sin embargo, para comprender mejor el código, le pediremos que intente crear el suyo propio. plugin. Puede hacer esto en una instalación local o en un sitio de prueba primero.
Empecemos.
Primero necesita crear una nueva carpeta en su computadora y nombrarla confirm-leaving. Dentro de la carpeta de confirmación de salida, debe crear otra carpeta y nombrarla js.
Ahora abra un editor de texto sin formato como el Bloc de notas y cree un nuevo archivo. En el interior, simplemente pegue el siguiente código:
<?php
/**
* Confirm Leaving
* Plugin Name: Confirm Leaving
* Plugin URI: https://www.wpbeginner.com
* Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.
* Version: 1.0.0
* Author:
* Author URI: https://www.wpbeginner.com
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
function wpb_confirm_leaving_js() {
wp_enqueue_script( 'Confirm Leaving', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js');
Esta función php simplemente agrega un archivo JavaScript al front-end de su sitio web.
Continúe y guarde este archivo como confirm-leaving.php dentro de la carpeta principal de confirmación-salida.
Ahora necesitamos crear el archivo JavaScript que este plugin esta cargando.
Cree un nuevo archivo y pegue este código dentro de él:
jQuery(document).ready(function($) {
$(document).ready(function() {
needToConfirm = false;
window.onbeforeunload = askConfirm;
});
function askConfirm() {
if (needToConfirm) {
// Put your custom message here
return "Your unsaved data will be lost.";
}
}
$("#commentform").change(function() {
needToConfirm = true;
});
})
Este código JavaScript detecta si el usuario tiene cambios sin guardar en el formulario de comentario. Si un usuario intenta navegar fuera de la página o cerrar la ventana, mostrará una ventana emergente de advertencia.
Necesita guardar este archivo como confirm-leaving.js dentro de la carpeta js.
Después de guardar ambos archivos, así es como debería verse la estructura de su carpeta:
Ahora necesita conectarse a su sitio de WordPress utilizando un cliente FTP. Consulte nuestra guía sobre cómo usar FTP para cargar archivos de WordPress.
Una vez conectado, debe cargar confirm-leaving carpeta a /wp-contents/plugins/ carpeta en su sitio web.
Después de eso, debe iniciar sesión en el área de administración de WordPress y visitar la página de complementos. Busque el ‘Confirmar salida’ plugin en la lista de instalados plugins y haga clic en el enlace ‘activar’ debajo de él.
Eso es todo. Ahora puede visitar cualquier publicación en su sitio web, escribir texto en cualquier campo del formulario de comentarios y luego intentar salir de la página sin enviar. Aparecerá una ventana emergente, advirtiéndole que está a punto de salir de una página con cambios no guardados.
Agregar la advertencia a otros formularios en WordPress
Puede usar la misma base de código para apuntar a cualquier formulario en su sitio de WordPress. Aquí le mostraremos un ejemplo de cómo usarlo para orientar un formulario de contacto.
En este ejemplo, estamos usando el WPForms plugin para crear un formulario de contacto. Las instrucciones serán las mismas si está utilizando un formulario de contacto diferente. plugin en tu sitio web.
Vaya a la página donde agregó su formulario de contacto. Lleve el mouse al primer campo en su formulario de contacto, haga clic con el botón derecho y luego seleccione Inspeccionar en el menú del navegador.
Busque la línea que comienza con el <form> etiqueta. En la etiqueta del formulario, encontrará el atributo ID.
En este ejemplo, el ID de nuestro formulario es wpforms-form-170. Necesita copiar el atributo ID.
Ahora edite el confirm-leaving.js archivo y agregue el atributo ID después #commentform.
Asegúrate de separar #commentform y el ID de su formulario con una coma. También necesitará agregar # Firme como prefijo al atributo de ID de su formulario.
Su código ahora se verá así:
jQuery(document).ready(function($) {
$(document).ready(function() {
needToConfirm = false;
window.onbeforeunload = askConfirm;
});
function askConfirm() {
if (needToConfirm) {
// Put your custom message here
return "Your unsaved data will be lost.";
}
}
$("#commentform,#wpforms-form-170").change(function() {
needToConfirm = true;
});
})
Guarde sus cambios y cargue el archivo nuevamente en su sitio web.
Ahora puede ingresar cualquier texto en cualquier campo de su formulario de contacto y luego intentar salir de la página sin enviar el formulario. Aparecerá una ventana emergente con una advertencia de que tiene cambios sin guardar.
Puede descargar la confirmación de salida plugin aquí. Solo se orienta al formulario de comentarios, pero siéntase libre de editar el plugin para apuntar a otras formas.
Eso es todo, esperamos que este artículo le haya ayudado a mostrar la ventana emergente de confirmación de navegación para los formularios de WordPress. Es posible que también desee probar estos 8 mejores tutoriales de jQuery para principiantes de WordPress.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
.
Fuente: wpbeginner