无需修改核心文件，自定义WordPress后台登录界面

最后更新： 1年之前在 WordPress常用代码, 隽永东方内训教程标签： WordPress登录界面 279 // 评论数 // 参与数

WordPress后台登录界面比较简陋，如果直接去修改wp-login.php的样式，势必会导致下次升级WordPress版本的时候，所有的修改都恢复原样，于是我们设法通过hook的方式来处理类似的修改，找到了如下完美的代码：

function custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url(/wp-content/themes/eastdesign/images/login_logo.png) !important;background-size: auto !important;height: 80px !important;width: 271px !important; }
        html {background: #347edd;}
        body { font-family: PingHei,FZLTXHK,"Microsoft YaHei",Arial,Verdana,sans-serif!important;background: #347edd url(/wp-content/themes/eastdesign/images/login_background.jpg) center;}
        .login #backtoblog a, .login #nav a, .login h1 a {color: #fff;}
        .login form {border-radius: 10px;margin-top: 30px;background-color: #fff;border: 1px solid rgba(255, 255, 255, 0.7);box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);}
        .login label {color: #000;}
        .intl-tel-input .country-list .flag, .intl-tel-input .country-list .country-name {color:#000;}
        #major-publishing-actions input, #minor-publishing-actions .preview, #minor-publishing-actions input, #pass-strength-result, .login h1 {margin-top: 0;}
        .ds-icons-32 a.ds-renren,.ds-icons-32 a.ds-kaixin,.ds-icons-32 a.ds-douban {display: none;}
    </style>';
}
add_action('login_head', 'custom_login_logo');
function my_login_logo_url() {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return '<span class='wp_keywordlink'><a href="https://www.eastdesign.net" title="隽永东方设计工作室" target="_blank">隽永东方设计工作室</a></span>';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

function custom_login_logo() {

echo '<style type="text/css">

h1 a { background-image:url(/wp-content/themes/eastdesign/images/login_logo.png) !important;background-size: auto !important;height: 80px !important;width: 271px !important; }

html {background: #347edd;}

body { font-family: PingHei,FZLTXHK,"Microsoft YaHei",Arial,Verdana,sans-serif!important;background: #347edd url(/wp-content/themes/eastdesign/images/login_background.jpg) center;}

.login #backtoblog a, .login #nav a, .login h1 a {color: #fff;}

.login form {border-radius: 10px;margin-top: 30px;background-color: #fff;border: 1px solid rgba(255, 255, 255, 0.7);box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);}

.login label {color: #000;}

.intl-tel-input .country-list .flag, .intl-tel-input .country-list .country-name {color:#000;}

#major-publishing-actions input, #minor-publishing-actions .preview, #minor-publishing-actions input, #pass-strength-result, .login h1 {margin-top: 0;}

.ds-icons-32 a.ds-renren,.ds-icons-32 a.ds-kaixin,.ds-icons-32 a.ds-douban {display: none;}

</style>';

}

add_action('login_head', 'custom_login_logo');

function my_login_logo_url() {

return get_bloginfo( 'url' );

}

add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {

return '隽永东方设计工作室';

}

add_filter( 'login_headertitle', 'my_login_logo_url_title' );

只需将以上代码加入模板目录里边的functions.php文件里边保存即可。

具体效果如下：

隽永东方创始人 & CEO
生于福建长汀，学于海滨大连，创业于国际都市上海，隽永东方设计工作室创始人兼CEO，喜欢音乐、运动、旅游，热心公益事业，在网站设计开发和运营数据中心等领域皆有多年从业经验，独特的国际视角，以客户为中心，视客户需求为核心价值观……
Call Me Email Us Weibo Facebook Twitter Google+ LinkedIn
作者： Xiaoge