Slučajno zatvaranje stranice bez slanja napola ispunjenog obrasca smeta. Nedavno nas je jedan od naših korisnika pitao je li moguće prikazati skočni prozor koji potvrđuje radnju korisnika na obrascima? Ovaj maleni mali upozoravajući korisnik sprječava ih da slučajno zatvore stranice s napola ispunjenim obrascima.

U ovom vodiču ćemo vam pokazati kako prikazati prozor za potvrdu radnje zatvaranja za vaše obrasce. WordPress blog.

Što je skočni prozor za potvrdu pregledavanja

Pretpostavimo da korisnik piše komentar na vašem blogu. već je napisao puno redaka, ali oni se odvuku i zaborave poslati komentar. Klikom na vezu, na primjer, izgubit će se sav sadržaj koji je počeo pisati.

Potvrda pregledavanja daje im priliku da dovrše svoj komentar.

Ovu značajku možete vidjeti na sučelju uređivača članaka / stranica. Ako imate nespremljene promjene i pokušate izaći iz stranice ili zatvoriti preglednik, vidjet ćete skočno upozorenje.

Pogledajmo kako možemo dodati ovu značajku upozorenja u WordPress komentare i druge obrasce na vašem blogu.

Kako prikazati skočni prozor za potvrdu na nepodnesenim obrascima u WordPressu

Za ovaj tutorial, mi ćemo stvorite prilagođeni dodatak. Već smo vam pokazali kako stvoriti a WordPress plugin brzo.

Počnimo.

Prvo morate stvoriti novu mapu na računalu i nazvati je "potvrdna radnja". U ovoj mapi morate stvoriti drugu mapu i nazvati je js.

Sada otvorite uređivač teksta kao što je Notepad i stvorite novu datoteku. U nju samo zalijepite sljedeći kod:

<?php
/**
 * Potvrdi radnju
 * Naziv dodatka: Potvrdi radnju
 * URI dodatka: https://blogpascher.com
 * Opis: ovaj dodatak prikazuje upozorenje korisnicima kada pokušaju zaboraviti pritisnuti gumb za slanje na obrascu za komentare.
 * Verzija: 1.0.0
 * Autor: Vaše IME
 * URI autora: https://blogpascher.com
 * Licenca: GPL-2.0+
 * URI licence: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
funkcija bpc_confirm_leaving_js() {

     wp_enqueue_script( 'Potvrdi napuštanje', plugins_url( 'js/confirm-leaving.js', __FILE__), array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Ova php funkcija jednostavno dodaje JavaScript datoteku na prednji kraj vašeg web mjesta.

Samo naprijed i spremite ovu datoteku kao "potvrdna radnja.php" u mapi potvrdu akcije "(Korijen vašeg dodatka).

Sada moramo stvoriti JavaScript datoteku koju će učitati ovaj dodatak. Stvorite novu datoteku i zalijepite ovaj kod unutra:

jQuery (document) .ready (funkcija ($) {$ (document) .ready (funkcija () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkcija askConfirm () {if (needToConfirm) {// Stavite promjena poruke (function () {needToConfirm = true;});}) ("# commentform").

Preimenujte ovu datoteku potvrdili-leaving.js", Premjesti u" podmapu " js „Od” potvrdu akcije".

Ovaj JavaScript kod otkriva ima li korisnik nespremljene promjene u obrascu za komentare. Ako korisnik pokuša izaći sa stranice, prikazat će se skočno upozorenje.

Sve što sada trebate je prenijeti datoteku na poslužitelj pomoću klijenta Favoriti FTP-a. Nakon toga, sve što morate učiniti je aktivirati dodatak sa svoje nadzorne ploče.

To je sve. Sada možete posjetiti članak na svojoj web stranici, pokušati napisati komentar, a zatim kliknuti na vezu, primijetit ćete skočni prozor sličan ovom.

Dodavanje upozorenja na druge WordPress obrasce

Možete koristiti isti kod za ciljanje svih obrazaca na vašoj WordPress web stranici. Ovdje ćemo vam pokazati primjer na a kontakt obrazac.

U ovom primjeru upotrebljavamo dodatak WPForms stvoriti a kontakt obrazac. Upute će biti iste ako koristite neki drugi dodatak za kontakt obrazac na svoje stranice.

Idite na stranicu na koju ste dodali svoj kontakt obrazac. Prijeđite mišem preko prvog polja u obrascu za kontakt, kliknite desnom tipkom miša, zatim odaberite “ pregledati“, Za pristup izvornom kodu.

Potražite crta koja počinje oznakom <form>. U oznaci obrasca pronaći ćete atribut ID. U ovom primjeru ID našeg obrasca je formulaire . Morate kopirati atribut ID.

Sada uredite confirmer-leaving.js datoteku i dodajte atribut ID nakon " #commentform Odvojen zarezom.

Vaš kôd treba izgledati ovako:

jQuery (document) .ready (funkcija ($) {$ (document) .ready (funkcija () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkcija askConfirm () {if (needToConfirm) {// Stavite $ message ("# commentform, # form"). change (function () {needToConfirm = true;});})

Spremite promjene i instalirajte svoj dodatak na svoj WordPress blog.

To je sve za ovaj vodič. Nadam se da će vam pomoći da na svoj blog dodate skočni prozor za potvrdu. Ne ustručavajte se postavljati pitanja ako ne razumijete poantu.