You are here:  Home » PHP » 如何在单击链接或图像时打开 WordPress 弹出窗口或表单

您想创建一个在您的访问者点击您网站上的链接或图片时出现的弹出窗口吗?

这是增加您的电子邮件列表的一种行之有效的方法,并且经常被流行的网站用来提供 optin 激励。

在本文中,我们将逐步展示如何在单击链接或图像时打开 WordPress 弹出窗口。

在点击时触发 WordPress 弹出表单并不像您想象的那么复杂。在本文中,我们将向您展示如何操作。

将点击弹出表单添加到您的网站

什么是“点击”弹出表单?

点击弹出表单是当用户点击您网站上的链接、按钮或图像时打开的灯箱弹出窗口。

通常,当用户到达或即将离开时,弹出窗口会出现在网站上。点击弹出表单由用户交互触发。

点击弹出表单示例

我们在 WPBeginner 网站上有两个点击弹出窗口,用于增加我们的电子邮件列表:第一个在所有社交图标旁边的侧边栏电子邮件图标上,第二个在每个帖子下方,用于下载我们的工具包。

创建点击弹出窗口的最简单方法是使用WordPress 的弹出插件。我们将在本教程中使用OptinMonster

为什么点击弹出表单如此有效?

点击弹出表单是有效的,因为它使用了强大的 Zeigarnik 效果。这是一个心理学原理,表明开始行动的用户更有可能完成它。

当有人单击链接或按钮触发您的弹出窗口时,他们已经表现出兴趣。当表单弹出窗口出现时,他们将更有可能使用它。

在本教程中,我们将使用点击弹出窗口来提供铅磁铁。

但是,还有其他方法可以在您的网站上使用点击弹出窗口。例如,您可以要求用户索取优惠券代码、了解有关产品的更多信息、填写调查表等。

话虽如此,让我们来看看如何轻松地为您的网站制作点击灯箱弹出窗口。

安装和激活 OptinMonster

首先,您需要注册一个OptinMonster帐户。您需要 Pro 帐户(或更高版本)。这为您提供了 MonsterLinks™ 功能,可让您在点击弹出窗口时创建。

接下来,您需要在您的 WordPress 网站上安装并激活OptinMonster 插件。这使您可以将您的 OptinMonster 帐户连接到您的 WordPress 网站。

如需帮助,请参阅我们关于如何安装 WordPress 插件的分步指南。

激活插件后,您需要连接您的帐户。您应该会自动进入欢迎页面。如果没有,只需单击 WordPress 仪表板中的 OptinMonster 链接。

单击“连接您的帐户”并按照屏幕上的说明进行操作。

将您的 OptinMonster 帐户连接到您的 WordPress 网站

创建您的第一个点击弹出窗口

将您的 OptinMonster 帐户连接到 WordPress 网站后,您可以开始创建点击弹出窗口。点击屏幕顶部的“创建新广告系列”按钮:

在 OptinMonster 中创建新广告系列

您将被直接带到 OptinMonster 网站。

Campaign Type 应该已经设置为 Popup。如果没有,只需单击弹出窗口将其选中。

为您的广告系列类型选择“弹出窗口”

接下来,选择一个广告系列模板。稍后您将能够准确地修改它的外观。我们将在本教程中使用 Basic 模板。

为您的点击弹出窗口选择基本模板

将光标移到模板上,然后单击“使用模板”按钮。

点击为您的点击弹出窗口使用基本模板

现在,系统会提示您输入广告系列的名称。如果您在多个站点上使用 OptinMonster,请确保选择正确的站点。如果需要,请输入新网站。然后,单击“开始构建”以创建弹出窗口。

为您的广告系列命名,然后点击开始构建

OptinMonster 将自动加载您选择的模板。

您可以编辑默认文本并在模板中添加或删除元素。只需单击您要编辑的任何内容。

在 OptinMonster 中编辑弹出窗口的标题

