纯代码美化WordPress默认登录页

先看效果

图片[1]-纯代码美化WordPress默认登录页 - KEKC博客-KEKC博客

php部分

使用方法很简单,将下面的代码添加到WordPress主题的“functions.php”文件中即可。

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') .'</h1>
<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="'. 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 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') .'</h1>
                    <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="'. 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 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') .'</h1> <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="'. 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());});

css部分

使用方法还是一样,添加到“functions.php”文件。

function custom_login_style(){
$login_color = io_get_option('login_color',array('color-l'=>'','color-r'=>''));
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('.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}
.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('.io_get_option('login_ico',get_template_directory_uri() .'/images/login.jpg').');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');
function custom_login_style(){
    $login_color = io_get_option('login_color',array('color-l'=>'','color-r'=>''));
    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('.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}
    .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('.io_get_option('login_ico',get_template_directory_uri() .'/images/login.jpg').');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');
function custom_login_style(){ $login_color = io_get_option('login_color',array('color-l'=>'','color-r'=>'')); 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('.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} .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('.io_get_option('login_ico',get_template_directory_uri() .'/images/login.jpg').');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');

转载自:https://www.iowen.cn/chundaimameihuawordpressmorendengluye/

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
Time such as water, always silent. If you are well, it is sunny.
时光如水,总是无言。若你安好,便是晴天
评论 共1条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称常用语 夸夸
夸夸
还有吗!没看够!
表情代码图片快捷回复

    暂无评论内容