WordPress如何集成OpenAI API及AI生成工具API调用示例

准备工作：获取OpenAI API密钥

在开始将OpenAI API集成到WordPress网站之前，你需要先获取API密钥。访问OpenAI官方网站并登录你的账户，导航至API密钥管理页面。点击"Create new secret key"按钮生成一个新的API密钥。请务必妥善保存这个密钥，因为它只会在生成时显示一次，之后无法再次查看。

注意：API密钥具有访问你的OpenAI账户的权限，请勿将其泄露给他人或在客户端代码中直接使用。最佳实践是将API密钥存储在服务器端环境中。

方法一：使用WordPress插件集成OpenAI API

对于不熟悉代码的用户，使用现成的WordPress插件是最简单的方式。以下是几个支持OpenAI API的流行插件：

以AI Content Generator插件为例，安装和配置步骤如下：

1. 在WordPress后台，导航至"插件" > "安装插件"
2. 搜索"AI Content Generator"并安装
3. 激活插件后，导航至"设置" > "AI Content Generator"
4. 在"API Key"字段中输入你之前获取的OpenAI API密钥
5. 根据需要调整其他设置，如默认模型、温度参数等
6. 保存设置

配置完成后，你可以在创建新文章时使用AI生成内容的功能。通常，插件会在编辑器中添加一个新的按钮或选项，让你能够调用OpenAI API生成内容。

方法二：自定义代码集成OpenAI API

对于需要更高自定义程度的场景，你可以通过编写自定义代码来集成OpenAI API。以下是实现这一目标的详细步骤：

1. 创建自定义WordPress插件

首先，在你的WordPress网站的wp-content/plugins目录下创建一个新的文件夹，例如"openai-integration"。在该文件夹中创建一个PHP文件，命名为"openai-integration.php"，并添加以下代码：

<?php
/
  Plugin Name: OpenAI Integration
  Description: Integrates OpenAI API with WordPress
  Version: 1.0
  Author: Your Name
 /

// 防止直接访问此文件
if (!defined('ABSPATH')) {
    exit;
}

// 定义API密钥（在实际应用中，应该使用WordPress选项或环境变量存储）
define('OPENAI_API_KEY', 'your-api-key-here');

// 添加管理员菜单
add_action('admin_menu', 'openai_integration_menu');
function openai_integration_menu() {
    add_menu_page(
        'OpenAI Integration Settings',
        'OpenAI Integration',
        'manage_options',
        'openai-integration',
        'openai_integration_settings_page',
        'dashicons-admin-generic'
    );
}

// 注册设置
add_action('admin_init', 'openai_integration_settings');
function openai_integration_settings() {
    register_setting('openai_integration_settings_group', 'openai_api_key');
}

// 设置页面内容
function openai_integration_settings_page() {
    ?>
    <div class="wrap">
        <h1>OpenAI Integration Settings</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('openai_integration_settings_group');
            do_settings_sections('openai_integration_settings_group');
            ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">OpenAI API Key</th>
                    <td><input type="text" name="openai_api_key" value="<?php echo esc_attr(get_option('openai_api_key')); ?>" /></td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
?>

2. 实现API调用功能

接下来，添加一个函数来处理OpenAI API的调用。在插件文件中添加以下代码：

// 调用OpenAI API的函数
function call_openai_api($prompt, $model = 'gpt-3.5-turbo', $max_tokens = 1000, $temperature = 0.7) {
    $api_key = get_option('openai_api_key');
    
    if (empty($api_key)) {
        return 'Error: OpenAI API key not configured.';
    }
    
    $api_url = 'https://api.openai.com/v1/chat/completions';
    
    $headers = array(
        'Content-Type' => 'application/json',
        'Authorization' => 'Bearer ' . $api_key
    );
    
    $body = array(
        'model' => $model,
        'messages' => array(
            array(
                'role' => 'user',
                'content' => $prompt
            )
        ),
        'max_tokens' => $max_tokens,
        'temperature' => $temperature
    );
    
    $args = array(
        'headers' => $headers,
        'body' => json_encode($body),
        'timeout' => 30
    );
    
    $response = wp_remote_post($api_url, $args);
    
    if (is_wp_error($response)) {
        return 'Error: ' . $response->get_error_message();
    }
    
    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);
    
    if (json_last_error() !== JSON_ERROR_NONE) {
        return 'Error: Unable to decode API response.';
    }
    
    if (isset($data['error'])) {
        return 'Error: ' . $data['error']['message'];
    }
    
    return $data['choices'][0]['message']['content'];
}

3. 添加元框到文章编辑页面

为了方便在文章编辑页面使用OpenAI API，我们可以添加一个自定义元框。在插件文件中添加以下代码：

// 添加元框到文章编辑页面
add_action('add_meta_boxes', 'openai_integration_add_meta_box');
function openai_integration_add_meta_box() {
    add_meta_box(
        'openai_integration_meta_box',
        'OpenAI Content Generator',
        'openai_integration_meta_box_callback',
        'post',
        'normal',
        'high'
    );
}

