如何轻松自定义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文件的最后一行之后插入以下代码，然后将首选徽标文件名放在目录路径中。

PHP

function login_logo() { ?&amp;gt;
	&amp;lt;style type="text/css"&amp;gt;
    	body.login div#login h1 a {
        	background-image: url(&amp;lt;?php echo get_stylesheet_directory_uri(); ?&amp;gt;/images/custom-login-logo.png);
    	}
	&amp;lt;/style&amp;gt;
&amp;lt;?php }
add_action( 'login_enqueue_scripts', 'login_logo' );

更改图标的链接

默认情况下，图标链接到WordPress.org网站。您还可以将此链接更改为首选图标，并将其重定向到您自己的网站。为此，请使用下面的挂钩并在登录图标挂钩后立即将其粘贴到functions.php中。

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文件中添加以下钩子。

PHP

function login_custom_stylesheet() { ?&gt;
	&lt;link rel="stylesheet" id="custom_wp_admin_css"  href="&lt;?php echo get_bloginfo( 'stylesheet_directory' ) . '/css/custom-login-styles.css'; ?&gt;" type="text/css" media="all" /&gt;
&lt;?php }
add_action( 'login_enqueue_scripts', 'login_custom_stylesheet' );

接下来，打开您在默认的二十四个WordPress主题的CSS文件夹下创建的CSS文件。我们首先使用以下代码自定义登录屏幕的背景颜色和字体。

CSS

body.login {
	background-color: #3d3d3d;
	font-family: Helvetica;
}

现在我们已经更改了登录屏幕的背景颜色和字体，让我们在登录表单的持有者上放置一个漂亮的灰色背景。

CSS

.login form {
	background: #f3f3f3;
}

接下来，为正常，焦点和悬停状态自定义表单文本框的外观。

CSS

.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，使其看起来像一个平面按钮。

CSS

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;
}

最后，让我们更改正常和悬停状态的链接文本（忘记密码和返回登录链接），然后将两者都定位到屏幕中心。

CSS

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的巨大优势以及使用它的可能性。我们同意，它可能不适合您想要构建的每个可能的项目，但对于大多数项目而言。欢迎在下方分享你的意见。

本文作者为许都，未经作者授权，禁止转载。

wordpress 屏幕登录