如何创建WordPress登录弹出模式(一步一步)

您想在您的网站上添加WordPress登录弹出模式吗?模态登录弹出窗口允许您的用户快速登录您的网站,而无需离开他们正在查看的页面。这可以改善您网站上的用户体验和参与度。在本文中,我们将向您展示如何轻松创建WordPress登录弹出模式 – 一步一步。

How to Create a Modal Login in WordPress

为什么要创建WordPress登录弹出模式?

如果您经营在线商店,会员网站或销售在线课程,那么您可能允许用户注册并登录您的网站。

通常,当用户单击登录链接时,他们将被带到默认的WordPress登录页面或您网站上的其他自定义登录页面。用户登录后,会再次将其重定向到另一个页面。

通过模态登录弹出窗口,您可以显示登录表单,而无需将用户发送到其他页面。登录后,您可以将用户重定向到您想要的任何页面。

模态登录弹出窗口更快,并改善了您网站上的用户体验。更快,更完美的用户体验可以促进您的销售和转化。

话虽如此,让我们来看看如何在WordPress中轻松创建模态登录弹出窗口。我们将向您展示两种方法,您可以选择最适合您需求的方法。

方法1.使用CSH登录创建模态登录弹出窗口

对于大多数用户来说,这种方法更容易推荐。

您需要做的第一件事是安装并激活CSH登录插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要转到模态登录在WordPress管理区域中的页面,并选择模式登录表单的类型。

Select modal login type

选择模态登录框类型后,您可以向下滚动并管理表单的登录/注销重定向。您还可以允许用户生成自己的密码。

Redirect login type

接下来,您需要向下滚动到样式部分并选择布局,显示标签,背景颜色,按钮颜色,链接颜色等。

Style your modal login form

此外,您还可以添加注册电子邮件,电子邮件主题,使用Google reCaptcha等。此插件还允许您添加Facebook,Twitter和Google等社交登录。

Add social login form

请务必保存更改并复制位于此页顶部的短代码。您需要在WordPress中创建新页面或编辑现有页面以在内容编辑器中添加短代码。

Copy shortcode for CSH login plugin

您还可以在WordPress边栏中添加模态登录。简单地去吧外观»小部件拖放CSH登录您网站侧边栏中的小部件。

Drag and drop CSH login widget

CSH模式登录也可以添加到您的网站模板文件中。在您的网站上添加后,只需访问您的WordPress网站即可查看模式登录链接。

Modal login popup form

方法2.使用WPForms和OptinMonster创建模态登录弹出窗口

对于此方法,您将需要WPForms插件和OptinMontser。如果您已经有这两个插件,那么这种方法对您来说是更好的解决方案。

WPForms是最好的WordPress联系表单插件。您至少需要他们的Pro计划才能访问用户注册插件。

OptinMonster是市场上最好的潜在客户生成软件。它可以帮助您将网站访问者转换为订阅者和客户。您至少需要Pro计划才能访问本文中使用的MonsterLinks功能。

准备?让我们开始吧。

使用WPForms创建用户登录表单

首先,您需要安装并激活WPForms插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要转到WPForms»插件页面安装和激活用户注册插件

WPForms addons page

激活插件后,您需要转到WPForms»添加新内容页面以创建用户登录表单。

Add new form

启动WPForms构建器后,您需要选择预构建的构建器用户登录表模板。Múbǎn.

Select user login form

此登录表单模板的电子邮件和密码字段与默认的WordPress登录表单类似。您可以根据需要从屏幕左侧拖放任何其他字段。

Login form template

接下来,单击密码预览部分中的字段,它将在左侧显示字段选项。您可以在描述框中添加下面给出的代码密码字段显示忘记密码和用户注册等选项。

  Can"t remember your password? <a href="{url_lost_password}">Click here</a>. Don"t have an account? <a href="{url_register}">Register here</a>.  

Add password options

之后你需要点击保存按钮,然后单击按钮。Ànniǔ.

Save and embed

将使用嵌入代码打开一个弹出窗口。您需要复制此代码并保存以供日后使用。

Copy embed code

您的登录表已准备就绪。现在您可以继续创建模态弹出窗口。

使用OptinMonster创建模态弹出窗口

首先,您需要安装并激活OptinMonster插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要转到OptinMonster在WordPress管理区域中单击创建新广告系列按钮。Ànniǔ.

Create new campaign

您的OptinMonster仪表板将在新网页上打开。

进入后,您需要选择灯箱弹出窗口作为广告系列类型,您可以在弹出窗口中添加登录表单。

Select Campaign Type

接下来,您需要选择帆布广告系列模板,这是一个空白模板,允许您添加自定义代码和短代码。

Select campaign template

