Bỏ qua đến nội dung chính

Làm thế nào để thêm một popup xác nhận trên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

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 blog WordPress của bạn.

xác nhận đóng cửa sổ trên 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ỉnhChúng tôi đã chỉ cho bạn cách tạo một plugin WordPress một cách nhanh chóng.

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

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

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
/**
 * 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');

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.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀ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.

xác nhận plugin hành động WordPress

Đó 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ản demo xác nhận đóng cửa

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 WordPress của mình. Ở đây chúng tôi sẽ chỉ cho bạn một ví dụ về biểu mẫu liên hệ.

Trong ví dụ này, chúng tôi sử dụng plugin WPForms để tạo một hình thức liên lạc. 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 mà bạn đã thêm biểu mẫu liên hệ của mình. 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.

phục hồi mã từ trường văn bản WordPress

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.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

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 đó.

Bài viết này chứa comments 2

  1. Bonjour,
    chỉ đóng một tệp php là không bắt buộc (thậm chí không được khuyến khích).
    Thực hiện CTRL + U để xem mã nguồn. Từ cửa sổ mới xuất hiện, hãy thực hiện CTRL + F để tìm kiếm biểu thức "js / confirm-left.js". Nếu bạn có kết quả, thì vấn đề là với mã javascript, nếu không thì tệp không được xếp hàng đúng cách.

    Désolé pour le chậm.

    Tốt ngày cho bạn.

  2. Bonjour,

    Chà, nó không hoạt động: Tôi đã gửi các tệp đến ftp và… không có gì mới trong các tiện ích mở rộng của tôi trên bảng điều khiển wp.

    Không cần thiết phải thêm a?> Vào cuối tệp đầu tiên, tệp ở dạng .php?

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
2 cổ phiếu
cổ phiếu
tweet
Enregistrer2