如何在WordPress中显示确认的导航弹出窗体

无意中关闭一个页面而不提交您的评论或半填写表格是烦人的。 最近，我们的一位用户问我们是否可以向读者展示一个确认的导航弹出窗口？ 这个小小的弹出窗口提醒用户，防止他们意外地留下一半填充和未提交的表单。 在这篇文章中，我们将向您展示如何显示WordPress窗体的确认导航弹出窗口。

什么是确认导航弹出？

假设用户正在对您的博客写评论。 他们已经写了相当多的话，但他们分心，忘记提交意见。 现在，如果他们关闭浏览器，那么评论将会丢失。

确认的导航弹出让他们有机会完成他们的评论。

您可以在WordPress帖子编辑器屏幕中看到这个功能。 如果您有未保存的更改，并且您尝试离开该页面或关闭浏览器，则会看到一个警告弹出窗口。

让我们看看我们如何将这个警告功能添加到您的网站上的WordPress评论和其他形式。

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

对于本教程，我们将创建一个自定义插件，但不用担心，也可以在本教程结尾处下载插件以安装到您的网站上。

但是，为了更好地理解代码，我们会要求您尝试创建自己的插件。 您可以先在本地安装或暂存站点上执行此操作。

让我们开始吧。

首先，您需要在计算机上创建一个新文件夹并命名 确认离校 。 在确认离开文件夹里面，你需要创建另一个文件夹并将其命名为js。

现在打开一个像记事本这样的纯文本编辑器，并创建一个新文件。 里面，只需粘贴下面的代码：

这个PHP函数只是在您的网站的前端添加一个JavaScript文件。 
继续并将此文件另存为 确认-leaving.php 在主确认离开文件夹内。 
现在我们需要创建这个插件正在加载的JavaScript文件。 
创建一个新文件并将其粘贴在其中： 
jQuery（document）.ready（function（$）{

 $（document）.ready（function（）{
     needToConfirm = false;
     window.onbeforeunload = askConfirm;
 }）;

 函数askConfirm（）{
     if（needToConfirm）{
         / /把你的自定义消息在这里
         返回“未保存的数据将丢失”。
     }
 }
 
 $（“＃commentform”）。change（function（）{
     needToConfirm = true;
 }）;

  }） 
此JavaScript代码检测用户是否在评论表单中有未保存的更改。 如果用户试图离开页面或关闭窗口，它将显示一个警告弹出窗口。 
您需要将该文件保存为 确认-leaving.js 里面的js文件夹。 
保存这两个文件后，这就是你的文件夹结构应该是这样的： 

现在您需要使用FTP客户端连接到您的WordPress网站。 
一旦连接，您需要上传 确认离校 文件夹 /可湿性粉剂内容/插件/ 您的网站上的文件夹。 

之后，您需要登录到WordPress管理区域并访问插件页面。 在安装的插件列表中找到“确认离开”插件，然后点击它下面的“激活”链接。 

就这样。 您现在可以访问您网站上的任何帖子，在评论表单的任何字段中写下一些文字，然后尝试离开页面而不提交。 会出现一个弹出窗口，警告您即将离开一个未保存更改的页面。 

在WordPress中添加其他形式的警告 
您可以使用相同的代码库来定位您的WordPress网站上的任何表单。 这里我们将向您展示一个使用它来定位联系表单的例子。 
在这个例子中，我们使用WPForms插件来创建联系表单。 如果您在网站上使用不同的联系表单插件，说明将会相同。 
转到您添加联系表单的页面。 将鼠标移到联系表单中的第一个字段，右键单击，然后从浏览器菜单中选择“检查”。 

找到以。开头的行 

标签。 在表单标签中，您将找到ID属性。 
在这个例子中，我们的表单ID是 wpforms形式-170 。 您需要复制ID属性。 
现在编辑 确认-leaving.js 文件，然后添加ID属性 #commentform 。 
确保你分开 #commentform 和您的表单的ID用逗号。 您还需要添加 ＃ 签名作为您的表单的ID属性的前缀。 
你的代码现在看起来像这样： 
jQuery（document）.ready（function（$）{

 $（document）.ready（function（）{
     needToConfirm = false;
     window.onbeforeunload = askConfirm;
 }）;

 函数askConfirm（）{
     if（needToConfirm）{
         / /把你的自定义消息在这里
         返回“未保存的数据将丢失”。
     }
 }

 $（“＃commentform，＃wpforms-form-170”）。change（function（）{
     needToConfirm = true;
 }）;

  }） 
保存更改并将文件上传回您的网站。 
现在，您可以在联系表单的任何字段中输入任何文本，然后尝试离开页面而不提交表单。 弹出窗口会显示一条警告，提示您有未保存的更改。 
你可以在这里下载确认离开插件。 它只针对评论表单，但随意编辑插件来定位其他表单。 
这就是我们希望这篇文章帮助你展示WordPress窗体的确认导航弹出窗口。 你可能也想试试这8个最适合WordPress初学者的jQuery教程。