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

2018年6月5日21:22:35 1 387

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

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

  简要说明

此功能的实现是由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函数动态产生的。

文件下载 jQuery表单验证修改版
下载地址
avatar

发表留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前留言:1   其中:访客  1   博主  0

    • avatar 头条新闻 来自天朝的朋友 谷歌浏览器 Windows 7 广西贺州市 联通 0

      文章不错非常喜欢