f
wordpress非插件实现前台登陆注册表单并添加随机验证字段
wordpress非插件实现前台登陆注册表单并添加随机验证字段
二呆 4年前 (2017-09-11) wordpress教程  #wordpress# 
浏览:8428

 

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

    可能你知道wordpress网站的登陆页面都没有在前台页面形成一个模块,并且点登陆后直接跳转到后台管理界面,这样给用户的体验不是很好,所以下面分享个wordpress实现前台登陆注册的方法。

除了登陆,当然还有注册了,wordpress的注册最初状态都是只有用户名和邮箱,并且密码是在给你发到邮箱中,让你后续进行修改,这样也不友好,面对这个问题,一起来修改一下。

一、登陆

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

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

①添加表单代码:

  1. <?php the_content();?>
  2. <?php if(!empty($error)) {
  3. echo '<p class="ludou-error">'.$error.'</p>';
  4. }
  5. if (!is_user_logged_in()) { ?>
  6. <form name="loginform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-login">
  7.     <p>
  8.       <label for="log">用户名<br />
  9.         <input type="text" name="log" id="log" class="input" value="<?php if(!empty($user_name)) echo $user_name; ?>" size="20" />
  10.       </label>
  11.     <p>
  12.       <label for="pwd">密码(至少6位)<br />
  13.         <input id="pwd" class="input" type="password" size="25" value="" name="pwd" />
  14.       </label>
  15.     </p>
  16.     <p class="forgetmenot">
  17.       <label for="rememberme">
  18.         <input name="rememberme" type="checkbox" id="rememberme" value="1" <?php checked( $rememberme ); ?> />
  19.         记住我
  20.       </label>
  21.     </p>
  22.     <p class="submit">
  23.       <input type="hidden" name="redirect_to" value="<?php if(isset($_GET['r'])) echo $_GET['r']; ?>" />
  24.       <input type="hidden" name="ludou_token" value="<?php echo $token; ?>" />
  25.       <input type="submit" name="wp-submit" id="wp-submit" value="登录" />
  26.     </p>
  27. </form>
  28. <?php } else {
  29. echo '<p class="ludou-error">您已登录!(<a href="'.wp_logout_url(get_bloginfo( 'url' )).'" title="登出">登出?</a>)</p>';
  30. } ?>

②添加表单验证代码:

  1. <?php
  2. /**
  3.  *  Template Name: 前台登录
  4.  *  //www.tongleer.com
  5.  *  防止刷新页面重复提交数据
  6.  */
  7. if(!isset($_SESSION))
  8.   session_start();
  9. if( isset($_POST['ludou_token']) && ($_POST['ludou_token'] == $_SESSION['ludou_token'])) {
  10.   $error = ;
  11.   $secure_cookie = false;
  12.   $user_name = sanitize_user( $_POST['log'] );
  13.   $user_password = $_POST['pwd'];
  14.   if ( empty($user_name) || ! validate_username( $user_name ) ) {
  15.     $error .= '<strong>错误</strong>:请输入有效的用户名。<br />';
  16.     $user_name = ;
  17.   }
  18.   ifempty($user_password) ) {
  19.     $error .= '<strong>错误</strong>:请输入密码。<br />';
  20.   }
  21.   if($error == ) {
  22.     // If the user wants ssl but the session is not ssl, force a secure cookie.
  23.     if ( !empty($user_name) && !force_ssl_admin() ) {
  24.       if ( $user = get_user_by('login', $user_name) ) {
  25.         if ( get_user_option('use_ssl', $user->ID) ) {
  26.           $secure_cookie = true;
  27.           force_ssl_admin(true);
  28.         }
  29.       }
  30.     }
  31.     if ( isset( $_GET['r'] ) ) {
  32.       $redirect_to = $_GET['r'];
  33.       // Redirect to https if user wants ssl
  34.       if ( $secure_cookie && false !== strpos($redirect_to, 'wp-admin') )
  35.         $redirect_to = preg_replace('|^http://|', 'https://', $redirect_to);
  36.     }
  37.     else {
  38.       $redirect_to = get_bloginfo( 'url' );
  39.     }
  40.     if ( !$secure_cookie && is_ssl() && force_ssl_login() && !force_ssl_admin() && ( 0 !== strpos($redirect_to, 'https') ) && ( 0 === strpos($redirect_to, 'http') ) )
  41.       $secure_cookie = false;
  42.     $creds = array();
  43.     $creds['user_login'] = $user_name;
  44.     $creds['user_password'] = $user_password;
  45.     $creds['remember'] = !empty$_POST['rememberme'] );
  46.     $user = wp_signon( $creds$secure_cookie );
  47.     if ( is_wp_error($user) ) {
  48.       $error .= $user->get_error_message();
  49.     }
  50.     else {
  51.       unset($_SESSION['ludou_token']);
  52.       wp_safe_redirect($redirect_to);
  53.     }
  54.   }
  55.   unset($_SESSION['ludou_token']);
  56. }
  57. $rememberme = !empty$_POST['rememberme'] );
  58. $token = md5(uniqid(rand(), true));
  59. $_SESSION['ludou_token'] = $token;
  60. ?>

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文件中,如以下代码:

  1. p.ludou-error {
  2.   margin16px 0;
  3.   padding12px;
  4.   background-color#ffebe8;
  5.   border1px solid #c00;
  6.   font-size12px;
  7.   line-height: 1.4em;
  8. }
  9. .ludou-login label {
  10.   color#777;
  11.   font-size14px;
  12.   cursorpointer;
  13. }
  14. .ludou-login .input {
  15.   margin: 0;
  16.   color#555;
  17.   font-size24px;
  18.   padding3px;
  19.   border1px solid #e5e5e5;
  20.   background#fbfbfb;
  21. }

