代码实现WordPress评论框输入QQ号码自动获取QQ头像和昵称

2018-01-30 · Ryan · 发表评论

实现原理

该功能允许访客在 WordPress 评论框中输入 QQ 号码，系统将自动获取对应的 QQ 昵称和头像，并填充到评论表单的相应字段中。其核心流程如下：

在评论表单前端添加 QQ 号码输入字段。
当访客输入 QQ 号并离开输入框（失去焦点）时，通过 AJAX 请求后端服务。
后端调用腾讯的 API 获取该 QQ 号的昵称和头像 URL。
前端接收数据，自动填充昵称和头像字段，并将信息存入 Cookie，以便页面刷新后仍能显示。
将 QQ 号作为评论元数据保存，并在前台评论列表和后台管理中显示 QQ 头像。

实施步骤

第一步：添加 QQ 字段到评论表单与数据库

首先，需要在主题的评论表单模板文件（通常是 comments.php 或 comment-form.php）中添加一个用于输入 QQ 号的字段。

<p class="comment-form-qq">
    <label for="qq">QQ 号码</label>
    <input id="qq" name="new_field_qq" type="text" size="30" placeholder="选填" />
</p>

注意：name="new_field_qq" 属性值需与后续代码中的字段名保持一致。

接着，将以下代码添加到主题的 functions.php 文件中，用于将前端提交的 QQ 号保存到数据库的评论元数据中，并在后台评论管理界面显示该字段。

// 将 QQ 号保存为评论元数据
add_action('wp_insert_comment', 'save_comment_qq_field', 10, 2);
function save_comment_qq_field($comment_id, $commentdata) {
    if (isset($_POST['new_field_qq'])) {
        $qq = sanitize_text_field($_POST['new_field_qq']);
        update_comment_meta($comment_id, 'new_field_qq', $qq);
    }
}

// 在后台评论列表添加 QQ 号列
add_filter('manage_edit-comments_columns', 'add_qq_column_to_comments');
function add_qq_column_to_comments($columns) {
    $columns['new_field_qq'] = __('QQ 号');
    return $columns;
}

// 在后台评论列表中输出 QQ 号
add_action('manage_comments_custom_column', 'display_qq_in_comments_column', 10, 2);
function display_qq_in_comments_column($column, $comment_id) {
    if ($column === 'new_field_qq') {
        echo get_comment_meta($comment_id, 'new_field_qq', true);
    }
}

第二步：前端 AJAX 交互与后端 API 处理

此步骤包含前端 JavaScript 和后端 PHP 两部分，用于实时获取 QQ 昵称和头像。

前端 JavaScript 代码

将以下代码添加到主题的 JavaScript 文件中（确保已加载 jQuery）。代码功能包括：监听 QQ 输入框的失焦事件、发送 AJAX 请求、处理返回数据并操作 Cookie。

jQuery(document).ready(function($) {
    // 页面加载时，尝试从 Cookie 读取上次的 QQ 和头像
    if (getCookie('user_avatar') && getCookie('user_qq')) {
        $('.comment-avatar-preview img').attr('src', getCookie('user_avatar'));
        $('#qq').val(getCookie('user_qq'));
    }

    // 当 QQ 输入框失去焦点时触发
    $('#qq').on('blur', function() {
        var qqNumber = $(this).val().trim();
        if (!qqNumber || !/^[1-9][0-9]{4,11}$/.test(qqNumber)) {
            alert('请输入有效的 QQ 号码（5-12位数字）');
            return;
        }

        // 可选：自动填充邮箱字段
        $('#email').val(qqNumber + '@qq.com');

        // 获取昵称
        $.ajax({
            type: 'GET',
            url: '/wp-content/themes/your-theme/func_getqqinfo.php?type=getqqnickname&qq=' + qqNumber,
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'nicknameCallback',
            success: function(data) {
                if (data && data[qqNumber]) {
                    $('#author').val(data[qqNumber][6]); // 假设返回数据格式符合预期
                    setCookie('user_qq', qqNumber);
                }
            },
            error: function() {
                console.log('获取昵称失败');
            }
        });

        // 获取头像
        $.ajax({
            type: 'GET',
            url: '/wp-content/themes/your-theme/func_getqqinfo.php?type=getqqavatar&qq=' + qqNumber,
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'avatarCallback',
            success: function(data) {
                if (data && data[qqNumber]) {
                    $('.comment-avatar-preview img').attr('src', data[qqNumber]);
                    setCookie('user_avatar', data[qqNumber]);
                }
            },
            error: function() {
                console.log('获取头像失败');
            }
        });
    });
});

// 简单的 Cookie 操作函数
function setCookie(name, value, days = 30) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + d.toUTCString() + ";path=/";
}

function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
}

重要提示：请将代码中的选择器（如 #qq, #author, .comment-avatar-preview img）和文件路径（/wp-content/themes/your-theme/func_getqqinfo.php）替换为您主题中实际使用的 ID、类名和路径。

后端 PHP 处理文件

