WordPress教程

为WordPress添加前台AJAX注册登录功能

也想出现在这里?联系我们
创客云

功能前台化已成为 wordpress 主题制作的一大趋势,抛却缓慢臃肿的后台不说,前台便捷操作能给用户带来良好体验。登录与注册是网站的重要功能之一,这篇文章将讲述如何实现漂亮的 WordPress 前台登录注册功能,此外观移植自觉唯主题。
为WordPress添加前台AJAX注册登录功能-云模板
此功能的实现是由 AJAX 提交表格数据代替 PHP submit 提交至 WordPress 自带的 admin-ajax.php,再进行 WordPress 内部的 php 验证处理,基于功能简化要求,使用了 jquery 表单验证库,在输入界面就提醒用户的明显错误,如邮箱格式不正确等等。

jQuery 核心库 文件必须引入,请在文章底部下载 jQuery Validation Plugin 表单验证修改版。
首先使用 php 和 css 组织基本界面,点击登录或注册弹窗锚点,php 代码如下:

也想出现在这里?联系我们
创客主机
  1. <div id="login-reg">
  2. 	<span data-sign="0" id="user-login" class="user-login"><?php _e(' 登录','tinection'); ?></span>
  3. 	<span data-sign="1" id="user-reg" class="user-reg"><?php _e('注册','tinection'); ?></span>
  4. </div>

弹窗代码

  1. <div id="sign" class="sign">
  2. 	<div class="part loginPart">
  3.     <form id="login" action="<?php echo get_option('home'); ?>/wp-login.php" method="post" novalidate="novalidate">
  4. 			<div id="register-active" class="switch"><i class="fa fa-toggle-on"></i>切换注册</div>
  5. 			<h3>登录
  6. 				<p class="status"></p>
  7. 			</h3>
  8. 			<label class="icon" for="username"><i class="fa fa-user"></i></label>
  9.       <input class="input-control" id="username" type="text" placeholder="请输入用户名" name="username" required="" aria-required="true">
  10. 			<label class="icon" for="password"><i class="fa fa-lock"></i></label>
  11. 			<input class="input-control" id="password" type="password" placeholder="请输入密码" name="password" required="" aria-required="true">
  12. 			<p class="safe">
  13. 			<label class="remembermetext" for="rememberme"><input name="rememberme" type="checkbox" checked="checked" id="rememberme" class="rememberme" value="forever">记住我的登录</label>
  14. 			<a class="lost" href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword"><?php _e('忘记密码 ?','tinection'); ?></a>
  15. 			<input class="submit" type="submit" value="登录" name="submit">
  16.  
  17. 				<a class="close"><i class="fa fa-times"></i></a>
  18.       <input type="hidden" id="security" name="security" value="<?php echo  wp_create_nonce( 'security_nonce' );?>">
  19. 			<input type="hidden" name="_wp_http_referer" value="<?php echo $_SERVER['REQUEST_URI']; ?>">
  20. 		</form>
  21. 	</div>
  22. 	<div class="part registerPart">
  23.     <form id="register" action="<?php bloginfo('url'); ?>/wp-login.php?action=register" method="post" novalidate="novalidate">
  24. 		<div id="login-active" class="switch"><i class="fa fa-toggle-off"></i>切换登录</div>
  25. 			<h3>注册
  26. 				<p class="status"></p>
  27. 			</h3>
  28. 			<label class="icon" for="user_name"><i class="fa fa-user"></i></label>
  29. 			<input class="input-control" id="user_name" type="text" name="user_name" placeholder="输入英文用户名" required="" aria-required="true">
  30. 			<label class="icon" for="user_email"><i class="fa fa-envelope"></i></label>
  31. 			<input class="input-control" id="user_email" type="text" name="user_email" placeholder="输入常用邮箱" required="" aria-required="true">
  32. 			<label class="icon" for="user_pass"><i class="fa fa-lock"></i></label>
  33. 			<input class="input-control" id="user_pass" type="password" name="user_pass" placeholder="密码最小长度为6" required="" aria-required="true">
  34. 			<label class="icon" for="user_pass2"><i class="fa fa-retweet"></i></label>
  35. 			<input class="input-control" type="password" id="user_pass2" name="user_pass2" placeholder="再次输入密码" required="" aria-required="true">
  36. 			<input class="submit" type="submit" value="注册" name="submit">
  37. 			<a class="close"><i class="fa fa-times"></i></a>  
  38. 			<input type="hidden" id="user_security" name="user_security" value="<?php echo  wp_create_nonce( 'user_security_nonce' );?>">
  39. 			<input type="hidden" name="_wp_http_referer" value="<?php echo $_SERVER['REQUEST_URI']; ?>"> 
  40.     </form>
  41. 	</div>
  42. </div>

