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

定制WordPress登录界面样式

5条评论
标签:
更多

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啦! 转载请注明出处。

#1
这个能不能用于改WINDOWS XP 开机画面呀..
#2
这笑话好冷。。。
#3
学习了,哪天尝试下。之前手工改过,还没有这样做过呢
#4
等我改一下试试看啊 谢谢发帖
#5
我的情況不盡相同。希望將A博克的全部内容克隆到B博克。從A博克的數據庫導出所有數據,然後導入B博克的數據庫。似乎克隆已經成功。可是儅打開B博克的地址選擇login時,發現login頁面指向A博克的login地址。如果能解決這個問題,克隆博克就十分簡單。是否可以在B博克的數據庫,或者文件管理器中進行修改呢?我在A博克數據庫的備份文檔中沒有看到可以簡單修改的語句。請指教,謝謝!