设计风格化的自定义WordPress登录屏幕

本指南向您展示了如何使用自定义CSS和一个小的PHP功能，通过几个简单的步骤来显着自定义WordPress登录屏幕。 我们将超越简单的徽标更改，并创建一个完全品牌的登录体验。

（单击以查看完整版）>

>在此处下载本教程中使用的背景图像：

>

本教程分为部分，使您只能自定义所需的方面。 无论您是要微妙的调整还是进行完整的大修，本指南都可以覆盖您。

>

>步骤1：修改

functions.php

首先，您需要将代码添加到主题的

文件中，以告诉WordPress使用自定义样式表作为登录屏幕。 将以下代码粘贴到您的functions.php>文件中：functions.php

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

此代码将其连接到

>操作中，并包含您的login_head文件。 确保包含功能和stylized-login.css。 CSS文件的路径相对于主题目录。 如有必要，请调整。add_action

步骤2：创建

stylized-login.css>

>在主题目录中创建一个名为

的文件（与您的stylized-login.css>相同的文件夹）。 这是您将添加所有自定义CSS的地方。style.css

步骤3：自定义您的登录屏幕（CSS）

>现在，让我们将CSS添加到您的文件中。 以下代码提供了全面的自定义，但是您可以选择性地使用所需的零件。

stylized-login.css记住将占位符替换为

>和

/* Logo above login form */
.login h1 a {
  background-image: url('logo.png'); /* Replace 'logo.png' with your logo */
}

/* Background image */
body.login {
  background-image: url('bg.png'); /* Replace 'bg.png' with your background image */
}

/* Background of form */
.login form {
  background: rgba(0, 0, 0, .6); /* Adjust transparency as needed */
}

/* Border for the form */
#loginform {
  border-color: #33d42a; /* Change border color */
}

/* Labels for the form */
.login label {
  font-family: "Courier New", Courier, monospace;
  font-size: 28px;
  color: #33d42a; /* Change label color */
}

/* Username text box */
.login input[type="text"] {
  font-family: "Courier New", Courier, monospace;
  font-size: 24px;
  background-color: rgba(0, 0, 0, .6); /* Adjust transparency */
  border-color: #33d42a; /* Change border color */
}

/* Password text box */
.login input[type="password"] {
  background-color: rgba(0, 0, 0, .6); /* Adjust transparency */
  border-color: #33d42a; /* Change border color */
}

/* Login button */
.wp-core-ui .button-primary {
  background-color: #000;
  background-image: none;
  border-color: #33d42a;
  border-bottom-color: #13f278;
  color: #33d42a; /* Change button text color */
}

/* Login button hover */
.wp-core-ui .button-primary:hover {
  background-color: #33d42a;
  background-image: none;
  border-color: #33d42a;
  color: #000; /* Change hover text color */
}

/* Lost password and 'Back to' links */
.login #nav a, .login #backtoblog a {
  color: #33d42a !important;
  text-shadow: none;
}

/* Lost password and 'Back to' hover links */
.login #nav a:hover, .login #backtoblog a:hover {
  color: #33d42a !important;
  text-shadow: 0 1px 0 #33d42a;
}

的占位符，并用图像的实际文件名替换。 理想情况下，您的徽标应为247x63像素，以实现最佳拟合。>

步骤4：更改徽标链接（可选）

要更改与徽标关联的链接，将其添加到您的functions.php>文件：>

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

这将徽标重定向到您的网站的主页。

> 进行这些更改后，清除浏览器缓存并测试您自定义的登录屏幕。请记住，在更改任何代码之前，请始终备份您的网站。

>

以上是设计风格化的自定义WordPress登录屏幕的详细内容。更多信息请关注PHP中文网其他相关文章！