使用插件纯代码美化WordPress默认登录页

学习NO.1

wordpress默认登录页的样式一直都没变过，美化的插件也很多，不喜欢的插件的我最近用代码美化了一下，之前也出过一篇自定义登录页的教程，虽然可以实现跟多国内，但是要填的坑也很多。

使用插件纯代码美化WordPress默认登录页

是不是很高大上

php部分

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

1. /**
   
2. * 美化Wordpress登录页
   
3. */
   
4. function io_login_header(){
   
5.     echo '<div class="login-container">
   
6.     <div class="login-body">
   
7.         <div class="login-img shadow-lg position-relative flex-fill">
   
8.             <div class="img-bg position-absolute">
   
9.                 <div class="login-info">
   
10.                     <h2>'. get_bloginfo('name') .'</h1>
    
11.                     <p>'. get_bloginfo('description') .'</p>
    
12.                 </div>
    
13.             </div>
    
14.         </div>';
    
15. }
    
16. 
    
17. function io_login_footer(){
    
18.     echo '</div><!--login-body END-->
    
19.     </div><!--login-container END-->
    
20.     <div class="footer-copyright position-absolute">
    
21.             <span>Copyright &#169; <a href="'. esc_url(home_url()) .'" class="text-white-50" title="'. get_bloginfo('name') .'" rel="home">'. get_bloginfo('name') .'</a></span>
    
22.     </div>';
    
23. }
    
24. add_action('login_header', 'io_login_header');
    
25. add_action('login_footer', 'io_login_footer');
    
26. 
    
27.    
    
28. //登录页面的LOGO链接为首页链接
    
29. add_filter('login_headerurl',function() {return esc_url(home_url());});

复制代码

css部分

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

1. /**
   
2. * 美化Wordpress登录页 By 一为
   
3. */
   
4. function custom_login_style(){
   
5.     $login_color = io_get_option('login_color',array('color-l'=>'','color-r'=>''));
   
6.     echo '<style type="text/css">
   
7.     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}
   
8.     .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}
   
9.     .login-container{position:relative;display:flex;align-items:center;justify-content:center;height:100vh}
   
10.     .login-body{position:relative;display:flex;margin:0 1.5rem}
    
11.     .login-img{display:none}
    
12.     .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}
    
13.     .img-bg h2{font-size:2rem;margin-bottom:1.25rem}
    
14.     #login{position:relative;background:#fff;border-radius:10px;padding:28px;width:280px;box-shadow:0 1rem 3rem rgba(0,0,0,.175)}
    
15.     .flex-fill{flex:1 1 auto}
    
16.     .position-relative{position:relative}
    
17.     .position-absolute{position:absolute}
    
18.     .shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}
    
19.     .footer-copyright{bottom:0;color:rgba(255,255,255,.6);text-align:center;margin:20px;left:0;right:0}
    
20.     .footer-copyright a{color:rgba(255,255,255,.6);text-decoration:none}
    
21.     #login form{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-width:0;padding:0}
    
22.     #login form .forgetmenot{float:none}
    
23.     .login #login_error,.login .message,.login .success{border-left-color:#40b9f1;box-shadow:none;background:#d4eeff;border-radius:6px;color:#2e73b7}
    
24.     .login #login_error{border-left-color:#f1404b;background:#ffd4d6;color:#b72e37}
    
25.     #login form p.submit{padding:20px 0 0}
    
26.     #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}
    
27.     #login form input{box-shadow:none!important;outline:none!important}
    
28.     #login form p.submit .button-primary:hover{background-color:#444}
    
29.     .login #backtoblog,.login #nav{padding:0}
    
30.     @media screen and (min-width:768px){.login-body{width:1200px}
    
31.     .login-img{display:block}
    
32.     #login{margin-left:-60px;padding:40px}
    
33.     }
    
34. </style>';
    
35. }
    
36. add_action('login_head', 'custom_login_style');

复制代码

html结构和css样式可以自己调整，原理就是添加自定义的html结构，然后编写css样式，额。。。就这么简单

注意上面代码的高亮行使用自己的选项值

添加完上面两段代码就可以使用美化的登录页了，就这么简单，赶紧试试吧。是不是非常简单

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！