修改WordPress登录页面背景和logo

突然想把后台登陆页面Logo和链接替换掉。

每次想修改时，都得上网搜下代码，老马这里记录一下自定义登录界面的方法，保存一下。

把下面代码加到主题 functions.php文件中：

<?php
function custom_login() {
echo ‘<link rel=”stylesheet” tyssspe=”text/css” href=”‘ . get_bloginfo(‘template_directory’) . ‘/custom_login/custom_login.css” />’; }
add_action(‘login_head’, ‘custom_login’);
?>

在当前主题新建custom_login文件夹，在其中新建custom_login.css和图片logo.png

将下面代码添加到 custom_login.css 中：

/** 替换logo **/
.login h1 a{
background: #fff url(logo.png) no-repeat center;
width:400px;
}

/** 背景及字体 **/
HTML,body.login{
background:#f2f2f2;
font: 14px ‘Microsoft YaHei’, Arial, Lucida Grande, Tahoma, sans-serif;
}

修改 logo 链接地址

function custom_loginlogo_url($url) {
return ‘https://www.xudu.org’;
}
add_filter( ‘login_headerurl’, ‘custom_loginlogo_url’ );

如需修改其他样式，代码如下

/** 去掉链接下划线 **/
html a{
text-decoration: none;
}
/** 登录DIV **/
#login {
background:#fff;
border: 1px solid #ccc;
width:400px;
margin: 40px auto 0;
padding: 10px 10px 20px 10px;
border-radius:5px;
box-shadow:0 4px 10px -1px rgba(200, 200, 200, 0.7);
}

/** 提示 **/
.updated, .login .message {
background:#fff;
border: none;
text-align: center;
}
/** 表单 **/
.login form {
box-shadow:none;
border: none;
}
#loginform, #registerform, #lostpasswordform{
background:transparent;
border:none;
}
/** 按钮 **/
.button-primary,.submit .button-primary,#login form .submit input {
width:83px;
height:25px;
font-weight: bold;
border:none;
}