Corenext 主题接入彩虹聚合登录(三种方案)

第一章 获取聚合登录接口

注册登录聚合登录平台

请自行注册一个彩虹聚合登录平台,

获取接口

1.创建应用

进入用户中心,选择创建应用,填写表单并确认提交

2.获取APPID和Key

(1)点击应用列表,再点击应用详情

(2)复制并保存APPID和Key

第二章 WordPress部署部分

安装彩虹聚合登录插件

配置插件

安装插件后转到插件设置,依次填入从聚合登录平台获取到的接口,APPID和Key,按需开启登录方式并且保存。

配置用户登录界面

插件会自动为 https://你的域名.com/wp-login.php/ 添加第三方登录按钮(如下图),但是一般主题都有自己的登录界面,因此需要配置第三方登录入口。

解决方案1(推荐):使用sidebar-login(侧边栏登录)

效果展示(登录前):

效果展示(登录后):

教程:

(1.)安装sidebar-login(侧边栏登录)插件:

下载插件(原版是英语,我自己汉化了一个方便使用,您可以选择下载):

官方版(英语):https://cn.wordpress.org/plugins/sidebar-login/

thinks365汉化版:https://www.thinks365.com/sl_zh_cn.html

(2.)添加,配置小工具。

到主题 - 小工具,将“SidebarLogin添加到相应位置”,配置后保存

配置完成:

解决方案2:顶部菜单添加自定义链接

在顶部菜单加入 https://你的域名.com/wp-login.php/ 的链接,链接到登录界面。

解决方案3:侧边栏嵌入自定义HTML代码

WP设置 - 外观 - 小工具 - 自定义HTML代码 输入下方代码并按照自己的网站的实际链接修改。第三方登录帮助文档可参考:这篇文档 ,也可以直接引用。

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  background-color: #409EFF;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}
 
.button:hover {background-color: #3390FF;}
</style>
</head>
<body>
 
<a href="https://你的域名.com/wp-login.php" class="button">使用第三方登录/注册</a>
 	
</body>
<body>
 
<a href="https://第三方登录帮助文档链接.html" class="button">?</a>
 	
</body>
</html>

效果图:

 

配置用户中心

配置

CoreNext自带的用户中心没有兼容聚合登录,但其所提供的自定义用户菜单可以很好地弥补这一点。

点击主题设置 - 用户中心 - 自定义用户菜单 - 添加菜单 填入 https://你的域名.com/wp-admin/profile.php (WP经典用户档案)

点击保存即可

效果图(订阅者视角)

经典版用户中心的效果图可参考 这篇文章 的Q4部分

THE END