为wordpress添加ajax登录注册，主题笔记提供文件包，自行使用。

上面演示图，为主题笔记官网登录效果，目前是从知言主题中提取而来，几天为大家介绍的是另外一种实现方式，相比之前的可能要更为简洁与方便。

登录表单：

<form class="form-horizontal" id="loobo-login">
 <p class="loobo-msg-status text-center"></p>
 <?php wp_nonce_field('ajax-login-nonce', 'security'); ?>
 <div class="form-group ">
 <div class="col-xs-12">
 <input class="form-control" id="username" type="text" placeholder="请输入用户名" name="username" >
 </div>
 </div>
 <div class="form-group">
 <div class="col-xs-12">
 <input class="form-control" id="password" type="password" placeholder="请输入密码" name="password" >
 </div>
 </div>
 <div class="form-group ">
 <div class="col-xs-12">
 <div class="checkbox checkbox-primary">
 <input id="checkbox-signup" type="checkbox">
 <label for="checkbox-signup">记住密码</label>
 </div>
 </div>
 </div>
 <div class="form-group text-center m-t-40">
 <div class="col-xs-12">
 <input class="btn-base-bg btn-base-sm btn-block radius-3" id="loobo-pop-login-submit" type="submit" value="登录" name="submit">
 <input type="hidden" id="security" name="security" value="<?php echo wp_create_nonce( 'security_nonce' );?>">
 <input type="hidden" name="_wp_http_referer" value="<?php echo $_SERVER['REQUEST_URI']; ?>">
 </div>
 </div>
 </form>

注册表单：

<form class="form-horizontal" id="loobo-register">
 <p class="status"></p>
 <!-- additional fields start - -->
 <p class="loobo-msg-status"></p>
 <?php wp_nonce_field('ajax-register-nonce', 'signonsecurity'); ?>
 <div class="form-group ">
 <div class="col-xs-12">
 <input class="form-control" id="reg-username" name="username" type="text" placeholder="输入英文用户名" >
 </div>
 </div>
 <div class="form-group">
 <div class="col-xs-12">
 <input class="form-control" name="email" id="reg-email" type="text" placeholder="输入常用邮箱" >
 </div>
 </div>
 <div class="form-group">
 <div class="col-xs-12">
 <input class="form-control" name="password" id="reg-password" type="password" placeholder="密码最小长度为6" >
 </div>
 </div>
 <div class="form-group">
 <div class="col-xs-12">
 <input class="form-control" id="reg-password2" name="password2" type="password" placeholder="再次输入密码" >
 </div>
 </div>
 <div class="form-group text-center m-t-40">
 <div class="col-xs-12">
 <input class="btn-base-bg btn-base-sm btn-block radius-3" type="submit" value="注册" name="submit">
 </div>
 </div> 
 </form>

jQuery代码：

jQuery(document).ready(function ($) {
 jQuery('form#loobo-login, form#loobo-register').on('submit', function (e) {
 var curElement="#"+jQuery(this).attr('id');
 jQuery(curElement+' p.status', this).show().text(ajax_auth_object.loadingmessage);
 if (jQuery(this).attr('id') == 'loobo-register') {
 action = 'loobo_ajaxregister';
 username = jQuery('#reg-username').val();
 password = jQuery('#reg-password').val();
 password2 = jQuery('#reg-password2').val()
 email = jQuery('#reg-email').val();
 security = jQuery('#signonsecurity').val();
 ctrl = jQuery(this);
 $.ajax({
 type: 'POST',
 dataType: 'json',
 url: ajax_auth_object.ajaxurl,
 data: {
 'action': action,
 'username': username,
 'password': password,
 'password2': password2,
 'email': email,
 'security': security,
 },
 success: function (data) {
 console.log(curElement);
 jQuery(curElement+' p.loobo-msg-status').text(data.message);
 if (data.loggedin == true) {
 document.location.href = jQuery(ctrl).attr ('id') == 'register' ? ajax_auth_object.register_redirect : ajax_auth_object.redirecturl;
 }
 }
 });
 }
 else{ 
 action = 'loobo_ajaxlogin';
 username = jQuery('form#loobo-login #username').val();
 password = jQuery('form#loobo-login #password').val();
 security = jQuery('form#loobo-login #security').val(); 
 ctrl = jQuery(this);
 $.ajax({
 type: 'POST',
 dataType: 'json',
 url: ajax_auth_object.ajaxurl,
 data: {
 'action': action,
 'username': username,
 'password': password,
 'security': security,
 },
 success: function (data) {
 jQuery(curElement+' p.loobo-msg-status').text(data.message);
 if (data.loggedin == true) {
 document.location.href = jQuery(ctrl).attr ('id') == 'register' ? ajax_auth_object.register_redirect : ajax_auth_object.redirecturl;
 }
 }
 });
 }
 e.preventDefault();
 });
});

下载本文提供的文件，并引用至functions.php中，结合上面给出的表单与JQ即可实现Ajax登录注册。