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

avatar
avatar
80后男人
140
文章
9
评论
2018年6月5日21:22:35 1 4,854

功能前台化已成为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
  • 本文由 发表于 2018年6月5日21:22:35
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
更新到WordPress 4.9.8 wordpress

更新到WordPress 4.9.8

WordPress 4.9.8如期发布,常规的修正各种BUG和安全漏洞,建议立即升级。 升级成功后,在仪表盘页面会显示一个“A new, modern publishing experience is...
wordpress更新至4.97 wordpress

wordpress更新至4.97

最近WordPress安全漏洞:从任意文件删除到任意代码执行这个安全问题闹得沸沸扬扬的,WordPress官方终于坐不住了,提前发布了 4.9.7 来修复这个问题,本站已更新至最新版本,也希望大家尽快...
匿名

发表评论

匿名网友 填写信息

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

评论:1   其中:访客  1   博主  0
    • avatar 头条新闻 0

      文章不错非常喜欢