wordpress网站主题自定义注册登录页面(2)：创建自定义登录页面

上一章我们介绍了WordPress主题自定义注册页面的制作过程，要章我们接着给主题创建一个自定义登录页面，让用户不需通过WordPress程序默认的登录页面登录后台。WordPress主题自定义登录页面在一定程序上，也能提升一个wordpress主题折层次，比如一些要求相对较高的商业主题。嗯，下面就一起来看一下怎么制作wordpress自定义登录页面吧。

首先在主题文件夹下创建一个登录文件page-login.php，用dreamweaver打开这个文件，添加页面定义代码：

<?php
/*
Template Name: 登陆页面
*/

然后，添加判断用户是否登录代码：

global $wpdb,$user_ID;
if (!$user_ID) { //判断用户是否登录
//接下来的代码都添加在这里
}else { //跳转到首页
echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
}

接着添加验证数据代码，如下：

if($_POST){ //数据提交
//We shall SQL escape all inputs
$username = $wpdb->escape($_REQUEST['username']);
$password = $wpdb->escape($_REQUEST['password']);
$remember = $wpdb->escape($_REQUEST['rememberme']);
if($remember){
$remember = "true";
} else {
$remember = "false";
}
$login_data = array();
$login_data['user_login'] = $username;
$login_data['user_password'] = $password;
$login_data['remember'] = $remember;
$user_verify = wp_signon( $login_data, false );
//wp_signon 是wordpress自带的函数，通过用户信息来授权用户(登陆)，可记住用户名
if ( is_wp_error($user_verify) ) {
echo "<span class='error'>用户名或密码错误，请重试!</span>";//不管啥错误都输出这个信息
exit();
} else { //登陆成功则跳转到首页(ajax提交所以需要用js来跳转)
echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
exit();
}
} else {
//这里添加登录表单代码
 
}

然后，在上面的代码中的“ //这里添加登录表单代码”添加如下代码：

get_header();//载入头部文件
?>
<!--<script src="http://code.jquery.com/jquery-1.4.4.js"></script>--><!--如果你发现没有ajax提交，请检查是否有引入jquery.js文件-->
<div id="container">
<div id="content">
<h3>阿树工作室-登陆页面</h3>
<div id="result"></div> <!-- 输出结果 -->
<form id="wp_login_form" action="" method="post">
<label>用户名</label><br />
<input type="text" name="username" class="text" value="" /><br />
<label>密码</label><br />
<input type="password" name="password" class="text" value="" /> <br />
<label>
<input name="rememberme" type="checkbox" value="forever" />记住我</label>
<br /><br />
<input type="submit" id="submitbtn" name="submit" value="Login" />
</form>
<script type="text/javascript"><!--ajax 提交数据-->
$("#submitbtn").click(function() {
<!--请准备一个gif图-->
$('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
var input_data = $('#wp_login_form').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('.loader').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
});
</script>
</div>
</div>
<?php
get_footer(); //载入底部文件

表单代码一定要放在最后一个大括号前面哦。好了，这样我们就制作好了wordpress自定义登录页面。