WordPress如何集成AI写作助手API提高内容创作效率
- Linkreate AI插件 文章
- 2025-08-30 10:43:45
- 21阅读
在当今内容驱动的数字环境中，WordPress网站管理员和内容创作者面临着持续产出高质量内容的压力。AI写作助手API的集成可以显著提高内容创作效率，让你能够更快地生成、优化和发布内容。本文将详细介绍如何将AI写作助手API与WordPress网站进行集成，通过REST API和Webhooks实现自动化内容创作流程。
AI写作助手API选择与准备工作
在开始集成之前，你需要选择适合的AI写作助手API。目前市场上有多种选择，包括OpenAI的GPT系列、DeepSeek、豆包、Gemini、文心一言、通义千问和智谱AI等。每种API都有其特点和优势，你需要根据你的具体需求进行选择。
选择API后，你需要完成以下准备工作：
- 注册所选AI服务平台的开发者账号
- 创建应用并获取API密钥
- 了解API的调用限制、定价模型和功能特性
- 熟悉API文档，特别是与内容生成相关的端点
获取API密钥后，建议将其存储在WordPress的安全位置，如wp-config.php文件或使用环境变量。避免将API密钥直接硬编码在主题或插件文件中，以防止安全风险。
// 在wp-config.php文件中添加API密钥
define('AI_WRITING_API_KEY', 'your_api_key_here');
define('AI_WRITING_API_ENDPOINT', 'https://api.example.com/v1/generate');
这段代码将API密钥和端点定义为WordPress常量，可以在整个网站中安全地访问。确保将'your_api_key_here'替换为你实际的API密钥，并将'https://api.example.com/v1/generate'替换为你所使用的AI写作助手API的实际端点。
创建WordPress插件进行API集成
为了实现AI写作助手与WordPress的无缝集成，创建一个自定义插件是最佳实践。这种方法可以确保你的集成在主题更新时不会丢失，同时也能更好地组织代码。
首先，在wp-content/plugins目录下创建一个新文件夹，例如'ai-writing-assistant'，并在其中创建一个主PHP文件，如'ai-writing-assistant.php'。添加以下基本插件结构：
'',
'api_endpoint' => '',
'enabled_post_types' => array('post', 'page'),
'auto_generate_excerpt' => true,
'content_length' => 'medium'
));
}
这段代码创建了一个基本的WordPress插件结构，定义了插件的基本信息和常量，并包含了必要的文件。插件激活时，它会创建一个默认设置选项，存储在WordPress数据库中。这些设置包括API密钥、API端点、启用的文章类型、是否自动生成摘录以及内容长度偏好。
实现API请求处理类
接下来，我们需要创建一个处理API请求的类。在includes文件夹中创建api-handler.php文件，并添加以下代码：
api_key = isset($settings['api_key']) ? $settings['api_key'] : '';
$this->api_endpoint = isset($settings['api_endpoint']) ? $settings['api_endpoint'] : '';
}
/
发送请求到AI写作助手API
@param string $prompt 提示词
@param array $parameters 附加参数
@return array|WP_Error API响应
/
public function generate_content($prompt, $parameters = array()) {
if (empty($this->api_key) || empty($this->api_endpoint)) {
return new WP_Error('api_missing_credentials', 'API密钥或端点未配置');
}
$default_parameters = array(
'model' => 'gpt-3.5-turbo',
'temperature' => 0.7,
'max_tokens' => 1000,
'top_p' => 1.0,
'frequency_penalty' => 0,
'presence_penalty' => 0
);
$parameters = wp_parse_args($parameters, $default_parameters);
$body = array(
'prompt' => $prompt,
'parameters' => $parameters
);
$args = array(
'body' => json_encode($body),
'headers' => array(
'Content-Type' => 'application/json',
'Authorization' => 'Bearer ' . $this->api_key
),
'timeout' => $this->timeout
);
$response = wp_remote_post($this->api_endpoint, $args);
if (is_wp_error($response)) {
return $response;
}
$response_code = wp_remote_retrieve_response_code($response);
$response_body = json_decode(wp_remote_retrieve_body($response), true);
if ($response_code !== 200) {
$error_message = isset($response_body['error']['message']) ? $response_body['error']['message'] : '未知错误';
return new WP_Error('api_error', $error_message, array('status' => $response_code));
}
return $response_body;
}
/
验证API连接
@return bool|WP_Error 连接是否成功
/
public function test_connection() {
$test_prompt = "请回复'连接成功'以验证API连接。";
$response = $this->generate_content($test_prompt, array('max_tokens' => 10));
if (is_wp_error($response)) {
return $response;
}
return true;
}
}
这个API处理类负责与AI写作助手API进行通信。它包含了生成内容和测试连接的方法。generate_content方法接收提示词和参数，构建请求体，并通过WordPress的HTTP API发送POST请求到AI写作助手API。test_connection方法则用于验证API连接是否正常工作。
创建内容生成器类
现在，我们需要创建一个内容生成器类，它将使用API处理类来生成内容并将其集成到WordPress编辑器中。在includes文件夹中创建content-generator.php文件，并添加以下代码：
api_handler = $api_handler;
}
/
生成文章标题
@param string $topic 主题
@return string|WP_ERROR 生成的标题
/
public function generate_title($topic) {
$prompt = "请为关于'{$topic}'的文章生成5个吸引人的标题，只返回标题列表，每行一个标题。";
$response = $this->api_handler->generate_content($prompt, array(
'max_tokens' => 100,
'temperature' => 0.8
));
if (is_wp_error($response)) {
return $response;
}
$titles = explode("n", $response['content']);
return array_filter($titles);
}
/
生成文章内容
@param string $title 文章标题
@param string $keywords 关键词
@param int $length 内容长度（短、中、长）
@return string|WP_ERROR 生成的内容
/
public function generate_content($title, $keywords = '', $length = 'medium') {
$length_map = array(
'short' => 300,
'medium' => 600,
'long' => 1000
);
$max_tokens = isset($length_map[$length]) ? $length_map[$length] : $length_map['medium'];
$prompt = "请写一篇标题为'{$title}'的文章";
if (!empty($keywords)) {
$prompt .= "，包含以下关键词：{$keywords}";
}
$prompt .= "。请确保内容结构清晰，包含引言、正文和结论。";
$response = $this->api_handler->generate_content($prompt, array(
'max_tokens' => $max_tokens,
'temperature' => 0.7
));
if (is_wp_error($response)) {
return $response;
}
return $response['content'];
}
/
优化现有内容
@param string $content 原始内容
@param string $optimization_type 优化类型（SEO、可读性、语气）
@return string|WP_ERROR 优化后的内容
/
public function optimize_content($content, $optimization_type = 'SEO') {
$optimization_prompts = array(
'SEO' => '请优化以下内容以提高SEO效果，保持原意但增强关键词密度和结构：',
'readability' => '请优化以下内容以提高可读性，使用更简洁的语言和更清晰的段落结构：',
'tone' => '请优化以下内容以调整语气，使其更加专业和权威：'
);
$prompt = isset($optimization_prompts[$optimization_type]) ?
$optimization_prompts[$optimization_type] : $optimization_prompts['SEO'];
$prompt .= "nn" . $content;
$response = $this->api_handler->generate_content($prompt, array(
'max_tokens' => strlen($content) / 4, // 估算token数量
'temperature' => 0.5
));
if (is_wp_error($response)) {
return $response;
}
return $response['content'];
}
/
生成文章摘要
@param string $content 文章内容
@param int $length 摘要长度
@return string|WP_ERROR 生成的摘要
/
public function generate_excerpt($content, $length = 150) {
$prompt = "请为以下文章生成一个{$length}字以内的摘要，保持简洁明了：nn" . $content;
$response = $this->api_handler->generate_content($prompt, array(
'max_tokens' => $length / 4, // 估算token数量
'temperature' => 0.3
));
if (is_wp_error($response)) {
return $response;
}
return $response['content'];
}
}
这个内容生成器类提供了多种内容生成和优化功能，包括生成文章标题、生成文章内容、优化现有内容以及生成文章摘要。每种方法都构建了适当的提示词，并通过API处理类与AI写作助手API进行通信。这些方法可以根据不同的需求进行定制，例如内容长度、优化类型等。
创建管理设置页面
为了允许用户配置AI写作助手的设置，我们需要创建一个管理设置页面。在includes文件夹中创建admin-settings.php文件，并添加以下代码：
settings_page_slug,
array($this, 'render_settings_page')
);
}
/
注册设置
/
public function register_settings() {
register_setting('ai_writing_assistant_settings_group', 'ai_writing_assistant_settings');
add_settings_section(
'ai_writing_assistant_api_section',
'API设置',
array($this, 'api_section_callback'),
'ai_writing_assistant_settings_group'
);
add_settings_field(
'api_key',
'API密钥',
array($this, 'api_key_callback'),
'ai_writing_assistant_settings_group',
'ai_writing_assistant_api_section'
);
add_settings_field(
'api_endpoint',
'API端点',
array($this, 'api_endpoint_callback'),
'ai_writing_assistant_settings_group',
'ai_writing_assistant_api_section'
);
add_settings_section(
'ai_writing_assistant_content_section',
'内容生成设置',
array($this, 'content_section_callback'),
'ai_writing_assistant_settings_group'
);
add_settings_field(
'enabled_post_types',
'启用的文章类型',
array($this, 'enabled_post_types_callback'),
'ai_writing_assistant_settings_group',
'ai_writing_assistant_content_section'
);
add_settings_field(
'auto_generate_excerpt',
'自动生成摘要',
array($this, 'auto_generate_excerpt_callback'),
'ai_writing_assistant_settings_group',
'ai_writing_assistant_content_section'
);
add_settings_field(
'content_length',
'默认内容长度',
array($this, 'content_length_callback'),
'ai_writing_assistant_settings_group',
'ai_writing_assistant_content_section'
);
}
/
渲染设置页面
/
public function render_settings_page() {
?>
AI写作助手设置
测试API连接
点击下面的按钮测试API连接是否正常工作。
jQuery(document).ready(function($) {
$('test-connection').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var $result = $('test-connection-result');
$button.prop('disabled', true);
$result.(' 测试中...');
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'ai_writing_assistant_test_connection',
nonce: ''
},
success: function(response) {
if (response.success) {
$result.('' + response.data.message + '
');
} else {
$result.('' + response.data.message + '
');
}
$button.prop('disabled', false);
},
error: function() {
$result.('请求失败，请重试。
');
$button.prop('disabled', false);
}
});
});
});
<?php
}
/
API部分回调
/
public function api_section_callback() {
echo '请输入你的AI写作助手API凭据。';
}
/
API密钥字段回调
/
public function api_key_callback() {
$settings = get_option('ai_writing_assistant_settings');
$api_key = isset($settings['api_key']) ? $settings['api_key'] : '';
echo '';
echo '输入你的AI写作助手API密钥。
';
}
/
API端点字段回调
/
public function api_endpoint_callback() {
$settings = get_option('ai_writing_assistant_settings');
$api_endpoint = isset($settings['api_endpoint']) ? $settings['api_endpoint'] : '';
echo '';
echo '输入你的AI写作助手API端点URL。
';
}
/
内容部分回调
/
public function content_section_callback() {
echo '配置AI写作助手的内容生成选项。';
}
/
启用的文章类型字段回调
/
public function enabled_post_types_callback() {
$settings = get_option('ai_writing_assistant_settings');
$enabled_post_types = isset($settings['enabled_post_types']) ? $settings['enabled_post_types'] : array('post', 'page');
$post_types = get_post_types(array('public' => true), 'objects');
foreach ($post_types as $post_type) {
$checked = in_array($post_type->name, $enabled_post_types) ? 'checked="checked"' : '';
echo '
';
}
echo '选择要在其中启用AI写作助手功能的内容类型。
';
}
/
自动生成摘录字段回调
/
public function auto_generate_excerpt_callback() {
$settings = get_option('ai_writing_assistant_settings');
$auto_generate_excerpt = isset($settings['auto_generate_excerpt']) ? $settings['auto_generate_excerpt'] : true;
$checked = $auto_generate_excerpt ? 'checked="checked"' : '';
echo '';
echo '如果启用，AI写作助手将自动为新文章生成摘要。
';
}
/
内容长度字段回调
/
public function content_length_callback() {
$settings = get_option('ai_writing_assistant_settings');
$content_length = isset($settings['content_length']) ? $settings['content_length'] : 'medium';
$options = array(
'short' => '短',
'medium' => '中',
'long' => '长'
);
echo '';
foreach ($options as $value => $label) {
$selected = ($content_length === $value) ? 'selected="selected"' : '';
echo '' . esc_html($label) . '';
}
echo '';
echo '选择默认的内容生成长度。
';
}
}
// 初始化管理设置
new AI_Writing_Assistant_Admin_Settings();
// 添加AJAX处理程序
add_action('wp_ajax_ai_writing_assistant_test_connection', 'ai_writing_assistant_test_connection_handler');
function ai_writing_assistant_test_connection_handler() {
check_ajax_referer('ai_writing_assistant_test_connection', 'nonce');
if (!current_user_can('manage_options')) {
wp_send_json_error(array('message' => '你没有足够的权限执行此操作。'));
}
$api_handler = new AI_Writing_Assistant_API_Handler();
$result = $api_handler->test_connection();
if (is_wp_error($result)) {
wp_send_json_error(array('message' => $result->get_error_message()));
} else {
wp_send_json_success(array('message' => 'API连接成功！'));
}
}
这个管理设置类创建了一个完整的设置页面，允许用户配置API密钥、API端点、启用的文章类型、是否自动生成摘要以及默认内容长度。此外，它还提供了一个测试API连接的功能，使用AJAX来验证API凭据是否正确。
集成到WordPress编辑器
现在，我们需要将AI写作助手集成到WordPress编辑器中，以便用户可以直接在编辑界面使用AI功能。在插件的主文件中添加以下代码：
// 在插件主文件中添加以下代码
// 初始化API处理程序和内容生成器
$api_handler = new AI_Writing_Assistant_API_Handler();
$content_generator = new AI_Writing_Assistant_Content_Generator($api_handler);
// 添加编辑器集成
add_action('admin_enqueue_scripts', 'ai_writing_assistant_admin_scripts');
function ai_writing_assistant_admin_scripts($hook) {
// 只在文章编辑页面加载脚本
if ('post.php' !== $hook && 'post-new.php' !== $hook) {
return;
}
$settings = get_option('ai_writing_assistant_settings');
$enabled_post_types = isset($settings['enabled_post_types']) ? $settings['enabled_post_types'] : array('post', 'page');
// 检查当前文章类型是否已启用
$current_post_type = get_post_type();
if (!in_array($current_post_type, $enabled_post_types)) {
return;
}
// 注册和排队脚本
wp_enqueue_script(
'ai-writing-assistant-editor',
AI_WRITING_ASSISTANT_URL . 'assets/js/editor.js',
array('jquery', 'wp-editor', 'wp-element', 'wp-components', 'wp-data'),
AI_WRITING_ASSISTANT_VERSION,
true
);
wp_enqueue_style(
'ai-writing-assistant-editor',
AI_WRITING_ASSISTANT_URL . 'assets/css/editor.css',
array(),
AI_WRITING_ASSISTANT_VERSION
);
// 传递设置到JavaScript
wp_localize_script('ai-writing-assistant-editor', 'aiWritingAssistant', array(
'ajaxUrl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ai_writing_assistant_generate_content'),
'pluginUrl' => AI_WRITING_ASSISTANT_URL
));
}
// 添加Gutenberg块
add_action('init', 'ai_writing_assistant_register_blocks');
function ai_writing_assistant_register_blocks() {
// 自动加载块
$blocks = array(
'ai-title-generator',
'ai-content-generator',
'ai-content-optimizer'
);
foreach ($blocks as $block) {
register_block_type(AI_WRITING_ASSISTANT_PATH . 'blocks/' . $block);
}
}
// 添加经典编辑器集成
add_action('media_buttons', 'ai_writing_assistant_add_media_button', 20);
function ai_writing_assistant_add_media_button($editor_id) {
$settings = get_option('ai_writing_assistant_settings');
$enabled_post_types = isset($settings['enabled_post_types']) ? $settings['enabled_post_types'] : array('post', 'page');
// 检查当前文章类型是否已启用
$current_post_type = get_post_type();
if (!in_array($current_post_type, $enabled_post_types)) {
return;
}
printf(
'',
esc_attr($editor_id),
esc_attr($editor_id),
esc_attr__('使用AI写作助手生成内容')
);
}
// 添加AJAX处理程序
add_action('wp_ajax_ai_writing_assistant_generate_title', 'ai_writing_assistant_generate_title_handler');
add_action('wp_ajax_ai_writing_assistant_generate_content', 'ai_writing_assistant_generate_content_handler');
add_action('wp_ajax_ai_writing_assistant_optimize_content', 'ai_writing_assistant_optimize_content_handler');
add_action('wp_ajax_ai_writing_assistant_generate_excerpt', 'ai_writing_assistant_generate_excerpt_handler');
function ai_writing_assistant_generate_title_handler() {
check_ajax_referer('ai_writing_assistant_generate_content', 'nonce');
if (!current_user_can('edit_posts')) {
wp_send_json_error(array('message' => '你没有足够的权限执行此操作。'));
}
$topic = isset($_POST['topic']) ? sanitize_text_field($_POST['topic']) : '';
if (empty($topic)) {
wp_send_json_error(array('message' => '请提供主题。'));
}
$api_handler = new AI_Writing_Assistant_API_Handler();
$content_generator = new AI_Writing_Assistant_Content_Generator($api_handler);
$result = $content_generator->generate_title($topic);
if (is_wp_error($result)) {
wp_send_json_error(array('message' => $result->get_error_message()));
} else {
wp_send_json_success(array('titles' => $result));
}
}
function ai_writing_assistant_generate_content_handler() {
check_ajax_referer('ai_writing_assistant_generate_content', 'nonce');
if (!current_user_can('edit_posts')) {
wp_send_json_error(array('message' => '你没有足够的权限执行此操作。'));
}
$title = isset($_POST['title']) ? sanitize_text_field($_POST['title']) : '';
$keywords = isset($_POST['keywords']) ? sanitize_text_field($_POST['keywords']) : '';
$length = isset($_POST['length']) ? sanitize_text_field($_POST['length']) : 'medium';
if (empty($title)) {
wp_send_json_error(array('message' => '请提供标题。'));
}
$api_handler = new AI_Writing_Assistant_API_Handler();
$content_generator = new AI_Writing_Assistant_Content_Generator($api_handler);
$result = $content_generator->generate_content($title, $keywords, $length);
if (is_wp_error($result)) {
wp_send_json_error(array('message' => $result->get_error_message()));
} else {
wp_send_json_success(array('content' => $result));
}
}
function ai_writing_assistant_optimize_content_handler() {
check_ajax_referer('ai_writing_assistant_generate_content', 'nonce');
if (!current_user_can('edit_posts')) {
wp_send_json_error(array('message' => '你没有足够的权限执行此操作。'));
}
$content = isset($_POST['content']) ? wp_kses_post($_POST['content']) : '';
$optimization_type = isset($_POST['optimization_type']) ? sanitize_text_field($_POST['optimization_type']) : 'SEO';
if (empty($content)) {
wp_send_json_error(array('message' => '请提供要优化的内容。'));
}
$api_handler = new AI_Writing_Assistant_API_Handler();
$content_generator = new AI_Writing_Assistant_Content_Generator($api_handler);
$result = $content_generator->optimize_content($content, $optimization_type);
if (is_wp_error($result)) {
wp_send_json_error(array('message' => $result->get_error_message()));
} else {
wp_send_json_success(array('content' => $result));
}
}
function ai_writing_assistant_generate_excerpt_handler() {
check_ajax_referer('ai_writing_assistant_generate_content', 'nonce');
if (!current_user_can('edit_posts')) {
wp_send_json_error(array('message' => '你没有足够的权限执行此操作。'));
}
$content = isset($_POST['content']) ? wp_kses_post($_POST['content']) : '';
$length = isset($_POST['length']) ? intval($_POST['length']) : 150;
if (empty($content)) {
wp_send_json_error(array('message' => '请提供内容。'));
}
$api_handler = new AI_Writing_Assistant_API_Handler();
$content_generator = new AI_Writing_Assistant_Content_Generator($api_handler);
$result = $content_generator->generate_excerpt($content, $length);
if (is_wp_error($result)) {
wp_send_json_error(array('message' => $result->get_error_message()));
} else {
wp_send_json_success(array('excerpt' => $result));
}
}
// 自动生成文章摘要
add_action('save_post', 'ai_writing_assistant_auto_generate_excerpt', 10, 3);
function ai_writing_assistant_auto_generate_excerpt($post_id, $post, $update) {
// 如果是自动保存或修订版本，不处理
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (wp_is_post_revision($post_id)) {
return;
}
// 检查设置是否启用自动生成摘要
$settings = get_option('ai_writing_assistant_settings');
$auto_generate_excerpt = isset($settings['auto_generate_excerpt']) ? $settings['auto_generate_excerpt'] : true;
if (!$auto_generate_excerpt) {
return;
}
// 检查当前文章类型是否已启用
$enabled_post_types = isset($settings['enabled_post_types']) ? $settings['enabled_post_types'] : array('post', 'page');
if (!in_array($post->post_type, $enabled_post_types)) {
return;
}
// 如果已经有摘要，不覆盖
if (!empty($post->post_excerpt)) {
return;
}
// 获取文章内容
$content = $post->post_content;
if (empty($content)) {
return;
}
// 生成摘要
$api_handler = new AI_Writing_Assistant_API_Handler();
$content_generator = new AI_Writing_Assistant_Content_Generator($api_handler);
$excerpt = $content_generator->generate_excerpt($content);
if (!is_wp_error($excerpt)) {
// 更新文章摘要
wp_update_post(array(
'ID' => $post_id,
'post_excerpt' => $excerpt
));
}
}
这段代码将AI写作助手集成到WordPress编辑器中，包括Gutenberg编辑器和经典编辑器。它添加了媒体按钮、Gutenberg块和AJAX处理程序，使用户可以直接在编辑界面使用AI功能。此外，它还实现了自动生成文章摘要的功能，当保存文章时，如果摘要为空，将自动使用AI生成摘要。
创建前端JavaScript文件
为了使AI写作助手在编辑器中正常工作，我们需要创建前端JavaScript文件。在插件目录下创建assets/js文件夹，并在其中创建editor.js文件，添加以下代码：
(function($) {
'use strict';
// 经典编辑器集成
$(document).ready(function() {
// 为每个编辑器按钮添加点击事件
$('.ai-writing-assistant-button').on('click', function(e) {
e.preventDefault();
var editorId = $(this).data('editor');
var editor = tinymce.get(editorId);
if (!editor) {
// 如果没有找到TinyMCE编辑器，可能是文本模式
editor = $('' + editorId);
}
// 创建模态框
var modal = $('');
var modalContent = $('');
var modalHeader = $('AI写作助手
×');
var modalBody = $('');
// 添加标签页
var tabs = $('');
var titleTab = $('');
var contentTab = $('');
var optimizeTab = $('');
var excerptTab = $('');
tabs.append(titleTab).append(contentTab).append(optimizeTab).append(excerptTab);
// 添加标签页内容
var tabContents = $('');
// 生成标题标签页
var titleTabContent = $('');
var titleForm = $('');
var titleTopicField = $('');
var titleSubmit = $('');
var titleResults = $('');
titleForm.append(titleTopicField).append(titleSubmit);
titleTabContent.append(titleForm).append(titleResults);
// 生成内容标签页
var contentTabContent = $('');
var contentForm = $('');
var contentTitleField = $('');
var contentKeywordsField = $('');
var contentLengthField = $('短中长');
var contentSubmit = $('');
var contentResults = $('');
contentForm.append(contentTitleField).append(contentKeywordsField).append(contentLengthField).append(contentSubmit);
contentTabContent.append(contentForm).append(contentResults);
// 优化内容标签页
var optimizeTabContent = $('');
var optimizeForm = $('');
var optimizeContentField = $('');
var optimizeTypeField = $('SEO优化可读性优化语气优化');
var optimizeSubmit = $('');
var optimizeResults = $('');
optimizeForm.append(optimizeContentField).append(optimizeTypeField).append(optimizeSubmit);
optimizeTabContent.append(optimizeForm).append(optimizeResults);
// 生成摘要标签页
var excerptTabContent = $('');
var excerptForm = $('');
var excerptContentField = $('');
var excerptLengthField = $('');
var excerptSubmit = $('');
var excerptResults = $('');
excerptForm.append(excerptContentField).append(excerptLengthField).append(excerptSubmit);
excerptTabContent.append(excerptForm).append(excerptResults);
tabContents.append(titleTabContent).append(contentTabContent).append(optimizeTabContent).append(excerptTabContent);
modalBody.append(tabs).append(tabContents);
modalContent.append(modalHeader).append(modalBody);
modal.append(modalContent);
$('body').append(modal);
// 显示模态框
modal.fadeIn();
// 关闭模态框
$('.ai-writing-assistant-modal-close').on('click', function() {
modal.fadeOut(function() {
modal.remove();
});
});
// 点击模态框外部关闭
$(window).on('click', function(e) {
if ($(e.target).is(modal)) {
modal.fadeOut(function() {
modal.remove();
});
}
});
// 标签页切换
$('.ai-writing-assistant-tab').on('click', function() {
var tabId = $(this).data('tab');
// 移除所有活动状态
$('.ai-writing-assistant-tab').removeClass('active');
$('.ai-writing-assistant-tab-content').removeClass('active');
// 添加活动状态
$(this).addClass('active');
$('' + tabId + '-tab').addClass('active');
});
// 生成标题
$('generate-title').on('click', function() {
var topic = $('title-topic').val();
if (!topic) {
$('title-results').('请输入主题');
return;
}
$('title-results').('生成中...');
$.ajax({
url: aiWritingAssistant.ajaxUrl,
type: 'POST',
data: {
action: 'ai_writing_assistant_generate_title',
topic: topic,
nonce: aiWritingAssistant.nonce
},
success: function(response) {
if (response.success) {
var titles = response.data.titles;
var titlesHtml = '';
for (var i = 0; i < titles.length; i++) {
titlesHtml += '';
}
titlesHtml += '';
$('title-results').(titlesHtml);
// 使用标题
$('.ai-writing-assistant-use-title').on('click', function() {
var title = decodeURIComponent($(this).data('title'));
if (editor) {
if (typeof editor.setContent === 'function') {
// TinyMCE编辑器
editor.setContent(title);
} else {
// 文本模式
editor.val(title);
}
}
modal.fadeOut(function() {
modal.remove();
});
});
} else {
$('title-results').('' + response.data.message + '');
}
},
error: function() {
$('title-results').('请求失败，请重试');
}
});
});
// 生成内容
$('generate-content').on('click', function() {
var title = $('content-title').val();
var keywords = $('content-keywords').val();
var length = $('content-length').val();
if (!title) {
$('content-results').('请输入标题');
return;
}
$('content-results').('生成中...');
$.ajax({
url: aiWritingAssistant.ajaxUrl,
type: 'POST',
data: {
action: 'ai_writing_assistant_generate_content',
title: title,
keywords: keywords,
length: length,
nonce: aiWritingAssistant.nonce
},
success: function(response) {
if (response.success) {
var content = response.data.content;
var contentHtml = '' + content.replace(/n/g, '
') + '';
contentHtml += '';
$('content-results').(contentHtml);
// 使用内容
$('.ai-writing-assistant-use-content').on('click', function() {
if (editor) {
if (typeof editor.setContent === 'function') {
// TinyMCE编辑器
editor.setContent(content);
} else {
// 文本模式
editor.val(content);
}
}
modal.fadeOut(function() {
modal.remove();
});
});
} else {
$('content-results').('' + response.data.message + '');
}
},
error: function() {
$('content-results').('请求失败，请重试');
}
});
});
// 优化内容
$('optimize-content-btn').on('click', function() {
var content = $('optimize-content').val();
var optimizationType = $('optimize-type').val();
if (!content) {
$('optimize-results').('请输入要优化的内容');
return;
}
$('optimize-results').('优化中...');
$.ajax({
url: aiWritingAssistant.ajaxUrl,
type: 'POST',
data: {
action: 'ai_writing_assistant_optimize_content',
content: content,
optimization_type: optimizationType,
nonce: aiWritingAssistant.nonce
},
success: function(response) {
if (response.success) {
var optimizedContent = response.data.content;
var contentHtml = '' + optimizedContent.replace(/n/g, '
') + '';
contentHtml += '';
$('optimize-results').(contentHtml);
// 使用优化后的内容
$('.ai-writing-assistant-use-optimized-content').on('click', function() {
if (editor) {
if (typeof editor.setContent === 'function') {
// TinyMCE编辑器
editor.setContent(optimizedContent);
} else {
// 文本模式
editor.val(optimizedContent);
}
}
modal.fadeOut(function() {
modal.remove();
});
});
} else {
$('optimize-results').('' + response.data.message + '');
}
},
error: function() {
$('optimize-results').('请求失败，请重试');
}
});
});
// 生成摘要
$('generate-excerpt').on('click', function() {
var content = $('excerpt-content').val();
var length = $('excerpt-length').val();
if (!content) {
$('excerpt-results').('请输入文章内容');
return;
}
$('excerpt-results').('生成中...');
$.ajax({
url: aiWritingAssistant.ajaxUrl,
type: 'POST',
data: {
action: 'ai_writing_assistant_generate_excerpt',
content: content,
length: length,
nonce: aiWritingAssistant.nonce
},
success: function(response) {
if (response.success) {
var excerpt = response.data.excerpt;
var excerptHtml = '' + excerpt + '';
excerptHtml += '';
$('excerpt-results').(excerptHtml);
// 使用摘要
$('.ai-writing-assistant-use-excerpt').on('click', function() {
// 设置摘要字段
$('excerpt').val(excerpt);
modal.fadeOut(function() {
modal.remove();
});
});
} else {
$('excerpt-results').('' + response.data.message + '');
}
},
error: function() {
$('excerpt-results').('请求失败，请重试');
}
});
});
});
});
})(jQuery);
这个JavaScript文件实现了AI写作助手的前端功能，包括生成标题、生成内容、优化内容和生成摘要。它创建了一个模态框，包含多个标签页，每个标签页对应一个功能。用户可以输入相关信息，然后通过AJAX请求与后端通信，获取AI生成的内容，并选择是否使用这些内容。
创建前端CSS文件
为了使AI写作助手的界面美观且易于使用，我们需要创建CSS文件。在插件目录下创建assets/css文件夹，并在其中创建editor.css文件，添加以下代码：
/ AI写作助手样式 /
.ai-writing-assistant-button {
position: relative;
margin-left: 5px;
}
.ai-writing-assistant-modal {
display: none;
position: fixed;
z-index: 100000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.ai-writing-assistant-modal-content {
background-color: fff;
margin: 5% auto;
padding: 0;
border: 1px solid ccc;
width: 80%;
max-width: 800px;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.ai-writing-assistant-modal-header {
padding: 15px;
background-color: f8f9fa;
border-bottom: 1px solid dee2e6;
border-radius: 4px 4px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.ai-writing-assistant-modal-header h2 {
margin: 0;
font-size: 18px;
color: 333;
}
.ai-writing-assistant-modal-close {
color: aaa;
font-size: 24px;
font-weight: bold;
cursor: pointer;
line-height: 1;
}
.ai-writing-assistant-modal-close:hover {
color: 000;
}
.ai-writing-assistant-modal-body {
padding: 20px;
}
.ai-writing-assistant-tabs {
display: flex;
border-bottom: 1px solid dee2e6;
margin-bottom: 20px;
}
.ai-writing-assistant-tab {
padding: 10px 15px;
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: 666;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.ai-writing-assistant-tab:hover {
color: 333;
background-color: f8f9fa;
}
.ai-writing-assistant-tab.active {
color: 0073aa;
border-bottom-color: 0073aa;
font-weight: 600;
}
.ai-writing-assistant-tab-content {
display: none;
}
.ai-writing-assistant-tab-content.active {
display: block;
}
.ai-writing-assistant-form {
margin-bottom: 20px;
}
.ai-writing-assistant-form-field {
margin-bottom: 15px;
}
.ai-writing-assistant-form-field label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: 333;
}
.ai-writing-assistant-form-field input[type="text"],
.ai-writing-assistant-form-field input[type="number"],
.ai-writing-assistant-form-field select,
.ai-writing-assistant-form-field textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid ddd;
border-radius: 4px;
font-size: 14px;
color: 333;
}
.ai-writing-assistant-form-field textarea {
resize: vertical;
}
.ai-writing-assistant-submit {
background-color: 0073aa;
color: fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.ai-writing-assistant-submit:hover {
background-color: 005a87;
}
.ai-writing-assistant-results {
margin-top: 20px;
}
.ai-writing-assistant-loading {
padding: 15px;
background-color: f8f9fa;
border-radius: 4px;
text-align: center;
color: 666;
}
.ai-writing-assistant-error {
padding: 15px;
background-color: fff;
border-left: 4px solid dc3232;
border-radius: 4px;
color: 333;
}
.ai-writing-assistant-title-list {
display: grid;
grid-gap: 10px;
}
.ai-writing-assistant-title-item {
padding: 10px;
background-color: f8f9fa;
border-radius: 4px;
}
.ai-writing-assistant-use-title {
background: none;
border: none;
color: 0073aa;
text-decoration: underline;
cursor: pointer;
font-size: 14px;
text-align: left;
width: 100%;
padding: 0;
}
.ai-writing-assistant-use-title:hover {
color: 005a87;
}
.ai-writing-assistant-generated-content,
.ai-writing-assistant-optimized-content,
.ai-writing-assistant-generated-excerpt {
padding: 15px;
background-color: f8f9fa;
border-radius: 4px;
margin-bottom: 15px;
line-height: 1.6;
}
.ai-writing-assistant-actions {
text-align: right;
}
.ai-writing-assistant-use-content,
.ai-writing-assistant-use-optimized-content,
.ai-writing-assistant-use-excerpt {
background-color: 0073aa;
color: fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.ai-writing-assistant-use-content:hover,
.ai-writing-assistant-use-optimized-content:hover,
.ai-writing-assistant-use-excerpt:hover {
background-color: 005a87;
}
/ 响应式设计 /
@media screen and (max-width: 782px) {
.ai-writing-assistant-modal-content {
width: 95%;
margin: 10% auto;
}
.ai-writing-assistant-tabs {
flex-wrap: wrap;
}
.ai-writing-assistant-tab {
flex: 1 0 50%;
text-align: center;
}
}
这个CSS文件为AI写作助手提供了美观的界面样式，包括模态框、标签页、表单字段、按钮和结果展示等元素的样式。它还包含了响应式设计，以确保在不同设备上都能正常显示和使用。
创建Gutenberg块
为了使AI写作助手与Gutenberg编辑器完全集成，我们需要创建几个Gutenberg块。在插件目录下创建blocks文件夹，并在其中创建三个子文件夹：ai-title-generator、ai-content-generator和ai-content-optimizer。每个文件夹中都需要创建block.json、index.js和editor.css文件。
首先，创建ai-title-generator/block.json文件：
{
"apiVersion": 2,
"name": "ai-writing-assistant/title-generator",
"title": "AI标题生成器",
"category": "text",
"icon": "edit",
"description": "使用AI生成文章标题",
"supports": {
"": false,
"multiple": false
},
"attributes": {
"topic": {
"type": "string",
"source": "meta",
"meta": "ai_writing_assistant_topic"
},
"titles": {
"type": "array",
"source": "meta",
"meta": "ai_writing_assistant_titles"
},
"selectedTitle": {
"type": "string",
"source": "meta",
"meta": "ai_writing_assistant_selected_title"
}
}
}
接下来，创建ai-title-generator/index.js文件：
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl, Button, Spinner, Notice } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import './editor.css';
registerBlockType('ai-writing-assistant/title-generator', {
edit: ({ attributes, setAttributes }) => {
const { topic, titles, selectedTitle } = attributes;
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const blockProps = useBlockProps();
const generateTitles = async () => {
if (!topic) {
setError(__('请输入主题', 'ai-writing-assistant'));
return;
}
setIsLoading(true);
setError(null);
try {
const response = await fetch(aiWritingAssistant.ajaxUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
action: 'ai_writing_assistant_generate_title',
topic: topic,
nonce: aiWritingAssistant.nonce
})
});
const data = await response.json();
if (data.success) {
setAttributes({ titles: data.data.titles });
} else {
setError(data.data.message);
}
} catch (err) {
setError(__('请求失败，请重试', 'ai-writing-assistant'));
} finally {
setIsLoading(false);
}
};
const selectTitle = (title) => {
setAttributes({ selectedTitle: title });
// 更新文章标题
const postTitle = document.querySelector('.editor-post-title__input');
if (postTitle) {
postTitle.value = title;
postTitle.dispatchEvent(new Event('input', { bubbles: true }));
}
};
return (
setAttributes({ topic: value })}
help={__('输入文章主题，AI将基于此生成标题', 'ai-writing-assistant')}
/>
{error && (
{error}
)}
{titles && titles.length > 0 && (
{__('生成的标题', 'ai-writing-assistant')}
{titles.map((title, index) => (
-
))}
)}
{selectedTitle && (
{__('已选择的标题', 'ai-writing-assistant')}
{selectedTitle}
)}
);
},
save: () => {
return null;
}
});
然后，创建ai-title-generator/editor.css文件：
.ai-writing-assistant-title-generator {
padding: 15px;
background-color: f8f9fa;
border-radius: 4px;
}
.ai-writing-assistant-titles ul {
list-style: none;
padding: 0;
margin: 15px 0;
}
.ai-writing-assistant-titles li {
margin-bottom: 10px;
}
.ai-writing-assistant-titles button {
width: 100%;
text-align: left;
justify-content: flex-start;
}
.ai-writing-assistant-titles button.selected {
background-color: 0073aa;
color: fff;
}
.ai-writing-assistant-selected-title {
margin-top: 20px;
padding: 15px;
background-color: fff;
border-left: 4px solid 0073aa;
border-radius: 4px;
}
.ai-writing-assistant-selected-title h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 16px;
color: 333;
}
.ai-writing-assistant-selected-title p {
margin: 0;
font-size: 16px;
font-weight: 600;
}
接下来，以类似的方式创建ai-content-generator和ai-content-optimizer块的文件。这些块将允许用户在Gutenberg编辑器中直接使用AI生成内容和优化内容。
实现Webhook集成
为了实现更高级的自动化，我们可以添加Webhook集成功能，允许AI写作助手与其他系统进行交互。在插件的主文件中添加以下代码：
// 在插件主文件中添加以下代码
// 添加Webhook设置
add_action('admin_init', 'ai_writing_assistant_webhook_settings');
function ai_writing_assistant_webhook_settings() {
// 添加Webhook设置部分
add_settings_section(
'ai_writing_assistant_webhook_section',
'Webhook设置',
'ai_writing_assistant_webhook_section_callback',
'ai_writing_assistant_settings_group'
);
add_settings_field(
'webhook_enabled',
'启用Webhook',
'ai_writing_assistant_webhook_enabled_callback',
'ai_writing_assistant_settings_group',
'ai_writing_assistant_webhook_section'
);
add_settings_field(
'webhook_url',
'Webhook URL',
'ai_writing_assistant_webhook_url_callback',
'ai_writing_assistant_settings_group',
'ai_writing_assistant_webhook_section'
);
add_settings_field(
'webhook_secret',
'Webhook密钥',
'ai_writing_assistant_webhook_secret_callback',
'ai_writing_assistant_settings_group',
'ai_writing_assistant_webhook_section'
);
add_settings_field(
'webhook_events',
'Webhook事件',
'ai_writing_assistant_webhook_events_callback',
'ai_writing_assistant_settings_group',
'ai_writing_assistant_webhook_section'
);
}
function ai_writing_assistant_webhook_section_callback() {
echo '配置Webhook以在特定事件发生时发送数据到外部系统。';
}
function ai_writing_assistant_webhook_enabled_callback() {
$settings = get_option('ai_writing_assistant_settings');
$webhook_enabled = isset($settings['webhook_enabled']) ? $settings['webhook_enabled'] : false;
$checked = $webhook_enabled ? 'checked="checked"' : '';
echo '';
}
function ai_writing_assistant_webhook_url_callback() {
$settings = get_option('ai_writing_assistant_settings');
$webhook_url = isset($settings['webhook_url']) ? $settings['webhook_url'] : '';
echo '';
echo '
输入接收Webhook的URL。
';
}
function ai_writing_assistant_webhook_secret_callback() {
$settings = get_option('ai_writing_assistant_settings');
$webhook_secret = isset($settings['webhook_secret']) ? $settings['webhook_secret'] : '';
echo '';
echo '
输入用于验证Webhook请求的密钥。
';
}
function ai_writing_assistant_web