二、注册

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

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

①添加表单代码:

  1. <?php the_content();?>
  2. <?php if(!empty($error)) {
  3.  echo '<p class="ludou-error">'.$error.'</p>';
  4. }
  5. if (!is_user_logged_in()) { ?>
  6. <form name="registerform" method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>" class="ludou-reg">
  7.     <p>
  8.       <label for="user_login">用户名<br />
  9.         <input type="text" name="user_login" id="user_login" class="input" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" size="20" />
  10.       </label>
  11.     </p>
  12.     <p>
  13.       <label for="user_email">电子邮件<br />
  14.         <input type="text" name="user_email" id="user_email" class="input" value="<?php if(!empty($user_email)) echo $user_email; ?>" size="25" />
  15.       </label>
  16.     </p>
  17.     <p>
  18.       <label for="user_pwd1">密码(至少6位)<br />
  19.         <input id="user_pwd1" class="input" type="password" tabindex="21" size="25" value="" name="user_pass" />
  20.       </label>
  21.     </p>
  22.     <p>
  23.       <label for="user_pwd2">重复密码<br />
  24.         <input id="user_pwd2" class="input" type="password" tabindex="21" size="25" value="" name="user_pass2" />
  25.       </label>
  26.     </p>
  27.     <?php
  28.     $register_number=rand(0,1); // 设置随机数的返回范围
  29.     $_SESSION['register_number']=$register_number;
  30.     global $register_questions;
  31.     global $register_answers;
  32.     // 添加问题数组
  33.     $register_questions=array('本站域名是什么?(tongleer.com)','中国首都是哪里?');
  34.     // 添加答案数组(与上面的问题对应)
  35.     $register_answers=array('tongleer.com','北京');
  36.     ?>
  37.     <p>
  38.         <label><?php echo $register_questions[$register_number];?><br />
  39.             <input type="text" name="user_proof" id="user_proof" class="input" size="25" tabindex="20" />
  40.         </label>
  41.     </p>
  42.     <p class="submit">
  43.       <input type="hidden" name="ludou_reg" value="ok" />
  44.       <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="注册" />
  45.     </p>
  46. </form>
  47. <?php } else {
  48.     // 注册成功后跳转到站内其他页面,URL自行修改
  49.     wp_safe_redirect(get_bloginfo( 'url' ));
  50. } ?>

