WPCOM Themer用户中心设置 详细讲解

WPCOM用户中心为Themer框架 1.7版本新增的功能,如需使用请留意主题更新记录是否支持。

用户中心功能为WPCOM团队自主研发的功能模块,不需要依赖任何第三方插件即可实现网站前端用户注册、用户登录、找回密码、帐号设置、个人中心、社交登录(微信、QQ、微博)、用户列表、用户分组、用户权限、注册审核、邮件激活、前端头像上传裁剪、用户封面图片上传、WooCommerce兼容、表单滑动验证、AJAX交互等强大功能。

功能优势

在此之前,用户中心模块一直是基于第三方插件实现,相比起来Themer框架自带的用户中心模块具有更多的优势:
更小巧更轻量,性能显著提升;
全面优化整合数据库字段,极大减轻数据库查询压力;
全新的注册、登录表单,采用ajax提交,更好的用户体验;
全新的图片上传接口,并整合wordpress底层API接口,可兼容云储存插件实现用户头像、封面图片的云端存储;
更好的扩展性,菜单选项、表单选项、验证方式等都可通过接口注册增加,方便二次开发和插件接入;
接入阿里云滑动验证功能,可防止机器人恶意注册;
全新优化的找回密码交互流程;
极大减少了设置选项,仅需简单设置即可完成功能部署;
基于主题自身需求开发,可更好的和主题进行整合;

设置教程

1.功能开启
进入主题设置>用户中心,打开开启用户中心选项,保存主题设置。
如果允许用户注册,需要检查WordPress后台设置>常规里面的成员资格是否开启允许注册,否则注册页面会提示未开放注册。

2.常用页面配置
配置用户中心功能常用的页面,目前需要用到的页面和对应的shortcode(短代码/简码/短码)为:
注册,对应的shortcode:

注册

已经有帐号? 马上登录
发送验证码
返回首页
登录,对应的shortcode:返回首页
帐号设置/我的资料,对应的shortcode:;
重置密码/找回密码,对应的shortcode:
  • 1

    填写帐号

  • 2

    身份验证

  • 3

    设置密码

  • 4

    完成


个人中心/用户信息(企业主题无此功能),对应的shortcode:(如果配置好后页面出现404错误的话,可进入设置>固定链接直接点击保存更改按钮即可);
常用页面的别名(如果设置了固定链接的话别名会显示在链接地址里面)建议不要有中文,否则在有二级页面的情况下可能会出现404错误。

添加方法:
进入后台页面,点击新建页面(如果是已经导入演示数据的用户可以先看下页面列表里面是否已经导入了对应的页面,有的话则可以直接点击编辑页面检查shortcode是否正确即可)。
温馨提示:添加的shortcode代码中的引号需要是英文输入状态下的引号(半角字符)。

旧版编辑器添加方法:

WPCOM Themer用户中心设置 详细讲解

添加shortcode的时候建议将编辑器切换到文本模式下,如上图所示。

新版区块编辑器添加方法:
使用自定义HTML区块添加,找不到可以搜索,如图:

WPCOM Themer用户中心设置 详细讲解

然后输入shortcode代码,如图:

WPCOM Themer用户中心设置 详细讲解

按此方式依次添加用户中心功能常用的页面。
页面模板:推荐将注册、登录、找回密码、帐号设置页面的页面模板(页面属性-模板)设置为全宽模板(无边栏)或者全宽模板-无标题,具体每个主题不一样,可以视情况选择。

将页面配置到用户中心:
添加好页面后,可前往主题设置>用户中心>页面设置,依次设置好上面添加的页面,然后保存主题设置。

WPCOM Themer用户中心设置 详细讲解

3. 用户分组(企业主题无此功能)

新建和编辑用户分组
启用用户中心功能后可在后台用户>用户分组下新建和编辑用户分组,目前可对用户分组设置分组内用户的系统角色、后台访问权限、前端工具条等。

默认用户分组设置
默认用户分组可在主题设置>用户中心页面设置默认分组。建议设置默认分组,可用于新注册用户权限分配。

