wordpress非插件实现前台登陆注册表单并添加随机验证字段

二呆 7年前 (2017-09-11) wordpress教程 #wordpress#

引言：此文由子域名转移而来，因为细微强迫症和放弃子域名而不舍得完全丢弃，所以将会逐步第二次转移文章到主域名上来，二者主题（阿里白秀和D8）均来自大前端，追求完美的同时有一丝小懒，主题就不换了，D8主题用起来挺好。

可能你知道wordpress网站的登陆页面都没有在前台页面形成一个模块，并且点登陆后直接跳转到后台管理界面，这样给用户的体验不是很好，所以下面分享个wordpress实现前台登陆注册的方法。
除了登陆，当然还有注册了，wordpress的注册最初状态都是只有用户名和邮箱，并且密码是在给你发到邮箱中，让你后续进行修改，这样也不友好，面对这个问题，一起来修改一下。

一、登陆

1、wordpress提供了一个可以自己自定义模板页面的功能，利用这个功能，来完成前台登陆注册。首先，新建一个名为login.php的文件。

2、然后，将page.php中的内容全部复制到login.php中，如果最上方有注释标记/**/，那就删除它们。并将以下代码替换掉the_content();。

①添加表单代码：

<?php the_content();?>
<?php if(!empty($error)) {
echo '<p class="ludou-error">'.$error.'</p>';
}
if (!is_user_logged_in()) { ?>
<form name="loginform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-login">
<p>
<label for="log">用户名<br />
<input type="text" name="log" id="log" class="input" value="<?php if(!empty($user_name)) echo $user_name; ?>" size="20" />
</label>
<p>
<label for="pwd">密码(至少6位)<br />
<input id="pwd" class="input" type="password" size="25" value="" name="pwd" />
</label>
</p>
<p class="forgetmenot">
<label for="rememberme">
<input name="rememberme" type="checkbox" id="rememberme" value="1" <?php checked( $rememberme ); ?> />
记住我
</label>
</p>
<p class="submit">
<input type="hidden" name="redirect_to" value="<?php if(isset($_GET['r'])) echo $_GET['r']; ?>" />
<input type="hidden" name="ludou_token" value="<?php echo $token; ?>" />
<input type="submit" name="wp-submit" id="wp-submit" value="登录" />
</p>
</form>
<?php } else {
echo '<p class="ludou-error">您已登录！（<a href="'.wp_logout_url(get_bloginfo( 'url' )).'" title="登出">登出？</a>）</p>';
} ?>

②添加表单验证代码：

<?php
/**
* Template Name: 前台登录
* //www.tongleer.com
* 防止刷新页面重复提交数据
*/
if(!isset($_SESSION))
session_start();
if( isset($_POST['ludou_token']) && ($_POST['ludou_token'] == $_SESSION['ludou_token'])) {
$error = ”;
$secure_cookie = false;
$user_name = sanitize_user( $_POST['log'] );
$user_password = $_POST['pwd'];
if ( empty($user_name) || ! validate_username( $user_name ) ) {
$error .= '<strong>错误</strong>：请输入有效的用户名。<br />';
$user_name = ”;
}
if( empty($user_password) ) {
$error .= '<strong>错误</strong>：请输入密码。<br />';
}
if($error == ”) {
// If the user wants ssl but the session is not ssl, force a secure cookie.
if ( !empty($user_name) && !force_ssl_admin() ) {
if ( $user = get_user_by('login', $user_name) ) {
if ( get_user_option('use_ssl', $user->ID) ) {
$secure_cookie = true;
force_ssl_admin(true);
}
}
}
if ( isset( $_GET['r'] ) ) {
$redirect_to = $_GET['r'];
// Redirect to https if user wants ssl
if ( $secure_cookie && false !== strpos($redirect_to, 'wp-admin') )
$redirect_to = preg_replace('|^http://|', 'https://', $redirect_to);
}
else {
$redirect_to = get_bloginfo( 'url' );
}
if ( !$secure_cookie && is_ssl() && force_ssl_login() && !force_ssl_admin() && ( 0 !== strpos($redirect_to, 'https') ) && ( 0 === strpos($redirect_to, 'http') ) )
$secure_cookie = false;
$creds = array();
$creds['user_login'] = $user_name;
$creds['user_password'] = $user_password;
$creds['remember'] = !empty( $_POST['rememberme'] );
$user = wp_signon( $creds, $secure_cookie );
if ( is_wp_error($user) ) {
$error .= $user->get_error_message();
}
else {
unset($_SESSION['ludou_token']);
wp_safe_redirect($redirect_to);
}
}
unset($_SESSION['ludou_token']);
}
$rememberme = !empty( $_POST['rememberme'] );
$token = md5(uniqid(rand(), true));
$_SESSION['ludou_token'] = $token;
?>

3、如果在login.php中没有找到the_content()，就查找类似get_template_part( 'content', 'page' )这个的代码，将content-page.php中的所有代码替换这部分代码即可，并且用第二步的代码替换其中的the_content()。

4、然后，在wordpress后台新建一个页面，页面属性选择“前台登陆”模板。

5、若想用户登陆后跳转到指定页面，可以在登录链接后面添加名为r的get参数，值为跳转的链接地址，如登录页面地址为//www.tongleer.com/login，若你想让用户登录后跳转到后台的文章列表页，可以把登录地址改成下面的地址再提供给用户即可：http://www.tongleer.com/login?r=http://www.tongleer.com/wp-admin/edit.php。

