拒绝自欺欺人！给博客文章加上 AI 创作等级标识 (附完整 PHP+CSS 代码）

年前在日常刷 RSS 订阅的时候，看到了碎言大佬的一篇文章《给你的文章添加 AI 创作等级标识》。点进去一看，文章标题下带了一个精致的小徽章，用来标明这篇文章 AI 参与创作的程度。（现在大佬有改版，已经是小徽章+一句话简述了）看到这个设计，我顿时感觉非常有意思，甚至有种“相见恨晚”的感觉。立马决定：给我的博客也安排上！ 在这个个人技术博客越来越趋同的今天，这种小巧思真的能让人眼前一亮。

其实这活年前就搞定了，估计有些常来的已经注意到，最近几篇文章的标题下多了一个小标签。不过过年事情太多，这篇文章也就拖到年后上班才完成发出来了。

为什么要加 AI 标识？都用 AI 了还敢标出来？

可能有人会问：“别人用AI写文，恨不得藏着掖着，生怕读者看出来是 AI 写的，你倒好还专门搞个标签高调宣布？”

其实我的想法很简单：自己没必要骗自己。

建立个人博客，初衷就是为了记录自己的真实折腾过程、生活感悟和技术积累。在这个 AI 生产力爆发的时代，用 AI 辅助润色代码、画个标题图、提取摘要甚至寻找灵感、完成代码和项目，早就成了常规操作。用了就是用了，既然是自己的地盘，何必搞“掩耳盗铃”那一套？坦诚地标出 AI 辅助的比例，不仅是对读者的尊重，也是对自我创作边界的一种警醒。真诚，永远是个人博客的必杀技嘛。

我的 AI 创作等级标识设计 (带自定义声明)

参考了前人的思路后，我结合自己博客的主题风格，同样设计了 4 个等级，并配上了 Emoji。同时，我还额外增加了一个“AI 工具声明框”，鼠标悬停在徽章上时就会直接显示出简要的AI辅助创作情况说明（比如用了什么模型，具体哪些部分是AI创作的）。

我的 4 个等级定义如下：

• 🧠 AI 0 – 独立个体：本文完全由人类的大脑完成。🔘 灰色底。
• 🪄 AI 1 – 灵感辅助：本文人类在写完后，AI 做了辅助润色修饰；或写作时使用 AI 查询/核实了资料。🔵 蓝色底。
• 🤝 AI 2 – 人机合作：本文人类和 AI 的贡献基本五五开，合作探讨完成。🟣 紫色底。
• 🤖 AI 3 – 硅基生成：本文绝大部分内容都由 AI 生成。🟠 橙色底。

WordPress 代码折腾实录：AI 创作等级标识的 PHP 后端 + CSS 前端实现

既然我是技术博客，那自然要说一下我是怎么实现的啦。我是利用 WordPress 的 Code Snippets 插件（或者你直接加在 functions.php 里也行），分四步来实现它的。

第一步：注册后台 AI 创作等级标识面板并保存数据

目的是在文章编辑页的侧边栏加一个选择AI创作等级的下拉菜单和一个输入AI辅助创作声明的文本输入框。

代码如下，Snippets 插件新建 PHP 代码段 或写在 functions.php 里。

// ==========================================
// 1. 注册后台面板 (Meta Box)
// ==========================================
add_action('add_meta_boxes', 'add_ai_meta_box');
function add_ai_meta_box() {
    add_meta_box(
        'ai_level_meta_box',      // ID
        '✨ AI 创作声明',         // 标题
        'render_ai_meta_box',     // 回调
        'post',                   // 适用文章
        'side',                   // 位置：侧边栏
        'high'                    // 优先级
    );
}

// 渲染面板 HTML
function render_ai_meta_box($post) {
    $level = get_post_meta($post->ID, '_ai_creation_level', true);
    $tools = get_post_meta($post->ID, '_ai_creation_tools', true);
    wp_nonce_field('ai_save_action', 'ai_nonce');
    ?>
    <p style="margin-bottom:10px;">
        <label style="font-weight:bold;">✒️ 创作等级：</label><br>
        <select name="ai_level_select" style="width:100%; margin-top:5px;">
            <option value="0" <?php selected($level, '0'); ?>>🧠 AI 0 - 独立个体</option>
            <option value="1" <?php selected($level, '1'); ?>>🪄 AI 1 - 灵感辅助</option>
            <option value="2" <?php selected($level, '2'); ?>>🤝 AI 2 - 人机合作</option>
            <option value="3" <?php selected($level, '3'); ?>>🤖 AI 3 - 硅基生成</option>
        </select>
    </p>
    <p>
        <label style="font-weight:bold;">🤝 AI辅助创作声明：</label><br>
        <input type="text" name="ai_tools_input" value="<?php echo esc_attr($tools); ?>" 
               placeholder="例如：DeepSeek, Copilot" style="width:100%; margin-top:5px;">
    </p>
    <?php
}

// ==========================================
// 2. 保存数据
// ==========================================
add_action('save_post', 'save_ai_data');
function save_ai_data($post_id) {
    if (!isset($_POST['ai_nonce']) || !wp_verify_nonce($_POST['ai_nonce'], 'ai_save_action')) return;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;

    if (isset($_POST['ai_level_select'])) {
        update_post_meta($post_id, '_ai_creation_level', sanitize_text_field($_POST['ai_level_select']));
    }
    if (isset($_POST['ai_tools_input'])) {
        update_post_meta($post_id, '_ai_creation_tools', sanitize_text_field($_POST['ai_tools_input']));
    }
}

第二步：把 AI 创作等级标识 给加到前端页面

在主题的 single.php 文件中（在文章日期、分类等元信息输出的位置代码后面），加上一句 <?php echo get_ai_badge(); ?>

以我自己用的主题为例是这样的

<div class="view-meta">
    <span>浏览: <?php the_views() ?></span>
    <span>作者: <?php the_author() ?></span>
    <span>分类: <?php the_category(',') ?></span>
    <span>发布时间: <?php the_time('Y-m-d H:i') ?></span>
    <span><?php edit_post_link('<i class="far fa-edit"></i> 编辑'); ?></span>
    <?php if (function_exists('get_ai_badge')) echo get_ai_badge(); ?>
</div>

第三步：AI 创作等级标识的前端输出逻辑 (气泡提示)

这里加了一个判断：如果填了具体的 AI辅助创作声明，气泡就优先显示声明；如果没填，就显示默认的等级描述。

代码如下，Snippets 插件新建 PHP 代码段 或写在 functions.php 里。

// ==========================================
// 前端获取徽章 HTML 的函数
// ==========================================
function get_ai_badge() {
    global $post;
    if (!$post) return '';

    $level = get_post_meta($post->ID, '_ai_creation_level', true);
    $tools = get_post_meta($post->ID, '_ai_creation_tools', true);
    if ($level === '') $level = '0'; // 默认纯人工

    $data = [
        '0' => ['icon' => '🧠', 'label' => '独立个体', 'desc' => '本文完全由人类的大脑完成', 'class' => 'ai-0'],
        '1' => ['icon' => '🪄', 'label' => '灵感辅助', 'desc' => '本文人类在写完后，AI 做了辅助润色修饰；本文写作时使用AI查询或核实了资料', 'class' => 'ai-1'],
        '2' => ['icon' => '🤝', 'label' => '人机合作', 'desc' => '本文人类和AI的贡献基本五五开，合作探讨完成', 'class' => 'ai-2'],
        '3' => ['icon' => '🤖', 'label' => '硅基生成', 'desc' => '本文绝大部分内容都由 AI 生成', 'class' => 'ai-3'],
    ];

    $current = $data[$level];
    $tooltip = $current['desc'];
    // 如果写了工具名称，且不是纯人工，气泡就显示工具声明
    if (!empty($tools) && $level != '0') {
        $tooltip = '🤝 AI辅助创作声明：' . $tools;
    }

    return sprintf(
        '<span class="ai-badge %s" data-tooltip="%s">%s %s</span>',
        esc_attr($current['class']),
        esc_attr($tooltip),
        $current['icon'],
        $current['label']
    );
}

第四步：AI 创作等级标识的前端 CSS 美化

为了配合网站的主题，让AI参考现有样式，搓了配套的 CSS，并利用 ::after 伪元素实现了 Tooltip 气泡弹窗效果。

这个看你主题情况了，我是用Snippets 插件的。
有些主题提供了写自定义样式的 GUI 。或者你写到主题默认的 style.css 文件里也行。

CSS 样式如下：

/* ===AI 徽章样式 === */
span.ai-badge {
    cursor: help;
    font-weight: 500;
    padding-left: 8px;
    padding-right: 8px;
    position: relative; /* 确保气泡定位准确 */
}

/* 等级颜色定义 (低饱和度高级感) */
span.ai-badge.ai-0 { background-color: #f5f5f7; color: #555; }
span.ai-badge.ai-1 { background-color: #f0f7ff; color: #4080c0; }
span.ai-badge.ai-2 { background-color: #f5f3ff; color: #7c3aed; }
span.ai-badge.ai-3 { background-color: #fff7ed; color: #c2410c; }

/* ===Tooltip 气泡 ==== */
.ai-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
    z-index: 999;
}
.ai-badge:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

意料之外的踩坑：修复 WordPress 上古主题的 HTML 渲染 Bug

这里还遇到了一个小插曲：因为我用的这个主题挺老的了，当时受限于当时 WordPress 的设计，主题在 single.php 里是这样写的：

<div class="view-meta">
    <span>浏览: <?php the_views() ?></span>
    <span>作者: <?php the_author() ?></span>
    <span>分类: <?php the_category(',') ?></span>
    <span>发布时间: <?php the_time('Y-m-d H:i') ?></span>
    <span><?php edit_post_link('<i class="far fa-edit"></i> 编辑'); ?></span>
    <?php if (function_exists('get_ai_badge')) echo get_ai_badge(); ?>
</div>

明眼人应该看出来了，这里的<span>都是是写死在 HTML 里的。当访客访问时，edit_post_link()函数检测到访客没有编辑权限，所以就返回了空，但编辑按钮外面的 <span> 和 </span> 依然还在。

对于原版主题这并不是问题，因为这些<span>在样式里就是个纯文字，访客看不出来什么。

但是问题是，AI 创作等级标识肯定是有个边框才好看，我为了统一样式，给整个.view-meta 都加了个灰色框，于是 CSS 把不存在的编辑按钮渲染成了一个没有内容、只有内边距（padding）的扁扁的色块，超级难看。

其实现在的WordPress 原生函数 edit_post_link() 支持 “前置参数” 和 “后置参数”。只有在访客有权限显示编辑按钮时，这两个参数才会被输出，如果访客没有权限，这两个参数也会被一起隐藏。
所以 single.php 这里应该改成

<div class="view-meta">
    <span>浏览: <?php the_views() ?></span>
    <span>作者: <?php the_author() ?></span>
    <span>分类: <?php the_category(',') ?></span>
    <span>发布时间: <?php the_time('Y-m-d H:i') ?></span>
    <?php edit_post_link('<i class="far fa-edit"></i> 编辑', '<span>', '</span>'); ?>
    <?php if (function_exists('get_ai_badge')) echo get_ai_badge(); ?>
</div>

结语

1. 这样以后大家看我的个人博客文章，只需瞥一眼徽章，就能知道这篇文章里有多少是我的脑力创作，有多少是 AI 工具的功劳了。
2. 春节这半个月假期，我看了很多人的博客，有些技术博客一眼就能看出文章是 AI 写的，那个行文风格一股子 AI 营销号的味道，然后刚才我翻了下我自己文章，发现虽然我一直坚持不让 AI 润色我的文字（只让 AI 找我的错字）但打出的某些话还是充斥着一些 AI 的习惯格式了。潜移默化中还是被 AI 影响了啊。

参考文章

给你的文章添加 AI 创作等级标识 – 碎言
给你的文章添加 AI 创作等级标识 – 袁某人博客