WordPress + 通义千问：打造全自动 AI 文章摘要功能（保姆级教程）- 汇维网

AI 摘要

本文介绍了一种面向 WordPress（特别是 JustNews 主题）用户的轻量级 AI 文章摘要实现方案，无需复杂开发即可在发布文章时一键生成约 200 字的详细摘要，并配合前端“打字机”式逐字显示动画增强阅读体验。方案核心仅需创建一个自包含插件文件：该插件内置通义千问调用逻辑与预设提示词，确保摘要内容详实、结构清晰；同时集成渐变背景、图标装饰及响应式 CSS 样式，视觉效果丰富且无需额外配置。前端动画采用纯 JS 实现，兼容主流浏览器，且因文字为真实 DOM 元素而非图片或 Canvas，完全保持 SEO 可抓取性。教程强调操作极简——仅需复制粘贴代码至插件文件并启用，适合零编程基础用户快速落地，显著提升内容专业度与用户停留时长。

内容由 AI 生成

适用主题：JustNews 及其他 WordPress 主题
核心功能：发布文章时自动生成 200 字详细摘要 + 前端打字机视觉特效
难度：⭐（只需复制粘贴）

前言

很多 JustNews 用户都在问：“怎么给文章加一个 AI 自动生成的摘要？”
网上的教程要么太复杂（要建一堆文件），要么效果太单调。

今天，我给大家带来一个“一体化”解决方案。
我们只需要创建一个简单的插件文件，再加一段 JS 动画代码，就能实现：

一键生成：在后台点击按钮，AI 自动读取文章生成 200 字左右的详细摘要。
视觉特效：前端页面加载时，摘要文字像“黑客帝国”一样一个字一个字打出来。
SEO 友好：虽然是动画，但搜索引擎依然能抓取到完整文字。

第一步：制作插件文件（核心）

这一步是让 WordPress 拥有“AI 写摘要”的能力。

打开电脑上的记事本（Notepad）。

复制下面的代码（我已经帮你预设好了 200 字的指令）：

<?php
/*
Plugin Name: JustNews AI 摘要修复版 (内置样式)
Description: 修复版插件，内置了五颜六色的CSS样式，无需手动设置。
Version: 5.0
Author: AI Assistant
*/

if (!defined('ABSPATH')) exit;

