【教程】 WordPress登录页面美化

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://028.sevenit.cn/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://028.sevenit.cn/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. }