การปิดหน้าโดยไม่ได้ตั้งใจโดยไม่ส่งแบบฟอร์มครึ่งหน้าของคุณเป็นเรื่องที่น่ารำคาญ เมื่อเร็ว ๆ นี้ผู้ใช้คนหนึ่งของเราถามเราว่าเป็นไปได้ไหมที่จะแสดงหน้าต่างป๊อปอัปที่ยืนยันการดำเนินการของผู้ใช้ในแบบฟอร์ม? ผู้ใช้เล็ก ๆ น้อย ๆ ที่แจ้งเตือนและป้องกันไม่ให้พวกเขาปิดหน้าโดยไม่ได้ตั้งใจด้วยแบบฟอร์มที่เติมครึ่งหนึ่ง

ในบทช่วยสอนนี้ เราจะแสดงวิธีแสดงหน้าต่างยืนยันการดำเนินการปิดสำหรับแบบฟอร์มของคุณ บล็อก WordPress.

ป๊อปอัปยืนยันการท่องเว็บคืออะไร

สมมติว่าผู้ใช้กำลังเขียนความคิดเห็นในบล็อกของคุณ เขาเขียนมาหลายบรรทัดแล้ว แต่พวกเขาเสียสมาธิและลืมส่งความคิดเห็น ตอนนี้เมื่อคลิกที่ลิงค์ตัวอย่างเช่นเนื้อหาทั้งหมดที่เขาได้เริ่มเขียนจะหายไป

การยืนยันการเรียกดูทำให้พวกเขามีโอกาสแสดงความคิดเห็น

คุณสามารถดูคุณสมบัตินี้ได้จากอินเทอร์เฟซตัวแก้ไขบทความ / เพจ หากคุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึกและพยายามออกจากหน้าหรือปิดเบราว์เซอร์คุณจะเห็นคำเตือนป๊อปอัป

มาดูกันว่าเราจะเพิ่มคุณลักษณะคำเตือนนี้ในความคิดเห็น WordPress และแบบฟอร์มอื่น ๆ ในบล็อกของคุณได้อย่างไร

วิธีแสดงป๊อปอัปการยืนยันในแบบฟอร์มที่ไม่ได้ส่งใน WordPress

สำหรับการกวดวิชานี้เราจะ สร้างปลั๊กอินที่กำหนดเอง. เราได้แสดงให้คุณเห็นถึงวิธีการสร้าง WordPress ปลั๊กอิน อย่างรวดเร็ว

ขอเริ่มต้น

ก่อนอื่นคุณต้องสร้างโฟลเดอร์ใหม่ในคอมพิวเตอร์ของคุณและตั้งชื่อว่า "ยืนยันการดำเนินการ" ในโฟลเดอร์นี้คุณต้องสร้างโฟลเดอร์อื่นและตั้งชื่อว่า js

ตอนนี้เปิดโปรแกรมแก้ไขข้อความเช่น Notepad และสร้างไฟล์ใหม่ ด้านในให้วางรหัสต่อไปนี้:

