Vô tình đóng một trang mà không gửi biểu mẫu đã điền một nửa của bạn thật khó chịu. Gần đây, một trong những người dùng của chúng tôi đã hỏi chúng tôi rằng liệu có thể hiển thị cửa sổ bật lên xác nhận hành động của người dùng trên biểu mẫu không? Điều này giúp cảnh báo người dùng và ngăn họ vô tình đóng các trang có biểu mẫu đã điền một nửa.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách hiển thị cửa sổ xác nhận hành động đóng cho các biểu mẫu của bạn. blog WordPress.

Cửa sổ bật lên xác nhận duyệt web là gì

Giả sử một người dùng đang viết bình luận trên blog của bạn. anh ấy đã viết rất nhiều dòng, nhưng họ bị phân tâm và quên gửi bình luận. Bây giờ, bằng cách nhấp vào một liên kết chẳng hạn, tất cả nội dung mà anh ta đã bắt đầu viết sẽ bị mất.

Xác nhận duyệt giúp họ có cơ hội hoàn thành nhận xét của mình.

Bạn có thể thấy tính năng này từ giao diện biên tập bài viết / trang. Nếu bạn có bất kỳ thay đổi nào chưa được lưu và bạn cố gắng thoát khỏi trang hoặc đóng trình duyệt, thì bạn sẽ thấy một cảnh báo bật lên.

Hãy xem cách chúng tôi có thể thêm tính năng cảnh báo này trên các nhận xét WordPress và các biểu mẫu khác trên blog của bạn.

Cách hiển thị cửa sổ bật lên xác nhận trên các biểu mẫu chưa được gửi trong WordPress

Đối với hướng dẫn này, chúng tôi sẽ tạo một plugin tùy chỉnh. Chúng tôi đã chỉ cho bạn cách tạo Plugin WordPress một cách nhanh chóng.

Chúng ta hãy bắt đầu.

Trước tiên, bạn cần tạo một thư mục mới trên máy tính của mình và đặt tên là "xác nhận hành động". Trong thư mục này bạn cần tạo một thư mục khác và đặt tên là js.

Bây giờ, hãy mở một trình soạn thảo văn bản như Notepad và tạo một tệp mới. Bên trong, chỉ cần dán mã sau:

<?php
/**
 * Xác nhận hành động
 * Tên plugin: Xác nhận hành động
 * URI plugin: https://blogpascher.com
 * Mô tả: Plugin này hiển thị cảnh báo cho người dùng khi họ quên nhấn nút gửi trên biểu mẫu nhận xét.
 * Phiên bản: 1.0.0
 * Tác giả: YourNAME
 * URI tác giả: https://blogpascher.com
 * Giấy phép: GPL-2.0+
 * URI giấy phép: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
hàm bpc_confirm_leave_js() {

     wp_enqueue_script( 'Xác nhận rời khỏi', plugin_url( 'js/confirm-leave.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leave_js');

Hàm php này chỉ đơn giản là thêm một tệp JavaScript vào giao diện người dùng của trang web của bạn.

Hãy tiếp tục và lưu tệp này dưới dạng "xác nhận hành động.php" trong thư mục xác nhận hành động "(Root plugin của bạn).

Bây giờ chúng ta cần tạo tệp JavaScript mà plugin này sẽ tải. Tạo một tệp mới và dán mã này vào bên trong:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); chức năng askConfirm () {if (needToConfirm) {// Đặt của bạn () () () () () () () () () Đây là thông báo mặc định cho người dùng.

Đổi tên tập tin này xác nhận-leaving.js", Di chuyển nó vào" thư mục con " js »Từ« xác nhận hành động".

Mã JavaScript này phát hiện nếu người dùng có các thay đổi chưa được lưu trong biểu mẫu nhận xét. Nếu người dùng cố gắng thoát khỏi trang, họ sẽ hiển thị cảnh báo bật lên.

Tất cả những gì bạn phải làm bây giờ là tải tệp của bạn lên máy chủ bằng ứng dụng khách của bạn FTP yêu thích. Sau đó, tất cả những gì bạn phải làm là kích hoạt plugin từ trang tổng quan của mình.

Đó là tất cả. Bây giờ bạn có thể truy cập một bài báo trên trang web của mình, thử viết bình luận sau đó nhấp vào một liên kết, bạn sẽ thấy một cửa sổ bật lên tương tự như bài viết này.

Bổ sung cảnh báo trên các biểu mẫu WordPress khác

Bạn có thể sử dụng cùng một mã để nhắm mục tiêu tất cả các biểu mẫu trên trang web WordPress của mình. Ở đây chúng tôi sẽ cho bạn thấy một ví dụ về một Mẫu liên hệ.

Trong ví dụ này, chúng tôi sử dụng plugin WPForms để tạo ra một Mẫu liên hệ. Các hướng dẫn sẽ giống nhau nếu bạn sử dụng khác plugin cho mẫu liên hệ trên trang web của bạn.

Đi tới trang nơi bạn đã thêm Mẫu liên hệ. Di chuyển chuột qua trường đầu tiên trong biểu mẫu liên hệ của bạn, nhấp chuột phải, sau đó chọn “ thanh tra“, Để truy cập mã nguồn.

Tìm dòng bắt đầu bằng thẻ <form>. Trong thẻ biểu mẫu, bạn sẽ tìm thấy thuộc tính ID. Trong ví dụ này, ID của biểu mẫu của chúng tôi là formulaire . Bạn phải sao chép thuộc tính ID.

Bây giờ, chỉnh sửa confirmer-leaving.js và thêm thuộc tính ID sau " #commentform Phân tách bằng dấu phẩy.

Mã của bạn sẽ trông như thế này:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); chức năng askConfirm () {if (needToConfirm) {// Đặt của bạn hàm custom () () (needToConfirm = true;});})

Lưu thay đổi của bạn và cài đặt plugin của bạn trên blog WordPress của bạn.

Đó là nó cho hướng dẫn này. Hy vọng nó sẽ giúp bạn thêm cửa sổ xác nhận bật lên vào blog của mình. Đừng ngần ngại đặt câu hỏi nếu bạn không hiểu một điểm nào đó.