修改用户的分组
批量修改:进入用户>所有用户,勾选需要批量修改的用户,然后通过批量修改工具修改,如图:

WPCOM Themer用户中心设置 详细讲解

单独修改:如需单独修改某个用户的分组,可以进入用户>所有用户,编辑某个用户的资料,进入用户的资料编辑页面,找到用户分组选项,选择要修改的用户分组,如图:

WPCOM Themer用户中心设置 详细讲解

4. 手机注册

功能开启
进入主题设置>用户中心>手机注册,打开开启手机注册选项,保存主题设置。

短信接口设置
短信发送需调用腾讯云短信接口,由于腾讯云提供的PHP SDK需要PHP 5.3以上版本才可运行,如需使用此功能请确保PHP版本是否支持,如PHP是5.2的版本请先升级PHP版本后再开启此功能。
主题支持手机注册,其中会涉及到短信验证码的发送,经过对比国内主流大厂的短信服务,最终选择了腾讯云的短信服务,主要原因如下:
申请更简单,支持个人站长申请,短信签名个人申请无需营业执照,企业也不需要授权书(阿里云就需要的);
开发集成的SDK尺寸更小,即代码量少,如果SDK太大了会增加主题安装包大小的;
腾讯云大厂,可信赖。

短信接口设置
腾讯云短信服务申请地址:https://cloud.tencent.com/product/sms
申请免费开通短信服务后进入后台管理页面,点击添加应用,创建好应用后进入这个应用,可以看到AppID和App Key,将这两个填入网站后台主题设置>用户中心>腾讯云短信接口里面对应选项,如图:

WPCOM Themer用户中心设置 详细讲解

然后回到腾讯云之前的界面,进入国内短信>短信内容配置,分别申请短信签名和短信正文(短信正文有两个参数,分别是{1}:验证码,{2}:验证码有效分钟数,例如演示站使用的短信正文模板为:您的验证码为:{1},该验证码{2}分钟内有效,请勿泄漏于他人!),然后等待审核,如图:

WPCOM Themer用户中心设置 详细讲解

如果审核通过后,复制短信签名的内容(注意,是签名内容,不是ID)到网站主题设置>用户中心>腾讯云短信接口>短信签名选项,同理,设置好短信模板ID(不过这里就是短信正文的ID,不是内容,请看清填写)。

5. 社交登录

功能开启
进入主题设置>用户中心>社交登录,打开开启社交登录选项,保存主题设置。

设置社交绑定页面
社交绑定页面是一个单独的页面,不能直接使用注册或者登录页面。

新建页面:进入后台页面,选择新建页面,页面标题可以为第三方帐号登录(也可以自己定),内容里面添加[wpcom-social-login],建议切换到文本模式下添加,如图:

WPCOM Themer用户中心设置 详细讲解

设置页面:主题设置>用户中心>社交登录选项下的社交绑定页面,选择刚新建的页面,保存主题设置。
这个页面是用于登录后的帐号绑定操作,并不能直接访问,直接访问会出现第三方帐号返回参数错误的提示,这是正常的。

接口申请和设置
社交登录功能必须要有接口权限才能使用,您可以进入主题设置>用户中心,找到每个第三方登录的接口设置选项,我们在每个接口下方说明文字都附带了申请地址,直接进入第三方网站申请即可即可。如果已经申请好了接口权限,则直接填写API接口信息即可。

接口设置常见问题
QQ登录:QQ登录会要求准确填写回调地址,直接填写上面设置的社交绑定页面地址即可。
微博登录:微博接口无需设置回调地址,只需要设置安全域名即可。

微信登录:微信登录需要企业认证服务号才可使用,个人号、订阅号无法使用。
微信登录区分开放平台和公众号平台,两者是不一样的,开放平台是面向PC电脑端网站,公众号平台是面向移动端微信内置访问登录,如果您只设置了一个平台的接口,则微信登录按钮仅在对应端显示,例如只设置了公众号平台的接口,则只能手机访问看到,电脑访问是看不到的,如需PC端和手机端都显示,则需要同时申请设置两个接口,并且为了两个平台帐号的互通与同步,建议您在开放平台后台绑定您的公众号,实现两平台数据统一(也就是通过电脑登录过得用户可以直接在手机上登录,如果没有绑定的话会被认定为新用户)。
目前主题已对微信登录需申请两个平台接口的问题进行优化:可仅申请设置公众平台接口,主题可通过服务端代理中转实现PC电脑端登录。
开放平台:微信开放平台需要设置授权回调域,需要注意的这个只需要填写域名,不需要具体地址以及http://这些前缀。
公众平台:微信公众平台需要设置网页授权域名,在公众号设置>功能设置里面,也是不需要具体地址以及http://这些前缀。