它会要求您为灯箱添加名称,并选择要加载此弹出窗口的网站。

Add campaign name and site

一旦你点击了开始建设按钮,您将被重定向到OptinMonster广告系列设置页面。

从这里开始,你需要去选择参加选项卡并设置画布的宽度和高度,添加登录表单嵌入代码自定义画布HTML字段,管理模态弹出窗口的显示和声音效果等。

注意:登录表单嵌入代码应该是您在上一步中创建登录表单后复制的代码。

Add login form embed code in modal popup

由于您要创建模态登录弹出窗口,因此需要转到设置选项卡并为其设置“0”值Cookie持续时间和Hé成功Cookie持续时间。只要用户点击您的链接,它就会向所有访问者显示该表单。

Set cookie duration value

接下来,你需要访问显示规则选项卡并展开MonsterLink将状态更改为活动状态。

MonsterLink status active

一定要点击保存右上角的按钮然后转到发布部分使状态有效。

Save and publish campaign

现在,您可以在WordPress页面或帖子中添加此模态登录弹出窗口。

在WordPress中添加模态登录

你需要回去OptinMonster在您的WordPress管理区域,它将显示广告系列列表。如果您没有看到最近创建的模态登录广告系列,则只需点击即可刷新广告系列按钮。Ànniǔ.

Edit output settings

接下来,您需要编辑广告系列输出设置以在您的网站上启用OPtin,并选择应该看到模式登录弹出窗口的人员。一定要点击保存设置按钮。Ànniǔ.

Shop campaign to visitors

之后,您需要返回广告系列概述页面并复制广告系列实时选项下方可见的广告。这个独特的slug可用于短代码和代码,以显示WordPress中的模态登录。

Copy campaign slug

接下来,您可以创建新的WordPress页面或编辑现有页面,并将此代码添加到您的唯一广告系列slug中。

  <a href="#"  data-optin-slug="mw7pzo63ch6wpfzi">Login / Register</a>  

您还可以在WordPress菜单,侧边栏或网站上的任何其他区域添加上述代码。

确保将更改保存到WordPress页面并访问您的站点以查看模式登录的实际操作。

Modal login in WordPress

我们希望本文能帮助您学习如何在WordPress中创建模态登录。您可能还希望查看我们的最佳WordPress登录页面插件的完整列表,并轻松设计您自己的登录页面。

您想在您的网站上添加WordPress登录弹出模式吗?模态登录弹出窗口允许您的用户快速登录您的网站,而无需离开他们正在查看的页面。这可以改善您网站上的用户体验和参与度。在本文中,我们将向您展示如何轻松创建WordPress登录弹出模式 – 一步一步。

How to Create a Modal Login in WordPress

为什么要创建WordPress登录弹出模式?

如果您经营在线商店,会员网站或销售在线课程,那么您可能允许用户注册并登录您的网站。

通常,当用户单击登录链接时,他们将被带到默认的WordPress登录页面或您网站上的其他自定义登录页面。用户登录后,会再次将其重定向到另一个页面。

通过模态登录弹出窗口,您可以显示登录表单,而无需将用户发送到其他页面。登录后,您可以将用户重定向到您想要的任何页面。

模态登录弹出窗口更快,并改善了您网站上的用户体验。更快,更完美的用户体验可以促进您的销售和转化。

话虽如此,让我们来看看如何在WordPress中轻松创建模态登录弹出窗口。我们将向您展示两种方法,您可以选择最适合您需求的方法。

方法1.使用CSH登录创建模态登录弹出窗口

对于大多数用户来说,这种方法更容易推荐。

您需要做的第一件事是安装并激活CSH登录插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要转到模态登录在WordPress管理区域中的页面,并选择模式登录表单的类型。

Select modal login type

选择模态登录框类型后,您可以向下滚动并管理表单的登录/注销重定向。您还可以允许用户生成自己的密码。

Redirect login type

接下来,您需要向下滚动到样式部分并选择布局,显示标签,背景颜色,按钮颜色,链接颜色等。

Style your modal login form

此外,您还可以添加注册电子邮件,电子邮件主题,使用Google reCaptcha等。此插件还允许您添加Facebook,Twitter和Google等社交登录。

Add social login form

请务必保存更改并复制位于此页顶部的短代码。您需要在WordPress中创建新页面或编辑现有页面以在内容编辑器中添加短代码。

Copy shortcode for CSH login plugin

您还可以在WordPress边栏中添加模态登录。简单地去吧外观»小部件拖放CSH登录您网站侧边栏中的小部件。

Drag and drop CSH login widget

CSH模式登录也可以添加到您的网站模板文件中。在您的网站上添加后,只需访问您的WordPress网站即可查看模式登录链接。

Modal login popup form

方法2.使用WPForms和OptinMonster创建模态登录弹出窗口

对于此方法,您将需要WPForms插件和OptinMontser。如果您已经有这两个插件,那么这种方法对您来说是更好的解决方案。

WPForms是最好的WordPress联系表单插件。您至少需要他们的Pro计划才能访问用户注册插件。

OptinMonster是市场上最好的潜在客户生成软件。它可以帮助您将网站访问者转换为订阅者和客户。您至少需要Pro计划才能访问本文中使用的MonsterLinks功能。

准备?让我们开始吧。

使用WPForms创建用户登录表单

首先,您需要安装并激活WPForms插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要转到WPForms»插件页面安装和激活用户注册插件

WPForms addons page

激活插件后,您需要转到WPForms»添加新内容页面以创建用户登录表单。

Add new form

启动WPForms构建器后,您需要选择预构建的构建器用户登录表模板。Múbǎn.

Select user login form

此登录表单模板的电子邮件和密码字段与默认的WordPress登录表单类似。您可以根据需要从屏幕左侧拖放任何其他字段。

Login form template

接下来,单击密码预览部分中的字段,它将在左侧显示字段选项。您可以在描述框中添加下面给出的代码密码字段显示忘记密码和用户注册等选项。

  Can"t remember your password? <a href="{url_lost_password}">Click here</a>. Don"t have an account? <a href="{url_register}">Register here</a>.  

Add password options

之后你需要点击保存按钮,然后单击按钮。Ànniǔ.

Save and embed

将使用嵌入代码打开一个弹出窗口。您需要复制此代码并保存以供日后使用。

Copy embed code

您的登录表已准备就绪。现在您可以继续创建模态弹出窗口。

使用OptinMonster创建模态弹出窗口

首先,您需要安装并激活OptinMonster插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您需要转到OptinMonster在WordPress管理区域中单击创建新广告系列按钮。Ànniǔ.

Create new campaign

您的OptinMonster仪表板将在新网页上打开。

进入后,您需要选择灯箱弹出窗口作为广告系列类型,您可以在弹出窗口中添加登录表单。

Select Campaign Type

接下来,您需要选择帆布广告系列模板,这是一个空白模板,允许您添加自定义代码和短代码。

Select campaign template

它会要求您为灯箱添加名称,并选择要加载此弹出窗口的网站。

Add campaign name and site

一旦你点击了开始建设按钮,您将被重定向到OptinMonster广告系列设置页面。

从这里开始,你需要去选择参加选项卡并设置画布的宽度和高度,添加登录表单嵌入代码自定义画布HTML字段,管理模态弹出窗口的显示和声音效果等。

注意:登录表单嵌入代码应该是您在上一步中创建登录表单后复制的代码。

Add login form embed code in modal popup

由于您要创建模态登录弹出窗口,因此需要转到设置选项卡并为其设置“0”值Cookie持续时间和Hé成功Cookie持续时间。只要用户点击您的链接,它就会向所有访问者显示该表单。

Set cookie duration value

接下来,你需要访问显示规则选项卡并展开MonsterLink将状态更改为活动状态。

MonsterLink status active

一定要点击保存右上角的按钮然后转到发布部分使状态有效。

Save and publish campaign

现在,您可以在WordPress页面或帖子中添加此模态登录弹出窗口。

在WordPress中添加模态登录

你需要回去OptinMonster在您的WordPress管理区域,它将显示广告系列列表。如果您没有看到最近创建的模态登录广告系列,则只需点击即可刷新广告系列按钮。Ànniǔ.

Edit output settings

接下来,您需要编辑广告系列输出设置以在您的网站上启用OPtin,并选择应该看到模式登录弹出窗口的人员。一定要点击保存设置按钮。Ànniǔ.

Shop campaign to visitors

之后,您需要返回广告系列概述页面并复制广告系列实时选项下方可见的广告。这个独特的slug可用于短代码和代码,以显示WordPress中的模态登录。

Copy campaign slug

接下来,您可以创建新的WordPress页面或编辑现有页面,并将此代码添加到您的唯一广告系列slug中。

  <a href="#"  data-optin-slug="mw7pzo63ch6wpfzi">Login / Register</a>  

您还可以在WordPress菜单,侧边栏或网站上的任何其他区域添加上述代码。

确保将更改保存到WordPress页面并访问您的站点以查看模式登录的实际操作。

Modal login in WordPress

我们希望本文能帮助您学习如何在WordPress中创建模态登录。您可能还希望查看我们的最佳WordPress登录页面插件的完整列表,并轻松设计您自己的登录页面。

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-05-10 14:06:47
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
2781198
加我微信
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: