Náhodné zavření stránky bez odeslání vyplněného formuláře je nepříjemné. Nedávno se nás jeden z našich uživatelů zeptal, zda je možné zobrazit vyskakovací okno, které potvrzuje akci uživatele na formulářích? Tento malý uživatel upozorňuje uživatele a brání jim v neúmyslném zavírání stránek s napůl vyplněnými formuláři.
V tomto tutoriálu vám ukážeme, jak zobrazit okno potvrzení zavření akce pro vaše formuláře. WordPress blog.
Co je vyskakovací okno s potvrzením procházení
Předpokládejme, že uživatel píše komentář k vašemu blogu. již napsal spoustu řádků, ale ty se rozptýlí a zapomenou odeslat komentář. Nyní například kliknutím na odkaz bude ztracen veškerý obsah, který začal psát.
Potvrzení procházení jim dává šanci dokončit svůj komentář.
Tuto funkci můžete vidět z rozhraní editoru článků / stránek. Pokud máte nějaké neuložené změny a pokusíte se stránku opustit nebo zavřít prohlížeč, zobrazí se vyskakovací upozornění.
Podívejme se, jak můžeme tuto varovnou funkci přidat do komentářů WordPress a dalších formulářů na váš blog.
Jak zobrazit vyskakovací okno s potvrzením na nevyplněných formulářích ve WordPressu
Pro tento tutoriál, budeme vytvořit vlastní plugin. Již jsme vám ukázali, jak vytvořit WordPress Plugin rychle.
Začněme.
Nejprve musíte ve svém počítači vytvořit novou složku a pojmenovat ji „Potvrdit akci“. V této složce musíte vytvořit jinou složku a pojmenovat ji js.
Nyní otevřete textový editor, jako je Poznámkový blok, a vytvořte nový soubor. Uvnitř stačí vložit následující kód:
<?php /** * Potvrďte akci * Název pluginu: Potvrďte akci * URI pluginu: https://blogpascher.com * Popis: Tento plugin zobrazuje uživatelům varování, když se pokusí zapomenout stisknout tlačítko Odeslat ve formuláři komentáře. * Verze: 1.0.0 * Autor: Vaše JMÉNO * URI autora: https://blogpascher.com * Licence: GPL-2.0+ * URI licence: http://www.gnu.org/licenses/gpl-2.0.txt */ function bpc_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', 'bpc_confirm_leaving_js');
Tato funkce php jednoduše přidá soubor javascript na přední část vašeho webu.
Pokračujte a uložte tento soubor jako „potvrzovací akci.php"
ve složce potvrzení akce "(Kořen vašeho pluginu).
Nyní musíme vytvořit soubor JavaScript, který tento plugin načte. Vytvořte nový soubor a vložte tento kód dovnitř:
jQuery (dokument) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkce askConfirm () {if (needToConfirm) {// Dejte si změna zprávy (funkce () {needToConfirm = true;});}) ("# commentform").
Přejmenujte tento soubor potvrdí-leaving.js", Přesuňte jej do" podsložky " js »Od« potvrzení akce".
Tento kód JavaScript zjistí, zda má uživatel ve formuláři komentářů neuložené změny. Pokud se uživatel pokusí stránku opustit, zobrazí se vyskakovací varování.
Vše, co musíte udělat, je nahrát soubor na server pomocí klienta oblíbené FTP. Poté už stačí pouze aktivovat plugin z palubní desky.
To je vše. Nyní můžete navštívit článek na svém webu, zkusit napsat komentář a poté kliknout na odkaz, všimnete si vyskakovacího okna podobného tomuto.
Přidání upozornění na jiné formuláře WordPress
Stejný kód můžete použít k cílení na všechny formuláře na vašem webu WordPress. Zde vám ukážeme příklad na a kontaktní formulář.
V tomto příkladu používáme plugin WPForms vytvořit kontaktní formulář. Pokyny budou stejné, pokud použijete jiný kontaktní formulář plugin na svých stránkách.
Přejděte na stránku, kam jste přidali svůj kontaktní formulář. Najeďte myší na první pole v kontaktním formuláři, klikněte pravým tlačítkem a vyberte „ prozkoumat“, Přístup ke zdrojovému kódu.
Najděte řádek, který začíná tagu <form>
. Ve značce formuláře najdete atribut ID. V tomto příkladu je ID našeho formuláře formulaire
. Musíte zkopírovat atribut ID.
Nyní upravte confirmer-leaving.js
soubor a přidejte atribut ID za " #commentform
Oddělena čárkou.
Váš kód by měl vypadat takto:
jQuery (dokument) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkce askConfirm () {if (needToConfirm) {// Dejte si Vlastní zpráva sem vrátit "Vaše neuložená data budou ztracena.";}} $ ( "# CommentForm, forma #") výměna (function () {needToConfirm = true;}).})
Uložte změny a nainstalovat plugin na svém blogu WordPress.
To je pro tento tutoriál vše. Doufám, že vám pomůže přidat do svého blogu vyskakovací potvrzovací okno. Pokud nerozumíte bodu, neváhejte se zeptat.
Dobrý den,
uzavření pouze php souboru není povinné (dokonce se to nedoporučuje).
CTRL + U zobrazíte zdrojový kód. V novém okně, které se zobrazí, vyhledejte kombinaci kláves CTRL + F a vyhledejte výraz „js / potvrdit-opustit.js“. Pokud máte výsledek, pak je problém s kódem javascript, jinak nebyl soubor správně zařazen do fronty.
Omlouvám se za zpoždění.
Přeji vám hezký den.
Dobrý den,
No, nefunguje to: Poslal jsem soubory na ftp a ... nic nového v mých příponách na palubní desce wp.
Není nutné přidat?> Na konci prvního souboru, souboru v .php?