wordpress后台login界面美化

更改wordpress默认的login界面,通过CSS调整布局,添加了页面背景图,好看多了,把以下代码添加至主题function.php文件中,图片上传至主题images文件夹下就行。薇晓兰后台已经自定义的修改了,界面如下。

//自定义登录页面的LOGO图片
function my_custom_login_logo() {
echo '<style type="text/css">
.login { 
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    background-image: url('.get_bloginfo('template_directory').'/images/20210127.jpg);
    padding-left: 30px;
    padding-right: 30px;
 }

#login{
    width: 30.6666% !important;
    margin-right: 6% !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.login h1 a{
    background-image:url('.get_bloginfo('template_directory').'/images/wxl_blog_logo-25.png);
    background-size: 150px;
    background-position-y: center top;
    background-repeat: no-repeat;
    color: #444;
    height: 43px;
    font-size: 20px;
    line-height: 1.3em;
    margin-top: 10px;
    margin-bottom: 25px;
    margin-left: 110px;
    padding: 0;
    width: 150px;
    text-indent: -9999px;
    outline: 0;
    display: block;
}

.login form {
    margin-top: 40px;
    margin-left: 0;
    padding: 50px 50px 50px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
}

.login #nav, .login #backtoblog {
    margin-top: 0px;
    background: #fff;
    font-size: 16px;
    padding: 0 120px;
    height: 60px;
}

</style>';
}
add_action('login_head', 'my_custom_login_logo');

//更改login-logo链接为网站首页
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));


转载请注明本文链接:https://blog.weixiaoline.com/1214.html