如何创建自定义 WordPress 登录页面

有人可能会争辩说登录页面是任何 WordPress 网站中最重要的页面。 没有登录的能力，博客所有者如何发布精彩内容？ 除了内容创建之外，这也是进入各种 WordPress 配置选项的方式。

默认的登录页面非常简单，并且很好地满足了它的目的。 它有必要的字段供用户输入他们的 WordPress 凭据，页面控制对管理屏幕的访问，只允许注册用户登录。

作为设计师，您可能已经花费数小时来创建完美的网站设计。 在整个用户体验中贯彻该设计非常重要，即使并非所有用户都会与登录页面进行交互。 这是另一个添加额外细节的机会，会给那些经常登录该站点的用户留下积极的印象。

（另外，将页面移动到不太明显的 URL 被认为是 WordPress 安全最佳实践！）虽然它通常不是 WordPress 主题设置的一部分，但对 WordPress 登录页面进行自定义非常简单。

如何访问 WordPress 登录页面

您可能非常熟悉访问此页面，无论您的网站职责恰好包括什么。 但以防万一，它通常位于网站的根目录中。 登录页面通常类似于www.mysite.com/wp-login.php 。 正如您所看到的，这一个还没有设计样式。

在某些情况下，可能在其自己的子目录中安装了 WordPress。 然后它将类似于www.mysite.com/directory-name/wp-login.php 。

如何自定义 WordPress 登录页面

在以下步骤中，CSS 将用于样式目的。 此外，还将在functions.php文件中添加特定于主题的代码，以实现自定义页面。

与大多数教程一样，您需要先在测试环境中进行尝试。 如果您正在寻找一个好的测试环境工具，您将希望熟悉 Local。 您可以在上线前有效地测试网站上的新内容。

我们将在本教程中对functions.php文件进行修改，以便您了解更改的工作原理。 但是，也可以选择使用这些概念来创建插件并在其中添加任何可能的修改，而不是在functions.php文件中。 对于本教程，登录页面的设计更改非常特定于主题，这就是我们选择将它们添加到主题而不是制作插件的原因。

为自定义创建一个新文件夹

将自定义添加到主题时，组织起来是关键。 您需要专门为这些更改创建一个新文件夹。 为此，找到您当前的活动主题并创建一个名为“登录”的文件夹。

接下来，需要一个 CSS 文件来引用自定义登录样式。 在新的登录文件夹中，创建一个空白的 CSS 文件并为其指定一个易于记忆的名称。 在这种情况下，它是login-styles.css 。

这个样式表将如何连接？ 它需要在主题的functions.php文件中引用。 打开functions.php文件并粘贴以下代码片段。（如果您使用的不是login-styles.css ，请确保包含您自己的 CSS 文件命名。）

 function custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'login/login-styles.css" />'; } add_action('login_head', 'custom_login');

更改标志

这是一个相当容易做出的改变，它对品牌提升有很大的影响。 浏览器检查器工具对确定页面结构有很大帮助。 在此示例中，使用了 Chrome 开发人员工具。 要将 WordPress 徽标更改为您自己的徽标，您需要更改与此标题关联的 CSS 样式：

 <h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>

我们想让 CSS 特定化，因此以.login类为目标的div将允许我们在该div中设置标题和链接的样式。

为了让事情井井有条，我们创建了一个单独的图像文件夹。 这是可选的，如果需要，您可以引用其他位置的文件。 只需确保文件路径对于您要使用的图像是正确的。

 .login h1 a { background-image: url('images/login-logo.png'); }

我们使用默认样式中指定的 84px 高度来完成此操作。 如果你想让它变大或变小，你可以在这个 CSS 样式表中指定。 也有机会指定不同的边距和填充。

为什么不能换掉原来的标志？ 原因是当WordPress更新时，它可能会被抹掉。

通过这种简单的风格，我们现在可以告别通用的 WordPress 徽标。 这种徽标互换使它感觉更加个性化和品牌化。

样式化自定义背景

背景可以是纯色、图案或基于图像的东西。 在本例中，我们将在背景中添加一张黑白抽象的“科技”照片。

使用浏览器开发工具，可以研究结构。 检查时，您会看到已经为正文设置了背景样式。 事情很一般，所以让事情更具体将确保您不会做出任何您不想要的全局更改。 有一个应用于正文的类，称为.login ，它将非常有用（这是我们在上面的示例中用于徽标的类，因为它是选择器的一部分）。

 body.login { background-image: url('images/example-image.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; }

如果图像未显示，请仔细检查图像路径是否正确。

事情在这里开始成形； 即使只有这些微小的变化，登录页面看起来也比默认页面更品牌化、更有趣。

调整标志链接

这当然不是一个亮点，但现在您在登录页面上有了自己的徽标，它应该链接到您的实际网站。 目前，它转到wordpress.org 。 这一切都很好，因为wordpress.org是一个受欢迎且有用的地方，但在我们看来，拥有一个浏览器书签绰绰有余。 它不必是登录页面的一部分，因为快速访问项目站点似乎更有用。

要更改链接值以便徽标链接到您的 WordPress 站点，请使用此功能（并记住插入您自己的网站 URL）：

 function login_logo_url() { return 'https://www.mysite.com'; } add_filter('login_headerurl', 'login_logo_url');

如果您想知道过滤器从何而来，我们必须查看函数参考以找到login_headerurl和login_headertitle 。

所以现在链接转到了正确的位置，但是标题文本呢？ 如果将鼠标悬停在徽标上，您会看到“Powered by WordPress”作为标题标签。 这绝对没问题，但这并不能完全描述链接的去向。 这是非常快速和容易修复的，所以值得多花时间。 要获得更准确的标题，请添加这个简单的函数。

 function login_logo_text() { return 'The Title'; } add_filter('login_headertitle', 'login_logo_text');

更多造型选择

随意使用 CSS 并扩展我们在这里所做的事情。 您可以使用 CSS 为 WordPress 登录页面上的每个 HTML 元素设置样式。 上面的例子只是触及了表面。 按钮、链接和表单背景都可以自定义。 并且不要忘记排版，因为它也可以定制。

如果您已经开发了一种表单样式，那么将这些样式应用到登录页面将是一种无缝的体验。 按钮也是如此。 这使它成为一种一致的体验，并且不会因为使用与实际站点上使用的按钮完全不同的按钮而让用户失望。 如果您已经创建了 Web 样式指南，这将非常有助于确定如何将一致的设计应用于登录页面。

如果您不喜欢 CSS，现有的 WordPress 插件可以帮助您创建自定义 WordPress 登录页面。 以下是一些值得一试的选项：

• 主题我的登录
• 自定义登录
• 自定义登录页面定制器

登录页面经常被遗忘，但是通过了解这个页面的潜力，它可以很容易地成为设计过程的一部分。 通过一些简单的修改，您可以轻松地个性化您的 WordPress 登录页面，以匹配您网站的外观和风格。