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

作者: Xiaoge 所属分类: 标签： WordPress登录界面
发表于: 2016 年 3 月 24 日 1517

文章

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文件里边保存即可。具体效果如下：

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

文章

相关文章