W artykule:
Przypadkowe zamknięcie strony bez przesyłania komentarza lub z wypełnionym do połowy formularzem jest denerwujące. Niedawno jeden z naszych użytkowników zapytał nas, czy możliwe jest pokazanie czytelnikom popup ’ A confirm navigation? Ten mały mały wyskakujący Alert użytkowników i zapobiec ich przypadkowemu pozostawieniu w połowie wypełnionego i niezapełnionego formularza. W tym artykule pokażemy, jak pokazać popup potwierdzania nawigacji dla formularzy WordPress.
Co To jest Popup Confirm Navigation?
Załóżmy, że użytkownik pisze komentarz na swoim blogu. Napisali już sporo linijek, ale rozpraszają się i zapominają przesłać komentarz. Teraz, jeśli zamkną przeglądarkę, komentarz zostanie utracony.
Wyskakujące okienko potwierdź nawigację daje im szansę na dokończenie komentarza.
Możesz zobaczyć tę funkcję w akcji na ekranie edytora postów WordPress. Jeśli masz niezapisane zmiany i próbujesz opuścić stronę lub zamknąć przeglądarkę, zobaczysz wyskakujące okienko z ostrzeżeniem.
Zobaczmy, jak możemy dodać tę funkcję ostrzeżenia do komentarzy WordPress i innych formularzy w Twojej witrynie.
Show Confirm Navigation popup for Unsubmitted Forms in WordPress
W tym samouczku będziemy tworzyć niestandardową wtyczkę, ale nie martw się, możesz również pobrać wtyczkę na końcu tego samouczka, aby zainstalować na swojej stronie internetowej.
Jednak, dla lepszego zrozumienia kodu, poprosimy, aby spróbować utworzyć własną wtyczkę. Możesz to zrobić najpierw w lokalnej instalacji lub w witrynie przechowawczej.
Zaczynajmy.
Najpierw musisz utworzyć nowy folder na swoim komputerze i nadać mu nazwę confirm-leaving. W folderze confirm-leaving musisz utworzyć inny folder i nadać mu nazwę js.
Teraz otwórz zwykły edytor tekstu, taki jak Notatnik i utwórz nowy plik. Wewnątrz, po prostu wklej następujący kod:
<?php
/**
* Potwierdź Opuszczenie
* Nazwa Wtyczki: Potwierdź Opuszczenie
* Plugin URI: https://www.wpbeginner.com
* Opis: Ta wtyczka wyświetla ostrzeżenie dla użytkowników, gdy próbują zapomnieć o naciśnięciu przycisku Wyślij na formularzu komentarza.
* Wersja: 1.0.0
* Autor: WPBeginner
* Autor URI: https://www.wpbeginner.com
* Licencja: GPL-2.0+
* URI licencji: 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');
Ta funkcja php po prostu dodaje plik JavaScript do front-end Twojej witryny.
Śmiało i zapisz ten plik jako potwierdzam-wyjeżdżam.php wewnątrz głównego folderu confirm-leaving.
Teraz musimy utworzyć plik JavaScript, który Ta wtyczka ładuje.
Utwórz nowy plik i wklej ten kod do niego:
jQuery (dokument).ready (function ($) {
$(dokument).ready (function () {
needToConfirm = false;
okno.onbeforeunload = askConfirm;
});
function askConfirm () {
if (needToConfirm) {
// Umieść tutaj swoją niestandardową wiadomość
return " Twoje niezapisane dane zostaną utracone.";
}
}
$("#commentform").change (function () {
needToConfirm = true;
});
})
Ten kod JavaScript wykrywa, czy użytkownik nie zapisał niezapisanych zmian w formularzu komentarza. Jeśli użytkownik spróbuje opuścić stronę lub zamknąć okno, pojawi się wyskakujące okienko z ostrzeżeniem.
Musisz zapisać ten plik jako potwierdzam-wyjeżdżam.js wewnątrz folderu js.
Po zapisaniu obu plików tak powinna wyglądać struktura folderów:
Teraz musisz połączyć się z witryną WordPress za pomocą klienta FTP. Zobacz nasz przewodnik, jak używać FTP do przesyłania plików WordPress.
Po podłączeniu musisz przesłać confirm-leaving folder do / wp-contents / wtyczki/ folder na twojej stronie.
Następnie musisz zalogować się do obszaru administracyjnego WordPress i odwiedzić stronę wtyczek. Znajdź wtyczkę „Potwierdź opuszczenie” na liście zainstalowanych wtyczek i kliknij link „Aktywuj” pod nią.
To wszystko. Możesz teraz odwiedzić dowolny post na swojej stronie, napisać tekst w dowolnym polu formularza komentarza, a następnie spróbować opuścić stronę bez przesyłania. Pojawi się wyskakujące okienko z ostrzeżeniem, że za chwilę opuścisz stronę z niezapisanymi zmianami.
Dodawanie Ostrzeżenia do innych formularzy w WordPress
Możesz użyć tej samej podstawy kodu do kierowania dowolnych formularzy w witrynie WordPress. Tutaj pokażemy Ci przykład wykorzystania go do kierowania formularza kontaktowego.
W tym przykładzie używamy wtyczki WPForms do utworzenia formularza kontaktowego. Instrukcje będą takie same, jeśli korzystasz z innej wtyczki formularza kontaktowego na swojej stronie internetowej.
Przejdź do strony, na której dodałeś formularz kontaktowy. Najedź myszką na pierwsze pole formularza kontaktowego, kliknij prawym przyciskiem myszy, a następnie wybierz Inspect z menu przeglądarki.
Znajdź linię zaczynającą się od < form> tag. W znaczniku formularza znajdziesz atrybut ID.
W tym przykładzie identyfikator naszego formularza to wpforms-form-170. Musisz skopiować atrybut ID.
Teraz edytuj potwierdzam-wyjeżdżam.js pliku i dodać atrybut ID po # commentform.
Upewnij się, że się rozdzielisz # commentform i identyfikator formularza z przecinkiem. Będziesz także musiał dodać # podpisz jako prefiks do atrybutu id formularza.
Twój kod będzie teraz wyglądał tak:
jQuery (dokument).ready (function ($) {
$(dokument).ready (function () {
needToConfirm = false;
okno.onbeforeunload = askConfirm;
});
function askConfirm () {
if (needToConfirm) {
// Umieść tutaj swoją niestandardową wiadomość
return " Twoje niezapisane dane zostaną utracone.";
}
}
$("#commentform,#wpforms-form-170").change (function () {
needToConfirm = true;
});
})
Zapisz zmiany i prześlij plik z powrotem na swoją stronę.
Teraz możesz wprowadzić dowolny tekst w dowolnym polu formularza kontaktowego, a następnie spróbować opuścić stronę bez przesyłania formularza. Pojawi się okienko z ostrzeżeniem o niezapisanych zmianach.
Możesz pobrać wtyczkę confirm-leaving tutaj. Jest skierowany tylko do formularza komentarza, ale możesz edytować wtyczkę, aby kierować ją na inne formularze.
To wszystko, mamy nadzieję, że ten artykuł pomógł Ci pokazać potwierdzenie nawigacji dla formularzy WordPress. Możesz również spróbować swoich sił w tych najlepszych samouczkach jQuery 8 dla początkujących WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
