wordpress 知更鸟主题登录页面美化 WordPress后台的登录页面美化
WordPress后台的登录页面默认就是一个登录的表单，背景什么的都是白茫茫的一片。看久了还真有点腻。今天就分享一下美化后台登录界面的简易教程。
首先，打开你的主题文件夹的”functions.php”,拉倒最后面，在最后一行添加如下代码：
|
1
2
3
4
5
|
/** * WordPress 登录界面美化 **/
function custom_login_style() {
echo ‘<link rel=”stylesheet” id=”wp-admin-css” href=”‘
}
add_action(‘login_head’
|
然后在主题根目录再新建一个css文件，命名为“admin-style.css”，css内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
body{
font–family: “Microsoft YaHei”, Helvetica, Arial, Lucida Grande, Tahoma, sans–serif;
width:100%;
height:100%;
background: url(http://img.infinitynewtab.com/InfinityWallpaper/2_14.jpg) no-repeat;
–moz–background–size: cover; /*背景图片拉伸以铺满全屏*/
–ms–background–size: cover;
–webkit–background–size: cover;
background–size: cover;
}
/*顶部的logo*/
.login h1 a {
background:url(images/logo.png) no–repeat;
background–size: 220px 50px;
width: 220px;
height: 50px;
padding: 0;
margin: 0 auto 1em;
border: none;
–webkit–animation: dropIn 1s linear;
animation: dropIn 1s linear;
}
/*登录框表单*/
.login form, .login .message {
background: #fff;
background: rgba(255, 255, 255, 0.3);
border–radius: 3px;
border: 1px solid #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
–webkit–animation: fadeIn 1s linear;
animation: fadeIn 1s linear;
}
/*登录框输入框*/
.login label {
color: #000;
}
.login .message {
color: #000;
}
#user_login{
font–size: 18px;
line–height: 32px;
}
/* 返回博客与忘记密码链接 */
#backtoblog a, #nav a {
color: #fff !important;
display: inline–block;
–webkit–animation: rtol 1s linear;
animation: rtol 1s linear;
}
/*掉落的动画效果*/
@–webkit–keyframes dropIn {
0% {
–webkit–transform: translate3d(0, –100px, 0)
}
100% {
–webkit–transform: translate3d(0, 0, 0)
}
}
@keyframes dropIn {
0% {
transform: translate3d(0, –100px, 0)
}
100% {
transform: translate3d(0, 0, 0)
}
}
/*逐渐出现的动画效果*/
@–webkit–keyframes fadeIn {
from {
opacity: 0;
–webkit–transform: scale(.8) translateY(20px)
}
to {
opacity: 1;
–webkit–transform: scale(1) translateY(0)
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(.8) translateY(20px)
}
to {
opacity: 1;
transform: scale(1) translateY(0)
}
}
/*从右往左的动画效果*/
@–webkit–keyframes rtol {
from {
–webkit–transform: translate(80px, 0)
}
to {
–webkit–transform: translate(0, 0)
}
}
@keyframes rtol {
from {
transform: translate(80px, 0)
}
to {
transform: translate(0, 0)
}
}
|
你可以自由修改第5行的背景图片和第14行的logo图片。修改好后保存，并上传到当前主题的目录即可。
1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！4105897@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理，有奖励！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
模板猫 » wordpress 知更鸟主题登录页面美化 WordPress后台的登录页面美化
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理，有奖励！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
模板猫 » wordpress 知更鸟主题登录页面美化 WordPress后台的登录页面美化
常见问题FAQ
- 免费下载或者贵宾会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 《免责声明》。
- 点击下载链接不跳转怎么回事？
- 您好，QQ内打开是不跳转的，一少部分浏览器也不跳转，一般的UC了,搜狗 360等浏览器都可以跳转。
- 可以直接把资源发给我吗？
- 您好，付费资源可以直接把链接发送给您，免费资源不提供任何帮助，软件资源自测，或者请站长喝红牛！
