首页    >    新闻资讯    >   定制WordPress登录界面样式

定制WordPress登录界面样式

WordPress2.7使用了新的登录组件。新的登录组件使得修改登录界面成为可能,我将在下面的例子中展示如何修改。

首先在functions.php中添加一个函数:

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
}
add_action('login_head', 'fb_custom_login');

这个函数通过login_head钩子来向login-head中注入一个CSS文件载入。这样的话,只有当使用特定主题时才会载入这个CSS,并显示自定义的登录界面。
自定义的样式表名为custom-login.css,放在模板的/custom-login文件夹下。

接下来定制CSS文件:

html {
background-color: #fff;
}
 
#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}
 
#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}
 
#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}

以上就是定制WordPress登录界面的例子。例子中的CSS很不错,你可以以此为基础,创建你自己的样式。

分类:新闻资讯

标签:,

* 版权声明:作者WordPress啦! 转载请注明出处。