// 1. 自动加载内置 CSS 样式
add_action('wp_head', 'jn_ai_custom_css');
function jn_ai_custom_css() { ?>
<style>
/* JustNews AI 摘要 - 五颜六色版样式 */
.jn-ai-summary-wrapper {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2px;
    margin: 25px 0;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(118, 75, 162, 0.15);
    animation: jn-ai-gradient-flow 4s ease infinite;
    background-size: 200% 200%;
}
@keyframes jn-ai-gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.jn-ai-summary-content {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px 20px 20px 60px;
    position: relative;
    color: #444;
    line-height: 1.7;
    font-size: 15px;
}
.jn-ai-summary-content::before {
    content: '✨';
    position: absolute;
    left: 20px;
    top: 18px;
    font-size: 24px;
    background: #f0f0f0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.jn-ai-summary-title {
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.jn-ai-summary-footer {
    margin-top: 10px;
    font-size: 12px;
    color: #999;
    text-align: right;
    border-top: 1px dashed #eee;
    padding-top: 5px;
}
</style>
<?php }

// 2. 在文章内容中插入 HTML
add_filter('the_content', 'jn_ai_append_summary');
function jn_ai_append_summary($content) {
    if (is_single()) {
        $summary = get_post_meta(get_the_ID(), '_jn_ai_summary', true);
        if ($summary) {
            $html = '<div class="jn-ai-summary-wrapper">';
            $html .= '<div class="jn-ai-summary-content">';
            $html .= '<span class="jn-ai-summary-title">AI 摘要</span>';
            $html .= '<p>' . esc_html($summary) . '</p>';
            $html .= '<div class="jn-ai-summary-footer">内容由 AI 生成</div>';
            $html .= '</div>';
            $html .= '</div>';
            return $html . $content;
        }
    }
    return $content;
}

// 3. 后台设置菜单
add_action('admin_menu', 'jn_ai_add_menu');
function jn_ai_add_menu() {
    add_options_page('AI摘要设置', 'AI摘要设置', 'manage_options', 'jn-ai-settings', 'jn_ai_settings_html');
}
add_action('admin_init', 'jn_ai_register_settings');
function jn_ai_register_settings() {
    register_setting('jn_ai_options_group', 'jn_ai_api_key');
    register_setting('jn_ai_options_group', 'jn_ai_model_name');
}
function jn_ai_settings_html() { ?>
    <div class="wrap">
        <h1>JustNews AI 摘要设置</h1>
        <form method="post" action="options.php">
            <?php settings_fields('jn_ai_options_group'); ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">阿里云 API Key</th>
                    <td><input type="text" name="jn_ai_api_key" value="<?php echo esc_attr(get_option('jn_ai_api_key')); ?>" style="width:400px;" placeholder="sk-..." /></td>
                </tr>
                <tr valign="top">
                    <th scope="row">模型名称</th>
                    <td>
                        <select name="jn_ai_model_name">
                            <option value="qwen-turbo" <?php selected(get_option('jn_ai_model_name'), 'qwen-turbo'); ?>>qwen-turbo (速度快)</option>
                            <option value="qwen-plus" <?php selected(get_option('jn_ai_model_name'), 'qwen-plus'); ?>>qwen-plus (质量好)</option>
                        </select>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
        <hr>
        <h3>使用说明</h3>
        <p>编辑文章时，在右侧侧边栏找到“AI 摘要”模块，点击“生成”即可。</p>
    </div>
<?php }

// 4. 添加文章编辑页面的侧边栏模块
add_action('add_meta_boxes', 'jn_ai_add_meta_box');
function jn_ai_add_meta_box() {
    add_meta_box(
        'jn_ai_summary_box',
        'AI 文章摘要',
        'jn_ai_meta_box_html',
        'post',
        'side',
        'high'
    );
}
function jn_ai_meta_box_html($post) {
    $summary = get_post_meta($post->ID, '_jn_ai_summary', true);
    wp_nonce_field('jn_ai_save_summary', 'jn_ai_summary_nonce'); ?>
    <div id="jn-ai-summary-control">
        <p style="font-size: 12px; color: #666;">点击按钮自动生成摘要：</p>
        <button type="button" class="button button-primary" id="jn-ai-generate-btn" style="width:100%;">✨ 生成 AI 摘要</button>
        <div id="jn-ai-loading" style="display:none; color: #0073aa; margin-top: 10px;">AI 正在思考中...</div>
        <hr style="margin: 15px 0;">
        <label for="jn-ai-summary-textarea" style="font-weight:bold;">摘要内容：</label>
        <textarea name="jn_ai_summary_textarea" id="jn-ai-summary-textarea" rows="6" style="width:100%; margin-top:5px;"><?php echo esc_textarea($summary); ?></textarea>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#jn-ai-generate-btn').click(function(e) {
            e.preventDefault();
            var btn = $(this);
            var loading = $('#jn-ai-loading');
            var textarea = $('#jn-ai-summary-textarea');
            btn.prop('disabled', true).text('生成中...');
            loading.show();

            var postContent = wp.editor.getContent('content');
            var postTitle = $('#title').val();

            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'jn_ai_generate_summary',
                    content: postContent,
                    title: postTitle,
                    post_id: <?php echo $post->ID; ?>
                },
                success: function(response) {
                    if (response.success) {
                        textarea.val(response.data);
                    } else {
                        alert('错误: ' + response.data);
                    }
                },
                error: function() {
                    alert('请求失败，请检查网络或服务器日志');
                },
                complete: function() {
                    btn.prop('disabled', false).text('✨ 生成 AI 摘要');
                    loading.hide();
                }
            });
        });
    });
    </script>
<?php }

