WordPress 纯代码美化默认登录页面

共计 3471 个字符，预计需要花费 9 分钟才能阅读完成。

清朝云博客使用的是开源的 puock 主题，作者没有对后台登录页面进行美化，依旧是默认的登录样式。

/>

其实可以通过纯代码进行美化登陆页面，美化后效果如下：

/>

在 functions.php 添加如下代码，对于 custom_login_style 函数，需要自行修改 logo 和 背景图片的路径。

function io_login_header(){
    echo '<div class="login-container">
    <div class="login-body">
        <div class="login-img shadow-lg position-relative flex-fill">
            <div class="img-bg position-absolute">
                <div class="login-info">
                    <!--<h2>'. get_bloginfo('name') .'</h2>-->
                    <!--<p>'. get_bloginfo('description') .'</p>-->
                </div>
            </div>
        </div>';
}

function io_login_footer(){
    echo '</div><!--login-body END-->
    </div><!--login-container END-->
    <div class="footer-copyright position-absolute">
            <span>Copyright © <a href="https://www.amjun.com/2248.html'. esc_url(home_url()) .'" class="text-white-50" title="'. get_bloginfo('name') .'" rel="home">'. get_bloginfo('name') .'</a></span> 
    </div>';
}
add_action('login_header', 'io_login_header');
add_action('login_footer', 'io_login_footer');

//登录页面的LOGO链接为首页链接
add_filter('login_headerurl',function() {return esc_url(home_url());});

function custom_login_style(){
    $login_color = array('color-l' => '#293dd9', 'color-r' => '#df231a');
    //$login_color = array('color-l' => '#ac1392', 'color-r' => '#7431d2');
    // logo 路径
    $login_logo = '/wp-content/uploads/2023/07/Snipaste_2023-07-25_14-48-16111.png';
    // logo 尺寸
    $login_logo_size = 220;
    // 背景图片路径
    $login_ico = '/wp-content/uploads/2023/08/0781476bb1e9305cd6b08dce591cdee.png';
    echo '<style type="text/css">
    body{background:'.$login_color['color-l'].';background:-o-linear-gradient(45deg,'.$login_color['color-l'].','.$login_color['color-r'].');background:linear-gradient(45deg,'.$login_color['color-l'].','.$login_color['color-r'].');height:100vh}
    .login h1 a{background-image:url('.$login_logo.');width:180px;background-position:center center;background-size:'.$login_logo_size.'px}
    .login-container{position:relative;display:flex;align-items:center;justify-content:center;height:100vh}
    .login-body{position:relative;display:flex;margin:0 1.5rem}
    .login-img{display:none}
    .img-bg{color:#fff;padding:2rem;bottom:-2rem;left:0;top:-2rem;right:0;border-radius:10px;background-image:url('.$login_ico.');background-repeat:no-repeat;background-position:center center;background-size:cover}
    .img-bg h2{font-size:2rem;margin-bottom:1.25rem}
    #login{position:relative;background:#fff;border-radius:10px;padding:28px;width:280px;box-shadow:0 1rem 3rem rgba(0,0,0,.175)}
    .flex-fill{flex:1 1 auto}
    .position-relative{position:relative}
    .position-absolute{position:absolute}
    .shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}
    .footer-copyright{bottom:0;color:rgba(255,255,255,.6);text-align:center;margin:20px;left:0;right:0}
    .footer-copyright a{color:rgba(255,255,255,.6);text-decoration:none}
    #login form{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-width:0;padding:0}
    #login form .forgetmenot{float:none}
    .login #login_error,.login .message,.login .success{border-left-color:#40b9f1;box-shadow:none;background:#d4eeff;border-radius:6px;color:#2e73b7}
    .login #login_error{border-left-color:#f1404b;background:#ffd4d6;color:#b72e37}
    #login form p.submit{padding:20px 0 0}
    #login form p.submit .button-primary{float:none;background-color:#f1404b;font-weight:bold;color:#fff;width:100%;height:40px;border-width:0;text-shadow:none!important;border-color:none;transition:.5s}
    #login form input{box-shadow:none!important;outline:none!important}
    #login form p.submit .button-primary:hover{background-color:#444}
    .login #backtoblog,.login #nav{padding:0}
    @media screen and (min-width:768px){.login-body{width:1200px}
    .login-img{display:block}
    #login{margin-left:-60px;padding:40px}
    }
</style>';
}
add_action('login_head', 'custom_login_style');

提醒：本文发布于461天前，文中所关联的信息可能已发生改变，请知悉！