纯代码美化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 分享
No matter when you start, it is important not to stop after the start.
无论你在什么时候开始,重要的是开始之后就不要停止
评论 共1条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称常用语 夸夸
夸夸
还有吗!没看够!
表情代码图片快捷回复
    • 头像天天下载(TTzip.com)0