如何在WordPress中为表单显示确认导航弹窗

05/31/2023

什么是确认导航弹窗?

假设用户正在您的博客上撰写评论。他们已经写了好几行,但被分心忘记提交。如果此时关闭浏览器,那么评论将消失。确认导航弹窗可以让他们有机会完成评论。

您可以在WordPress文章编辑屏幕中看到这一功能。如果有未保存的更改并尝试离开页面或关闭浏览器,将弹出警告弹窗。

在WordPress中为未提交的表单显示确认导航弹窗

在本教程中,我们将创建一个自定义插件,但不要担心,您也可以在教程结束时下载该插件并安装到您的网站上。不过,为了更好地理解代码,我们还是建议您尝试自己创建插件。可以先在本地安装或测试站点上操作。

开始创建

首先,您需要在计算机上创建一个新文件夹,命名为confirm-leaving。在confirm-leaving文件夹内再创建一个名为js的文件夹。

现在打开纯文本编辑器,如记事本,并创建一个新文件。里面粘贴以下代码:

<?php 
/** 
 * Confirm Leaving 
 * Plugin Name: Confirm Leaving 
 * Description: 此插件在用户忘记点击评论表单的提交按钮时显示警告。 
 * Version: 1.0.0 
 * Author: WPressize Me 
 * License: GPL-2.0+ 
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt 
 */ 
function wpb_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', 'wpb_confirm_leaving_js');

这个PHP函数只是将一个JavaScript文件添加到您网站的前端。

保存此文件名为confirm-leaving.php,并将其保存在主confirm-leaving文件夹中。

现在我们需要创建该插件加载的JavaScript文件。创建一个新文件并在其中粘贴以下代码:

jQuery(document).ready(function($) { 
$(document).ready(function() { 
    needToConfirm = false; 
    window.onbeforeunload = askConfirm; 
}); 
function askConfirm() { 
    if (needToConfirm) { 
        return "您的未保存数据将会丢失。"; 
    } 
} 
$("#commentform").change(function() { 
    needToConfirm = true; 
});
})

这个JavaScript代码检测用户在评论表单中是否有未保存的更改。如果用户尝试离开页面或关闭窗口,它将显示一个警告弹窗。

您需要将此文件保存为confirm-leaving.js,并将其保存在js文件夹中。

保存这两个文件后,您的文件夹结构如下:

现在,您需要使用FTP客户端连接到您的WordPress站点。请参阅我们的指南,了解如何使用FTP上传WordPress文件。

连接后,您需要将confirm-leaving文件夹上传到网站的/wp-contents/plugins/文件夹。

然后,您需要登录WordPress管理后台并访问插件页面。找到列表中的“Confirm Leaving”插件,并点击其下方的“激活”链接。

这就完成了。现在,您可以访问网站上的任何文章,在评论表单中的任何字段输入一些文本,尝试离开页面而不提交。一个弹窗将出现,警告您将离开一个有未保存更改的页面。

在WordPress中为其他表单添加警告

您可以使用相同的代码基础来定位WordPress站点上的任何表单。这里,我们将展示一个如何定位联系表单的示例。

在这个示例中,我们使用WPForms插件创建一个联系表单。如果您使用不同的联系表单插件,操作步骤相同。

打开包含联系表单的页面。将鼠标移到联系表单的第一个字段,右键点击,然后从浏览器菜单中选择“检查”。

找到以标签开头的行。在表单标签中,您会找到ID属性。在这个示例中,我们的表单ID是wpforms-form-170。需要复制ID属性。

现在编辑confirm-leaving.js文件,并在#commentform后面添加ID属性。确保使用逗号分隔#commentform和表单的ID,还需要在表单ID的前面添加#号。您的代码现在看起来像这样:

jQuery(document).ready(function($) { 
$(document).ready(function() { 
    needToConfirm = false; 
    window.onbeforeunload = askConfirm; 
}); 
function askConfirm() { 
    if (needToConfirm) { 
        return "您的未保存数据将会丢失。"; 
} 
} 
$("#commentform,#wpforms-form-170").change(function() { 
    needToConfirm = true; 
});
})

保存您的更改并将文件上传回网站。现在,您可以在联系表单的任何字段中输入文本,尝试在未提交表单的情况下离开页面。会弹出一个警告提示您有未保存的更改。

你可以在这里下载confirm-leaving插件。它仅针对评论表单,但请随意编辑插件来定位其他表单。

这就是全部。希望这篇文章帮助您在WordPress表单中显示确认导航弹窗。您可能还想查看我们必须拥有的WordPress插件和工具以供商业网站使用,或阅读我们关于如何增加博客流量的终极指南。如果您喜欢这篇文章,请订阅我们的YouTube频道获取WordPress视频教程。您还可以在Twitter和Facebook上找到我们。



Related Posts

  • 2025-02-16
  • WordPress 教学

你是否想过,能不能用更引人注目的方式取代WooCommerce中基本的促销徽章?答案是肯定的!通过自定义产品徽章,你可以在在线商店中突出新产品、折扣商品或限时优惠。在这篇文章中,我们将展示给你两个简单的方法,使用强大的插件或添加简单代码来为你的WooCommerce商店添加自定义产品徽章。

閱讀更多
  • 2025-01-18
  • WordPress 教学

我们都知道推荐计划是强大的武器。但要找到真正的品牌代言者并不容易。许多计划吸引的只是想快速赚钱的人,导致非真实的推广,无法有效转化客户。幸好,作为 WooCommerce 商店的店主,您有一个巨大的优势:一群真正喜爱和使用您产品的内置客户群。通过将这些现有客户转化为推广合伙人,您可以释放真实口碑营销的力量。

閱讀更多
  • 2025-01-10
  • WordPress 教学

最近,我们的一位比利时读者在其在线商店中苦于销售增长缓慢。除了其他建议外,我们建议他们在网站上设置Bancontact支付。Bancontact是一种主要在比利时使用的流行支付系统,客户可以通过银行账户进行安全的实时支付。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>