Mbyllja aksidentale e një faqe pa paraqitur formularin tuaj gjysmë të mbushur është e bezdisshme. Kohët e fundit, një nga përdoruesit tanë na pyeti nëse ishte e mundur të shfaqet një dritare pop-up që konfirmon veprimin e përdoruesit në formularë? Ky përdorues i vogël dhe i vogël i paralajmërimit i parandalon ata nga mbyllja aksidentale e faqeve me formularë gjysmë të mbushur.

Në këtë tutorial, ne do t'ju tregojmë se si të shfaqni një dritare konfirmimi të veprimit të ngushtë për format tuaja. blog WordPress.

konfirmimi i mbylljes së një dritare në WordPress

Çfarë është një dritare e konfirmimit të shfletimit

Supozoni se një përdorues po shkruan një koment në blogun tuaj. ai tashmë ka shkruar një numër të mirë të rreshtave, por ata shpërqendrohen dhe harrojnë të paraqesin komentin. Tani, duke klikuar në një lidhje për shembull, e gjithë përmbajtja që ai ka filluar të shkruajë do të humbasë.

Konfirmimi i shfletimit u jep atyre një shans për të përfunduar komentin e tyre.

Ju mund ta shihni këtë veçori nga ndërfaqja e redaktuesit të artikullit / faqes. Nëse keni ndonjë ndryshim të pashpëtuar dhe përpiqeni të dilni nga faqja ose të mbyllni shfletuesin, atëherë do të shihni një paralajmërim pop-up.

Le të shohim se si mund ta shtojmë këtë veçori paralajmëruese në komentet e WordPress dhe forma të tjera në blogun tuaj.

Si të shfaqni një popup konfirmimi në formularët e padërguar në WordPress

Për këtë tutorial, ne do të krijoni një plugin me porosiNe ju kemi treguar tashmë se si të krijoni një plugin WordPress shpejt.

Le të fillojë.

Së pari ju duhet të krijoni një dosje të re në kompjuterin tuaj dhe ta emërtoni atë "veprim-konfirmo". Në këtë dosje duhet të krijoni një dosje tjetër dhe ta emërtoni atë js.

Tani hapni një redaktues teksti si Notepad dhe krijoni një skedar të ri. Brenda, thjesht ngjisni kodin e mëposhtëm:

<?php
/**
 * Confirmer Action
 * Plugin Name: Confirmer Action
 * Plugin URI:  https://blogpascher.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:      VotreNOM
 * Author URI:  https://blogpascher.com
 * License:     GPL-2.0+
 * License URI: 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');

Ky funksion php thjesht shton një skedar javascript në pjesën e përparme të faqes tuaj të internetit.

Shkoni përpara dhe ruani këtë skedar si "veprim-konfirmo".php" në dosje të konfirmuar veprimin "(Rrënja e shtojcës suaj).

Tani duhet të krijojmë skedarin JavaScript që do të ngarkojë kjo shtojcë. Krijoni një skedar të ri dhe ngjisni këtë kod brenda:

jQuery (dokument) .ready (function ($) {$ (dokument) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); Funksioni askConfirm () {në qoftë se (needToConfirm) {// Put tuaj ndryshoni mesazhin (funksion () {needToConfirm = true;});}) ("# commentform").

Riemërtoni këtë skedar Confirm-leaving.js", Zhvendoseni në" nën-dosje " js "Nga" të konfirmuar veprimin".

Ky kod JavaScript zbulon nëse përdoruesi ka ndryshime të ruajtura në formën e komenteve. Nëse përdoruesi përpiqet të dalë nga faqja, ata do të shfaqin një paralajmërim pop-up.

E tëra çfarë ju duhet të bëni tani është të ngarkoni skedarin tuaj në serverin tuaj duke përdorur klientin tuaj FTP preferuarat. Pas kësaj, gjithçka që duhet të bësh është të aktivizosh shtojcën nga kroskoti.

konfirmoni veprim WordPress plugin

Kjo eshte e gjitha. Tani mund të vizitoni një artikull në faqen tuaj të internetit, të përpiqeni të shkruani një koment, pastaj të klikoni në një lidhje, do të vini re një popup të ngjashëm me këtë.

konfirmimi i mbylljes së demo

Shtimi i paralajmërimit në format e tjera WordPress

Ju mund të përdorni të njëjtin kod për të synuar të gjitha format në faqen tuaj të WordPress. Këtu do t'ju tregojmë një shembull në a formularin e kontaktit.

Në këtë shembull, ne përdorim plugin WPForms për të krijuar një formularin e kontaktit. Udhëzimet do të jenë të njëjta nëse përdorni një tjetër plugin për formularin e kontaktit në faqen tuaj.

Shkoni te faqja ku keni shtuar formularin e kontaktit. Lëvizni miun mbi fushën e parë në formularin tuaj të kontaktit, kliko me të djathtën dhe më pas zgjidhni " inspektoj“, Për të hyrë në kodin burimor.

rimëkëmbja e kodit nga fusha e tekstit WordPress

Shiko për vijën që fillon me etiketën <form>. Në etiketën e formës do të gjeni atributin ID. Në këtë shembull, ID-ja e formularit tonë është formulaire . Ju duhet të kopjoni atributin ID.

Tani, modifikoni confirmer-leaving.js skedari dhe shtoni atributin ID pas " #commentform Ndahet nga presje.

Kodi juaj duhet të duket si ky:

jQuery (dokument) .ready (function ($) {$ (dokument) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); Funksioni askConfirm () {në qoftë se (needToConfirm) {// Put tuaj custom mesazh këtu kthehen "të dhënat tuaja unsaved do të humbet. ';}} $ (" # që komentet formë # ") shkëmbimit (funksion () {needToConfirm = e vërtetë;}).})

Ruaj ndryshimet dhe instaloni plugin tuaj në blogun tuaj WordPress.

Kjo është ajo për këtë tutorial. Shpresoj se ju ndihmon të shtoni një dritare konfirmimi pop-up në blogun tuaj. Mos hezitoni të bëni pyetje nëse nuk kuptoni një pikë.