功能前台化已成为 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 代码如下:
- &lJ A } F Pt;dg J ; [ Tiv id=&qu\ V + S \ t K 2 aot;lh P Y w +ogin-reg">
- <span data-sign="0" id="2 [ N w ^ t @ @ ?user-login" class=&qE J W x a duot;user-login"><?php _e(' 登录','tinection'); ?></span>
- <span data-sign=&qW - k J / [ (uot;1" id="user-reg" class="user-reg"><?php _e('注册','tinection'); ?>&N C ^lt;/span>
- </div>
弹窗代码
- <div idZ 5 V M s d="sign" class=&w ) Z ` R Equot;sign">
- <div classs 1 &="part loginPart">
- <form id="login" action="<?php echo get_option('home'); ?> L & Qt;/q i u ~wp-login.php") + _ method="post" novalidate="nov) Y 8 3 6 g calidateg c u">
- <div id="register-active" class="switch"><i class="fa fa-toggle-on"></i>切换注册</div>
- <h3: U c f n 4 1 8 P>登录
- <p class="status">/ g [ q w {</p>
- </h3>~ ] 8;
- <label class="icon" for="username&quoC $ :t;><i class="fa f\ [ 9 ea-user"></i></label>
- <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">
- <d z J : E P 4;label class="icon&quo~ \ * st; for="password"><i class="fa fa-lock"></i></l~ V & l / l - :abel>
- <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">
- <p class="safe">
- <label class="remembermetext" for="1 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"s $ h z c i 8 %; class=&# ] m c f T _ (quot;rememberme" value="forever">记住我的登录</label>
- <a class="lost" hrw h kef="<?php echo get_option('home'); ?>/wp-login.php?actiV H ( [on=lostpasswor) ) Z c E Y 8 \ \d"m 7 B e j;><?php _e('忘记密码 ?','tinection'); ?></a>
- <input class=&q$ s * \ - quotn 4 v u ! 0 1 ` J;submit"v Q t 1 j 1 $; type="submi\ B v U Gt" value=" + # 1 Y Ct;登录" name=r V M 0"suN n | sbmit">
- <a class="close"a 0 ^ l 3 M s ,;><i class="fa fa-to E M n 4 . $ a 0imes"= _ U _ i 9 M d></i></a>
- <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' );?>">
- <input type="hidden&qu8 } uot; name="_wp_http_referer" value="<?php echoA ( R $_SERVER['REQUEST_URI']; ?>">
- </form>
- </dV g . \ t C jiv>
- <div class="part registerPart"9 U * k Y>
- <form id="register" action=&qu8 - 9 } Hot;<?php bloginfo('url'); ?>/wp-login.ph/ * g L 6 ? ) cp?action=register" method="U v - k u _ N ;;post" novalidate=&quk b I H , $ Y (ot;novalidate">
- <div id="login-active" class="switch"><i class="fa fa-toggle-off"></i>切换登录</div>
- <h3>注册
- <pu V F F x B ; class="status"><0 W . V;/p>
- </h3>
- <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>
- <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 =">
- <label class=&K a mquot;icon" for="user_email"C / E / I;><i class=&qu= z : m uot;fa fa-envelope"></i></label>
- <input cl4 & n O h ` J (ass="input-control" id="user_email" type="text" name="user_email" placeholder="输3 { e L入常用邮箱"9 \ ; e ] d m z; required="" aria-requd = D 8ired="true&qk & 5 W J Guot;>
- <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>Y n j F B;
- <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;>
- <label class="icon) | : U" fi 7 a 0 X s x dor="user_pass2"><$ B Y + D 9 ^ E;i class="fa fa-retweet"&g? t & 9 F 1 $ qt;</i>= 4 ~ p [ ];</label>
- <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=""k g A H I Q; aria-required="true"+ \ i J E }>
- <input class="submit" type="submit" value="注册" name=&f O oquot;submit">
- <a- b ; ; a Q v ] E class="close"><i class="fa fa-times"></i></a>
- <input type="h} ; R d S ^ p eidden" id="user_security" name="user_security" value="p O y + j + &;<?php echo wp_create_noc g \ )nce( 'user_secui ` q y ) ~ Mrity_nonce' );?>">
- &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']; ?>">
- </form>
- </div>
- <1 m V c J;/div>
此 php 代码请放到要显示登录按钮的地方,比如导航条。CSS 样式代码如下:
- /*3 M m % Z ` V L+ Q f uogin pop
- /* ----------- */
- .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;
- #sign,#sign a{font-size:12px !important;line-height:1.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}
- #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}
- #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}
- #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}
- #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}
- #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;
- #sign form h3{font-su 4 d nize:18px;margin-bottom:2Z ~ C q |0px}
- #sign formU \ 7 h3 p{font-size:12pH j :x;color:#999;margin:0 0 0 10px;display:inline-block}# + ! 9 x % ; M #;
- #sign form .sta] 3 y x Btus .error{color:#ea4c89}
- #sign form .status .success{color:#00c3b6}\ ` ` $
- #si3 K W } . - q Jgn form p{margin:10px auto;position:relative}
- #sign form label.error{color:#FFF;background-color:#7Y , u q656E8;padding:0 4px;position:absolute;z-index:5;right:10px;top:& : ,11px}
- #sign form label.icon{position:absolute;right:10px;top:5px;color:#999;font-size:20px;color:rgba(0,0,0,.3)}
- #sign form label.icon i{width:20px;text-align:centerV | Y c M125;
- #sign form input{border! \ # T r:1px solid #ddd;padding:10px;width:100%;box-sizing:border-boxe E i W M ?5;
- #sign ::-webkit-input-placeholder{color:#999G Z 2 W b A k ? #5;
- #sign form input:fox & P R \cus{boo ; ; Prder:1px solid #00c3b6}
- #signN C u o input:-moz-Q 0 j | y / @ : Wplaceholder&k V w u w#123;color:#999}
- #sign input.input-control{padding-rightS . - J 7 \ ! x:35px}
- #sign form .sU = O z } 5 k `ubmit{cursor:pointer;background-color:#00c3b6;color:#FFF;border:0 none;font-size:14px}
- #sign form\ _ ( _ E q Q .submit:hover&B $ Q ` A 9#123;background-color:#00b5a9}
- #v } (sign form .submit:focus{border:0 none}
- #sign form .safe{color:#999;margin-top:20px}
- #sign form .rememberme{width:inherit;margin-right:3j E { L \ p rpx}
- #sign form .lostI B i U _ f 6 ;23;float:right}
- #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;
- #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}
- #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 ?;
- #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
- #sign .other-sign p{margi] \ 9 + 6 I on:20px auto 10px auto}
- #sign .otG H v \ P N \ Y ;her-sign a{display:inline-block;padding:6N j bpx 10px;border-radius: 3px;}
- #sign .other-sign a i\ U D d W X3;margin-right:5px}
- #sign .othW 5 4 [ ]er-sign .qq% B [ Tlogin{background-color:#4x ? 6 6 h * % la9cf8;color:#FFF;}
- #sign .other-sign .weibologin {background-color: #e14d4c;color: #FFF;}
- #sign .other-sign div{width:150px;text-align:center;float:left;}
- #sign .switch{color:G g {#999;cursor:pointer;margin:15pxt B Q j : \ { auto;display:inline-block}
- #sign .switch i{mW 7 t C _ m ; # Uargin-right:5px;color:#1cbdc5O r W B r \ = v o125;
- .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;}
- .nav-wrau ( L &p #login-reg{float: right;margin-left: 5px;font-size: 12px;padding: 14px 0;hei. 5 xght: 60px;}
- .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;}
- #useS H ( G -r-login{border-radius: 4px 0 0 4px;}
- #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中添加如下几个函数,代码如下:
- /* 获取当前页面url
- /* ---------------- */
- funcS : R 7 E | 3tion tid Q Wn_get_current_page_url(){
- $ssl = (!emptf o g J T Wy($_SERVER['HTTPS']% L d o k 941; && $_SERVER['HTTPS'] == 'on') ? true:false;
- $sp = strtolower($_SERVER['SERV2 S k o 7ER_PROTOCOL']);
- $protocol = s5 \ P h 4ubstr($sp, 0, strpos($sp, '/')) . (($ssl) ? 's' : '');
- $portn X w s = $_SERVER['SERVER_PORT'];| p q p N j p T
- $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;
- $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'];
- return $protocol . '://' . $host . $port . $_SERVER['REQUEST_URI'];
- }
- /* AJAX登录变量
- /* -------------- */
- function ajax_sign_oa A t ^ M Sbject&H I ( =#40;){
- $object = arrayQ 0 ; / L S R !0;);
- $object[redirecturl] = tiJ X - z 8 9n_g3 7 | Met_current_page_url();
- $object[ajaxurl] = admin_url( '/admin-ajax.php' );
- $object[loadingmessage] = '正在请求中,请稍等...';
- $object_json = json_en? * $ P i Qcodeh ! T40;$object);
- return $object_json;
- }
- /* AJAX登录验证
- /* ------* 4 0 A %------- */
- function tiM 5 W 3 r A #n_ajax_login(){
- $result = array();
- 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;{
- $creds = array();
- $creds['user_login'] = $_POST['username'];
- $cre$ X k s M O ~ds&\ ? W w#91;'user_password'] = $_POST['password'];
- $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;
- $login = wp_signon($creds, false);
- if ( ! is_wp_G 3 y w lerror( $login ) ){
- $result['loggedin'] = 1;
- }else{
- $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' );
- }W x `
- }else{i n 8 j Y p t
- $result['mesX } Osage'] = __('安全认证失败D a P ; b,请重试!','tinection');
- }
- header( 'content: V 9 [ Q d-type: application/json; charset=utf-8' );
- ec| I } . -ho json_encode( $result ){ J i w u;;
- exit;
- }
- add_action( 'wp_ajax_ajaxlo~ v + l % [gin', 'tin_ajax_login' )X _ 0 K;
- add_action( 'wp_ajax_nopriv_ajaxlogin', 'tin_ajax_login' );
- /* AJAX注册验证
- /* ------------- */
- function tin_ajax_register(){! A m j ; . ! 4 -
- $result = array();
- 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' ) ){
- $user_login = sanitize_user($_POST['usen J ? \ ~ M } a 1rname']);
- $user_pass = $_POST['password'];
- $user_email = apply_filters( 'user_registration_email', $_POST['email'] );
- $errors = new WP_Error();
- if( ! validate_username( $user_login ) ){
- $errors->add( 'invalid_username', __( '请输入一个有效用户名','tinection' ) );
- }elseif(username_exists( $user_l! \ g h 4 5 ~ 3ogin )){
- $errors->add( 'username_exists', __( '此用户名已被注册','tinection' ) );
- }elseif(email_exists( $user_email )){
- $errors->add( 'email_exists', __( '此邮箱已被注册','tinection' ) m N p h ^ e41;;
- }
- do_action( 'register_post', $user_logiG % C ln, $user_email, $errors );
- $errors = apply_filters( 'registration_errors', $errors, $user_login, $user_email );
- if ( $errors->get_error_code() R F \1;{
- $ress c Q C q gult['success'] = 0;
- $result['message'] = $errors->get_error_message(# 8 , /1;;
- } else {
- $user_id = wpE D j y $_creJ n ) _ a * fate_user( $user_login, $user_pass, $user_email );
- if ( ! $user_id ) {
- $er^ R Q 4 w F A J ?rors->add&# E B 7 i %#40; 'registerfail', sprintf( __( '无法注册,请联系管理员','tinection' ), get_s ? [ zoption( 'admin_email' ) ) );
- $result['success'] = 0;
- $result['message'] = $errors+ H , 5->get_error_message();? ( r ) 5 u
- 3 i c v 4 S125; else{
- update_user_option( $user_id, 'default_password_nag', true, trueF ! ( ; n \ d M ); //Set up the Password change nag.
- 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 {;
- $result['success'] = 1;
- $res{ . Iult['message'] = esc_hC U K G I ~tml__( '注册成功','tinection' );
- //q J * b %自动登录
- wp_set_current_user($user_id);
- wl J 5 5 O 2 | M Mp_set_auth_cookie($user_id);
- $result['loggedin'] = 1;
- }
- }
- }else{
- $rA P \ d V J P ^ /esult['message'] = __('安全认证失败,n @ ] C请重试!','tinectio( v d W n & Qn');
- }
- header( 'content-type: applicatio# : c ) # I x E ,n/json; charset=utf-8' );
- echo json_encoV d ; ^de( $result );
- exit;
- }
- add_action( 'wp_ajax_ajaxregister', 'tin_ajax_register' );
- add_action( 'wp_ajax_nopriv_ajaxregister', 'tinT & C @ ?_ajax_register' );
js 必须的变量引入,请在主题的 header.php 或 footer.php 中引入如下代码:
- <script type="text/javascript">
- /* <![CDATA[ */
- var ajax_sign_ob! p 3 F oject = <?php echo ajax_sign_object(); ?>;
- /* ]]> */
- </script>
此代码作用是声明部分 js 必须的变量,而这些变量是由前面的 php 函数动态产生的? g / l s ? = d。