6、最后，如果你嫌登陆页面不好看，可以自定义css，并放到style.css文件中，如以下代码：

p.ludou-error {
margin: 16px 0;
padding: 12px;
background-color: #ffebe8;
border: 1px solid #c00;
font-size: 12px;
line-height: 1.4em;
}
.ludou-login label {
color: #777;
font-size: 14px;
cursor: pointer;
}
.ludou-login .input {
margin: 0;
color: #555;
font-size: 24px;
padding: 3px;
border: 1px solid #e5e5e5;
background: #fbfbfb;
}

二、注册

1、原理同登陆方法一样，首先，先新建一个reg.php。

2、然后，将page.php中的内容全部复制到reg.php中，如果最上方有注释标记/**/，那就删除它们。并将以下代码替换掉the_content();。（）

①添加表单代码：

<?php the_content();?>
<?php if(!empty($error)) {
echo '<p class="ludou-error">'.$error.'</p>';
}
if (!is_user_logged_in()) { ?>
<form name="registerform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-reg">
<p>
<label for="user_login">用户名<br />
<input type="text" name="user_login" id="user_login" class="input" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" size="20" />
</label>
</p>
<p>
<label for="user_email">电子邮件<br />
<input type="text" name="user_email" id="user_email" class="input" value="<?php if(!empty($user_email)) echo $user_email; ?>" size="25" />
</label>
</p>
<p>
<label for="user_pwd1">密码(至少6位)<br />
<input id="user_pwd1" class="input" type="password" tabindex="21" size="25" value="" name="user_pass" />
</label>
</p>
<p>
<label for="user_pwd2">重复密码<br />
<input id="user_pwd2" class="input" type="password" tabindex="21" size="25" value="" name="user_pass2" />
</label>
</p>
<?php
$register_number=rand(0,1); // 设置随机数的返回范围
$_SESSION['register_number']=$register_number;
global $register_questions;
global $register_answers;
// 添加问题数组
$register_questions=array('本站域名是什么？(tongleer.com)','中国首都是哪里？');
// 添加答案数组（与上面的问题对应）
$register_answers=array('tongleer.com','北京');
?>
<p>
<label><?php echo $register_questions[$register_number];?><br />
<input type="text" name="user_proof" id="user_proof" class="input" size="25" tabindex="20" />
</label>
</p>
<p class="submit">
<input type="hidden" name="ludou_reg" value="ok" />
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="注册" />
</p>
</form>
<?php } else {
// 注册成功后跳转到站内其他页面，URL自行修改
wp_safe_redirect(get_bloginfo( 'url' ));
} ?>

②添加表单验证代码：

<?php
/**
* Template Name: 前台注册
* //www.tongleer.com/
*/
if(!isset($_SESSION))session_start();
if( !empty($_POST['ludou_reg']) ) {
$error = ”;
$sanitized_user_login = sanitize_user( $_POST['user_login'] );
$user_email = apply_filters( 'user_registration_email', $_POST['user_email'] );
// Check the username
if ( $sanitized_user_login == ” ) {
$error .= '<strong>错误</strong>：请输入用户名。<br />';
} elseif ( ! validate_username( $sanitized_user_login ) ) {
$error .= '<strong>错误</strong>：此用户名包含无效字符，请输入有效的用户名<br />。';
$sanitized_user_login = ”;
} elseif ( username_exists( $sanitized_user_login ) ) {
$error .= '<strong>错误</strong>：该用户名已被注册，请再选择一个。<br />';
}
// Check the e-mail address
if ( $user_email == ” ) {
$error .= '<strong>错误</strong>：请填写电子邮件地址。<br />';
} elseif ( ! is_email( $user_email ) ) {
$error .= '<strong>错误</strong>：电子邮件地址不正确。！<br />';
$user_email = ”;
} elseif ( email_exists( $user_email ) ) {
$error .= '<strong>错误</strong>：该电子邮件地址已经被注册，请换一个。<br />';
}
// Check the password
if(strlen($_POST['user_pass']) < 6)
$error .= '<strong>错误</strong>：密码长度至少6位!<br />';
elseif($_POST['user_pass'] != $_POST['user_pass2'])
$error .= '<strong>错误</strong>：两次输入的密码必须一致!<br />';
$register_number=$_SESSION['register_number'];
global $register_answers;
if (!isset($_POST[ 'user_proof' ]) || empty($_POST[ 'user_proof' ])) {
$error .= '<strong>错误</strong>: 您还没有回答问题。';
} elseif ( strtolower( $_POST[ 'user_proof' ] ) != $register_answers[$register_number] ) {
$error .= '<strong>错误</strong>: 您的回答不正确。';
}
if($error == ”) {
$user_id = wp_create_user( $sanitized_user_login, $_POST['user_pass'], $user_email );
if ( ! $user_id ) {
$error .= sprintf( '<strong>错误</strong>：无法完成您的注册请求… 请联系<a href=\"mailto:%s\">管理员</a>！<br />', get_option( 'admin_email' ) );
}
else if (!is_user_logged_in()) {
$user = get_userdatabylogin($sanitized_user_login);
$user_id = $user->ID;
// 自动登录
wp_set_current_user($user_id, $user_login);
wp_set_auth_cookie($user_id);
do_action('wp_login', $user_login);
}
}
}
?>