6. 其他设置

表单安全验证
主题对注册、登录、找回密码等表单提交有安全验证功能,可防止恶意撞库攻击、机器人批量注册。目前主题集成了阿里云人机验证和腾讯防水墙两种安全验证方式可供选择配置,选择方式:主题设置>用户中心>安全验证方式。

阿里云人机验证
滑动验证功能需调用阿里云接口,由于阿里云提供的PHP SDK需要PHP 5.3以上版本才可运行,如需使用此功能请确保PHP版本是否支持,如PHP是5.2的版本请先升级PHP版本后再开启此功能。
滑动验证功能基于阿里云云盾数据风控人机验证接口,使用前需要进行接口申请。申请方式如下: 进入阿里云后台产品与服务>安全(云盾)>数据风控(业务安全)>人机验证,如果找不到可以直接搜索,如图:

WPCOM Themer用户中心设置 详细讲解

进入后点击新增配置进入接口配置页面。页面中的应用类型选择网页,验证方式选择滑动验证,其他选项可根据您的实际情况选择即可。后面直接下一步或者提交即可,按此方式重复新建使用场景为注册和登录的两个配置,另外考虑到兼容手机端需要再建两个应用类型为移动端WAP/HTML5的配置。
新建好配置后回到人机验证列表,可以看到新建的配置,复制其中的appkey(多个配置的appkey是相同的),然后进入网站后台主题设置>用户中心>阿里云人机验证,将复制的appkey填入App Key。
主题设置>用户中心>阿里云人机验证选项下还有另外两个选项:Access Key ID和Access Key Secret,他们的获取方法:进入阿里云后台,将鼠标移到右上角头像上,再点击accesskeys进入即可获取。

腾讯防水墙
腾讯防水墙申请地址可以点击此处,注册登录后按提示新建验证,建好后进入导航快速接入页面,获取App ID和App Secret Key,如图:

WPCOM Themer用户中心设置 详细讲解

然后将获取到的App ID和App Secret Key填入网站后台主题设置>用户中心>腾讯防水墙选项。

用户列表
用户中心内置用户列表功能,可通过shortcode调用
添加方法:用户列表是通过shortcode调用的,shortcode为:

,直接在页面添加即可。
用户列表shortcode可支持更多参数的设置:
指定用户分组:group=”分组ID”,分组ID可进入用户>用户分组,然后编辑对应分组,可以在浏览器地址栏获取到ID,也就是tag_ID=后面的数字;
指定用户ID:users=”用户ID,多个ID英文逗号分隔”,用户ID可进入用户>所有用户,然后编辑对应用户,可以在浏览器地址栏获取到ID,也就是user_id=后面的数字;
每页显示10个:per_page=”10″;
排序依据:orderby=”registered”,registered为注册时间,也可以换成ID、name、email、login、post_count等;
排序顺序:order=”DESC”,order可以为ASC(顺序:1,2,3)或者DESC(倒序:3,2,1)
每行显示个数:cols=”2″,默认是2个,可以支持设置2、3、4个
例如获取分组ID为1的用户,根据用户ID倒序排序,则可以使用:

邮件功能
用户中心在用户注册、找回密码等场景会有邮件发送的需求,而邮件功能需要服务器的支持,不过目前很多服务器都被禁用了邮件发送端口(25端口),例如阿里云、腾讯云,比较推荐的方法是使用SMTP,可以参考:https://www.xxside.com/738.html

原创文章,作者:Tony,如若转载,请注明出处:https://www.xxside.com/723.html

发表评论

登录后才能评论