WordPress对接AI大模型实战教程：让你的网站拥有“最强大脑”

omio商用AI

202人浏览 · 2026-07-10 23:48:54

omio商用AI · 2026-07-10 23:48:54 发布

随着 ChatGPT、DeepSeek、文心一言等大语言模型（LLM）的爆发，AI 已经成为提升网站交互体验和生产力的核心工具。作为全球使用最广泛的 CMS，WordPress 如何优雅地接入 AI 大模型？本文将从零开始，带你通过纯代码方式实现 WordPress 与 AI 大模型的深度对接。

📝 前言

在日常的 WordPress 开发中，接入 AI 可以实现很多神奇的功能：自动生成文章摘要、智能客服聊天机器人、SEO 标题优化、内容翻译等。

目前 WordPress 对接 AI 主要有两种方案：

插件方案：如 AI Engine、Bertha AI 等。适合非技术人员，开箱即用，但定制化能力弱，且通常需要付费。
自定义开发方案：通过 WordPress 的 HTTP API 和 Shortcode/Ajax 机制直接对接大模型 API。适合开发者，完全免费且可控。

本文将以自定义开发为主，以兼容 OpenAI 格式的 API（目前 DeepSeek、Moonshot 等国内大模型均采用此格式）为例，手把手教你实现一个简单的 AI 聊天助手。

🛠️ 第一步：准备工作

获取 API Key：去大模型服务商（如 OpenAI、DeepSeek、阿里云百炼等）注册账号并获取 API Key。
确认 API 地址：本文以 DeepSeek 为例，API 地址为 https://api.deepseek.com/v1/chat/completions 。
备份网站：修改主题代码前，请务必备份你的 WordPress 网站。

💻 第二步：编写后端对接代码

我们将把核心代码放在主题的 functions.php 文件中。建议使用子主题来修改，以免主题更新时代码被覆盖。

1. 安全存放 API Key

千万不要直接在 functions.php 中硬编码 API Key。请将以下代码加入网站根目录的 wp-config.php 中（在 /* That's all, stop editing! */ 之前）：

define('AI_API_KEY', '你的API Key');
define('AI_API_URL', 'https://api.deepseek.com/v1/chat/completions') ;
define('AI_MODEL_NAME', 'deepseek-chat');

2. 编写请求 AI 的核心函数

在 functions.php 中添加以下代码，利用 WordPress 内置的 wp_remote_post 发起网络请求：

/**
 * 调用 AI 大模型接口
 */
function invoke_ai_model($prompt) {
    $api_key = AI_API_KEY;
    $api_url = AI_API_URL;
    $model = AI_MODEL_NAME;

    $body = array(
        'model'    => $model,
        'messages' => array(
            array('role' => 'system', 'content' => '你是一个聪明的WordPress网站助手，请简明扼要地回答问题。'),
            array('role' => 'user', 'content' => $prompt)
        ),
        'temperature' => 0.7
    );

    $response = wp_remote_post($api_url, array(
        'headers' => array(
            'Content-Type'  => 'application/json',
            'Authorization' => 'Bearer ' . $api_key,
        ),
        'body'    => json_encode($body),
        'timeout' => 60, // AI 生成可能较慢，超时时间设长一点
    ));

    // 错误处理
    if (is_wp_error($response)) {
        return 'AI 请求失败: ' . $response->get_error_message();
    }

    $response_body = wp_remote_retrieve_body($response);
    $data = json_decode($response_body, true);

    if (isset($data['choices'][0]['message']['content'])) {
        return $data['choices'][0]['message']['content'];
    } elseif (isset($data['error'])) {
        return 'API 报错: ' . $data['error']['message'];
    } else {
        return '无法解析 AI 的回复。';
    }
}

🌐 第三步：通过 WP Ajax 实现前端交互

为了让前端页面能够无刷新调用 AI，我们需要注册一个 WordPress Ajax 接口。

继续在 functions.php 中添加：

// 注册 Ajax 接口给已登录用户和未登录用户
add_action('wp_ajax_ask_ai', 'handle_ask_ai_request');
add_action('wp_ajax_nopriv_ask_ai', 'handle_ask_ai_request');

function handle_ask_ai_request() {
    // 安全校验：验证 Nonce，防止跨站请求伪造
    check_ajax_referer('ai_nonce_action', 'nonce');

    // 获取前端传来的问题
    $prompt = isset($_POST['prompt']) ? sanitize_text_field(wp_unslash($_POST['prompt'])) : '';

    if (empty($prompt)) {
        wp_send_json_error('问题不能为空');
    }

    // 调用刚才写好的核心函数
    $answer = invoke_ai_model($prompt);

    // 返回 JSON 数据
    wp_send_json_success(array('answer' => $answer));
}