// 5. 保存摘要数据
add_action('save_post', 'jn_ai_save_summary_data');
function jn_ai_save_summary_data($post_id) {
    if (!isset($_POST['jn_ai_summary_nonce']) || !wp_verify_nonce($_POST['jn_ai_summary_nonce'], 'jn_ai_save_summary')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;
    if (isset($_POST['jn_ai_summary_textarea'])) {
        update_post_meta($post_id, '_jn_ai_summary', sanitize_textarea_field($_POST['jn_ai_summary_textarea']));
    }
}

// 6. AJAX 处理函数 (核心逻辑)
add_action('wp_ajax_jn_ai_generate_summary', 'jn_ai_handle_ajax');
function jn_ai_handle_ajax() {
    $api_key = get_option('jn_ai_api_key');
    $model = get_option('jn_ai_model_name', 'qwen-turbo');
    if (empty($api_key)) {
        wp_send_json_error('未设置 API Key');
    }

    $content = sanitize_textarea_field($_POST['content']);
    $title = sanitize_text_field($_POST['title']);
    if (empty($content)) {
        wp_send_json_error('文章内容不能为空');
    }

    $prompt_content = mb_strimwidth($content, 0, 2000, '...', 'UTF-8');

    // 这里是 AI 的指令核心：要求生成 200 字详细摘要
    $prompt = "你是一名资深的内容编辑。请仔细阅读以下文章，生成一段 150 到 200 字的详细摘要。要求：\n1. 逻辑清晰，保留文章的核心观点、关键数据和结论；\n2. 语言流畅自然，不要过于简练；\n3. 不要包含'摘要'、'总结'等字样，直接输出内容。\n\n标题：$title\n内容：$prompt_content";

    $url = 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions';
    $body = array(
        'model' => $model,
        'messages' => array(
            array(
                'role' => 'user',
                'content' => $prompt
            )
        ),
        'temperature' => 0.7
    );

    $args = array(
        'body' => json_encode($body),
        'headers' => array(
            'Content-Type' => 'application/json',
            'Authorization' => 'Bearer ' . $api_key,
        ),
        'timeout' => 45,
    );

    $response = wp_remote_post($url, $args);
    if (is_wp_error($response)) {
        wp_send_json_error($response->get_error_message());
    }

    $code = wp_remote_retrieve_response_code($response);
    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if ($code === 200 && isset($data['choices'][0]['message']['content'])) {
        $summary = trim($data['choices'][0]['message']['content']);
        $summary = trim($summary, '"');
        wp_send_json_success($summary);
    } else {
        $error_msg = isset($data['error']['message']) ? $data['error']['message'] : '未知错误';
        wp_send_json_error("API Error ($code): $error_msg");
    }
}

保存文件：
- 将文件另存为 justnews-ai-fix.php（注意后缀必须是 .php）。
- 编码选择 UTF-8（记事本另存为时右下角选 ANSI 或 UTF-8，推荐 UTF-8）。

第二步：安装与配置插件

上传：登录 WordPress 后台 -> 插件 -> 安装插件 -> 点击“上传插件” -> 选择你刚才保存的 justnews-ai-fix.php 文件上传并启用。
填 Key：
- 在后台左侧菜单找到 “AI摘要设置”。
- 填入你在阿里云获取的 API Key。
- 模型建议选 qwen-turbo（速度快，够用）。

第三步：增加“打字机”动画效果

这一步是为了让摘要看起来像在“现场打字”，完全不影响 SEO。

后台操作：进入 WordPress 后台 -> 外观 -> 小工具（或主题设置）。
找到统计代码框：找到类似 “底部统计代码” 或 “自定义 HTML” 的设置框。
粘贴代码：将下面这段代码复制进去：
```
<script>
document.addEventListener("DOMContentLoaded", function() {
    const summaryParagraph = document.querySelector('.jn-ai-summary-content p');
    if (summaryParagraph) {
        const originalText = summaryParagraph.innerText;
        summaryParagraph.innerText = '';
        let i = 0;
        const speed = 40;
        function typeWriter() {
            if (i < originalText.length) {
                summaryParagraph.innerHTML += originalText.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            }
        }
        typeWriter();
    }
});
</script>
```
第四步：写文章测试
1. 新建一篇文章，写好标题和内容。
2. 滚动到右侧边栏，找到 “AI 文章摘要” 模块。
3. 点击 “生成 AI 摘要” 按钮。
4. 稍等几秒，你会看到文本框里出现了一段 200 字左右的详细摘要。
5. 发布文章，去前台看看效果吧！
常见问题

Q: 为什么前台看到的是动画，但搜索引擎能收录吗？
A: 完全可以。这段 JS 只是改变了“显示的方式”，搜索引擎抓取的是网页源代码，源代码里是完整的文字，所以 SEO 一点都不会受损。

Q: 提示 API Error 或 Key 错误怎么办？
A: 请检查“AI摘要设置”里填的 Key 是否有空格，或者去阿里云控制台确认 Key 是否有效。

结语

这套方案是我为你定制的“懒人包”，它把所有复杂的逻辑都封装在了一个文件里。不需要懂 PHP，只需要会复制粘贴，就能让你的博客拥有高大上的 AI 功能。