WordPress登录页面美化

2020年2月17日18:54:41 发表评论 199 次浏览

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

夏末浅笑登录页面的美化效果

WordPress登录页面美化

首先打开你主题的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. }
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 省钱神器
  • 粉象生活
  • weinxin
2020秋冬新款韩版九分裤女高腰胖MM女式外穿哈伦裤女牛仔裤
2020夏季新款韩版女式休闲时尚运动裤女阔腿裤长裤女装
2020夏季韩版新款休闲时尚运动裤女学生长裤女装裤子
2020新款韩版宽松纯色女士上衣圆领短袖t恤女纯棉女装

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: