纯代码美化WordPress默认登录页

  • 纯代码美化WordPress默认登录页已关闭评论
  • 2,379 次浏览
  • A+
所属分类:WP相关

注意:本站启用了缓存系统,如果你的账户登陆不了,那是因为缓存导致,刷新再登陆一次即可。如还不行,只需打开任意一篇文章即可。所有資源均支持繁體中文,需繁體中文可通過抖音號聯繫站長提供。

WordPress默认登录页的样式一直都没变过,美化的插件也很多,不喜欢的插件的我最近用代码美化了一下, 总共两种风格,大家各取所需吧!

最新wp默认登录页增加了一个语言切换框,不喜欢的可以看下面的文章删除。

移除 WordPress 5.9 以上版本登录页面中的语言切换框

风格一:

直接上代码,还是先看效果吧

纯代码美化WordPress默认登录页

还可以吧!!!

php部分

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

  1. /**
  2. * 美化Wordpress登录页 By 心语家园
  3. * 原文地址:https://www.xinyucn.cc/2022/10/chundaimameihuawordpressmorendengluye.html
  4. */
  5. function io_login_header(){
  6. echo '<div class="login-container">
  7. <div class="login-body">
  8. <div class="login-img shadow-lg position-relative flex-fill">
  9. <div class="img-bg position-absolute">
  10. <div class="login-info">
  11. <h2>'. get_bloginfo('name') .'</h2>
  12. <p>'. get_bloginfo('description') .'</p>
  13. </div>
  14. </div>
  15. </div>';
  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 © <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. //登录页面的LOGO链接为首页链接
  27. add_filter('login_headerurl',function() {return esc_url(home_url());});

css部分

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

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

html结构和css样式可以自己调整,原理就是添加自定义的html结构,然后编写css样式,

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

风格二:

https://www.xinyucn.cc/2022/10/chundaimameihuawordpressmorendengluyeer.html

改完了,你却发现少了什么?是的,为了安全,还需要在登陆上面加上验证码,参考下面的弄吧

5种方式给WordPress博客用户登录页面添加验证码

资源下载此资源仅限注册用户下载,请先

免责声明:

根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供本站会员用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,禁止分享或传播。需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担 。警告:本站仅服务站内会员用户,禁止在中国大陆用户下载使用、分享或传播,违者后果自负。同意本条款你方可捐赠购买下载本站资源,不同意请离开。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

服务条款:

本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,购买充值 即代表你对本站的无偿捐助,非购买本站资源。仅为维持服务器的开支与维护,全凭自愿无任何强求。

为防止盗链,本站所有资源均需登陆后下载,即使是免费的。如果链接失效,通过扫描下面的本站官方抖音号二维码,“私信本站”联系管理员补链;下载抖音极速版并关注,还可以领取现金红包哦!

如需解压密码,关注微信公众号“心语家园“或扫描下面的公众号二维码,发送解压密码获取。默认解压密码即最新密码,如密码无效,可尝试其他密码。

  • 官方微信公众号
  • 扫一扫关注微信公众号,如果你觉得本站帮到了你,请通过下面的赏字按钮捐赠本站,谢谢!
  • weinxin
  • 本站官方头条号
  • 扫一扫关注官方头条号,新老用户扫描下载抖音极速版,可领取最高269元现金,每天使用都可领钱。
  • weinxin