同乐儿

  1. 首页
  2. wordpress教程
wordpress非插件实现前台登陆注册表单并添加随机验证字段
发布 | 1年前 (2017-09-11) | 阅读数:1763 | 评论数:0 | 来源:同乐儿

 

引言:此文由子域名转移而来,因为细微强迫症和放弃子域名而不舍得完全丢弃,所以将会逐步第二次转移文章到主域名上来,二者主题(阿里白秀和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.  *  http://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参数,值为跳转的链接地址,如登录页面地址为http://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.  * http://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. }


如果觉得该作者的文章对你有帮助,请随意打赏给他。您的支持将鼓励作者继续创作!
打赏
X
打赏本文作者方式

微信扫一扫可留言


继续浏览有关 wordpress,wordpress教程 的文章

分享至:




评论
  • 117 评论
  • 129 粉丝
  • 131 文章
  • 最新评论
    二呆说:看见岛有了点信号,我用的时候就是看对应网...
    123123123说:我试过了,没改成功,不着急用,看了qur...
    二呆说:6.0应该也行,时间太长忘记了,好像6....
    123123123说:能不能适配下emlog6.0
    二呆说:啥意思,背景就是简单的网页背景图片。。。
    随机热门
    标签
    wordpress (81) wordpress优化 (26) wordpress主题 (24) 原创 (23) wordpress插件 (21) wordpress教程 (18) wordpress seo (17) Typecho (14) Typecho插件 (11) 博客主题 (8) emlog插件 (6) wordpress维护 (6) emlog (6) CMS主题 (5) 企业主题 (4) DNSPod for emlog (3) 淘宝客主题 (3) 修订版本 (3) 自动保存 (3) 移动适配 (3)