例如,我们将从表单中删除 Name 字段。只需单击该字段以将其选中,您将在左栏中看到字段选项,包括删除它的选项。

从弹出窗口中删除名称字段

一旦你设计了弹出窗口,下一步就是设计成功视图,这是人们在填写表格后看到的。只需切换到屏幕顶部的“成功”视图。

访问者在输入电子邮件地址后将看到的“成功”视图

您可以像编辑 optin 视图一样编辑成功视图。例如,您可能想让用户立即下载铅磁铁。您可以在此处包含指向它的链接。

要添加图像链接,请单击图像,然后向下滚动到“添加图像链接?” 在左手侧。

您可以切换以启用图像链接,并在“URL”框中输入指向您的铅磁铁的链接。

在 OptinMonster 中添加弹出图像的链接

将您的弹出窗口连接到您的电子邮件列表

对弹出窗口感到满意后,单击屏幕顶部的“集成”选项卡。您需要将 OptinMonster 链接到您的电子邮件营销服务,以便您可以将人员添加到您的电子邮件列表中。

单击屏幕左侧的“+ 添加新集成”按钮。

在 OptinMonster 中添加新的电子邮件集成

接下来,从下拉列表中选择您的电子邮件提供商,然后按照说明将其连接到 OptinMonster。

从下拉列表中选择您的电子邮件服务提供商

注意:每个电子邮件营销服务的集成说明都不同。如果您遇到困难,OptinMonster 有一份详细的电子邮件集成指南列表。

将弹出窗口设置为单击时出现

现在,您需要配置弹出窗口,使其在用户单击链接时出现。单击屏幕顶部的“显示规则”选项卡。

OptinMonster 中的默认显示规则

显示规则默认为页面时间。点击下拉菜单并选择“访客点击 MonsterLink™”。

切换显示规则,以便您的弹出窗口使用 MonsterLink 功能

单击按钮复制您的 MonsterLink™ 代码。你马上就会需要这个。

使您的点击弹出窗口直播

现在,转到“发布”选项卡并将您的广告系列的状态设置为“实时”。您还可以检查或更改您的广告系列所连接的网站。

将您的点击弹出广告活动状态切换为实时

完成后,单击屏幕顶部的保存按钮。

接下来,您需要在您的 WordPress 网站上投放您的广告系列。

转到您的 WordPress 仪表板,然后单击 OptinMonster 链接。单击刷新广告系列按钮。

刷新 OptinMonster 仪表板中的广告系列列表

您应该会看到您的广告系列,显示为 Live。如果您想随时禁用它,只需点击广告系列名称下方的“禁用”链接。

WordPress 仪表板中的 OptinMonster 活动列表

将您的 MonsterLink 添加到您的网站

现在,您需要将特殊的 MonsterLink™ 添加到您的站点。如果您之前没有复制此内容,则可以通过返回 MonsterInsights 网站中您的广告系列的显示规则设置来获取它。

创建一个新帖子或页面,或编辑您要添加链接的页面。

MonsterLink 是 HTML 代码,因此您需要将其粘贴到自定义 HTML 块中。

单击 (+) 按钮以添加新块。自定义 HTML 块位于“格式”部分,或者您可以使用搜索栏搜索它。单击它以创建块。

在 WordPress 中添加自定义 HTML 块

现在,将您的 MonsterLink 复制到该块中。它应该看起来像这样:

HTML 块中的 MonsterLink

您可以更改“点击我!”字样 到您要用于链接的任何文本。我们将使用“点击获得奖励 10 提示!”

带有自定义文本的 MonsterLink

放置链接后,您可以预览页面或发布以确保其正常工作。

这是我们的行动链接。请注意,我们对文本应用了一些样式以创建一个带有较大文本的框,以帮助宣传铅磁铁:

正在运行的点击弹出表单

提示:您不仅限于使用 MonsterLinks 的文本链接。您还可以将 MonsterLink 与您网站上的号召性用语按钮、图像、横幅或导航菜单一起使用。