wordpress Ajax登录注册
为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登录注册。
怎么引用啊
请查看https://www.topicnote.com/1576.html 这篇文章,已经做成插件。
下载地址已经失效了
https://www.bestwppay.com/93 购买地址
请问下 本文提供的文件在哪里?
希望能用的上。
个人觉得还是非常的好用
可惜暂时用不上。