PIX主题03:片刻和评论头像加黄V

为网站用户添加认证标识,提升社区可信度和专业性

步骤1:了解黄V认证机制

黄V认证是一种常见的用户身份标识系统,通常用于标识认证用户、VIP用户或特殊权限用户。实现原理是在用户头像角落添加一个黄色的V形图标。

💡 认证系统作用

认证标识可以增强社区的可信度,帮助用户识别权威用户,提升整体讨论质量和社区氛围。

步骤2:准备黄V图标素材

首先需要准备一个黄V图标,可以使用SVG格式确保清晰度:

<!-- 黄V认证图标SVG -->
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="10" fill="#FFD700"/>
  <path d="M6 10L9 13L14 7" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

或者使用CSS创建简单的V形图标:

/* CSS创建认证图标 */
.verification-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: #FFD700;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verification-badge::after {
  content: '✓';
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

步骤3:添加CSS样式规则

在主题的CSS文件中添加头像和认证图标的样式:

/* 用户头像容器 */
.user-avatar-container {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
}

/* 用户头像 */
.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

/* 认证标识 */
.verification-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.verification-badge::after {
  content: '✓';
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
}

/* 片刻头像样式 */
.moment-avatar {
  width: 40px;
  height: 40px;
}

.moment-avatar .verification-badge {
  width: 16px;
  height: 16px;
}

.moment-avatar .verification-badge::after {
  font-size: 10px;
}

步骤4:修改PHP模板文件

在显示用户头像的模板文件中添加认证标识的判断逻辑:

<!-- 用户头像模板 -->
<div class="user-avatar-container">
  <img src="<?php echo get_avatar_url($user_id, array('size' => 96)); ?>" 
       alt="<?php echo $user_name; ?>" 
       class="user-avatar">
  
  <?php if (is_verified_user($user_id)) : ?>
    <div class="verification-badge" title="认证用户"></div>
  <?php endif; ?>
</div>

在functions.php中添加认证用户判断函数:

<?php
// 判断用户是否为认证用户
function is_verified_user($user_id) {
    // 获取认证用户列表
    $verified_users = get_option('verified_users', array());
    
    // 检查当前用户是否在认证列表中
    return in_array($user_id, $verified_users);
}

// 获取用户的认证状态
function get_user_verification_status($user_id) {
    if (is_verified_user($user_id)) {
        return '<span class="verification-badge" title="认证用户"></span>';
    }
    return '';
}

// 在评论中显示认证标识
function add_verification_to_comment($comment_text, $comment) {
    $user_id = $comment->user_id;
    if ($user_id && is_verified_user($user_id)) {
        $verification_html = '<span class="verification-badge comment-verification" title="认证用户"></span>';
        $comment_text = $verification_html . ' ' . $comment_text;
    }
    return $comment_text;
}
add_filter('comment_text', 'add_verification_to_comment', 10, 2);
?>

步骤5:设置认证用户列表

在WordPress后台添加认证用户管理功能:

<?php
// 添加认证用户设置页面
function verification_settings_page() {
    add_options_page(
        '认证用户设置',
        '认证用户',
        'manage_options',
        'verification-settings',
        'verification_settings_html'
    );
}
add_action('admin_menu', 'verification_settings_page');

function verification_settings_html() {
    if (!current_user_can('manage_options')) {
        return;
    }
    
    // 保存设置
    if (isset($_POST['verified_users'])) {
        $verified_users = array_map('intval', $_POST['verified_users']);
        update_option('verified_users', $verified_users);
        echo '<div class="updated"><p>设置已保存</p></div>';
    }
    
    $verified_users = get_option('verified_users', array());
    ?>
    
    <div class="wrap">
        <h1>认证用户设置</h1>
        <form method="post">
            <h2>选择认证用户</h2>
            <?php
            $users = get_users();
            foreach ($users as $user) {
                $checked = in_array($user->ID, $verified_users) ? 'checked' : '';
                echo '<label>';
                echo '<input type="checkbox" name="verified_users[]" value="' . $user->ID . '" ' . $checked . '>';
                echo esc_html($user->display_name) . ' (' . $user->user_email . ')';
                echo '</label><br>';
            }
            ?>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
?>

✅ 完成效果

成功添加黄V认证后,认证用户的头像将显示黄色认证标识,提升网站的专业性和可信度。

扩展功能建议

  • 添加不同级别的认证标识(金V、蓝V等)
  • 实现认证用户专属功能或权限
  • 添加认证申请和管理流程
  • 显示认证用户的认证信息详情