【教程】 WordPress登录页面美化

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

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

图片[1]-【教程】 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. }

 

 

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
相关推荐
  • 暂无相关文章
  • 评论 共1条
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    取消
    昵称表情代码图片
      • 的头像-夏末浅笑grace0