如何创建 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 是市场上最好的 WordPress 弹出式插件和潜在客户生成软件.它可以帮助您将网站访问者转化为订阅者和客户.您至少需要 Pro 计划才能访问本文中使用的 MonsterLinks 功能.

准备好了吗?让我们开始吧.

使用 WPForms 创建用户登录表单

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

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

WPForms addons page

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

Add new form

启动 WPForms 构建器后,您需要选择预先构建的用户登录表单模板.

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

之后,您需要点击保存按钮,然后点击嵌入按钮.

Save and embed

一个带有嵌入代码的弹出窗口将打开.您需要复制此代码并保存以备后用.

Copy embed code

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

使用 OptinMonster 创建模态弹出窗口

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

激活后,您需要转到 WordPress 管理区域中的 OptinMonster,然后点击创建新广告系列按钮.

Create new campaign

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

进入后,您需要选择Lightbox Popup作为广告系列类型,以便您可以在弹出窗口中添加您的登录表单.

Select Campaign Type

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

Select campaign template

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

Add campaign name and site

点击开始构建按钮后,您将被重定向到 OptinMonster 活动设置页面.

从这里,您需要转到 Optin 选项卡并设置画布的宽度和高度,在 Custom Canvas HTML 字段中添加登录表单嵌入代码,管理显示和模态弹出窗口的音效等.

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

Add login form embed code in modal popup

由于您正在创建模态登录弹出窗口,因此您需要转到设置选项卡并为 Cookie 持续时间成功 Cookie 持续时间 设置"0"值.每当访问者点击您的链接时,它都会向所有访问者显示该表单.

Set cookie duration value

接下来,您需要访问显示规则标签并展开MonsterLink以将状态更改为活动.

MonsterLink status active

确保点击右上角的保存按钮并转到发布部分以激活状态.

Save and publish campaign

现在您可以在您的 WordPress 页面或帖子中添加此模式登录弹出窗口.

在 WordPress 中添加模态登录

您需要返回 WordPress 管理区域中的 OptinMonster,它会显示广告系列列表.如果您没有看到最近创建的用于模式登录的广告系列,只需点击刷新广告系列按钮即可.

Edit output settings

接下来,您需要编辑广告系列输出设置以在您的网站上启用 optin 并选择谁应该看到模式登录弹出窗口.请务必点击保存设置按钮.

Shop campaign to visitors

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

Copy campaign slug

接下来,您可以创建一个新的 WordPress 页面或编辑现有页面,然后将此代码添加到您独特的广告系列中.

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

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

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

Modal login in WordPress

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

2
订阅评论
提醒
0 评论
内联反馈
查看所有评论