在您的主题目录下创建一个名为 func_getqqinfo.php 的文件，并添加以下代码。该文件负责调用腾讯的 API 并返回 JSONP 格式的数据。

<?php
/**
 * 获取 QQ 昵称和头像的接口文件
 * 注意：腾讯 API 的可用性可能发生变化，请自行测试。
 */

header('Content-Type: application/javascript; charset=utf-8');

$type = isset($_GET['type']) ? $_GET['type'] : '';
$qq = isset($_GET['qq']) ? trim($_GET['qq']) : '';
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'callback';

// 验证 QQ 号格式
if (!preg_match('/^[1-9][0-9]{4,11}$/', $qq)) {
    echo $callback . '(' . json_encode(array('error' => 'Invalid QQ number')) . ')';
    exit;
}

if ($type == 'getqqnickname') {
    // 获取昵称的 API（此 API 可能已失效，需寻找替代方案）
    $api_url = "http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=" . $qq;
    $response = @file_get_contents($api_url);
    if ($response !== false) {
        $response = mb_convert_encoding($response, "UTF-8", "GBK");
        // 处理返回数据，这里假设返回格式为 portraitCallBack({...})
        echo $callback . '(' . $response . ')';
    } else {
        echo $callback . '(' . json_encode(array('error' => 'Failed to fetch nickname')) . ')';
    }
    exit;
}

if ($type == 'getqqavatar') {
    // 获取头像的 API（此 API 可能已失效，需寻找替代方案）
    $api_url = "http://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin=" . $qq;
    $response = @file_get_contents($api_url);
    if ($response !== false) {
        // 替换回调函数名以匹配前端期望
        $response = str_replace("pt.setHeader", $callback, $response);
        echo $response;
    } else {
        echo $callback . '(' . json_encode(array('error' => 'Failed to fetch avatar')) . ')';
    }
    exit;
}

// 默认返回错误
echo $callback . '(' . json_encode(array('error' => 'Invalid request type')) . ')';
?>

重要说明：文中使用的腾讯 API（users.qzone.qq.com 和 ptlogin2.qq.com）并非官方公开的稳定接口，其可用性和数据格式可能随时改变或失效。在实际生产环境中，建议：

寻找并测试当前可用的官方或稳定第三方 API。
考虑使用更可靠的第三方服务，或通过服务器端代理请求以规避跨域问题。
在代码中添加更完善的错误处理和日志记录。

第三步：在评论列表和后台显示 QQ 头像

默认情况下，WordPress 使用 Gravatar 显示评论头像。我们可以通过 get_avatar 过滤器，在评论者提供了 QQ 号时，优先显示其 QQ 头像。

将以下代码添加到主题的 functions.php 文件中：

/**
 * 替换评论头像为 QQ 头像（如果存在 QQ 号）
 */
add_filter('get_avatar', 'replace_comment_avatar_with_qq', 10, 3);
function replace_comment_avatar_with_qq($avatar, $id_or_email, $args) {
    // 仅处理评论相关的头像
    if (is_object($id_or_email) && isset($id_or_email->comment_ID)) {
        $comment_id = $id_or_email->comment_ID;
        $qq_number = get_comment_meta($comment_id, 'new_field_qq', true);

        if (!empty($qq_number) && is_numeric($qq_number)) {
            // 构建 QQ 头像 URL（使用已知的稳定格式，但请注意此 URL 可能变化）
            $qq_avatar_url = "https://q1.qlogo.cn/g?b=qq&nk=" . $qq_number . "&s=100";
            // 返回自定义的 img 标签
            $avatar = "<img src='" . esc_url($qq_avatar_url) . "' class='avatar avatar-" . $args['size'] . " photo' width='" . $args['size'] . "' height='" . $args['size'] . "' alt='QQ Avatar' />";
        }
    }
    return $avatar;
}

此方法使用了相对稳定的 QQ 头像 URL 格式（https://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=尺寸），比直接调用可能失效的 API 更可靠。您可以根据需要调整尺寸参数。

注意事项与优化建议

API 稳定性：本文示例中使用的腾讯 API 接口并非官方公开服务，存在失效风险。实施前请务必测试当前接口的可用性，并准备备用方案。
安全性：所有用户输入（如 QQ 号）都必须进行验证和清理（如使用 sanitize_text_field），以防止安全漏洞。
性能：频繁的 AJAX 请求和外部 API 调用可能影响页面加载速度。可以考虑添加防抖（debounce）机制，并缓存已获取的头像 URL。
用户体验：示例中使用了 alert 进行提示，在实际项目中建议替换为更友好的非阻塞式 UI 提示。
Cookie 使用：存储用户信息时，请注意隐私政策的相关要求。

通过以上步骤，您可以在 WordPress 站点中实现评论框自动获取 QQ 头像和昵称的功能。请根据您的具体主题结构和需求调整代码中的选择器、路径和逻辑。

弄
2018-12-17

哦

回复
哈哈
2018-12-17

哦

回复
测试
2019-02-25

测试

回复
小桃
2021-01-06

适用

回复