WordPress ·

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

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

ajax-login-register

简要说明

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

必须文件

  • jQuery 核心库
  • jQuery Validation Plugin 表单验证

以上文件必须引入,请下载jQuery Validation Plugin 表单验证修改版,下载地址见文章末尾

界面实现

首先使用php和css组织基本界面。

php代码如下:

点击登录或注册弹窗锚点

弹窗代码

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

CSS样式代码如下:

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

功能实现

ajax提交

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

表单后台处理

先在functions.php文件中添加如下几个函数,代码如下:

js必须的变量引入

请在主题的header.php或footer.php中引入如下代码:

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

相关下载

点击下载

参与评论

  • tklk8@qq.com

    太好了,正需要

    11月前 (11-30)
    回复
    回复tklk8@qq.com
  • 咀嚼忧伤

    <input type="hidden" name="_wp_http_referer" value=""> 此段代码报错 包含 value=""这段代码的两条语句都报错 怎么处理?

    3年前 (2016-02-22)
    回复
    回复咀嚼忧伤
  • kuiliu

    太好了,正需要!

    3年前 (2016-01-17)
    回复
    回复kuiliu
  • qazwsx

    知言大哥!你真的太细心了!给你点个赞!

    3年前 (2016-01-14)
    回复
    回复qazwsx
  • luoluo

    弹窗代码加进去就报错了,到底应该加到哪啊?

    3年前 (2016-01-14)
    回复
    回复luoluo
  • qazwsx

    主题堪称完美,33个赞

    3年前 (2016-01-12)
    回复
    回复qazwsx
  • qazwsx

    学习了 :smile:

    3年前 (2016-01-05)
    回复
    回复qazwsx
  • yutaok

    主题堪称完美,32个赞

    3年前 (2015-12-03)
    回复
    回复yutaok
  • qhy

    牛逼

    3年前 (2015-11-01)
    回复
    回复qhy
  • wuliur

    学习

    3年前 (2015-10-25)
    回复
    回复wuliur
  • 喜欢

    能更新个邀请码注册吗?

    3年前 (2015-10-23)
    回复
    回复喜欢
  • z_devil

    学习

    3年前 (2015-10-12)
    回复
    回复z_devil
  • 小蜀黍

    好好学习

    3年前 (2015-09-14)
    回复
    回复小蜀黍
  • 桃夭

    已经完美整合到模板兔的erphpdown会员插件里面,实现了手机端与pc端用不同的登录注册方式,效果还是可以的。不过我是用的别人整合的插件修改的。用插件比你这个省事太多了。小白多数不知道怎么弄。

    3年前 (2015-08-30)
    回复
    回复桃夭
  • unrealwind

    非常好,哇哈哈!

    3年前 (2015-08-29)
    回复
    回复unrealwind
  • Tiger

    学习

    3年前 (2015-07-27)
    回复
    回复Tiger
  • Tiger

    这么详细的说明啊

    3年前 (2015-06-23)
    回复
    回复Tiger
  • adsss

    请教下具体怎么操作?修改哪些文件?

    3年前 (2015-06-17)
    回复
    回复adsss
  • porry1

    不错啊

    3年前 (2015-06-16)
    回复
    回复porry1
  • 萌娘TV

    }else{
    $result['message'] = ( $login->errors ) ? strip_tags( $login->get_error_message() ) : 'ERROR: ' . esc_html__( '请输入正确用户名和密码以登录', 'tinection' );
    }
    }else{
    $result['message'] = __('安全认证失败,请重试!','tinection');
    }

    那么请问这个安全认证失败 好像永远都不会出现吧,因为没有判断什么情况下安全认证失败

    3年前 (2015-06-14)
    回复
    回复萌娘TV