自定义WordPress后台登录页面
     2016-4-16    +2°    1442  

似乎没有多少人喜欢wordpress的默认后台登陆界面,自定义WP的登陆界面成了不少人迫切想做的事情。这里是记录的开溜网修改的后台登录界面步骤:通过代码自定义后台登陆页面样式,适合通过纯代码实现相关功能的博主,但需要有一定的css样式基础。

效果截图预览:

自定义WordPress后台登录页面

下面我们来修改主题代码。

步骤1:修改functions.php函数:

找到主题函数functions.php打开。在文件的最下?>前添加以下代码:

//后台登录页面
    function custom_login() {
        echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/login.css" />'."\n";
        echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script>'."\n";
    }
    add_action('login_head', 'custom_login');
//后台登录页面标题
    function custom_headertitle ( $title ) {
        return get_bloginfo('name');
    }
    add_filter('login_headertitle','custom_headertitle');
//后台登录页面链接
    function custom_loginlogo_url($url) {
        return esc_url( home_url('/') );
    }
    add_filter( 'login_headerurl', 'custom_loginlogo_url' );
//后台登录页面底部
    function custom_html() {
        echo '<div class="footer">'."\n";
        echo '<p>Copyright &copy; 2012 All Rights | Theme by <a href="http://www.bt-tt.net" target="_blank">开溜网</a></p>'."\n";
        echo '</div>'."\n";
        echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/resizeBg.js"></script>'."\n";
        echo '<script type="text/javascript">'."\n";
        echo 'jQuery("body").prepend("<div class=\"loading\"><img src=\"'.get_bloginfo('template_directory').'/images/login_loading.gif\"></div><div id=\"bg\"><img /></div>");'."\n";
        echo 'jQuery(\'#bg\').children(\'img\').attr(\'src\', \''.get_bloginfo('template_directory').'/images/login_bg.jpg\').load(function(){'."\n";
        echo '  resizeImage(\'bg\');'."\n";
        echo '  jQuery(window).bind("resize", function() { resizeImage(\'bg\'); });'."\n";
        echo '  jQuery(\'.loading\').fadeOut();'."\n";
        echo '});';
        echo '</script>'."\n";
    }
    add_action('login_footer', 'custom_html');

 

步骤2:调用js

新建一个js文件,命名为resizeBg.js,将其放入主题js文件夹中,里面粘贴以下代码:

// 后台背景修改
function resizeImage(id) {
        jQuery('#' + id).css({
                'position': 'absolute',
                'top': '0px',
                'left': '0px',
                'width': '100%',
                'height': '100%',
                'z-index': -1,
                'overflow': 'hidden'
        });
        var w = jQuery(window).width(),
        h = jQuery(window).height(),
        o = jQuery('#' + id).children('img'),
        iW = o.width(),
        iH = o.height();
        o.css({
                'display': 'block',
                'opacity': 0
        });
        if (w > h) {
                if (iW > iH) {
                        o.css({
                                'width': w
                        });
                        o.css({
                                'height': Math.round((iH / iW) * w)
                        });
                        var newIh = Math.round((iH / iW) * w);
                        if (newIh < h) {
                                o.css({
                                        'height': h
                                });
                                o.css({
                                        'width': Math.round((iW / iH) * h)
                                })
                        }
                } else {
                        o.css({
                                'height': h
                        });
                        o.css({
                                'width': Math.round((iW / iH) * h)
                        })
                }
        } else {
                o.css({
                        'height': h
                });
                o.css({
                        'width': Math.round((iW / iH) * h)
                })
        }
        var newIW = o.width(),
        newIH = o.height();
        if (newIW > w) {
                var l = (newIW - w) / 2;
                o.css('margin-left', -l)
        } else {
                o.css('margin-left', 0)
        }
        if (newIH > h) {
                var t = (newIH - h) / 2;
                o.css('margin-top', -t)
        } else {
                o.css('margin-top', 0)
        }
        o.css({
                'opacity': '1'
        })
}

 

步骤3:为登录界面添加样式表

新建一个css文件,命名为login.css,将其放入主题css文件夹中,里面粘贴以下代码:

/* clear float*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: block;
}
/* common*/
html {
    overflow:hidden;
}
body {
    background:none !important;
    overflow:hidden;
}
#bg img {
    opacity:0;
}
/* login*/
#login {
    font:12px;
    padding:50px 100px;
    margin:80px auto 0;
    background-color:rgba(0,0,0,.5);
}
#login h1 a {
    font-weight:bold;
    text-indent:0px;
    background:none !important;
    font-size:36px;
    height:64px;
    width: 280px;
    line-height:64px;
    line-height:180%;
    text-align:center;
    color:#FFF;
    margin-bottom:10px;
}
#login form {
    padding:10px 0px;
    background:rgba(0,0,0,0);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
#login form p {
    position:relative;
    padding:0px 15px;
}
#login a {
    color:#FFF !important;
}
#login_error a {
    color:#000 !important;
}
#login form label {
    color:#c1c1c1;
}
#login form .input {
    background: rgba(0,0,0,.4);
    padding: 5px;
    border-radius: 3px;
    border: 1px dashed #666;
    color: #ccc !important;
    -webkit-transition: .5s border-color ease-in-out;
}
.login .input {
    background: rgba(0,0,0,.4);
}
#login form .input:focus {
    box-shadow:none;
}
#login .form-send .bot {
    width:100%;
    border-bottom:1px solid #ccc;
}
#login form .forgetmenot {
    float:none;
}
#login form p.submit {
    padding:0px 15px;
}
#login .submit .button {
    width:100%;
    margin:10px auto;
    border:none;
    float:none;
    border-radius:5px;
    height:34px;
    font-size:14px;
    text-align:center;
    color:#FFF;
    background:#529ECC;
    font-weight:bold;
    cursor:pointer;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}
#login .submit .button:hover {
    background:#356fb7;
}
/* footer*/
.footer {
    font-size:12px;
    position:absolute;
    left:0px;
    bottombottom:10px;
    height:30px;
    padding:0px 20px;
    line-height:30px;
    color:#FFF;
}
.footer a {
    text-decoration:blink;
    color:#FFF;
    border-bottom: 1px dotted #fff;
}
/* loading*/
.loading {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:99;
    overflow:hidden;
    background:#000;
}
.loading img {
    position:absolute;
    top:50%;
    left:50%;
    margin:-5px 0px 0px -29px;
}
/* 多说图标 */
.ds-login {
    margin: 0;
    padding: 0 0 0 26px;
}
@media screen and (max-width: 520px) {
#login {
    font:12px;
    padding:20px 20px;
    margin:20px auto 0;
    background-color:rgba(0,0,0,.5);
}
.ds-login {
    margin: 0 0 10px;
    padding: 0 0 0 26px;
}
}

 
样就可以了,到此大家美化WordPress后台登录界面已经完成,赶紧去看看吧!!!提醒大家的是页面不兼容IE,一个IE我都没测试,测试了Chrome 和 FireFox。

这里提供了所需的文件下载地址:

  网盘云盘下载