纯代码美化WordPress默认登录页二

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

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

WordPress登录的初始页面感觉非常的丑,而又不想使用主题自带的登录页面,所以把Blog的登录页面进行了美化,觉得挺好看的,于是分享给大家美化方法。

登录页面的美化效果

首先打开你主题的functions.php文件,在最后添加上以下代码:

  1. /**
  2. * WordPress 登录界面美化
  3. **/
  4. function custom_login_style() {
  5. echo ‘<link rel=”stylesheet” id=”wp-admin-css” href=”‘.get_bloginfo(‘template_directory’).‘/admin-style.css” type=”text/css” />’;
  6. }
  7. add_action(‘login_head’, ‘custom_login_style’);

在新建admin-style.css并添加以下代码,然后上传至functions.php同目录下,刷新你的登录页面看看,是不是变美了!

  1. body{
  2. font–family: “Microsoft YaHei”, Helvetica, Arial, Lucida Grande, Tahoma, sans–serif;
  3. width:100%;
  4. height:100%;
  5. background: url(https://blog.ccswust.org/images/登录背景图.jpg) no-repeat;
  6. –moz–background–size: cover; /*背景图片拉伸以铺满全屏*/
  7. –ms–background–size: cover;
  8. –webkit–background–size: cover;
  9. background–size: cover;
  10. }
  11. /*顶部的logo*/
  12. .login h1 a {
  13. background:url(https://blog.ccswust.org/logo.png) no-repeat;
  14. background–size: 220px 50px;
  15. width: 220px;
  16. height: 50px;
  17. padding: 0;
  18. margin: 0 auto 1em;
  19. border: none;
  20. –webkit–animation: dropIn 1s linear;
  21. animation: dropIn 1s linear;
  22. }
  23. /*登录框表单*/
  24. .login form, .login .message {
  25. background: #fff;
  26. background: rgba(255, 255, 255, 0.3);
  27. border–radius: 3px;
  28. border: 1px solid #fff;
  29. border: 1px solid rgba(255, 255, 255, 0.4);
  30. –webkit–animation: fadeIn 1s linear;
  31. animation: fadeIn 1s linear;
  32. }
  33. /*登录框输入框*/
  34. .login label {
  35. color: #000;
  36. }
  37. .login .message {
  38. color: #000;
  39. }
  40. #user_login{
  41. font–size: 18px;
  42. line–height: 32px;
  43. }
  44. /* 返回博客与忘记密码链接 */
  45. #backtoblog a, #nav a {
  46. color: #fff !important;
  47. display: inline–block;
  48. –webkit–animation: rtol 1s linear;
  49. animation: rtol 1s linear;
  50. }
  51. /*掉落的动画效果*/
  52. @-webkit–keyframes dropIn {
  53. 0% {
  54. –webkit–transform: translate3d(0, –100px, 0)
  55. }
  56. 100% {
  57. –webkit–transform: translate3d(0, 0, 0)
  58. }
  59. }
  60. @keyframes dropIn {
  61. 0% {
  62. transform: translate3d(0, –100px, 0)
  63. }
  64. 100% {
  65. transform: translate3d(0, 0, 0)
  66. }
  67. }
  68. /*逐渐出现的动画效果*/
  69. @-webkit–keyframes fadeIn {
  70. from {
  71. opacity: 0;
  72. –webkit–transform: scale(.8) translateY(20px)
  73. }
  74. to {
  75. opacity: 1;
  76. –webkit–transform: scale(1) translateY(0)
  77. }
  78. }
  79. @keyframes fadeIn {
  80. from {
  81. opacity: 0;
  82. transform: scale(.8) translateY(20px)
  83. }
  84. to {
  85. opacity: 1;
  86. transform: scale(1) translateY(0)
  87. }
  88. }
  89. /*从右往左的动画效果*/
  90. @-webkit–keyframes rtol {
  91. from {
  92. –webkit–transform: translate(80px, 0)
  93. }
  94. to {
  95. –webkit–transform: translate(0, 0)
  96. }
  97. }
  98. @keyframes rtol {
  99. from {
  100. transform: translate(80px, 0)
  101. }
  102. to {
  103. transform: translate(0, 0)
  104. }
  105. }

这就结束了,如果你不喜欢这个风格,也可以使用风格一

转到风格一:

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

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

免责声明:

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

服务条款:

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

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

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

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