如何完全自定义 WordPress 登录页面
WordPress 登录页面不太受欢迎，是吗?它更像是小巷里的一扇无聊的门，而不是壮观的珍珠门.但是你如何让用户进入你网站的秘密部分很重要，特别是如果你在那里有一些特别的东西.
人们进入您世界的门户有助于建立预期并让他们的窥视者了解里面的内容.品牌化您的 WordPress 登录页面可以帮助您提升受保护的内容和 WordPress 管理仪表板，告诉您的访问者，这不是普通的 WordPress 网站.
在这篇文章中，我将向您展示构建自定义 WordPress 登录页面的内容.然后，我将向您展示如何使用适当的 CSS 和/或 PHP 代码进行更改，以供那些想要完全控制或只想更改一点点的人使用.
然后，我们将介绍如何使用 布兰达，(以前的 Ultimate Branding 插件)，它将允许您快速完全自定义登录表单的外观，而无需接触任何代码.我们还有一个快速视频，向您展示了如何设置 Branda，敬请期待或跳过.
内容
如何使用 CSS 和 PHP 自定义不同的登录页面元素:
如何使用 Branda 自定义不同的登录页面元素:
WordPress 登录页面自定义
WordPress 登录页面与您的 WordPress 网站上的任何其他页面一样:
- 您可以通过使用 CSS 编辑元素来更改样式和颜色
- 您可以通过使用 PHP 中的钩子和过滤器更改布局来更改功能或添加、减去和移动元素.
如何将自定义 CSS 添加到您的 WordPress 登录页面
您的 WordPress 登录页面不使用 您的主题中包含的样式表.这意味着如果您尝试添加 CSS 以自定义登录页面到您的主题文件夹中的 styles.css 文件，更改将不会出现.您需要使用 PHP 将自定义 CSS 样式添加到登录页面的头部.
如果你只有几行 CSS，你可以创建一个自定义函数，并使用 login_enqueue_scripts 钩子将 CSS 插入登录页面的头部.
加载要点 8f5912dc5ed2138803b75b4a4e76a0b1
在上面的示例中，我想删除登录表单下的 Back to 链接.我只改变一件事，但是您可以在 <style> 标签之间自定义多个元素.
为了加载这个自定义 CSS，我使用 login_enqueue_scripts 将自定义函数和所有自定义 CSS 添加到登录页面.您可以将上面的所有代码添加到您的 functions.php 文件中，只需排除开头的 <?php.
这是添加几个样式的简单方法.如果您想进行大量更改，那么我建议您在主题文件中创建一个额外的样式表，这样会更容易管理.
要将自定义样式表添加到登录页面的头部，而不是在函数中使用 <style> 标签，您将使用 wp_enqueue_style 来加载样式表.
加载要点 fdacb1b790fed115ce8172a2ee2f4e2e
在上面的示例中，我将为登录页面添加自定义项的主题中的自定义 CSS 文件称为 style-login.css.我将把我的 CSS 添加到 style-login.css 并将上面的代码添加到我的函数文件中以加载它.
WordPress 登录页面元素
以下是默认 WordPress 登录页面的外观供参考:
要使用 CSS 自定义每个元素，您需要能够使用其选择器来定位它.换句话说，你需要知道它的名字.
以下是登录页面的一些特定选择器及其控制内容:
| 选择器 | 修改 |
|---|---|
| body.login | 页面背景 |
| body.login div#login h1 a | WordPress 标志 |
| body.login div#login form#loginform | 包含表单的白框 |
| body.login div#login form#loginform p label | 用户名密码字段标签 |
| body.login div#login form#loginform input | 两个输入字段(用户名和密码) |
| body.login div#login form#loginform input#user_login | 只是用户名输入框 |
| body.login div#login form#loginform input#user_pass | 只是密码输入框 |
| body.login div#login form#loginform p.forgetmenot | 记住我字段 |
| body.login div#login form#loginform p.submit input#wp-submit | 提交按钮 |
| body.login div#login p#nav a | 密码丢失链接 |
| body.login div#login p#backtoblog a | 返回链接 |
CSS 速成课程
好的，您找到要定位的元素了吗?好的.如果你熟悉 CSS，你就知道从这里开始，所以你可以跳过这个部分.其他人，跟我来.这是使用 CSS 自定义元素的方法.如果您遇到困难，请给我们留言.如果您感到沮丧并想要一个简单的解决方案，试试 Branda.
如何删除元素
要像我们之前所做的那样隐藏元素，例如 Back to 链接，您可以使用 display:none;
例如，隐藏丢失的密码链接的方法如下.
加载要点 8baf5851df3d8aa69a64d65040b0fb9a
如何改变背景
要更改元素的背景颜色，例如页面背景或按钮背景，您将使用 background-color:#222222; 并将 #222222 替换为您选择的颜色.在下面的示例中，我使用了浅蓝色的 #17a8e3.
我还使用 !important 来覆盖默认颜色.如果您使用的是非常具体的选择器，则不必使用 !important.但在某些情况下，如果您的自定义 CSS 不起作用，您可能需要添加它.
加载要点 52d80f1c8a5eeb0361f6bebd2e524561
如果您想添加背景图片，您将使用 background-image: url('login-logo.png'); 并将 login-logo.pnp 替换为您的图片文件网址.确保将背景文件添加到与样式表相同的目录中.如果您使用媒体库上传器，它将无法正常工作.
在下面的示例中，您会看到我将登录页面的柔和灰色背景更改为图像home-bg.jpg
加载要点 43b5acf33693153c93a2629afb4c138a
要更改 WordPress 登录徽标，您将使用以下内容:
加载要点 2ae179a0ba12280e60e01650d552d60e
如何在元素周围添加空间
向元素添加空间时，您需要指定是否希望空间位于元素的内部(填充)或外部(边距).
想想提交按钮.如果你想在按钮内部创造更多空间，让里面的文本有呼吸的空间并且不那么靠近边缘，你需要增加填充 padding:10px 10px 10px 10px;.如果您想在按钮外部创建空间以使其他元素不那么靠近，您将增加边距margin:10px 10px 10px 10px;
填充和边距有四个值.一个用于顶部，一个用于右侧，一个用于底部，一个用于左侧，按此顺序.
例如，对于具有 padding: 10px 20px 30px 40px 的元素:
- 顶部内边距为 10 像素.
- 右侧的内边距为 20 像素.
- 底部的内边距为 30 像素.
- 并且左侧将有 40 像素的内边距.
保证金的工作方式相同.
如何更改字体大小和颜色
使用 font-size: 16px; 更改段落文本、链接或表单域的字体大小.只需将 16px 替换为您想要的大小.你可以用color:#222222;改变文字颜色，只需要替换#222222即可.
加载要点 7bc9b9e348541ef71aadc4b5ddbfa15f
另外，请注意，您可以为一个元素添加多种样式.
如何更改边框
边框是一个由三部分组成的样式border: 2px solid #222222;.您将首先指定边框的宽度，然后指定样式(实线、虚线等)，最后指定颜色
这是一个具有多种样式的示例.
加载要点 2df4286a43e99ea1e52bbf9ec54d1fca
如何使用 PHP 更改您的管理员登录页面
要更改 WordPress 登录页面的功能，您将不得不使用 PHP.您将这些函数添加到您的 functions.php 文件中.
更改登录错误信息
除了标记您的错误消息之外，修改错误消息还有助于提高您网站的安全性.如果您输入了错误的密码或用户名，WordPress 将返回一条非常具体的错误消息，让您知道您做错了什么.这对用户有帮助，但对黑客也有帮助.
你可以使用这个函数来覆盖默认的错误信息:
加载要点 06250d06f513a9d2ddbd20ffa33fa06f
您可以通过更改引号中的"不正确的登录详细信息"消息来自定义消息.不过请留下引号.
更改重定向网址
当您的用户登录时，您可以将他们引导回前端而不是仪表板，这是默认情况下发生的.
要将用户重定向到主页，请将以下内容添加到您的 functions.php 文件中:
加载要点 d31c6f8c031f656d468ea0fcbb09c148
将记住我设置为选中
记住我复选框默认不勾选，但如果你有健忘的用户不勾选，可以自动启用.
要始终选中此框，请将此代码段添加到 functions.php:
加载要点 35449116e96eafabe5b7f27af2884fa6
如您所见，要让您最终控制页面样式，CSS 就是它的用武之地.但是，如果您想修改布局或重命名项目，则变得更加困难，因为您必须使用 PHP.这就是布兰达可以为您提供极大帮助的地方.让我们来看看如何使用 Branda 更改您的登录页面.
如何使用 Branda 自定义 WordPress 网站登录页面
Branda 可以帮助您做的不仅仅是简单的自定义.观看此视频，了解如何使用 Branda 彻底改造 WordPress 登录页面.您会看到 Micah 完成每个步骤，因此您将获得一个很好的概览并确切地知道该做什么.然后，我将在下面详细向您展示所有不同的选项.
首先，您需要安装 Branda 插件 在您的网站上.然后，您需要从 Branda 仪表板激活 自定义登录屏幕 模块.
自定义登录界面模块分为6个部分
- 模板-允许您更改登录页面的布局
- 内容-您可以在此处显示/隐藏元素或更改措辞或上传自定义图片
- 设计-更改边距、边框、不透明度，基本上是不同元素的样式
- 颜色-在此处更改任何元素的颜色
- 重定向-设置您希望访问者在登录或退出时被定向到的位置
- 自定义 CSS – 添加您自己的代码或修改 Branda 在您构建自定义登录表单时生成的代码.为什么不使用你刚刚学过的CSS?
让我教你如何使用 Branda 进行一些常见的自定义.以下是自定义以下内容的方法:
更改 WordPress 登录徽标
在 Branda 中，要更改 WordPress 登录徽标并插入您自己的徽标，请转到 Content 部分并打开 Logo and Background 下拉菜单.如果您的图片托管在其他地方，您可以从那里上传图片或输入 URL.如果您想要简约的外观，也可以完全移除徽标.
如果您真的想将您的徽标设计成更独特的形状，请转到 Branda 的 设计 部分并打开 徽标 下拉菜单.从那里您可以调整徽标容器的宽度以容纳更宽的徽标.您还可以更改徽标的位置、不透明度、圆角半径和边距.
自定义 WordPress 网站登录页面背景
在 Branda 中，您可以将柔和的灰色背景更改为您选择的颜色.要更改颜色，请转到 Colors 部分并打开 Background 下拉菜单.
要使用图片，您需要转到内容部分，然后打开徽标和背景.从那里您可以上传新图像.Branda 还为您提供了上传多张图像并创建幻灯片或每次显示随机图像的选项.要使用多张图片，请向下滚动到 Design， 并打开 Background 进行配置.
自定义 WordPress 登录表单
想知道如何在 WordPress 中创建客户端登录吗?重命名您的字段标签！在 Branda 中，转到 Content > Form 在您的自定义登录表单上重命名用户名和密码的输入字段.您可以使用客户 ID、会员编号或超级英雄名称，等等！
您可以使用 Branda 自定义表单的外观.转到 设计 > Form 编辑边距、内边距、边框、圆角半径和阴影.您也可以在同一位置修改按钮.调整按钮边框半径或调整按钮阴影.
要编辑表单的颜色，例如文本颜色、边框颜色等，您将转到 Colors > 表格
修改 WordPress 登录屏幕上的记住我复选框
Branda 可以轻松地自动检查或隐藏登录表单中的 记住我 复选框.转到 Content 部分并打开 Form 部分.在那里，您将能够显示或隐藏 记住我 框.如果您选择显示它，那么您也可以自动标记复选框.
自定义WordPress网站登录页面错误信息
啊，没有什么比错误信息更能让你感觉自己不知道自己在做什么了.
幸运的是，Branda 可以帮助您缓和错误消息或使它们更有帮助.在布兰达，转到内容 >要修改的错误消息.您可以在邮件中使用 HTML 来增加清晰度或强调重点.
要更改消息的样式，您可以通过转到设计来修改容器的不透明度 > 错误信息.要更改错误消息的颜色，请转到 Colors > 错误信息.
自定义 WordPress 登录表单下方的链接
在 Branda 中，您可以选择隐藏自定义登录表单下方的链接，方法是转到 Content > 表格下方的链接.您可以隐藏注册/丢失密码链接、隐私政策链接或返回链接.
您可以使用 Branda 调整登录表单下方链接的颜色，方法是转到 Colors > 表格下方的链接
自定义 WordPress 登录重定向
在 Branda 中，您可以在 Redirect 部分更改登录表单将用户重定向到的位置.
就是这样
如您所见，为登录页面设置皮肤的方法不止一种.自定义站点登录是取悦用户和发表声明的一种简单方法.如果你想改变一些东西并且熟悉 PHP 和 CSS，那么你可以直接编辑你的文件.但如果您真的想全力以赴，Branda 可以帮助您将登录页面提升到一个新的水平.
但是为什么要停下来，WPMU DEV 为您提供所有事物的白标！对于定制网站来说，这是一种特别好的接触.
如果您想试试 Branda，看看我们在大修 Ultimate Branding 后添加了什么，您可以免费下载插件.你会爱上她的.她会成为你最好的新朋友.
标签:
