Das versehentliche Schließen einer Seite ohne Ihren Kommentar oder mit einem halb ausgefüllten Formular ist ärgerlich. Vor kurzem hat uns einer unserer Benutzer gefragt, ob es möglich sei, seinen Lesern ein Popup zur Bestätigung der Navigation anzuzeigen. Dieses winzig kleine Popup warnt Benutzer und verhindert, dass sie versehentlich ein halb ausgefülltes und nicht gesendetes Formular verlassen. In diesem Artikel zeigen wir Ihnen, wie Sie das Popup-Fenster zur Bestätigung der Navigation für WordPress-Formulare anzeigen.
Was ist Navigations-Popup bestätigen?
Angenommen, ein Benutzer schreibt einen Kommentar zu Ihrem Blog. Sie haben schon einige Zeilen geschrieben, werden aber abgelenkt und vergessen, einen Kommentar abzugeben. Wenn sie nun ihren Browser schließen, geht der Kommentar verloren.
Das Popup-Fenster zum Bestätigen der Navigation gibt ihnen die Möglichkeit, ihren Kommentar zu beenden.
Sie können diese Funktion im WordPress-Post-Editor-Bildschirm in Aktion sehen. Wenn Sie nicht gespeicherte Änderungen haben und versuchen, die Seite zu verlassen oder den Browser zu schließen, wird ein Warn-Popup angezeigt.
Sehen wir uns an, wie wir diese Warnfunktion zu WordPress-Kommentaren und anderen Formularen auf Ihrer Website hinzufügen können.
Popup zum Bestätigen der Navigation für nicht gesendete Formulare in WordPress anzeigen
Für dieses Tutorial erstellen wir ein benutzerdefiniertes Plugin, aber keine Sorge, Sie können das Plugin auch am Ende dieses Tutorials herunterladen, um es auf Ihrer Website zu installieren.
Zum besseren Verständnis des Codes bitten wir Sie jedoch, zu versuchen, ein eigenes Plugin zu erstellen. Sie können dies zuerst auf einer lokalen Installations- oder Staging-Site tun.
Lass uns anfangen.
Zuerst müssen Sie einen neuen Ordner auf Ihrem Computer erstellen und ihn benennen confirm-leaving
. Innerhalb des Bestätigungsordners müssen Sie einen weiteren Ordner erstellen und ihn js nennen.
Öffnen Sie nun einen Nur-Text-Editor wie Notepad und erstellen Sie eine neue Datei. Fügen Sie im Inneren einfach den folgenden Code ein:
<?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: Themelocal * 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');
Diese PHP-Funktion fügt einfach eine JavaScript-Datei zum Frontend Ihrer Website hinzu.
Fahren Sie fort und speichern Sie diese Datei unter confirm-leaving.php
im Hauptordner zum Bestätigen des Verlassens.
Jetzt müssen wir die JavaScript-Datei erstellen, die dieses Plugin lädt.
Erstellen Sie eine neue Datei und fügen Sie diesen Code darin ein:
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; }); })
Dieser JavaScript-Code erkennt, ob der Benutzer nicht gespeicherte Änderungen im Kommentarformular hat. Wenn ein Benutzer versucht, die Seite zu verlassen oder das Fenster zu schließen, wird ein Warn-Popup angezeigt.
Sie müssen diese Datei speichern unter confirm-leaving.js
im js-Ordner.
Nachdem Sie beide Dateien gespeichert haben, sollte Ihre Ordnerstruktur wie folgt aussehen:
Jetzt müssen Sie sich über einen FTP-Client mit Ihrer WordPress-Site verbinden. Lesen Sie unsere Anleitung zum Hochladen von WordPress-Dateien über FTP.
Sobald die Verbindung hergestellt ist, müssen Sie hochladen confirm-leaving
Ordner zu /wp-contents/plugins/
Ordner auf Ihrer Website.
Danach müssen Sie sich im WordPress-Administrationsbereich anmelden und die Plugins-Seite besuchen. Suchen Sie das Plugin „Verlassen bestätigen“ in der Liste der installierten Plugins und klicken Sie darunter auf den Link „Aktivieren“.
Das ist alles. Sie können jetzt jeden Beitrag auf Ihrer Website besuchen, einen Text in ein beliebiges Feld des Kommentarformulars schreiben und dann versuchen, die Seite ohne Absenden zu verlassen. Es erscheint ein Popup, das Sie warnt, dass Sie im Begriff sind, eine Seite mit nicht gespeicherten Änderungen zu verlassen.
Hinzufügen der Warnung zu anderen Formularen in WordPress
Sie können dieselbe Codebasis verwenden, um beliebige Formulare auf Ihrer WordPress-Site auszurichten. Hier zeigen wir Ihnen ein Beispiel für die gezielte Verwendung eines Kontaktformulars.
In diesem Beispiel verwenden wir die WPForms Plugin zum Erstellen eines Kontaktformulars. Die Anweisungen sind dieselben, wenn Sie auf Ihrer Website ein anderes Kontaktformular-Plugin verwenden.
Gehen Sie zu der Seite, auf der Sie Ihr Kontaktformular hinzugefügt haben. Fahren Sie mit der Maus zum ersten Feld in Ihrem Kontaktformular, klicken Sie mit der rechten Maustaste und wählen Sie dann Prüfen aus dem Browsermenü.
Suchen Sie die Zeile, die mit beginnt <form>
Schild. Im Formular-Tag finden Sie das ID-Attribut.
In diesem Beispiel lautet die ID unseres Formulars wpforms-form-170
. Sie müssen das ID-Attribut kopieren.
Bearbeiten Sie jetzt die confirm-leaving.js
Datei und fügen Sie das ID-Attribut nach hinzu #commentform
.
Stellen Sie sicher, dass Sie sich trennen #commentform
und die ID Ihres Formulars mit einem Komma. Sie müssen auch hinzufügen #
als Präfix für das ID-Attribut Ihres Formulars signieren.
Ihr Code sieht nun so aus:
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; }); })
Speichern Sie Ihre Änderungen und laden Sie die Datei wieder auf Ihre Website hoch.
Jetzt können Sie einen beliebigen Text in ein beliebiges Feld Ihres Kontaktformulars eingeben und dann versuchen, die Seite zu verlassen, ohne das Formular abzusenden. Es erscheint ein Popup mit einer Warnung, dass Sie nicht gespeicherte Änderungen haben.
Sie können das Plugin zum Bestätigen des Verlassens hier herunterladen. Es zielt nur auf das Kommentarformular ab, aber Sie können das Plugin gerne bearbeiten, um auf andere Formulare abzuzielen.
Das ist alles, wir hoffen, dieser Artikel hat Ihnen geholfen, das Popup-Fenster zur Bestätigung der Navigation für WordPress-Formulare anzuzeigen. Vielleicht möchten Sie auch diese 8 besten jQuery-Tutorials für WordPress-Anfänger ausprobieren.