WordPress 自定义登录与注册页面

追求个性与独特，如果你够折腾，WordPress能满足你几乎所有的构想。

相信有很多人就是有控制癖，容不得一丝一毫的瑕疵。想要自主所有，这次来鼓捣WordPress的登录与注册页面。

1、直接替换登录界面logo图片的方法：


制作透明背景、宽310px、高70px、.gif格式的图片，命名为logo-login.gif。

确认你登陆界面的url是http://yoursite.com/wp-admin/，如果你把wordpress安装到某个文件夹下，

那就应该是http://yoursite.com/folder/wp-admin/。在wp-admin/images文件夹中找到logo-login.gif，

将它重命名或者备份后删除。再将做好的自定义logo图片上传，替代原有的。

这样logo就变成你喜欢的了。不过这种方法在WordPress程序升级后如没留意可能就被默认覆盖而又得重新操作了，请注意。

2、另一更换登录logo图片方法：


这可看作是对上面一种方式的增补。因为这下就可以不管程序升级的情况了。

如果想自定义WordPress登录界面的Logo，又不想为此安装一个插件，可以在当前主题的functions.php文件中添加如下函数，并且把自定义的Logo命名为custom-login-logo.gif，并且放到当前主题目录的images文件夹下。
add_action('login_head', 'my_custom_login_logo');
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
</style>';

图片的格式一样尽量是：透明背景、宽310px、高70px、.gif。

3、完全自定义WordPress登录与注册页面CSS样式：


同样是通过WordPress主题功能文件functions.php文件来实现。

将以下代码复制到WordPress主题文件的functions.php中，再把自定义的样式写进custom-login.css中了，把custom-login.css样式表放在主题文件夹下就可以了。
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />';
}
add_action('login_head', 'custom_login');

这边要提醒注意的是，custom-login.css不仅仅是改变到了登录与注册页面，在页面上的一个“忘记密码”按钮点击后的跳转页面的样式也是同样一起涉及到，所以要做全面周到的测试检验。而至于怎么样式化地写CSS代码那就要发挥你的想像力咯。这么贴出我写的样式，你可以做个参考：
/*for login and register page
author:badbye
url:<span style="color: #ff0000;">http://hi.baidu.com/endcity</span>
*/

*{
font:12px "Microsoft YaHei",Arial,Helvetica,Georgia,Sans-serif;
color:#000;
}
body{
margin:0;
padding:0;
text-align:center;
font-family:"Microsoft YaHei",Arial,Helvetica,Georgia,Sans-serif;
color:#000;
}
a:link{
text-decoration:none;
color:#336699;
}
a:visited{
text-decoration:none;
color:#A52A2A;
}
a:hover{
text-decoration:underline;
color:#ff0000;
}
div#login{
width:auto;
}
div#login h1{
width:320px;
margin:120px auto auto auto;
}
div#login form#loginform{
width:240px;
margin:auto;
}
div#login h1 a{
background-image:url(images/logo-login.gif)!important;
margin-left:-6px;
}
div#login p#nav{
width:240px;
margin:auto;
text-align:left;
}
p#backtoblog{
position:fixed;
top:0px;
left:0px;
margin:auto;
padding:8px 0 8px 0;
text-align:left;
width:9999px;
overflow:hidden;
background:#000;
color:#fff;
}
p#backtoblog a{
margin:0 0 0 120px;
padding:auto;
}
p#backtoblog a:link,p#backtoblog a:visited{
font-family:"Microsoft YaHei",Arial,Helvetica,Georgia,Sans-serif;
font-size:bold!important;
color:#fff!important;
padding:6px 4px 6px 4px;
text-shadow:none;
}
p#backtoblog a:hover{
background:#fff;
color:#000!important;
}
p#nav a:link,p#nav a:visited{
color:#blue!important;
}
p#nav a:hover{}
div#login form#loginform p{
text-align:left;
color:#000;
}
input.button-primary{
text-shadow:none;
background:#000;
}

/*for register*/
div#login p.message.register{
width:262px;
margin:auto auto 16px auto;
text-align:left;
}
div#login form#registerform{
width:240px;
margin:auto;
text-align:left;
}
div#login form#registerform p#reg_passmail{
text-align:left;
width:auto;
}
/*for lostpassword*/
div#login p.message{
width:262px;
margin:auto auto 16px auto;
text-align:left;
background-color:#fff;
border-color:#eee;
}
div#login form#lostpasswordform{
width:240px;
margin:auto;
text-align:left;
}

4、更改点击页面logo时跳转的URL地址：


当你点击登录与注册页面的logo图片时，会有一个跳转，WordPress默认的跳转地址是官网http://wordpress.org。这边我们也可以把它改掉，改成是你自己网站的地址url或是你想要的任意url。使用下面这段代码就可以实现，把它放在functions.php中。

把红色部分改成你自己定义的URL。
<!--?php add_filter( 'login_headerurl', 'custom_loginlogo_url' ); function custom_loginlogo_url($url) { return '<span style="color: #ff0000;">http://hi.baidu.com/endcity</span>'; } ?-->

5、给注册页面或登录页面的表单加入html代码


这边说的是向注册或登录页面的供读者填写的表单中注入一段html代码，比如，你可以提醒读者注册时的一些要点或消息，像是这样子的，你在其他网站注册时有可能看到的：“加入这个站点，您同意以下条款。”添加下面这段代码到WordPress主题的functions.php，将实现在用户注册与登录页面显示自定义的内容。
// function message to login/register
add_action('register_form', 'badbye_register_message');
function badbye_register_message() {
$html = '
<div style="margin:10px 0;border:1px solid #e5e5e5;padding:10px">
<p style="margin:5px 0;">Joining this site you agree to the following terms. Do no harm!</p>
</div>';
echo $html;
}

add_action('login_form', 'badbye_login_message');
function badbye_login_message() {
$html = '
<div style="margin:10px 0;border:1px solid #e5e5e5;padding:10px">
<p style="margin:5px 0;"> Are you a long time not logged in? welcome!</p>
</div>';
echo $html;
}

代码的上部分是自定义注册页面表单的内容，下部分是自定义登录页面表单的内容，你可以酌情想些其他不一样的话语。

好吧，就这样差不多了。其实更深层次的讲，如果是结合上WordPress Hook的功能，是可以做出完全随意你想要的内容与样式的。如果你感兴趣，可以琢磨看看。这边我就抛个砖，而我自己也还需要多学学。

上述方法步骤是我网上搜索与实践的总结，写出来作个参考，如有建议或疑问，欢迎评论与留言。
发帖者
标签： ,

没有评论:

发表评论

订阅： 博文评论 (Atom)