什么是确认导航弹窗？
假设用户正在您的博客上撰写评论。他们已经写了好几行，但被分心忘记提交。如果此时关闭浏览器，那么评论将消失。确认导航弹窗可以让他们有机会完成评论。
您可以在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上找到我们。
0 comments