Vô tình đóng một trang mà không gửi nhận xét của bạn hoặc với một mẫu điền đầy là gây phiền nhiễ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 liệu có thể hiển thị cho độc giả của họ một popup điều hướng xác nhận không? Những người dùng cảnh báo nhỏ này nhỏ bé và ngăn họ vô tình để lại một nửa mẫu đơn đầy và chưa gửi. Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách hiển thị popup điều hướng cho WordPress forms.
Xác nhận Navigation Popup là gì?
Giả sử một người dùng đang viết một bình luận trên blog của bạn. Họ đã viết khá một vài dòng, nhưng họ nhận được phân tâm và quên gửi bình luận. Bây giờ nếu họ đóng trình duyệt, thì nhận xét sẽ bị mất.
Xác nhận popup navigation cho phép họ có cơ hội để hoàn thành nhận xét của họ.
Bạn có thể thấy tính năng này đang hoạt động trong màn hình soạn thảo bài viết WordPress. Nếu bạn chưa lưu thay đổi, và bạn cố gắng để lại trang hoặc đóng trình duyệt, sau đó bạn sẽ thấy một cảnh báo popup.
Hãy xem cách chúng tôi có thể thêm tính năng cảnh báo này vào các nhận xét của WordPress và các biểu mẫu khác trên trang web của bạn.
Hiển thị popup Xác nhận điều hướng cho Mẫu chưa 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, nhưng đừng lo lắng bạn cũng có thể tải plugin về cuối hướng dẫn này để cài đặt trên trang web của bạn.
Tuy nhiên, để hiểu rõ hơn về mã, chúng tôi sẽ yêu cầu bạn thử tạo plugin của riêng bạn. Bạn có thể thực hiện việc này trên một cài đặt cục bộ hoặc một trang dàn dựng.
Băt đâu nao.
Đầu tiên bạn cần tạo một thư mục mới trên máy tính của bạn và đặt tên nó xác nhận-để lại . Trong thư mục xác nhận-đi, bạn cần phải tạo một thư mục khác và đặt tên là js.
Bây giờ mở một trình soạn thảo văn bản thuần như Notepad và tạo một tệp mới. Bên trong, chỉ cần dán đoạn mã sau:
Chức năng php này chỉ cần thêm một tệp JavaScript vào cuối trang của trang web của bạn.
Đi trước và lưu tệp này dưới dạng
confirm-left.phpbên trong thư mục chính xác nhận.Bây giờ chúng ta cần tạo tệp JavaScript mà plugin này đang tải.
Tạo một tệp tin mới và dán mã này bên trong nó:
jQuery (document) .ready (function ($) { $ (document) .ready (function () { needToConfirm = false; window.onbeforeunload = askConfirm; }); hàm askConfirm () { if (needToConfirm) { // Đặt thông điệp tùy chỉnh của bạn ở đây return "Dữ liệu chưa lưu của bạn sẽ bị mất"; } } $ ("# commentform") thay đổi (function () { needToConfirm = true; }); })Mã JavaScript này phát hiện nếu người dùng có các thay đổi chưa lưu trong mẫu nhận xét. Nếu người dùng cố di chuyển khỏi trang hoặc đóng cửa sổ, nó sẽ hiển thị một cảnh báo.
Bạn cần phải lưu tệp này dưới dạng
confirm-left.jsbên trong thư mục js.Sau khi lưu cả hai tệp, đây là cấu trúc thư mục của bạn sẽ trông như thế nào:
Bây giờ bạn cần phải kết nối với trang web WordPress của bạn bằng cách sử dụng một khách hàng FTP.
Sau khi kết nối, bạn cần phải tải lên
xác nhận-để lạithư mục để/ wp-contents / plugins /trên trang web của bạn.
Sau đó bạn cần phải đăng nhập vào khu vực quản trị WordPress và ghé thăm trang Plugins. Xác định vị trí plugin 'Confirm Leaving' trong danh sách các plugin được cài đặt và nhấp vào liên kết 'activate' bên dưới nó.
Đó là tất cả. Bây giờ bạn có thể truy cập bất kỳ bài đăng nào trên trang web của bạn, viết một số văn bản trong bất kỳ trường nào trong biểu mẫu nhận xét và sau đó thử rời khỏi trang mà không cần gửi. Một popup sẽ xuất hiện, cảnh báo bạn rằng bạn sắp để lại một trang với các thay đổi chưa lưu.
Thêm Cảnh báo cho các Form khác trong WordPress
Bạn có thể sử dụng cùng một cơ sở mã để nhắm mục tiêu bất kỳ mẫu nào trên trang WordPress của mình. Ở đây chúng tôi sẽ cho bạn thấy một ví dụ về việc sử dụng nó để nhắm mục tiêu một mẫu liên lạc.
Trong ví dụ này, chúng tôi đang sử dụng plugin WPForms để tạo một mẫu liên hệ. Hướng dẫn sẽ giống nhau nếu bạn đang sử dụng một plugin dạng liên hệ khác trên trang web của bạn.
Tới trang mà bạn đã thêm mẫu liên hệ của mình. Di chuyển chuột đến trường đầu tiên trong mẫu liên hệ của bạn, nhấp chuột phải, và sau đó chọn Kiểm tra từ trình đơn của trình duyệt.
Xác định vị trí dòng bắt đầu bằng
nhãn. Trong thẻ form, bạn sẽ tìm thấy thuộc tính ID.
Trong ví dụ này, ID của mẫu của chúng tôi là wpforms-form-170 . Bạn cần sao chép thuộc tính ID.
Bây giờ chỉnh sửa confirm-left.js tập tin và thêm thuộc tính ID sau #dạng bình luận .
Hãy chắc chắn rằng bạn tách biệt #dạng bình luận và ID của mẫu của bạn bằng dấu phẩy. Bạn cũng cần thêm # ký tên dưới dạng tiền tố cho thuộc tính ID của biểu mẫu.
Mã của bạn sẽ giống như sau:
jQuery (document) .ready (function ($) {
$ (document) .ready (function () {
needToConfirm = false;
window.onbeforeunload = askConfirm;
});
hàm askConfirm () {
if (needToConfirm) {
// Đặt thông điệp tùy chỉnh của bạn ở đây
return "Dữ liệu chưa lưu của bạn sẽ bị mất";
}
}
$ ("# commentform, # form-form-170") thay đổi (function () {
needToConfirm = true;
});
})
Lưu thay đổi của bạn và tải tệp lên trang web của bạn.
Bây giờ bạn có thể nhập bất kỳ văn bản vào bất kỳ trường nào trong biểu mẫu liên hệ của bạn và sau đó cố gắng rời khỏi trang mà không cần gửi biểu mẫu. Cửa sổ bật lên sẽ xuất hiện với cảnh báo rằng bạn có các thay đổi chưa lưu.
Bạn có thể tải về plugin xác nhận đi ở đây. Nó chỉ nhắm mục tiêu vào mẫu bình luận, nhưng bạn có thể chỉnh sửa plugin để nhắm mục tiêu các hình thức khác.
Đó là tất cả, chúng tôi hy vọng bài viết này đã giúp bạn hiển thị popup điều hướng cho các mẫu WordPress. Bạn cũng có thể muốn thử tay trên 8 hướng dẫn jQuery tốt nhất dành cho người mới bắt đầu của WordPress.