🎨 第四步：前端页面与 Shortcode 短代码

为了方便在任意页面/文章中插入 AI 对话框，我们编写一个 Shortcode。

继续在 functions.php 中添加：

// 注册短代码 [ai_chat_box]
add_shortcode('ai_chat_box', 'render_ai_chat_box');

function render_ai_chat_box() {
    // 生成 Nonce 供前端 JS 使用
    $nonce = wp_create_nonce('ai_nonce_action');
    $ajax_url = admin_url('admin-ajax.php');

    $html = <<<HTML
    <div class="wp-ai-chat-container" style="border:1px solid #ccc; padding:15px; border-radius:8px; max-width:600px; margin:20px auto;">
        <div id="wp-ai-response" style="min-height:100px; background:#f9f9f9; padding:10px; margin-bottom:10px; border-radius:4px;">
            等待你的提问...
        </div>
        <textarea id="wp-ai-prompt" rows="3" style="width:100%; margin-bottom:10px;" placeholder="请输入你的问题..."></textarea>
        <button id="wp-ai-submit" style="padding:10px 20px; background:#2271b1; color:#fff; border:none; border-radius:4px; cursor:pointer;">向 AI 提问</button>
    </div>

    <script>
    document.getElementById('wp-ai-submit').addEventListener('click', function() {
        const prompt = document.getElementById('wp-ai-prompt').value;
        const responseDiv = document.getElementById('wp-ai-response');
        
        if(!prompt) return alert('请输入问题');
        
        responseDiv.innerText = "AI 正在思考中...";
        
        const formData = new FormData();
        formData.append('action', 'ask_ai');
        formData.append('nonce', '{$nonce}');
        formData.append('prompt', prompt);

        fetch('{$ajax_url}', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                responseDiv.innerText = data.data.answer;
            } else {
                responseDiv.innerText = "出错了: " + data.data;
            }
        })
        .catch(err => {
            responseDiv.innerText = "网络请求失败";
        });
    });
    </script>
    HTML;

    return $html;
}

使用方法

现在，你只需要在 WordPress 后台新建一个页面，在文本编辑器中输入短代码：
[ai_chat_box]
发布页面后，访问该页面，你就会看到一个可以实时对话的 AI 聊天框了！

🚀 进阶优化建议

流式输出：
目前的代码是一次性等待 AI 生成完才返回，如果文本较长，用户需要等待很久。你可以通过开启 stream: true 参数，结合 PHP 的 flush() 或前端使用 fetch 的 ReadableStream 来实现像 ChatGPT 一样的打字机效果。
上下文记忆：
目前每次请求都是独立的，AI 没有记忆。你可以把之前的问答记录存入前端 JS 的数组中，每次请求时带上历史 messages，即可实现连续对话。
防刷限制：
AI API 是按 Token 计费的，建议在 handle_ask_ai_request 中加入限制逻辑，例如基于 IP 的 Redis 缓存限流，或者只允许已登录的 WordPress 用户使用。
结合 WP-Cron：
如果你是想做“自动生成文章”功能，可以使用 WP-Cron 定时任务，每天自动抓取热点词，调用 AI 生成文章并通过 wp_insert_post 发布。

通过以上步骤，我们不需要依赖任何臃肿的插件，仅用几十行 PHP 和 JS 代码，就打通了 WordPress 与 AI 大模型的任督二脉。无论是做智能客服、内容辅助生成还是其他创意玩法，掌握了这套底层对接逻辑，你的 WordPress 网站就能拥有无限可能。

有什么问题或更好的想法，欢迎在评论区交流！觉得有用的话，点个赞再走吧~ 👍

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

Dify Agent 智能体：让 AI 从“会聊天”升级为“能干活”

Dify Agent 是一种新型智能体应用，通过结合大语言模型与业务工具，将AI从被动应答升级为主动执行。它具备知识库查询、API调用、工作流编排等能力，可应用于企业客服、销售辅助、知识问答等场景。相比传统聊天机器人，Dify Agent能够理解任务目标、拆解执行步骤并调用实际业务系统完成操作，如同配备"工具箱"的数字员工。企业可通过配置Prompt、知识库、插件等组件，使AI助手具备业务流程处理