Kā parādīt WordPress apstiprināšanas uznirstošo logu

/

Ja nejauši aizverat lapu, neiesniedzot komentāru vai izmantojot pusi aizpildītu formu, tas ir kaitinošs. Nesen viens no mūsu lietotājiem jautāja, vai ir iespējams parādīt saviem lasītājiem apstiprinātu navigācijas uznirstošo logu? Šis mazais, uznirstošais uznirstošais brīdina lietotājus un neļauj tiem nejauši atstāt pusi aizpildītu un neiesniegtu formu. Šajā rakstā mēs parādīsim, kā parādīt apstiprināšanas navigācijas uznirstošo logu WordPress formām.

Apstipriniet navigācijas uznirstošo logu, kad lietotājs atstāj veidlapu neiesniegtu

Kas ir apstiprināšanas uznirstošais logs?

Pieņemsim, ka lietotājs raksta komentāru jūsu blogā. Viņi jau ir uzrakstījuši diezgan daudz rindu, taču viņi apjucas un aizmirst iesniegt komentārus. Ja viņi aizvēra pārlūkprogrammu, komentārs tiks zaudēts.

Apstiprināšanas navigācijas uznirstošais logs dod viņiem iespēju pabeigt komentāru.

Šo funkciju darbībā var redzēt WordPress ziņu redaktora ekrānā. Ja jums ir nesaglabātas izmaiņas un mēģināt atstāt lapu vai aizvērt pārlūkprogrammu, tiks parādīts brīdinājuma uznirstošais logs.

Nesaglabāto izmaiņu brīdinājuma uznirstošais logs WordPress ziņu redaktorā

Apskatīsim, kā mēs varam pievienot šo brīdināšanas funkciju WordPress komentāriem un citām formām jūsu vietnē.

Rādam WordPress uznirstošo logu

Šajā apmācībā mēs izveidosim pielāgotu spraudni, taču neuztraucieties, ka šīs apmācības beigās varat arī lejupielādēt spraudni, lai instalētu to savā vietnē.

Tomēr, lai labāk izprastu kodu, mēs lūgsim mēģināt izveidot savu spraudni. Vispirms to varat izdarīt vietējā instalācijā vai pieturvietā.

Sāksim.

Vispirms jums datorā jāizveido jauna mape un jānosauc tā apstiprināšana. Apstiprināšanas aiziešanas mapē ir jāizveido cita mape un jānosauc tā js.

Tagad atveriet vienkārša teksta redaktoru, piemēram, Notepad, un izveidojiet jaunu failu. Iekšpusē vienkārši ielīmējiet šo kodu:

