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 '隽永东方设计工作室';
    }
    add_filter( 'login_headertitle', 'my_login_logo_url_title' );

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

    具体效果如下:

    Eastern_Design_Studio-custom-login