<?php
/**
 * ยืนยันการดำเนินการ
 * ชื่อปลั๊กอิน: ยืนยันการดำเนินการ
 * URI ปลั๊กอิน: https://blogpascher.com
 * คำอธิบาย: ปลั๊กอินนี้แสดงคำเตือนแก่ผู้ใช้เมื่อพยายามลืมกดปุ่มส่งในแบบฟอร์มแสดงความคิดเห็น
 * เวอร์ชัน: 1.0.0
 * ผู้แต่ง: YourNAME
 * URI ผู้เขียน: https://blogpascher.com
 * ใบอนุญาต: GPL-2.0+
 * URI ใบอนุญาต: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
ฟังก์ชั่น bpc_confirm_leaving_js() {

     wp_enqueue_script( 'ยืนยันการออกจาก', Plugins_url( 'js/confirm-leaving.js', __FILE__ ), อาร์เรย์('jquery'), '1.0.0', จริง );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

ฟังก์ชัน php นี้เพียงแค่เพิ่มไฟล์ JavaScript ที่ส่วนหน้าของเว็บไซต์ของคุณ

ดำเนินการต่อและบันทึกไฟล์นี้เป็น "การยืนยันการดำเนินการ.php" ในโฟลเดอร์ ยืนยันการดำเนินการ "(รูทของปลั๊กอินของคุณ)

ตอนนี้เราต้องสร้างไฟล์ JavaScript ที่ปลั๊กอินนี้จะโหลด สร้างไฟล์ใหม่และวางรหัสนี้ภายใน:

jQuery (เอกสาร) .ready (ฟังก์ชั่น ($) {$ (เอกสาร) .ready (ฟังก์ชั่น () {needToConfirm = false; window.onbeforeunload = askConfirm;}); ฟังก์ชั่น askConfirm () {if (needToConfirm) {// ใส่ของคุณ ข้อความที่กำหนดเองที่นี่กลับ "ไม่ได้บันทึกข้อมูลของคุณจะหายไป.";}} $ ( "# CommentForm") อัตราแลกเปลี่ยน (ฟังก์ชั่น () {needToConfirm = true;}).})

เปลี่ยนชื่อไฟล์นี้ ยืนยัน-leaving.js", ย้ายไปที่" โฟลเดอร์ย่อย " js "ของ" ยืนยันการดำเนินการ".

รหัส JavaScript นี้ตรวจพบว่าผู้ใช้มีการเปลี่ยนแปลงที่ยังไม่ได้บันทึกในแบบฟอร์มความคิดเห็นหรือไม่ หากผู้ใช้พยายามออกจากเพจผู้ใช้จะแสดงคำเตือนป๊อปอัป

สิ่งที่คุณต้องทำตอนนี้คืออัปโหลดไฟล์ของคุณไปยังเซิร์ฟเวอร์ของคุณโดยใช้ไคลเอนต์ของคุณ รายการโปรด FTP หลังจากนั้นสิ่งที่คุณต้องทำคือเปิดใช้งานปลั๊กอินจากแดชบอร์ดของคุณ

นั่นคือทั้งหมด ตอนนี้คุณสามารถเยี่ยมชมบทความบนเว็บไซต์ของคุณได้แล้วลองเขียนความคิดเห็นจากนั้นคลิกที่ลิงค์คุณจะสังเกตเห็นป๊อปอัปคล้ายกับบทความนี้

เพิ่มเติมคำเตือนในรูปแบบ WordPress อื่น ๆ

คุณสามารถใช้รหัสเดียวกันเพื่อกำหนดเป้าหมายรูปแบบทั้งหมดบนไซต์ WordPress ของคุณได้ ที่นี่เราจะแสดงตัวอย่างเกี่ยวกับ แบบฟอร์มติดต่อ.

ในตัวอย่างนี้เราใช้ปลั๊กอิน WPForms เพื่อสร้าง แบบฟอร์มติดต่อ. คำแนะนำจะเหมือนกันหากคุณใช้อย่างอื่น ปลั๊กอินแบบฟอร์มการติดต่อ บนเว็บไซต์ของคุณ

ไปที่หน้าที่คุณเพิ่มของคุณ แบบฟอร์มติดต่อ. เลื่อนเมาส์ไปเหนือช่องแรกในแบบฟอร์มติดต่อของคุณ คลิกขวา จากนั้นเลือก " ตรวจ“ ในการเข้าถึงซอร์สโค้ด

หาบรรทัดที่ขึ้นต้นด้วยแท็ก <form>. ในแท็กแบบฟอร์มคุณจะพบแอตทริบิวต์ ID ในตัวอย่างนี้ ID ของแบบฟอร์มของเราคือ formulaire . คุณต้องคัดลอกแอตทริบิวต์ ID

ตอนนี้แก้ไข confirmer-leaving.js ไฟล์และเพิ่มแอตทริบิวต์ ID หลัง " #commentform คั่นด้วยเครื่องหมายจุลภาค

รหัสของคุณควรมีลักษณะเช่นนี้:

jQuery (เอกสาร) .ready (ฟังก์ชั่น ($) {$ (เอกสาร) .ready (ฟังก์ชั่น () {needToConfirm = false; window.onbeforeunload = askConfirm;}); ฟังก์ชั่น askConfirm () {if (needToConfirm) {// ใส่ของคุณ ข้อความที่กำหนดเองที่นี่กลับ "ไม่ได้บันทึกข้อมูลของคุณจะหายไป.";}} $ ( "# CommentForm รูปแบบ #") อัตราแลกเปลี่ยน (ฟังก์ชั่น () {needToConfirm = true;}).})

บันทึกการเปลี่ยนแปลงและ ติดตั้งปลั๊กอินของคุณบนบล็อกของคุณ WordPress.

สำหรับบทช่วยสอนนี้ หวังว่าจะช่วยเพิ่มหน้าต่างยืนยันป๊อปอัปในบล็อกของคุณ อย่าลังเลที่จะถามคำถามหากคุณไม่เข้าใจประเด็น