修改WordPress后台的登录界面

修改WordPress后台的登录界面的插件很多，但大部分都有很多我用不到的功能，会浪费资源，设置也不那么直观，所以决定用写代码的方式来实现。

用代码修改WordPress后台的登录界面

代码可以放在主题的functions.php里。

class Sola_Custom_Admin_Login{
    
    private static $instance = null;

    public static function get_instance(){
        if( self::$instance == null ){
            self::$instance = new self();
        }

        return self::$instance;
    }

    function __construct(){
        add_filter( 'login_title', [$this, 'login_title'], 10,2 );
        add_filter( 'login_headerurl', [$this, 'login_headerurl'] );
        add_filter( 'login_headertext', [$this, 'login_headertext'] );
        add_action( 'login_head', [$this, 'login_styles'] );
    }

    // 浏览器标题，默认带有WordPress字样
    function login_title( $login_title, $title ){
        return $title .' - '. get_bloginfo( 'name' );
    }

    // logo的链接，默认链接到WordPress
    function login_headerurl(){
        return site_url();
    }

    // a标签里的文字，logo是a标签的背景
    function login_headertext(){
        return '';
    }

    // 通过css修改页面样式
    function login_styles(){
        ?>
<style>
	/* 定制页面背景 */
	body{
		background-color: #333333;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%237DDD7F'/%3E%3Cstop offset='1' stop-color='%23333333'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%239FDDAF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%239FDDAF' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
		background-attachment: fixed;
		background-size: cover;
	}
	/* 修改Logo */
    .login h1 a{
        background-image: url(http://localhost/wordpress/wp-content/uploads/2022/03/logo.svg);
        height: 46px;
        width: 160px;
        background-size: contain;
    }
    /* 控制登录表单的宽度和背景 */
    #login{
        width: 480px;
        max-width: 100%;
    }
    .login form{
        background: rgba(255,255,255,.25);
        border: none;
    }

    /* 控制表单字段和提交按钮的样式 */
    .login label{
        font-size: 16px;
        color: #000;
    }
    .login input[type="text"], 
    .login input[type="password"]{
        border-radius: 0;
        border: none;
        border: 1px solid #000;
        background: none;
        margin-bottom: 24px;
    }
    #login input[type="submit"]{
        background: #507551;
        border: none;
        padding: 0 24px;
        border-radius: 0;
    }
    #login input[type="submit"]:hover{
        background: #3c583d;
    }
    /* 控制密码字段的小眼睛图标的颜色 */
    #login .button.button-secondary{
        color:#50575e;
    }
    
    a.privacy-policy-link{
        color: #50575e;
        text-decoration: none;
    }
    /* 语言切换器的buton样式 */
    .language-switcher input[type="submit"]{
    	background: #507551;
    	border: none;
    	padding: 0 24px;
    	border-radius: 0;
    	color: #fff;
    }
    .language-switcher input[type="submit"]:hover{
    	background: #3c583d;
    	color: #fff;
    }
    @media (min-width: 500px){
        .login #nav, .login #backtoblog{
            padding-left: 0;
        }
        .login form{
            padding: 48px;
        }
    }
</style>
        <?php
    }
}
Sola_Custom_Admin_Login::get_instance();