一、水滴官网创建应用

应用名称:正确填写您的网站名称
应用首页网址:填写您已建设好并且可以访问的网址
回调域名白名单:填写您需要应用的域名

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(1)

二、下载 wordpress 插件并安装

进入开发文档 > 对接插件下载 > 下载wordpress专用插件

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(2)

进入wordpress后台安装刚刚所下载的插件,安装后在插件列表启用 Clogin Passport 插件

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(3)

三、填写插件所需参数

打开彩虹聚合登录插件,填写第一步创建完成后的应用数据

接口地址:https://uniqueker.top/
APPID:1036
APPKEY:1197722dc4d4c3ada56c71a7a555e8cd
开启的登录方式:(根据需求选择开启)
头像优先级:9999(默认)
自动注册:建议启用(意思是如果没有绑定社交账户,则自动注册新的账户)

注:如果启用自动注册则在 设置 > 常规 > 成员资格 启用任何人都可以注册,并保存更改

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(4)

四、为登录页面添加登录按钮

在插件 > 开发文档; 找到如何输出第三方登录列表?

<?php do_action(‘clogin-passport’); ?>
<?php
ob_start();
do_action(‘clogin-passport’);
$codes = ob_get_contents();
ob_end_clean();
?>

复制代码,进入 \template-parts\home\modal-login.php
粘贴到下面欢迎来到下面即可(当然你也可以根据自己需求放置其它地方),如下图:

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(5)

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(6)

五、为用户个人资料添加自定义绑定按钮

在插件 > 开发文档; 找到如何调用绑定社交账号的按钮?

<?php
if (!function_exists(‘get_user_to_edit’)) include(ABSPATH . ‘/wp-admin/includes/user.php’);
do_action( ‘binding_social_media_account’, get_user_to_edit(get_current_user_id()) );
?>

复制代码,进入 \user\action.php
粘贴到下面邮箱下面即可(当然你也可以根据自己需求放置其它地方),如下图:

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(7)

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(8)

六、美化登录页面和绑定按钮页面

进入 plugins\clogin-passport\clogin-passport.php

1.美化登录页面按钮

(删除第三方登录,根据个人喜好修改;反正小水滴是比较喜欢干净纯洁的)

删除第三方登录代码
<p class="third-party-login-label"><label><?php _e('Third-Party Login', $this->text_domain); ?></label></p>
添加一个空行,不和上面靠的太近
<br>

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(9)

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(10)

2.美化个人中心绑定按钮

<h3><?php _e( 'Social Media Accounts', $this->text_domain ); ?></h3>
更改为
<div class="user-data-title b-b"> <span class="ceo-display-inline-block"><?php _e( 'Social Media Accounts', $this->text_domain ); ?></span> </div>

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(11)

<th><label><?php _e($this->modules_name[$type], $this->text_domain); ?></label></th>
更改为
button button-primary btn change-color ceo-display-block ceo-position-relative

下图为小水滴最终修改后的样式(如果您有更漂亮的设置,也可以反馈给我们展示效果)

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(12)

CeoMax总裁主题-如何对接QQ(CeoMax总裁主题-如何对接QQ)(13)

,