// 元框回调函数
function openai_integration_meta_box_callback($post) {
    ?>
    <div id="openai-integration-container">
        <label for="openai-prompt">Enter your prompt:</label>
        <textarea id="openai-prompt" name="openai_prompt" rows="4" style="width: 100%;"></textarea>
        
        <label for="openai-model">Select model:</label>
        <select id="openai-model" name="openai_model">
            <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
            <option value="gpt-4">GPT-4</option>
        </select>
        
        <label for="openai-max-tokens">Max tokens:</label>
        <input type="number" id="openai-max-tokens" name="openai_max_tokens" value="1000" min="1" max="4096">
        
        <label for="openai-temperature">Temperature (0-1):</label>
        <input type="number" id="openai-temperature" name="openai_temperature" value="0.7" min="0" max="1" step="0.1">
        
        <button id="openai-generate-content" class="button button-primary">Generate Content</button>
        
        <div id="openai-response-container" style="margin-top: 20px;">
            <label for="openai-response">Generated Content:</label>
            <textarea id="openai-response" name="openai_response" rows="10" style="width: 100%;" readonly></textarea>
            <button id="openai-insert-content" class="button" disabled>Insert into Editor</button>
        </div>
    </div>
    
    <script>
    jQuery(document).ready(function($) {
        $('openai-generate-content').on('click', function() {
            var prompt = $('openai-prompt').val();
            var model = $('openai-model').val();
            var maxTokens = $('openai-max-tokens').val();
            var temperature = $('openai-temperature').val();
            
            if (!prompt) {
                alert('Please enter a prompt.');
                return;
            }
            
            $('openai-generate-content').prop('disabled', true);
            $('openai-response').val('Generating content, please wait...');
            
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'openai_generate_content',
                    prompt: prompt,
                    model: model,
                    max_tokens: maxTokens,
                    temperature: temperature,
                    nonce: '<?php echo wp_create_nonce('openai_generate_content_nonce'); ?>'
                },
                success: function(response) {
                    if (response.success) {
                        $('openai-response').val(response.data);
                        $('openai-insert-content').prop('disabled', false);
                    } else {
                        $('openai-response').val('Error: ' + response.data);
                    }
                    $('openai-generate-content').prop('disabled', false);
                },
                error: function(xhr, status, error) {
                    $('openai-response').val('Error: ' + error);
                    $('openai-generate-content').prop('disabled', false);
                }
            });
        });
        
        $('openai-insert-content').on('click', function() {
            var content = $('openai-response').val();
            if (content) {
                if (typeof tinyMCE !== 'undefined' && tinyMCE.activeEditor && !tinyMCE.activeEditor.isHidden()) {
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, content);
                } else {
                    $('content').val($('content').val() + 'nn' + content);
                }
            }
        });
    });
    </script>
    <?php
}

4. 添加AJAX处理程序

最后，添加一个AJAX处理程序来处理API调用请求。在插件文件中添加以下代码：

// 添加AJAX处理程序
add_action('wp_ajax_openai_generate_content', 'openai_generate_content_ajax_handler');
function openai_generate_content_ajax_handler() {
    // 验证nonce
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'openai_generate_content_nonce')) {
        wp_send_json_error('Security check failed.');
    }
    
    // 检查用户权限
    if (!current_user_can('edit_posts')) {
        wp_send_json_error('You do not have permission to perform this action.');
    }
    
    // 获取并清理输入参数
    $prompt = sanitize_textarea_field($_POST['prompt']);
    $model = sanitize_text_field($_POST['model']);
    $max_tokens = intval($_POST['max_tokens']);
    $temperature = floatval($_POST['temperature']);
    
    // 验证输入参数
    if (empty($prompt)) {
        wp_send_json_error('Prompt is required.');
    }
    
    if (!in_array($model, array('gpt-3.5-turbo', 'gpt-4'))) {
        wp_send_json_error('Invalid model.');
    }
    
    if ($max_tokens  4096) {
        wp_send_json_error('Max tokens must be between 1 and 4096.');
    }
    
    if ($temperature  1) {
        wp_send_json_error('Temperature must be between 0 and 1.');
    }
    
    // 调用OpenAI API
    $response = call_openai_api($prompt, $model, $max_tokens, $temperature);
    
    // 检查API调用是否成功
    if (strpos($response, 'Error:') === 0) {
        wp_send_json_error($response);
    }
    
    // 返回成功响应
    wp_send_json_success($response);
}

方法三：使用WordPress REST API集成OpenAI

如果你需要在前端或外部应用中调用OpenAI API，可以通过WordPress REST API实现。以下是实现这一目标的步骤：

1. 注册自定义REST API端点

在你的自定义插件中添加以下代码来注册一个新的REST API端点：

