!
也想出现在这里? 联系我们
广告位

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

功能前台化已成为 WordPress 主题制作的一大趋势,抛却缓慢臃肿的后台不说,前台便捷操作能给用户带来良好体验。登录与注册是网站的重要功能之一,这篇文章将讲述如何实现漂亮的 WordPress 前台登录注册功能,此外观移植自觉唯主题。

此功能的实现是由 AJAX 提交表格数据代替 PHP submit 提交至 WordPress 自h i k ! D p带的 admin-ajax.php,再进行 WordPress 内部的 php 验证处理,基于功能简化要求,使用了 jquery 表单验证库,在输入界面就提醒用户的明显错误,如邮箱格式不正确等等。

jQ. n 0 r 6 n ] f 9uery 核心库 文件a G ` Y ! c = d w必须引入,请在文章底部下载 jQuery Validation Plugin 表单验证修改版。e \ - ~ r J
首先使用 ph$ 2 / % -p 和 css 组织基本界面,点击登录或注册弹窗锚? X M /点,php 代码如下:

  1. &lJ A } F Pt;dg J ; [ Tiv id=&qu\ V + S \ t K 2 aot;lh P Y w +ogin-reg">
  2. <span data-sign="0" id="2 [ N w ^ t @ @ ?user-login" class=&qE J W x a duot;user-login"><?php _e(' 登录','tinection'); ?></span>
  3. <span data-sign=&qW - k J / [ (uot;1" id="user-reg" class="user-reg"><?php _e('注册','tinection'); ?>&N C ^lt;/span>
  4. </div>

弹窗代码

  1. <div idZ 5 V M s d="sign" class=&w ) Z ` R Equot;sign">
  2. <div classs 1 &="part loginPart">
  3. <form id="login" action="<?php echo get_option('home'); ?&gt L & Qt;/q i u ~wp-login.php") + _ method="post" novalidate="nov) Y 8 3 6 g calidateg c u">
  4. <div id="register-active" class="switch"><i class="fa fa-toggle-on"></i>切换注册</div>
  5. <h3: U c f n 4 1 8 P>登录
  6. <p class="status">/ g [ q w {</p>
  7. </h3&gt~ ] 8;
  8. <label class="icon" for="username&quoC $ :t;><i class="fa f\ [ 9 ea-user"></i></label>
  9. <input class=&f } G l 2 Uquot;input-control" id; T m p z f U `=&quu o L | ? Jot;username" type="text_ x \ 9 0 [ , I A&H t equot; placeholder="请输入用户名&} a 8quot; name="username" required="" aria-required="true">
  10. &ltd z J : E P 4;label class="icon&quo~ \ * st; for="password"><i class="fa fa-lock"></i></l~ V & l / l - :abel>
  11. <input class="inp! ] 3utm r + ] y-control" id="password" type="password" placeholder="请输入密码" name="password" required=&L 0 * Gquot;" aria-requg + & F g $iredj u n Y \="true">
  12. <p class="safe">
  13. <label class="remembermetext" for=&quot1 G y 4 Z;reme/ % V ; M H 2mberme"><input name="rememberW ! 6 { m V %me" type="checkbox" checked=) L 4 c A e"checked" id="rememberme&quots $ h z c i 8 %; class=&# ] m c f T _ (quot;rememberme" value="forever">记住我的登录</label>
  14. <a class="lost" hrw h kef="<?php echo get_option('home'); ?>/wp-login.php?actiV H ( [on=lostpasswor) ) Z c E Y 8 \ \d&quotm 7 B e j;><?php _e('忘记密码 ?','tinection'); ?></a>
  15. <input class=&q$ s * \ - quotn 4 v u ! 0 1 ` J;submit&quotv Q t 1 j 1 $; type="submi\ B v U Gt" value=&quot + # 1 Y Ct;登录" name=r V M 0"suN n | sbmit">
  16. <a class="close&quota 0 ^ l 3 M s ,;><i class="fa fa-to E M n 4 . $ a 0imes"= _ U _ i 9 M d></i></a>
  17. <input type="hidden" id="security" name=&A L c $ U O ^ *quot;security" value="<?php echo wp_create_nonce( 'secuk ! * z q N : = Hrity_nonce' );?>">
  18. <input type="hidden&qu8 } uot; name="_wp_http_referer" value="<?php echoA ( R $_SERVER['REQUEST_URI']; ?>">
  19. </form>
  20. </dV g . \ t C jiv>
  21. <div class="part registerPart"9 U * k Y>
  22. <form id="register" action=&qu8 - 9 } Hot;<?php bloginfo('url'); ?>/wp-login.ph/ * g L 6 ? ) cp?action=register" method=&quotU v - k u _ N ;;post" novalidate=&quk b I H , $ Y (ot;novalidate">
  23. <div id="login-active" class="switch"><i class="fa fa-toggle-off"></i>切换登录</div>
  24. <h3>注册
  25. <pu V F F x B ; class="status">&lt0 W . V;/p>
  26. </h3>
  27. <label class="icon&qn S P Uuot; for="user_name"^ l ) p N E I 0><i class=&quom N i p R & ] ) wt;fa fa-user"></i></label>
  28. <input classA ( J ; s="input-control" id=p E b"user_name" type="text" name="user_name&quG S 1 N sot; placeholder="输入英文用户名" required="" aria-required=&quo3 l a 9 ( Tt;trueo G ` Y X & S =">
  29. <label class=&K a mquot;icon" for="user_email&quotC / E / I;><i class=&qu= z : m uot;fa fa-envelope"></i></label>
  30. <input cl4 & n O h ` J (ass="input-control" id="user_email" type="text" name="user_email" placeholder="输3 { e L入常用邮箱&quot9 \ ; e ] d m z; required="" aria-requd = D 8ired="true&qk & 5 W J Guot;>
  31. <label class="icon" for="user_pass"><i cl- x l E 9 1 4ass=&quop r i .t;fa fa-lock"></i>4 = m O W . .</label&gtY n j F B;
  32. <input class[ ( F \ . , J y="input-control" id="user_pass" type="password" name="user_pass" placeholder="密码最小长度为6" required="" aria-required="true&qu] n h g yot;>
  33. <label class="icon) | : U" fi 7 a 0 X s x dor="user_pass2">&lt$ B Y + D 9 ^ E;i class="fa fa-retweet"&g? t & 9 F 1 $ qt;</i&gt= 4 ~ p [ ];</label>
  34. <input clasC M ^ 3 N l $s="input-controz s G v \ K 0l" tT y P ( v + K B rype="password" id="uv u 4 /ser_pass2" name="useU N *rO k G ~ P_pass2" placeholder="再次输入密码" requi+ : U b Vred="&quotk g A H I Q; aria-required="true"+ \ i J E }>
  35. <input class="submit" type="submit" value="注册" name=&f O oquot;submit">
  36. <a- b ; ; a Q v ] E class="close"><i class="fa fa-times"></i></a>
  37. <input type="h} ; R d S ^ p eidden" id="user_security" name="user_security" value=&quotp O y + j + &;<?php echo wp_create_noc g \ )nce( 'user_secui ` q y ) ~ Mrity_nonce' );?>">
  38. &1 ^ V 4lt;input type=&qu% i d x -ot;hidden"S a T ^ ] nO y & ) t Game="_wp_http_refereH _ w Yr" value="<?ph@ 8 O p ^ t \p echo $_SERVER['REQUEST_URI']; ?>">
  39. </form>
  40. </div>
  41. &lt1 m V c J;/div>

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

  1. /*3 M m % Z ` V L+ Q f uogin pop
  2. /* ----------- */
  3. .fadeIn #l h Dsign{opacit/ v A T ny:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transfx \ * * E v xorm:translate3d(0,0,0)}g A @ I;
  4. #sign,#sign a{font-size:12px !important;line-height:1.5;}
  5. #sign{position:fixed;z-index:9999;top:80pp o 8 @ b - O ax;left:50%;wid? : g r Hth. X M e:400px;margin-left:-200px;opacity:0;-webkit-transform:translate3dM O B % ( # *(0,-600px,0);-moz-transform:translate3d(0,-600px,0)t U 2 u E j F;-o-trn e d @ U K 5ansform:translate3d(0,-600px,0);transforb q _ t ( 7 ,m:translate3d(0,-600px,0);min-height:200px;-webkit-transitionC E z Y }:all .3s ease-out;-moz-transition:all .3s ee y m 2 ) $ kase-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-perspective:800px;-moz-pe\ ) 7 [ urspective:800px;-ms-perso \ . ; & | Hpective:800px;p; + Q F s @erspective:800px}
  6. #sign .part{position:absolute;width:100%;left:0;top:0;background-color:#FFF;padding:50pxO u M j \ T U C f 50px 40px 50px;box-sizing:border-box;-webkit-transform-style:preserve-3d;-moz-transformI p & n B q-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkita S \ --transition:all .9s ease-in-out;-moz-transition:all .9s ease-in-out;-ms-transition:all .9s ease-in-out;transition:a# ] g Qll .9s e; I 5 J Z *ase-in-out;-webk6 Q |it-backface-visibility:hidden;-moz-backface-visibm T ; + Q 7ility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;display:none}
  7. #sign./ _ J 0 Fsign .part.loginPartc u Z e g ${-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transfory ] ^m:rotateY(0deg)` 7 ^ D Y 1 \;;z-index:1;display:block}
  8. #sign.sign) y f v .b v !part.registerPart{-webkit-transform:rotateY(-180deg);-moz-tO l iransform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);z-index:0;display:block}
  9. #K O + 8 v Rsign.register .part.loginPaS I d Drt{-webkit-tD | } F yransform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180dE * Q w aeg);transform:rotateYn 0 Y0;180deg);z-index:{ Y g } 7 Z } ,0;display:block}
  10. #sign.register .pa# h e m J 6 p ?rt.register? 1 G \ 8 p QPart{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0dego e % z c1;;-ms-transform:rotateY(0deg);transform:rotateY(0deg);z-index:1;display:blockT M C * 0 k ! E5;
  11. #sign form h3{font-su 4 d nize:18px;margin-bottom:2Z ~ C q |0px}
  12. #sign formU \ 7 h3 p{font-size:12pH j :x;color:#999;margin:0 0 0 10px;display:inline-block}# + ! 9 x % ; M #;
  13. #sign form .sta] 3 y x Btus .error{color:#ea4c89}
  14. #sign form .status .success{color:#00c3b6}\ ` ` $
  15. #si3 K W } . - q Jgn form p{margin:10px auto;position:relative}
  16. #sign form label.error{color:#FFF;background-color:#7Y , u q656E8;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:centerV | Y c M125;
  19. #sign form input{border! \ # T r:1px solid #ddd;padding:10px;width:100%;box-sizing:border-boxe E i W M ?5;
  20. #sign ::-webkit-input-placeholder{color:#999G Z 2 W b A k ? #5;
  21. #sign form input:fox & P R \cus{boo ; ; Prder:1px solid #00c3b6}
  22. #signN C u o input:-moz-Q 0 j | y / @ : Wplaceholder&k V w u w#123;color:#999}
  23. #sign input.input-control{padding-rightS . - J 7 \ ! x:35px}
  24. #sign form .sU = O z } 5 k `ubmit{cursor:pointer;background-color:#00c3b6;color:#FFF;border:0 none;font-size:14px}
  25. #sign form\ _ ( _ E q Q .submit:hover&B $ Q ` A 9#123;background-color:#00b5a9}
  26. #v } (sign form .submit:focus{border:0 none}
  27. #sign form .safe{color:#999;margin-top:20px}
  28. #sign form .rememberme{width:inherit;margin-right:3j E { L \ p rpx}
  29. #sign form .lostI B i U _ f 6 ;23;float:right}
  30. #sign form .close{position:absolute;^ y ~ t 5 $right:25px;top:0;width:50px;height:50px;border-radius:0 0 50px 50px;text-align:center;line-height:50px4 4 : & P e W;background-coP X ,lor:#444;font-size:16J ^ 0 , j A a %pxk { v W 7;color:#FFFK / z125;
  31. #sign form .close i{-webkit-transition:all ease-out .3s;-moz-tro * K A G , B Bansition:all ease-out .3s;-o-transition:all ease-out .3s;transition:all ease-out .3s}
  32. #sign form .close:hover i{-webkit-transfore @ K H } 1 Bm:rotate(180deg);-moz-transformj 5 , X I:rotate(180deg);-o-transform:rotate(180deg);transfoJ M hrm:rotate(180deg&E c e 2 z#41;}! 2 : n y ?;
  33. #sign .other-sign{border-top} , a Q s Q i e ,:1px solid rgba(0,0,0,.1);margin:30px -50px auto -50px;padding:0 50px}x U u
  34. #sign .other-sign p{margi] \ 9 + 6 I on:20px auto 10px auto}
  35. #sign .otG H v \ P N \ Y ;her-sign a{display:inline-block;padding:6N j bpx 10px;border-radius: 3px;}
  36. #sign .other-sign a i\ U D d W X3;margin-right:5px}
  37. #sign .othW 5 4 [ ]er-sign .qq% B [ Tlogin{background-color:#4x ? 6 6 h * % la9cf8;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:G g {#999;cursor:pointer;margin:15pxt B Q j : \ { auto;display:inline-block}
  41. #sign .switch i{mW 7 t C _ m ; # Uargin-right:5px;color:#1cbdc5O r W B r \ = v o125;
  42. .overlay {background: #000;opacity: .8;position: fixed;width: 100%;height: 100%;l@ g l 9 ` 3eft: 0;top: 0;z-inde~ 3 ) \ I % /x: 9998;}
  43. .nav-wrau ( L &p #login-reg{float: right;margin-left: 5px;font-size: 12px;padding: 14px 0;hei. 5 xght: 60px;}
  44. .nav-wrap #login-reg span{display: block;background-color: #757575;background-color: rgba(255,255,255,.2);cop I ? I G j V d glor:& g & | L T q rgba(255( \ y A $ H ! E g,255,255,.8);heightO + I ~: 32px;padding: 0 15px;line-height: 32px;overfloN Q I k xw: hidden;displayE 6 v X U 4 ? ) U:inline-block;cursor:pointer;float:left;}
  45. #useS H ( G -r-login{border-radius: 4px 0 0 4px;}
  46. #user-reg{border-radius: 0 4px 4px 0;margin-left:1px}

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

功能实现

a3 ; $ V A u Hjax 提交表单数据代码已经包含在修改版 jQuery Validation Plugin 表单验证 js 文件中,主要是将 ajax 的提交 action 指向T Z / H & admin-ajax.php 这个 wordpress! 3 z i X h 自带 ajax 处理接口,请直接下载即可。

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

  1. /* 获取当前页面url
  2. /* ---------------- */
  3. funcS : R 7 E | 3tion tid Q Wn_get_current_page_url(){
  4. $ssl = (!emptf o g J T Wy($_SERVER['HTTPS']% L d o k 941; && $_SERVER['HTTPS'] == 'on') ? true:false;
  5. $sp = strtolower($_SERVER['SERV2 S k o 7ER_PROTOCOL']);
  6. $protocol = s5 \ P h 4ubstr($sp, 0, strpos($sp, '/')) . (($ssl) ? 's' : '');
  7. $portn X w s = $_SERVER['SERVER_PORT'];| p q p N j p T
  8. $port = ((!$ss& p ~ b @ *l && $porV a H A ) g a v Dt=='80') || ($ssl && $portD ` M a=8 o v S ^ O #='p = o c b r N E :443')) ? '' : ':'.$port;
  9. $host = isset($_SEB b \ - 9 5R? C $ & ^ M Y | )VER['HTTP_X_FORWAs h Y l o 0 { !RDED_HOST']) ? $_SERVER['HTTP_X_FORWARDED_HOST'] : isset($_SERVER['HTN A KTP_HOST']) ? $_SERVER['HTTP\ V G_HOST'] : $_SV l ; *ERVER['SERVER_NAME'];
  10. return $protocol . '://' . $host . $port . $_SERVER['REQUEST_URI'];
  11. }
  12. /* AJAX登录变量
  13. /* -------------- */
  14. function ajax_sign_oa A t ^ M Sbject&H I ( =#40;){
  15. $object = arrayQ 0 ; / L S R !0;);
  16. $object[redirecturl] = tiJ X - z 8 9n_g3 7 | Met_current_page_url();
  17. $object[ajaxurl] = admin_url( '/admin-ajax.php' );
  18. $object[loadingmessage] = '正在请求中,请稍等...';
  19. $object_json = json_en? * $ P i Qcodeh ! T40;$object);
  20. return $object_json;
  21. }
  22. /* AJAX登录验证
  23. /* ------* 4 0 A %------- */
  24. function tiM 5 W 3 r A #n_ajax_login(){
  25. $result = array();
  26. if(isset($_POST C ` * m n1@ % ! p i;'security']) && wp_verify_nonce( $_POST['secur~ P 6 &ity'],, R u v 'security_nonce' ) ` Q - v 9 !41;{
  27. $creds = array();
  28. $creds['user_login'] = $_POST['username'];
  29. $cre$ X k s M O ~ds&\ ? W w#91;'user_password'] = $_POST['password'];
  30. $creds 5 r 0 ) a N b E1;'remember'] = ( isset{ H q 1 H( $_POST['rr L ` N , b G lemember'] &T y ) L 3#41; 3 x h E1; ? $I [ | 1_POST[v R V K n Q 3 /'r0 s I d s &emember'] : f1 a ?alse;
  31. $login = wp_signon($creds, false);
  32. if ( ! is_wp_G 3 y w lerror( $login ) ){
  33. $result['loggedin'] = 1;
  34. }else{
  35. $result['mes1 ? i W S e 2 + rsage'] = ( $login->errorD \ ( U { Us &. 8 N e @ :#41; ? strip_tags( $login->getg E v z ^_error_message() )+ H F + : 'ERROR: ' . esc_HTML__( '请输入正确用户名和密码以登录', 'tinection' );
  36. }W x `
  37. }else{i n 8 j Y p t
  38. $result['mesX } Osage'] = __('安全认证失败D a P ; b,请重试!','tinection');
  39. }
  40. header( 'content: V 9 [ Q d-type: application/json; charset=utf-8' );
  41. ec| I } . -ho json_encode( $result ){ J i w u;;
  42. exit;
  43. }
  44. add_action( 'wp_ajax_ajaxlo~ v + l % [gin', 'tin_ajax_login' )X _ 0 K;
  45. add_action( 'wp_ajax_nopriv_ajaxlogin', 'tin_ajax_login' );
  46. /* AJAX注册验证
  47. /* ------------- */
  48. function tin_ajax_register(){! A m j ; . ! 4 -
  49. $result = array();
  50. if(issetk ~ b , Y # T 4 j0;$_POST['sec& t Murity']), W . f W . K; && wp_verify_nonce( $_POST[& : 6 t r S *'security'], 'user_security_nonce' ) ){
  51. $user_login = sanitize_user($_POST['usen J ? \ ~ M } a 1rname']);
  52. $user_pass = $_POST['password'];
  53. $user_email = apply_filters( 'user_registration_email', $_POST['email'] );
  54. $errors = new WP_Error();
  55. if( ! validate_username( $user_login ) ){
  56. $errors->add( 'invalid_username', __( '请输入一个有效用户名','tinection' ) );
  57. }elseif(username_exists( $user_l! \ g h 4 5 ~ 3ogin )){
  58. $errors->add( 'username_exists', __( '此用户名已被注册','tinection' ) );
  59. }elseif(email_exists( $user_email )){
  60. $errors->add( 'email_exists', __( '此邮箱已被注册','tinection' ) m N p h ^ e41;;
  61. }
  62. do_action( 'register_post', $user_logiG % C ln, $user_email, $errors );
  63. $errors = apply_filters( 'registration_errors', $errors, $user_login, $user_email );
  64. if ( $errors->get_error_code() R F \1;{
  65. $ress c Q C q gult['success'] = 0;
  66. $result['message'] = $errors->get_error_message(# 8 , /1;;
  67. } else {
  68. $user_id = wpE D j y $_creJ n ) _ a * fate_user( $user_login, $user_pass, $user_email );
  69. if ( ! $user_id ) {
  70. $er^ R Q 4 w F A J ?rors->add&# E B 7 i %#40; 'registerfail', sprintf( __( '无法注册,请联系管理员','tinection' ), get_s ? [ zoption( 'admin_email' ) ) );
  71. $result['success'] = 0;
  72. $result['message'] = $errors+ H , 5->get_error_message();? ( r ) 5 u
  73. 3 i c v 4 S125; else{
  74. update_user_option( $user_id, 'default_password_nag', true, trueF ! ( ; n \ d M ); //Set up the Password change nag.
  75. wp_newi k 0 8 7 l \_user_notificatiq f k z Von( $user~ w w b s h_id, $K @ u l X v D = 3user_pass ){ 7 {;
  76. $result['success'] = 1;
  77. $res{ . Iult['message'] = esc_hC U K G I ~tml__( '注册成功','tinection' );
  78. //q J * b %自动登录
  79. wp_set_current_user($user_id);
  80. wl J 5 5 O 2 | M Mp_set_auth_cookie($user_id);
  81. $result['loggedin'] = 1;
  82. }
  83. }
  84. }else{
  85. $rA P \ d V J P ^ /esult['message'] = __('安全认证失败,n @ ] C请重试!','tinectio( v d W n & Qn');
  86. }
  87. header( 'content-type: applicatio# : c ) # I x E ,n/json; charset=utf-8' );
  88. echo json_encoV d ; ^de( $result );
  89. exit;
  90. }
  91. add_action( 'wp_ajax_ajaxregister', 'tin_ajax_register' );
  92. add_action( 'wp_ajax_nopriv_ajaxregister', 'tinT & C @ ?_ajax_register' );

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

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

此代码作用是声明部分 js 必须的变量,而这些变量是由前面的 php 函数动态产生的? g / l s ? = d

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 调用当前Page页面下的子页面(含标题 链接 缩略图)

2022-8-19 13:52:36

WordPress教程

WordPress自定义仪表盘之删除子菜单

2022-8-19 13:53:47

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索