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();