如何轻松自定义WordPress登录页面
Ø版本的WordPress的多年发展中，默认的登录屏幕设计没有改变，仍然是简单和干净是在不同屏幕尺寸的作品。但是，在为特定客户（特别是公司）构建网站时，如果您可以更改登录屏幕的颜色方案以及与网站主题相匹配的徽标，那会很好看，对吗？
好的，它可以轻松完成。关于WordPress的好处是后端的每个部分都可以通过使用php 函数进行自定义。
在今天的教程中，我将向您展示如何以您希望的方式自定义WordPress登录屏幕。首先，我们将更改徽标，然后更改配色方案和其他一些元素。让我们开始吧。
默认的WordPress登录屏幕
我们要建立什么
更改徽标
WordPress使用CSS来显示背景图像。它通常插在H1和锚标签之间。但是，对于本教程，我们将在二十四个WordPress默认主题中使用functions.php文件。
首先，将您喜欢的徽标（png文件格式）放在图像文件夹中的二十四个WordPress默认主题目录中（对于本教程，我使用了custom-login-logo.png徽标）。请注意，徽标的最大尺寸应为80 x 80px; 但是，您也可以更改自定义CSS文件中的维度。
接下来，打开二十四个WordPress默认主题里面的functions.php文件。我们将使用login_enqueue_scripts钩子将CSS插入我们的登录页面的头部以加载我们的首选徽标。在functions.php文件的最后一行之后插入以下代码，然后将首选徽标文件名放在目录路径中。
function login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-login-logo.png);
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'login_logo' );更改图标的链接
默认情况下，图标链接到WordPress.org网站。您还可以将此链接更改为首选图标，并将其重定向到您自己的网站。为此，请使用下面的挂钩并在登录图标挂钩后立即将其粘贴到functions.php中。
function login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'login_logo_url' );更改登录屏幕的设计
要自定义默认WordPress登录屏幕的样式，我们需要添加登录页面的样式。为此，我们需要为我们自己的CSS文件使用钩子。这将覆盖默认登录屏幕的样式。
首先，我们需要在二十四个WordPress默认主题的CSS文件夹中创建样式表（对于本教程，我将样式表命名为custom-login-styles.css），然后在functions.php文件中添加以下钩子。
function login_custom_stylesheet() { ?>
<link rel="stylesheet" id="custom_wp_admin_css" href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/css/custom-login-styles.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_enqueue_scripts', 'login_custom_stylesheet' );接下来，打开您在默认的二十四个WordPress主题的CSS文件夹下创建的CSS文件。我们首先使用以下代码自定义登录屏幕的背景颜色和字体。
body.login {
background-color: #3d3d3d;
font-family: Helvetica;
}现在我们已经更改了登录屏幕的背景颜色和字体，让我们在登录表单的持有者上放置一个漂亮的灰色背景。
.login form {
background: #f3f3f3;
}接下来，为正常，焦点和悬停状态自定义表单文本框的外观。
.login form .input,.login input[type=text],.login form input[type=checkbox] {
background: #fff;
border: 1px solid #b7b7b7;
padding: 5px;
}
.login form .input:hover,.login form .input:focus,.login input[type=text]:hover,.login input[type=text]:focus,.login form input[type=checkbox]:hover,.login form input[type=checkbox]:focus {
background: #fff;
outline: none;
}然后，更改登录按钮的背景颜色，并在左侧和右侧给它一些填充。我还将字体大小设置为13px，使其看起来像一个平面按钮。
body.login div#login form#loginform p.submit input#wp-submit {
border-radius: 0;
background: #ffab00;
outline: none;
border: none;
padding: 0 25px;
text-align: center;
font-size: 13px;
}最后，让我们更改正常和悬停状态的链接文本（忘记密码和返回登录链接），然后将两者都定位到屏幕中心。
body.login div#login p#nav {
margin: 20px auto;
text-align: center;
}
body.login div#login p#backtoblog {
margin: 0 auto;
text-align: center;
}
.login #nav a:hover,.login #backtoblog a:hover {
color: #ffab00;
}最后的话
我们希望现在您可以看到WordPress的巨大优势以及使用它的可能性。我们同意，它可能不适合您想要构建的每个可能的项目，但对于大多数项目而言。欢迎在下方分享你的意见。
本文作者为许都，未经作者授权，禁止转载。