自定义 WordPress 登录页面:终极指南

您是否厌倦了一遍又一遍地看到相同的 WordPress 登录页面?如果您有一个常规网站,则访问者不会看到登录页面。但是,如果您有会员网站或在线商店,那么他们将看到默认的 WordPress 登录页面,这是一种糟糕的用户体验。所以我决定写一个关于如何自定义 WordPress 登录页面的简单指南。这是您可以轻松遵循的完整指南。

您今天要学习的内容:

您可以使用一些插件来自定义网站的登录页面布局/设计。在这里,在本文中,我将讨论其中的两个,并向您展示如何使用这两个自定义登录页面。另外,最后,我将向您展示如何以手动方式将登录页面的 WordPress 徽标更改为您自己的徽标。无需使用任何第三方插件。

好的,让我们开始吧。

使用 LoginPress 自定义 WordPress 登录页面

LoginPress 是一个免费插件,您可以从 WordPress 插件存储库下载。有一个专业版,但免费版对于我们今天要做的事情来说已经绰绰有余了。

前往 仪表板 > 插件 > 新增 并搜索 登录Press .找到它后,单击 立即安装 并激活它。

激活后,插件将添加新菜单项 ' 登录Press ' 移动到仪表板。只需单击 LoginPress > 设置 子菜单来设置插件的基本设置。

LoginPress 基本设置

在设置页面上,您可以设置一些基本内容,例如显示/隐藏以记住我选项、会话到期时间、注册字段上的自定义密码字段等(通常它只在注册页面上显示用户名和电子邮件字段)。

为您的 WordPress 登录页面打造品牌

完成基本设置后,让我们开始设置登录页面的样式。单击 Customizer 链接,它将打开 WordPress Customiser。是的,LoginPress 的样式设置位于 WP 定制器中。

正如您在上面看到的,该插件提供了许多选项来自定义我们的登录页面。

  • 商标 :您可以在此处添加自定义徽标并更改大小、链接等。
  • 背景: 您可以在此处更改背景图像和相关设置。此外,如果您愿意,您也可以使用视频作为背景。
  • 自定义登录表单: 在本节中,您可以调整登录表单的外观。
  • 自定义 Forget Form: 在这里,您可以为 忘记密码 表单。
  • 雷普查: 您可以在此处添加 Recaptcha,但需要该插件的付费版本。
  • 纽扣美感: 在此处更改 Login 按钮样式。

您还可以玩更多设置。最后,您将拥有一个更有利于用户体验的品牌登录页面。因此,您的客户或读者将永远不会再看到那个基本的、默认的 WordPress 登录页面。

这就是您可以使用 LoginPress 自定义登录页面的方法。让我们检查列表中的另一个插件。

如何使用 Theme My Login 插件自定义 WordPress 登录页面

主题 我的登录 是您可以在 WordPress 插件存储库中找到的另一个很棒的插件。只需转到 插件 > 新增 并搜索 主题 我的登录 .

安装并激活它。激活插件后,您将看到新添加的菜单项 主题 我的登录 在仪表板中。

这个插件与我们之前讨论的不同。而不是设置 WordPress 默认登录屏幕的样式 主题 我的登录 plugin 为您的登录页面、注销页面、注册页面、忘记密码页面和重置密码页面创建自定义 URL。正如您在下面的屏幕截图中看到的那样 www.yourtheme.com/wp-admin 不再是您的登录页面。此插件将其更改为 www.yourtheme.com/login。您可以将其更改为独特的内容,这将为您的 WordPress 网站提供另一层安全性。

此外 主题 我的登录 允许您创建自定义页面并将相应的表单添加到创建的页面。这样您就可以拥有唯一的自定义登录名,为您的网站注册页面。让我们深入研究一下,看看如何做到这一点。

前往 页面 > 新增 .创建新页面并发布它。然后添加新的 简码块 到页面并将下面的短代码粘贴到里面。

[主题我的登录]

然后复制 URL-slug 永久链接 meta 框。我们需要把这个 slug 粘贴到 主题 我的登录 设置页面,就像我在下面所做的那样(检查屏幕截图)。

所以现在,新创建的页面就是您的登录页面。由于它只是一个常规的 WordPress 页面,因此您可以按照自己的方式设置它的样式。无限制。向前移动并设置页面样式以匹配您的公司品牌。

您可以对其他页面执行相同的作,例如注册、忘记密码、重置密码等。以下是要使用的简码。

  • 报名表格 : [theme-my-login action=“注册”]
  • 丢失密码页面 : [theme-my-login action=“lostpassword”]
  • 重置密码页面 : [theme-my-login action=“重置通行证”]

不要忘记更新 主题 My Plugin 设置 页面。

这就是您以简单的方式自定义 WordPress 登录页面的方法。使用一些第三方插件。但是对于非技术人员来说,还有另一种方法会有点困难。我们只需在 functions.php 文件中添加一些 PHP 即可更改登录页面徽标和 URL。让我们看看如何做到这一点。

手动更改 WordPress 登录标志和 URL(适用于高级用户)

如果您像我一样希望将已安装的插件数量保持在尽可能少的程度,那么这对您来说是一个不错的选择。我们可以通过在主题的 functions.php 文件中添加一些 PHP 片段来手动更改登录徽标和 URL,并避免向我们的网站添加另一个插件。

第 1 步:将 logo 添加到媒体库

继续将徽标文件上传到媒体库,然后复制文件的 URL。

第 2 步:用 PHP 替换 logo

转到 Appearance > Theme Editor ,然后选择 functions.php 文件。

重要: 在创建 WordPress 网站时使用子主题始终是一种很好的做法。

向下滚动到 functions.php 文件的底部,然后将下面的 PHP 代码粘贴到其中。

function my_login_logo() { ?>
    <style type=“text/css”>
        #login h1 a, .login h1 a {
            背景图片: url(http:yourwebsite.com/my_logo.png);
		高度:65px;
		宽度:320px;
		背景大小:320px 65px;
		background-repeat:不重复;
        	底部内边距:30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' ); 

现在更新 背景图片 URL 添加到您在第一步中上传的徽标 URL。使用 CSS 宽度和高度设置以匹配您的 logo 宽度和高度。

因此,这将更新您可以在 wp-admin 页面上看到的默认 WordPress 徽标。但正如您已经知道的那样,该 logo 已链接到 wordpress.org 网站。使用另一个简单的 PHP 代码段,您可以将该 URL 更改为指向您网站的主页。

函数 my_login_logo_url() {
    返回 home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return '您的网站名称和信息';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' ); 

更改 ' 您的网站名称和信息 ' 更改为您的网站名称,并更新 functions.php 文件。现在转到 wp-admin 登录页面,您将看到徽标已更新。尝试单击徽标。它应该会将您重定向到主页。

就是这样。这就是您可以将 WordPress 登录页面自定义为独特、更个性化的方式。

喜欢你正在阅读的内容吗?

通过我们的时事通讯订阅随时了解情况

别担心,我们不会发送垃圾邮件。

类似文章

留言

您的电子邮件地址将不会被发布。 标记了必填字段 *

解决: 哪个数字更大 1 或 5 ?