登录 免费开始
登录 免费开始
博客 / WordPress/ WordPress评论框输入QQ一键获取头像和昵称

WordPress评论框输入QQ一键获取头像和昵称

2020-05-08 · Ryan · 发表评论
WordPress评论框输入QQ一键获取头像和昵称

许多 WordPress 博客的评论框支持输入 QQ 号后自动获取昵称和头像，这个功能非常实用。网上相关的教程很多，但部分内容可能已过时或存在错误。本文将提供一个经过整理和修正的实现方案，效果如下图所示：

QQ头像昵称获取效果演示

实现原理与步骤概述

该功能主要分为三个部分：在评论表单中新增 QQ 字段并存储到数据库；通过前端 JavaScript 调用后端接口实时获取 QQ 昵称和头像；最后在评论列表和后台显示 QQ 头像而非 Gravatar 默认头像。

请注意：本文提供的部分 API 接口可能已失效，且涉及前端直接调用外部接口，存在安全与稳定性风险。建议仅作为学习参考，生产环境使用需谨慎评估。

步骤一：在评论表单中添加并存储QQ字段

首先，需要在主题的评论表单模板文件（通常是 comments.php）中，参照已有的昵称、邮箱等字段，添加一个 QQ 号的输入框。

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

关键点：name 属性值设为 new_field_qq，后续代码将依赖此名称。

接着，需要将用户提交的 QQ 号保存到数据库的评论元数据中。将以下代码添加到主题的 functions.php 文件中：

// 将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;
}

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);
    }
}

步骤二：实时获取QQ昵称与头像（前端交互）

当用户在 QQ 输入框填写号码并离开（blur事件）时，通过 AJAX 请求后端接口获取信息并填充到昵称、邮箱和头像区域，同时使用 Cookie 记录，以便页面刷新后保持显示。

重要提醒：以下代码依赖的第三方 API (qzone.qq.com, ptlogin2.qq.com) 可能已变更或限制外部调用，且代码中存在硬编码的本地路径 (127.0.0.1)，必须根据你的实际环境修改。弹出警告（alert）体验较差，建议改为更友好的提示方式。

前端 JavaScript 代码（需要 jQuery）：

jQuery(document).ready(function($) {
    // 页面加载时，尝试从Cookie读取并填充信息
    var savedQQ = getCookie('user_qq');
    var savedAvatar = getCookie('user_avatar');
    if (savedQQ && savedAvatar) {
        $('#comment-qq').val(savedQQ);
        $('.comment-avatar-preview img').attr('src', savedAvatar);
    }

    // QQ输入框失去焦点时触发
    $('#comment-qq').on('blur', function() {
        var qq = $(this).val().trim();
        if (!qq || !/^[1-9]d{4,11}$/.test(qq)) return; // 简单验证QQ号格式

        // 自动填充邮箱（假设邮箱字段id为‘comment-email’）
        $('#comment-email').val(qq + '@qq.com');

        // 获取昵称
        $.ajax({
            type: 'GET',
            url: '/wp-content/themes/your-theme/func_getqqinfo.php?type=getqqnickname&qq=' + qq, // 注意修改路径！
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'portraitCallBack',
            success: function(data) {
                if (data && data[qq]) {
                    $('#comment-author').val(data[qq][6]); // 假设昵称字段id为‘comment-author’
                    setCookie('user_qq', qq, 7); // 保存7天
                    console.log('QQ昵称获取成功');
                }
            },
            error: function() {
                console.error('QQ昵称获取失败');
            }
        });

        // 获取头像
        $.ajax({
            type: 'GET',
            url: '/wp-content/themes/your-theme/func_getqqinfo.php?type=getqqavatar&qq=' + qq, // 注意修改路径！
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'qqavatarCallBack',
            success: function(data) {
                if (data && data[qq]) {
                    var avatarUrl = data[qq];
                    $('.comment-avatar-preview img').attr('src', avatarUrl);
                    setCookie('user_avatar', avatarUrl, 7);
                    console.log('QQ头像获取成功');
                }
            },
            error: function() {
                console.error('QQ头像获取失败');
            }
        });
    });
});

// 简单的Cookie操作函数
function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

后端 PHP 处理接口 (func_getqqinfo.php)：

<?php
// 此文件应放在主题目录下，并确保Web服务器可访问
header("Content-Type: application/json; charset=UTF-8");

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

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

if ($type == 'getqqnickname') {
    // 注意：此API可能已失效或限制调用
    $apiUrl = 'http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=' . $qq;
    $response = @file_get_contents($apiUrl);
    if ($response !== false) {
        $response = mb_convert_encoding($response, 'UTF-8', 'GBK');
        // 返回JSONP格式
        $callback = isset($_GET['callback']) ? $_GET['callback'] : 'portraitCallBack';
        echo $callback . '(' . $response . ')';
    } else {
        echo json_encode(array('error' => 'Failed to fetch nickname'));
    }
} elseif ($type == 'getqqavatar') {
    // 注意：此API可能已失效或限制调用
    $apiUrl = 'http://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin=' . $qq;
    $response = @file_get_contents($apiUrl);
    if ($response !== false) {
        // 替换回调函数名
        $response = str_replace("pt.setHeader", "qqavatarCallBack", $response);
        echo $response;
    } else {
        echo json_encode(array('error' => 'Failed to fetch avatar'));
    }
} else {
    echo json_encode(array('error' => 'Invalid request type'));
}
?>

步骤三：在评论列表及后台显示QQ头像

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

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

// 替换评论列表中的头像为QQ头像
add_filter('get_avatar', 'replace_gravatar_with_qq_avatar', 10, 3);
function replace_gravatar_with_qq_avatar($avatar, $id_or_email, $args) {
    // 仅处理评论头像
    $comment = null;
    if (is_object($id_or_email) && isset($id_or_email->comment_ID)) {
        $comment = $id_or_email;
    } elseif (is_numeric($id_or_email)) {
        $comment = get_comment($id_or_email);
    }
    if ($comment) {
        $qq_number = get_comment_meta($comment->comment_ID, 'new_field_qq', true);
        if (!empty($qq_number)) {
            // 注意：此API可能已失效
            $apiResponse = @file_get_contents('http://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin=' . $qq_number);
            if ($apiResponse && preg_match('/http:(.*?)&t/', $apiResponse, $matches)) {
                $qq_avatar_url = 'http:' . stripslashes($matches[1]);
                $avatar = sprintf(
                    '<img src="%s" class="%s" width="%d" height="%d" alt="%s" />',
                    esc_url($qq_avatar_url),
                    esc_attr($args['class']),
                    $args['width'],
                    $args['height'],
                    esc_attr__('QQ Avatar')
                );
            }
        }
    }
    return $avatar;
}

注意事项与优化建议

  • API稳定性：本文使用的腾讯API并非公开稳定接口，随时可能失效或限制调用。这是本方案最大的风险点。
  • 安全性：应对所有用户输入进行严格的验证和过滤，防止XSS等攻击。示例中的 sanitize_text_field 和正则验证是基本措施。
  • 性能：每次获取头像都远程调用API会影响速度，建议考虑本地缓存机制。
  • 用户体验：可考虑将 alert 提示改为更优雅的非阻塞提示，并增加加载状态。
  • 替代方案：如果追求稳定，可以考虑使用其他稳定的第三方头像服务，或者引导用户使用Gravatar。

以上便是实现 WordPress 评论框通过 QQ 号获取头像和昵称的完整流程。请根据你的主题结构和实际需求调整选择器、路径和细节。由于外部依赖较强，部署前请充分测试。

发表评论

您的邮箱不会公开。必填项已用 * 标注。