// 注册自定义REST API端点
add_action('rest_api_init', 'openai_integration_register_rest_routes');
function openai_integration_register_rest_routes() {
    register_rest_route('openai/v1', '/generate', array(
        'methods' => 'POST',
        'callback' => 'openai_integration_rest_generate_handler',
        'permission_callback' => function() {
            return current_user_can('edit_posts');
        },
        'args' => array(
            'prompt' => array(
                'required' => true,
                'sanitize_callback' => 'sanitize_textarea_field',
            ),
            'model' => array(
                'default' => 'gpt-3.5-turbo',
                'sanitize_callback' => 'sanitize_text_field',
            ),
            'max_tokens' => array(
                'default' => 1000,
                'sanitize_callback' => 'intval',
            ),
            'temperature' => array(
                'default' => 0.7,
                'sanitize_callback' => 'floatval',
            ),
        ),
    ));
}

// REST API端点处理函数
function openai_integration_rest_generate_handler($request) {
    $params = $request->get_params();
    
    $prompt = $params['prompt'];
    $model = $params['model'];
    $max_tokens = $params['max_tokens'];
    $temperature = $params['temperature'];
    
    // 验证输入参数
    if (!in_array($model, array('gpt-3.5-turbo', 'gpt-4'))) {
        return new WP_Error('invalid_model', 'Invalid model.', array('status' => 400));
    }
    
    if ($max_tokens  4096) {
        return new WP_Error('invalid_max_tokens', 'Max tokens must be between 1 and 4096.', array('status' => 400));
    }
    
    if ($temperature  1) {
        return new WP_Error('invalid_temperature', 'Temperature must be between 0 and 1.', array('status' => 400));
    }
    
    // 调用OpenAI API
    $response = call_openai_api($prompt, $model, $max_tokens, $temperature);
    
    // 检查API调用是否成功
    if (strpos($response, 'Error:') === 0) {
        return new WP_Error('api_error', substr($response, 7), array('status' => 500));
    }
    
    // 返回成功响应
    return new WP_REST_Response(array(
        'success' => true,
        'data' => $response
    ), 200);
}

2. 前端JavaScript调用示例

以下是在前端使用JavaScript调用自定义REST API端点的示例代码：

// 使用WordPress REST API调用OpenAI
async function generateContentWithOpenAI(prompt, options = {}) {
    const defaultOptions = {
        model: 'gpt-3.5-turbo',
        max_tokens: 1000,
        temperature: 0.7
    };
    
    const finalOptions = { ...defaultOptions, ...options };
    
    try {
        const response = await fetch('/wp-json/openai/v1/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': wpApiSettings.nonce
            },
            body: JSON.stringify({
                prompt: prompt,
                model: finalOptions.model,
                max_tokens: finalOptions.max_tokens,
                temperature: finalOptions.temperature
            })
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        if (data.success) {
            return data.data;
        } else {
            throw new Error(data.data || 'Unknown error occurred');
        }
    } catch (error) {
        console.error('Error generating content with OpenAI:', error);
        throw error;
    }
}

// 使用示例
document.getElementById('generate-button').addEventListener('click', async function() {
    const prompt = document.getElementById('prompt-input').value;
    
    if (!prompt) {
        alert('Please enter a prompt.');
        return;
    }
    
    try {
        this.disabled = true;
        this.textContent = 'Generating...';
        
        const generatedContent = await generateContentWithOpenAI(prompt);
        
        document.getElementById('result-container').textContent = generatedContent;
    } catch (error) {
        alert(`Error: ${error.message}`);
    } finally {
        this.disabled = false;
        this.textContent = 'Generate';
    }
});

常见问题与解决方案

1. API调用失败或返回错误

如果你在调用OpenAI API时遇到错误，首先检查以下几点：

• 确认API密钥是否正确且有效
• 检查你的账户是否有足够的配额
• 验证请求参数是否符合OpenAI API的要求
• 查看WordPress错误日志以获取更多详细信息

常见的错误代码及其解决方案：

2. 生成内容不符合预期

如果OpenAI生成的内容不符合你的预期，可以尝试以下调整：

• 优化提示词，使其更加具体和明确
• 调整temperature参数：较低的值（如0.2-0.5）会使输出更加确定和集中，较高的值（如0.7-1.0）会使输出更加随机和创造性
• 尝试使用不同的模型，如从GPT-3.5切换到GPT-4
• 增加max_tokens以允许更长的响应

3. 性能优化

为了提高API调用的性能和用户体验，可以考虑以下优化措施：

• 实现缓存机制，避免重复请求相同的内容
• 使用异步请求，防止页面加载阻塞
• 添加加载指示器，提供用户反馈
• 实现请求队列，避免同时发送过多请求
• 考虑使用CDN或边缘计算来减少延迟

安全注意事项

在集成OpenAI API时，请务必注意以下安全事项：

• 永远不要在前端代码中暴露API密钥
• 使用WordPress nonce来验证AJAX请求
• 实现适当的用户权限检查
• 对所有用户输入进行清理和验证
• 考虑实现请求速率限制，防止滥用
• 定期更新插件和WordPress核心，确保安全性