<?php
/**
 * Confirm Leaving 
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://www.example.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:      WP
 * Author URI:  https://www.example.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'); 

Šī php funkcija vienkārši pievieno JavaScript failu jūsu vietnes sākumam.

Ejiet uz priekšu un saglabājiet šo failu kā apstiprināšanas aiziešanas.php galvenajā apstiprināšanas aiziešanas mapē.

Tagad mums ir jāizveido JavaScript fails, kuru ielādē šis spraudnis.

Izveidojiet jaunu failu un ielīmējiet tajā šo kodu:

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;
    });
})

Šis JavaScript kods nosaka, vai lietotājam ir nesaglabātas izmaiņas komentāru formā. Ja lietotājs mēģina virzīties prom no lapas vai aizvērt logu, tas parādīs brīdinājuma uznirstošo logu.

Šis fails js mapē js jāsaglabā kā Confirm-leave.js.

Pēc abu failu saglabāšanas jūsu mapes struktūrai vajadzētu izskatīties šādi:

Spraudņa faila struktūra

Tagad jums ir jāizveido savienojums ar savu WordPress vietni, izmantojot FTP klientu. Skatiet mūsu ceļvedi par to, kā izmantot FTP, lai augšupielādētu WordPress failus.

Kad esat izveidojis savienojumu, jums ir jāaugšupielādē apstiprināšanas mape jūsu vietnē / wp-content / plugins / mapē jūsu vietnē.

Spraudņu failu augšupielāde jūsu WordPress vietnē

Pēc tam jums jāpiesakās WordPress administratora apgabalā un jāapmeklē spraudņu lapa. Instalēto spraudņu sarakstā atrodiet spraudni “Apstiprināt atstājot” un zem tā noklikšķiniet uz saites “aktivizēt”.

Aktivizēt spraudni

Tas ir viss. Tagad jūs varat apmeklēt jebkuru ierakstu savā vietnē, ierakstīt tekstu jebkurā komentāra formas laukā un pēc tam mēģināt atstāt lapu, neiesniedzot. Parādīsies uznirstošais logs, kas brīdinās, ka jūs gatavojaties pamest lapu ar nesaglabātām izmaiņām.

uznirstošais paziņojums brīdina lietotāju par nesaglabātām izmaiņām

Brīdinājuma pievienošana citās WordPress formās

Varat izmantot to pašu kodu bāzi, lai mērķētu uz jebkurām formām savā WordPress vietnē. Šeit mēs parādīsim piemēru, kā to izmantot, lai atlasītu kontakta formu.

Šajā piemērā mēs izmantojam spraudni WPForms, lai izveidotu kontaktu formu. Norādījumi būs vienādi, ja savā vietnē izmantojat citu kontaktformas spraudni.

Pārejiet uz lapu, kurā esat pievienojis savu kontaktu formu. Virziet peli uz kontaktu formas pirmo lauku, ar peles labo pogu noklikšķiniet un pēc tam pārlūka izvēlnē atlasiet Pārbaudīt.

Veidlapas ID atrašana

Atrodiet līniju, kas sākas ar tagu <form>. Formas tagā atradīsit atribūtu ID.

Šajā piemērā mūsu formas ID ir wpforms-form-170. Jums ir jākopē ID atribūts.

Tagad rediģējiet failu Confirm-leave.js un pēc #commentform pievienojiet ID atribūtu.

Noteikti atdaliet `#commentformun formas ID ar komatu. Formas ID atribūtam būs jāpievieno arī#` zīme kā prefikss.

Jūsu kods tagad izskatīsies šādi:

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;
    });
})

Saglabājiet izmaiņas un augšupielādējiet failu atpakaļ savā vietnē.

Tagad jūs varat ievadīt jebkuru tekstu jebkurā kontaktpersonas formas laukā un pēc tam mēģināt atstāt lapu, neiesniedzot formu. Parādīsies uznirstošais logs ar brīdinājumu, ka jums ir nesaglabātas izmaiņas.

Apstiprināšanas aiziešanas spraudni varat lejupielādēt šeit. Tā mērķauditorija ir tikai komentāru forma, taču varat rediģēt spraudni, lai atlasītu citas formas.

Tas ir viss, mēs ceram, ka šis raksts palīdzēja jums parādīt apstiprinošu WordPress formu navigācijas uznirstošo logu. Varat arī izmēģināt savus spēkus šajās 8 labākajās jQuery apmācībās WordPress iesācējiem.

Nepieciešāma palidzība ar WordPress? Sazinieties tagad
[email protected]

Tā ir oriģinālās publikācijas wpbeginner tulkojums, viss tā saturs, bildes un autortiesības pieder to autoriem

Kā izslēgt RSS WordPress

Vai vēlaties izslēgt RSS plūsmas savā WordPress vietnē? RSS plūsmas ļauj lietotājiem abonēt jūsu bloga ziņas. Tomēr, veidojot nelielas statiskas vietnes, ieteicams izslēgt RSS plūsmas. Pēc noklusējuma WordPress nav iespēju noņemt RSS plūsmas.

Kā izveidot Etsy līdzīgu veikalu ar WordPress (soli pa solim)

Vai vēlaties izveidot Etsy līdzīgu veikalu ar WordPress? Etsy ir tiešsaistes tirgus vieta radošiem ļaudīm, kuri vēlas pārdot ar rokām darinātas preces, mākslas darbus un citas unikālas lietas. Tomēr tas ir nedaudz ierobežots attiecībā uz to, ko

Kā augšupielādēt HTML lapu WordPress bez 404 kļūdām

Vai vēlaties augšupielādēt HTML lapu savā WordPress vietnē? Dažreiz jums var būt nepieciešams pievienot statisku HTML lapu un padarīt to pieejamu kopā ar jūsu WordPress vietni. Šajā rakstā mēs parādīsim, kā pareizi augšupielādēt HTML lapu

Kā pievienot virsraksta atribūtu WordPress navigācijas izvēlnēs

Nesen viens no mūsu lasītājiem jautāja, vai WordPress izvēlnēs ir veids, kā pievienot nosaukuma atribūtu? Nosaukuma atribūts ļauj sniegt papildu informāciju par saiti. Kad pele pārvietojas virs saites, tas bieži tiek parādīts kā rīka padoma teksts.