此 php 代码请放到要显示登录按钮的地方,比如导航条。CSS 样式代码如下:

  1. /* Login pop
  2. /* ----------- */
  3. .fadeIn #sign{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
  4. #sign,#sign a{font-size:12px !important;line-height:1.5;}
  5. #sign{position:fixed;z-index:9999;top:80px;left:50%;width:400px;margin-left:-200px;opacity:0;-webkit-transform:translate3d(0,-600px,0);-moz-transform:translate3d(0,-600px,0);-o-transform:translate3d(0,-600px,0);transform:translate3d(0,-600px,0);min-height:200px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;perspective:800px}
  6. #sign .part{position:absolute;width:100%;left:0;top:0;background-color:#FFF;padding:50px 50px 40px 50px;box-sizing:border-box;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all .9s ease-in-out;-moz-transition:all .9s ease-in-out;-ms-transition:all .9s ease-in-out;transition:all .9s ease-in-out;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;display:none}
  7. #sign.sign .part.loginPart{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);z-index:1;display:block}
  8. #sign.sign .part.registerPart{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);z-index:0;display:block}
  9. #sign.register .part.loginPart{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);z-index:0;display:block}
  10. #sign.register .part.registerPart{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);z-index:1;display:block}
  11. #sign form h3{font-size:18px;margin-bottom:20px}
  12. #sign form h3 p{font-size:12px;color:#999;margin:0 0 0 10px;display:inline-block}
  13. #sign form .status .error{color:#ea4c89}
  14. #sign form .status .success{color:#00c3b6}
  15. #sign form p{margin:10px auto;position:relative}
  16. #sign form label.error{color:#FFF;background-color:#7656E8;padding:0 4px;position:absolute;z-index:5;right:10px;top:11px}
  17. #sign form label.icon{position:absolute;right:10px;top:5px;color:#999;font-size:20px;color:rgba(0,0,0,.3)}
  18. #sign form label.icon i{width:20px;text-align:center}
  19. #sign form input{border:1px solid #ddd;padding:10px;width:100%;box-sizing:border-box}
  20. #sign ::-webkit-input-placeholder{color:#999}
  21. #sign form input:focus{border:1px solid #00c3b6}
  22. #sign input:-moz-placeholder{color:#999}
  23. #sign input.input-control{padding-right:35px}
  24. #sign form .submit{cursor:pointer;background-color:#00c3b6;color:#FFF;border:0 none;font-size:14px}
  25. #sign form .submit:hover{background-color:#00b5a9}
  26. #sign form .submit:focus{border:0 none}
  27. #sign form .safe{color:#999;margin-top:20px}
  28. #sign form .rememberme{width:inherit;margin-right:3px}
  29. #sign form .lost{float:right}
  30. #sign form .close{position:absolute;right:25px;top:0;width:50px;height:50px;border-radius:0 0 50px 50px;text-align:center;line-height:50px;background-color:#444;font-size:16px;color:#FFF}
  31. #sign form .close i{-webkit-transition:all ease-out .3s;-moz-transition:all ease-out .3s;-o-transition:all ease-out .3s;transition:all ease-out .3s}
  32. #sign form .close:hover i{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
  33. #sign .other-sign{border-top:1px solid rgba(0,0,0,.1);margin:30px -50px auto -50px;padding:0 50px}
  34. #sign .other-sign p{margin:20px auto 10px auto}
  35. #sign .other-sign a{display:inline-block;padding:6px 10px;border-radius: 3px;}
  36. #sign .other-sign a i{margin-right:5px}
  37. #sign .other-sign .qqlogin{background-color:#4a9cf8;color:#FFF;}
  38. #sign .other-sign .weibologin {background-color: #e14d4c;color: #FFF;}
  39. #sign .other-sign div{width:150px;text-align:center;float:left;}
  40. #sign .switch{color:#999;cursor:pointer;margin:15px auto;display:inline-block}
  41. #sign .switch i{margin-right:5px;color:#1cbdc5}
  42. .overlay {background: #000;opacity: .8;position: fixed;width: 100%;height: 100%;left: 0;top: 0;z-index: 9998;}
  43. .nav-wrap #login-reg{float: right;margin-left: 5px;font-size: 12px;padding: 14px 0;height: 60px;}
  44. .nav-wrap #login-reg span{display: block;background-color: #757575;background-color: rgba(255,255,255,.2);color: rgba(255,255,255,.8);height: 32px;padding: 0 15px;line-height: 32px;overflow: hidden;display:inline-block;cursor:pointer;float:left;}
  45. #user-login{border-radius: 4px 0 0 4px;}
  46. #user-reg{border-radius: 0 4px 4px 0;margin-left:1px}

css 样式可直接放到 style.css 文件中。

功能实现

ajax 提交表单数据代码已经包含在修改版 jQuery Validation Plugin 表单验证 js 文件中,主要是将 ajax 的提交 action 指向 admin-ajax.php 这个 wordpress 自带 ajax 处理接口,请直接下载即可。

表单后台处理,先在 functions.php 文件中添加如下几个函数,代码如下:

  1. /* 获取当前页面url
  2. /* ---------------- */
  3. function tin_get_current_page_url(){
  4. 	$ssl = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? true:false;
  5.     $sp = strtolower($_SERVER['SERVER_PROTOCOL']);
  6.     $protocol = substr($sp, 0, strpos($sp, '/')) . (($ssl) ? 's' : '');
  7.     $port  = $_SERVER['SERVER_PORT'];
  8.     $port = ((!$ssl && $port=='80') || ($ssl && $port=='443')) ? '' : ':'.$port;
  9.     $host = isset($_SERVER['HTTP_X_FORWARDED_HOST']) ? $_SERVER['HTTP_X_FORWARDED_HOST'] : isset($_SERVER['HTTP_HOST']) ? $_SERVER['HTTP_HOST'] : $_SERVER['SERVER_NAME'];
  10.     return $protocol . '://' . $host . $port . $_SERVER['REQUEST_URI'];
  11. }
  12.  
  13. /* AJAX登录变量
  14. /* -------------- */
  15. function ajax_sign_object(){
  16. 	$object = array();
  17. 	$object[redirecturl] = tin_get_current_page_url();
  18. 	$object[ajaxurl] = admin_url( '/admin-ajax.php' );
  19. 	$object[loadingmessage] = '正在请求中,请稍等...';
  20. 	$object_json = json_encode($object);
  21. 	return $object_json;
  22. }
  23.  
  24. /* AJAX登录验证
  25. /* ------------- */
  26. function tin_ajax_login(){
  27. 	$result	= array();
  28. 	if(isset($_POST['security']) && wp_verify_nonce( $_POST['security'], 'security_nonce' ) ){
  29. 		$creds = array();
  30. 		$creds['user_login'] = $_POST['username'];
  31. 		$creds['user_password'] = $_POST['password'];
  32. 		$creds['remember'] = ( isset( $_POST['remember'] ) ) ? $_POST['remember'] : false;
  33. 		$login = wp_signon($creds, false);
  34. 		if ( ! is_wp_error( $login ) ){
  35. 			$result['loggedin']	= 1;
  36. 		}else{
  37. 			$result['message']	= ( $login->errors ) ? strip_tags( $login->get_error_message() ) : 'ERROR: ' . esc_HTML__( '请输入正确用户名和密码以登录', 'tinection' );
  38. 		}
  39. 	}else{
  40. 		$result['message'] = __('安全认证失败,请重试!','tinection');
  41. 	}
  42. 	header( 'content-type: application/json; charset=utf-8' );
  43. 	echo json_encode( $result );
  44. 	exit;
  45.  
  46. }
  47. add_action( 'wp_ajax_ajaxlogin', 'tin_ajax_login' );
  48. add_action( 'wp_ajax_nopriv_ajaxlogin', 'tin_ajax_login' );
  49.  
  50. /* AJAX注册验证
  51. /* ------------- */
  52. function tin_ajax_register(){
  53. 	$result	= array();
  54. 	if(isset($_POST['security']) && wp_verify_nonce( $_POST['security'], 'user_security_nonce' ) ){
  55. 		$user_login = sanitize_user($_POST['username']);
  56. 		$user_pass = $_POST['password'];
  57. 		$user_email	= apply_filters( 'user_registration_email', $_POST['email'] );
  58. 		$errors	= new WP_Error();
  59. 		if( ! validate_username( $user_login ) ){
  60. 			$errors->add( 'invalid_username', __( '请输入一个有效用户名','tinection' ) );
  61. 		}elseif(username_exists( $user_login )){
  62. 			$errors->add( 'username_exists', __( '此用户名已被注册','tinection' ) );
  63. 		}elseif(email_exists( $user_email )){
  64. 			$errors->add( 'email_exists', __( '此邮箱已被注册','tinection' ) );
  65. 		}
  66. 		do_action( 'register_post', $user_login, $user_email, $errors );
  67. 		$errors = apply_filters( 'registration_errors', $errors, $user_login, $user_email );
  68. 		if ( $errors->get_error_code() ){
  69. 			$result['success']	= 0;
  70. 			$result['message'] 	= $errors->get_error_message();
  71.  
  72. 		} else {
  73. 			$user_id = wp_create_user( $user_login, $user_pass, $user_email );
  74. 			if ( ! $user_id ) {
  75. 				$errors->add( 'registerfail', sprintf( __( '无法注册,请联系管理员','tinection' ), get_option( 'admin_email' ) ) );
  76. 				$result['success']	= 0;
  77. 				$result['message'] 	= $errors->get_error_message();		
  78. 			} else{
  79. 				update_user_option( $user_id, 'default_password_nag', true, true ); //Set up the Password change nag.
  80. 				wp_new_user_notification( $user_id, $user_pass );	
  81. 				$result['success']	= 1;
  82. 				$result['message']	= esc_html__( '注册成功','tinection' );
  83. 				//自动登录
  84. 				wp_set_current_user($user_id);
  85.   				wp_set_auth_cookie($user_id);
  86.   				$result['loggedin']	= 1;
  87. 			}
  88.  
  89. 		}	
  90. 	}else{
  91. 		$result['message'] = __('安全认证失败,请重试!','tinection');
  92. 	}
  93. 	header( 'content-type: application/json; charset=utf-8' );
  94. 	echo json_encode( $result );
  95. 	exit;	
  96. }
  97. add_action( 'wp_ajax_ajaxregister', 'tin_ajax_register' );
  98. add_action( 'wp_ajax_nopriv_ajaxregister', 'tin_ajax_register' );

js 必须的变量引入,请在主题的 header.php 或 footer.php 中引入如下代码:

  1. <script type="text/javascript">
  2. /* <![CDATA[ */
  3. var ajax_sign_object = <?php echo ajax_sign_object(); ?>;
  4. /* ]]> */
  5. </script>

此代码作用是声明部分 js 必须的变量,而这些变量是由前面的 php 函数动态产生的。

下载地址

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

12

12.12 惠不可挡

每逢双12,难免心潮澎湃,亲们,准备好了吗?

①、原版主题安装冬日暖心价60元/次(原价120元/次) ---》详询客服

①、云主机买一年送一年,买两年送两年,高速、稳定、免备案 ---》云主机

③、双十二限时促销,在模板市场购买任意模板赠送VIP年度会员火热进行中 ---》云模板

咨 询 客 服