②添加表单验证代码:

  1. <?php
  2. /**
  3.  * Template Name: 前台注册
  4.  * //www.tongleer.com/
  5.  */
  6. if(!isset($_SESSION))session_start();
  7. if( !empty($_POST['ludou_reg']) ) {
  8.   $error = ;
  9.   $sanitized_user_login = sanitize_user( $_POST['user_login'] );
  10.   $user_email = apply_filters( 'user_registration_email', $_POST['user_email'] );
  11.   // Check the username
  12.   if ( $sanitized_user_login ==  ) {
  13.     $error .= '<strong>错误</strong>:请输入用户名。<br />';
  14.   } elseif ( ! validate_username( $sanitized_user_login ) ) {
  15.     $error .= '<strong>错误</strong>:此用户名包含无效字符,请输入有效的用户名<br />。';
  16.     $sanitized_user_login = ;
  17.   } elseif ( username_exists( $sanitized_user_login ) ) {
  18.     $error .= '<strong>错误</strong>:该用户名已被注册,请再选择一个。<br />';
  19.   }
  20.   // Check the e-mail address
  21.   if ( $user_email ==  ) {
  22.     $error .= '<strong>错误</strong>:请填写电子邮件地址。<br />';
  23.   } elseif ( ! is_email( $user_email ) ) {
  24.     $error .= '<strong>错误</strong>:电子邮件地址不正确。!<br />';
  25.     $user_email = ;
  26.   } elseif ( email_exists( $user_email ) ) {
  27.     $error .= '<strong>错误</strong>:该电子邮件地址已经被注册,请换一个。<br />';
  28.   }
  29.   // Check the password
  30.   if(strlen($_POST['user_pass']) < 6)
  31.     $error .= '<strong>错误</strong>:密码长度至少6位!<br />';
  32.   elseif($_POST['user_pass'] != $_POST['user_pass2'])
  33.     $error .= '<strong>错误</strong>:两次输入的密码必须一致!<br />';
  34.   $register_number=$_SESSION['register_number'];
  35.   global $register_answers;
  36.   if (!isset($_POST[ 'user_proof' ]) || empty($_POST[ 'user_proof' ])) {
  37.           $error .= '<strong>错误</strong>: 您还没有回答问题。';
  38.   } elseif ( strtolower$_POST[ 'user_proof' ] ) != $register_answers[$register_number] ) {
  39.       $error .= '<strong>错误</strong>: 您的回答不正确。';
  40.   }
  41.     if($error == ) {
  42.     $user_id = wp_create_user( $sanitized_user_login$_POST['user_pass'], $user_email );
  43.     if ( ! $user_id ) {
  44.       $error .= sprintf( '<strong>错误</strong>:无法完成您的注册请求… 请联系<a href=\"mailto:%s\">管理员</a>!<br />', get_option( 'admin_email' ) );
  45.     }
  46.     else if (!is_user_logged_in()) {
  47.       $user = get_userdatabylogin($sanitized_user_login);
  48.       $user_id = $user->ID;
  49.       // 自动登录
  50.       wp_set_current_user($user_id$user_login);
  51.       wp_set_auth_cookie($user_id);
  52.       do_action('wp_login', $user_login);
  53.     }
  54.   }
  55. }
  56. ?>

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

4、然后,在wordpress后台新建一个页面,页面属性选择“前台注册”模板。

5、注册成功会让用户自动登录,如果不需要自动功能,可以将47-52行代码删除,换成:

  1. // 注册成功后跳转到站内其他页面,URL自行修改
  2.                 wp_safe_redirect(get_bloginfo( 'url' ));

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

  1. p.ludou-error {
  2.   margin16px 0;
  3.   padding12px;
  4.   background-color#ffebe8;
  5.   border1px solid #c00;
  6.   font-size12px;
  7.   line-height: 1.4em;
  8. }
  9. .ludou-reg label {
  10.   color#777;
  11.   font-size14px;
  12.   cursorpointer;
  13. }
  14. .ludou-reg .input {
  15.   margin: 0;
  16.   color#555;
  17.   font-size24px;
  18.   padding3px;
  19.   border1px solid #e5e5e5;
  20.   background#fbfbfb;
  21. }

推荐阅读
  • 插件截图:插件简介:TleUCenterForWordpress是一个用户中心插件,放置于前台网页的左下角,供用户登陆/管理只用,使用邮箱验证码登陆,登陆之后在使用TleWeiboForWordPressV2.0微博主题的情况下,可以显示微博列表、文章列表、评论列表,也可...
  • 插件截图:插件介绍:TleLiveCtrlForWordpress是一个基于Kplayer的直播遥控器插件,也可以叫做KplayerForWordPress插件,支持多平台直播推流,进行积分点播、查询、跳过等功能,支持Payjs微信、支付宝支付,是一个可以24小时直播推流的...
  • 主题截图:主题简介:一款Wordpress版本的TleWeiboForWordPress电脑/手机版微博主题使用方法:将本主题里的所有文件放在您网站目录的wp-content/themes内,注意文件夹名字必须为TleWeibo或TleWeiboWap。此处内容已经...
  • 插件简介:即时聊天插件为WordPress站长及用户提供即时聊天功能,前台环信即时聊天需要配合个人中心插件,暂不支持手机端。在支持手机端的路上,因为万恶的360网站卫士最近访问困难,导致停留了N久,最后啥也没动,就升级至V1.0.10了,不过仅仅支持了简单的手机端版本。使...
  • 插件介绍:本插件可以隐藏文章中的任意部分内容,当访客付费后,可查看隐藏内容,当前版本支持payjs微信支付。安装方法:第一步:下载本插件,放在 wp-content/plugins/ 目录中(插件文件夹名必须为WeMedia);第二步:激活插件;第三步:填写配置;第四...

o p
Ú