当前位置：小平平 > CMS教程 > 微擎 > 【教程】 WordPress登录页面美化

【教程】 WordPress登录页面美化

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

登录页面的美化效果

【教程】 WordPress登录页面美化

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

/**

  1. * WordPress 登录界面美化
  2. **/
  3. function custom_login_style() {
  4. echo ‘<link rel=”stylesheet” id=”wp-admin-css” href=”‘.get_bloginfo(‘template_directory’).‘/admin-style.css” type=”text/css” />’;
  5. }
  6. 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. }
  12. /*顶部的logo*/
  13. .login h1 a {
  14. background:url(https://blog.ccswust.org/logo.png) no-repeat;
  15. background–size: 220px 50px;
  16. width: 220px;
  17. height: 50px;
  18. padding: 0;
  19. margin: 0 auto 1em;
  20. border: none;
  21. –webkit–animation: dropIn 1s linear;
  22. animation: dropIn 1s linear;
  23. }
  25. /*登录框表单*/
  26. .login form, .login .message {
  27. background: #fff;
  28. background: rgba(255, 255, 255, 0.3);
  29. border–radius: 3px;
  30. border: 1px solid #fff;
  31. border: 1px solid rgba(255, 255, 255, 0.4);
  32. –webkit–animation: fadeIn 1s linear;
  33. animation: fadeIn 1s linear;
  34. }
  36. /*登录框输入框*/
  37. .login label {
  38. color: #000;
  39. }
  40. .login .message {
  41. color: #000;
  42. }
  43. #user_login{
  44. font–size: 18px;
  45. line–height: 32px;
  46. }
  48. /* 返回博客与忘记密码链接 */
  49. #backtoblog a, #nav a {
  50. color: #fff !important;
  51. display: inline–block;
  52. –webkit–animation: rtol 1s linear;
  53. animation: rtol 1s linear;
  54. }
  56. /*掉落的动画效果*/
  57. @-webkit–keyframes dropIn {
  58. 0% {
  59. –webkit–transform: translate3d(0, –100px, 0)
  60. }
  61. 100% {
  62. –webkit–transform: translate3d(0, 0, 0)
  63. }
  64. }
  65. @keyframes dropIn {
  66. 0% {
  67. transform: translate3d(0, –100px, 0)
  68. }
  69. 100% {
  70. transform: translate3d(0, 0, 0)
  71. }
  72. }
  74. /*逐渐出现的动画效果*/
  75. @-webkit–keyframes fadeIn {
  76. from {
  77. opacity: 0;
  78. –webkit–transform: scale(.8) translateY(20px)
  79. }
  80. to {
  81. opacity: 1;
  82. –webkit–transform: scale(1) translateY(0)
  83. }
  84. }
  85. @keyframes fadeIn {
  86. from {
  87. opacity: 0;
  88. transform: scale(.8) translateY(20px)
  89. }
  90. to {
  91. opacity: 1;
  92. transform: scale(1) translateY(0)
  93. }
  94. }
  96. /*从右往左的动画效果*/
  97. @-webkit–keyframes rtol {
  98. from {
  99. –webkit–transform: translate(80px, 0)
  100. }
  101. to {
  102. –webkit–transform: translate(0, 0)
  103. }
  104. }
  105. @keyframes rtol {
  106. from {
  107. transform: translate(80px, 0)
  108. }
  109. to {
  110. transform: translate(0, 0)
  111. }
  112. }
未经允许不得转载：作者:小平平， 转载或复制请以 超链接形式 并注明出处 小平平。
小平平 » 【教程】 WordPress登录页面美化
Song

Song 钻石

分享到：

发表评论

提供最优质的资源集合

软件分享 美工设计