2024纯代码美化WordPress登录页

 1<?php
 2/**
 3 * 美化Wordpress登录页 By 一为
 4 * 原文地址：https://www.iowen.cn/chundaimameihuawordpressmorendengluye/
 5 */
 6function io_login_header(){
 7    echo '<div class="login-container">
 8    <div class="login-body">
 9        <div class="login-img shadow-lg position-relative flex-fill">
10            <div class="img-bg position-absolute">
11                <div class="login-info">
12                    <h2>'. get_bloginfo('name') .'</h2>
13                    <p>'. get_bloginfo('description') .'</p>
14                </div>
15            </div>
16        </div>';
17}
18
19function io_login_footer(){
20    echo '</div><!--login-body END-->
21    </div><!--login-container END-->
22    <div class="footer-copyright position-absolute">
23            <span>Copyright © <a href="'. esc_url(home_url()) .'" class="text-white-50" title="'. get_bloginfo('name') .'" rel="home">'. get_bloginfo('name') .'</a></span> 
24    </div>';
25}
26add_action('login_header', 'io_login_header');
27add_action('login_footer', 'io_login_footer');
28
29   
30//登录页面的LOGO链接为首页链接
31add_filter('login_headerurl',function() {return esc_url(home_url());});
32
33/**
34 * 美化Wordpress登录页 By 一为
35 * 原文地址：https://www.iowen.cn/chundaimameihuawordpressmorendengluye/
36 */
37function custom_login_style(){
38    $login_color = io_get_option('login_color',array('color-l'=>'','color-r'=>''));
39    echo '<style type="text/css">
40    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}
41    .login h1 a{background-image:url('.io_get_option('logo',get_template_directory_uri() .'/images/logo.png').');width:180px;background-position:center center;background-size:'.io_get_option('login_logo_size',160).'px}
42    .login-container{position:relative;display:flex;align-items:center;justify-content:center;height:100vh}
43    .login-body{position:relative;display:flex;margin:0 1.5rem}
44    .login-img{display:none}
45    .img-bg{color:#fff;padding:2rem;bottom:-2rem;left:0;top:-2rem;right:0;border-radius:10px;background-image:url('.io_get_option('login_ico',get_template_directory_uri() .'/images/login.jpg').');background-repeat:no-repeat;background-position:center center;background-size:cover}
46    .img-bg h2{font-size:2rem;margin-bottom:1.25rem}
47    #login{position:relative;background:#fff;border-radius:10px;padding:28px;width:280px;box-shadow:0 1rem 3rem rgba(0,0,0,.175)}
48    .flex-fill{flex:1 1 auto}
49    .position-relative{position:relative}
50    .position-absolute{position:absolute}
51    .shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}
52    .footer-copyright{bottom:0;color:rgba(255,255,255,.6);text-align:center;margin:20px;left:0;right:0}
53    .footer-copyright a{color:rgba(255,255,255,.6);text-decoration:none}
54    #login form{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-width:0;padding:0}
55    #login form .forgetmenot{float:none}
56    .login #login_error,.login .message,.login .success{border-left-color:#40b9f1;box-shadow:none;background:#d4eeff;border-radius:6px;color:#2e73b7}
57    .login #login_error{border-left-color:#f1404b;background:#ffd4d6;color:#b72e37}
58    #login form p.submit{padding:20px 0 0}
59    #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}
60    #login form input{box-shadow:none!important;outline:none!important}
61    #login form p.submit .button-primary:hover{background-color:#444}
62    .login #backtoblog,.login #nav{padding:0}
63    @media screen and (min-width:768px){.login-body{width:1200px}
64    .login-img{display:block}
65    #login{margin-left:-60px;padding:40px}
66    }
67</style>';
68}
69add_action('login_head', 'custom_login_style');

 1function io_login_header(){
 2    echo '<div class="login-container">
 3    <div class="login-body">
 4        <div class="login-img shadow-lg position-relative flex-fill">
 5            <div class="img-bg position-absolute">
 6                <div class="login-info">
 7                    <h2>'. get_bloginfo('name') .'</h2>
 8                    <p>'. get_bloginfo('description') .'</p>
 9                </div>
10            </div>
11        </div>';
12}
13
14function io_login_footer(){
15    echo '</div><!--login-body END-->
16    </div><!--login-container END-->
17    <div class="footer-copyright position-absolute">
18            <span>Copyright © <a href="'. esc_url(home_url()) .'" class="text-white-50" title="'. get_bloginfo('name') .'" rel="home">'. get_bloginfo('name') .'</a></span> 
19    </div>';
20}
21add_action('login_header', 'io_login_header');
22add_action('login_footer', 'io_login_footer');
23
24   
25//登录页面的LOGO链接为首页链接
26add_filter('login_headerurl',function() {return esc_url(home_url());});
27
28function getRandomColorRGB() {
29    $r = mt_rand(0, 255);
30    $g = mt_rand(0, 255);
31    $b = mt_rand(0, 255);
32    return "rgb($r, $g, $b)";
33}
34
35function custom_login_style(){
36    $login_color =['color-l'=>getRandomColorRGB(),'color-r'=>getRandomColorRGB()];
37    $ico='/favicon.ico';
38    $img='/wp-content/uploads/2024/01/课室低码率.jpg';
39    echo '<style type="text/css">
40    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}
41    .login h1 a{background-image:url('.$ico.');width:180px;background-position:center center;}
42    .login-container{position:relative;display:flex;align-items:center;justify-content:center;height:100vh}
43    .login-body{position:relative;display:flex;margin:0 1.5rem}
44    .login-img{display:none}
45    .img-bg{color:#fff;padding:2rem;bottom:-2rem;left:0;top:-2rem;right:0;border-radius:10px;background-image:url('.$img.');background-repeat:no-repeat;background-position:center center;background-size:cover}
46    .img-bg h2{font-size:2rem;margin-bottom:1.25rem}
47    #login{position:relative;background:#fff;border-radius:10px;padding:28px;width:280px;box-shadow:0 1rem 3rem rgba(0,0,0,.175)}
48    .flex-fill{flex:1 1 auto}
49    .position-relative{position:relative}
50    .position-absolute{position:absolute}
51    .shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}
52    .footer-copyright{bottom:0;color:rgba(255,255,255,.6);text-align:center;margin:20px;left:0;right:0}
53    .footer-copyright a{color:rgba(255,255,255,.6);text-decoration:none}
54    #login form{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-width:0;padding:0}
55    #login form .forgetmenot{float:none}
56    .login #login_error,.login .message,.login .success{border-left-color:#40b9f1;box-shadow:none;background:#d4eeff;border-radius:6px;color:#2e73b7}
57    .login #login_error{border-left-color:#f1404b;background:#ffd4d6;color:#b72e37}
58    #login form p.submit{padding:20px 0 0}
59    #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}
60    #login form input{box-shadow:none!important;outline:none!important}
61    #login form p.submit .button-primary:hover{background-color:#444}
62    .login #backtoblog,.login #nav{padding:0}
63    @media screen and (min-width:768px){.login-body{width:1200px}
64    .login-img{display:block}
65    #login{margin-left:-60px;padding:40px}
66    }
67</style>';
68}
69add_action('login_head', 'custom_login_style');
70
71//关闭多语言切换按钮
72add_filter( 'login_display_language_dropdown', '__return_false' );

1$ico='/favicon.ico';
2$img='/wp-content/uploads/2024/01/课室低码率.jpg';