feat: 新增AI SEO助手插件,支持自动生成SEO内容和导航主题适配

添加完整的AI SEO助手WordPress插件,主要功能包括:
- 集成Dify API自动生成SEO优化的标题、描述和关键词
- 支持导航主题的自定义字段适配
- 提供管理界面设置API和文章类型支持
- 包含前端SEO标签自动应用功能
- 添加详细的测试和调试功能
This commit is contained in:
2025-08-13 18:52:35 +08:00
commit 1ae6823bd5
9 changed files with 2536 additions and 0 deletions

View File

@@ -0,0 +1,238 @@
<div class="ai-seo-meta-box">
<div class="ai-seo-header">
<h4>🤖 AI SEO内容生成器</h4>
<button type="button" id="generate-seo-btn" class="button button-primary">
<span class="dashicons dashicons-update"></span>
生成SEO内容
</button>
</div>
<div id="ai-seo-loading" class="ai-seo-loading" style="display: none;">
<div class="spinner is-active"></div>
<p>AI正在生成SEO内容这可能需要1-2分钟时间,请耐心等待...</p>
</div>
<?php
// 检测导航网站信息
$sites_link = get_post_meta(get_the_ID(), '_sites_link', true);
$sites_describe = get_post_meta(get_the_ID(), '_sites_sescribe', true);
$has_navigation_data = !empty($sites_link) || !empty($sites_describe);
if ($has_navigation_data): ?>
<div class="ai-seo-navigation-info">
<h4>🌐 检测到导航网站信息</h4>
<div class="navigation-data">
<?php if (!empty($sites_link)): ?>
<p><strong>网站链接:</strong> <a href="<?php echo esc_url($sites_link); ?>" target="_blank"><?php echo esc_html($sites_link); ?></a></p>
<?php endif; ?>
<?php if (!empty($sites_describe)): ?>
<p><strong>网站描述:</strong> <?php echo esc_html($sites_describe); ?></p>
<?php endif; ?>
</div>
<p class="description">✅ AI将基于以上导航信息生成针对性的SEO内容</p>
</div>
<?php endif; ?>
<div class="ai-seo-fields">
<div class="ai-seo-field">
<label for="ai_seo_title">
<strong>SEO标题 (Title)</strong>
<span class="ai-seo-counter" id="title-counter">0/60</span>
</label>
<input type="text" id="ai_seo_title" name="ai_seo_title" value="<?php echo esc_attr($seo_title); ?>" class="widefat" maxlength="60" />
<p class="description">建议长度50-60个字符</p>
</div>
<div class="ai-seo-field">
<label for="ai_seo_description">
<strong>Meta描述 (Description)</strong>
<span class="ai-seo-counter" id="desc-counter">0/160</span>
</label>
<textarea id="ai_seo_description" name="ai_seo_description" class="widefat" rows="3" maxlength="160"><?php echo esc_textarea($seo_description); ?></textarea>
<p class="description">建议长度150-160个字符</p>
</div>
<div class="ai-seo-field">
<label for="ai_seo_keywords">
<strong>关键词 (Keywords)</strong>
<span class="ai-seo-counter" id="keywords-counter">0/100</span>
</label>
<input type="text" id="ai_seo_keywords" name="ai_seo_keywords" value="<?php echo esc_attr($seo_keywords); ?>" class="widefat" maxlength="100" />
<p class="description">多个关键词用逗号分隔建议3-5个关键词</p>
</div>
</div>
<div class="ai-seo-preview">
<h4>🔍 搜索结果预览</h4>
<div class="search-preview">
<div class="preview-title" id="preview-title"><?php echo esc_html($seo_title ?: get_the_title()); ?></div>
<div class="preview-url" id="preview-url"><?php echo esc_url(get_permalink()); ?></div>
<div class="preview-description" id="preview-description"><?php echo esc_html($seo_description ?: '暂无描述'); ?></div>
</div>
</div>
<div class="ai-seo-tips">
<h4>💡 SEO优化建议</h4>
<ul>
<li>标题应包含主要关键词长度控制在50-60字符</li>
<li>描述要吸引用户点击包含关键词长度150-160字符</li>
<li>关键词要与内容相关,避免堆砌</li>
<li>定期检查和更新SEO内容以保持相关性</li>
</ul>
</div>
</div>
<style>
.ai-seo-meta-box {
padding: 15px;
}
.ai-seo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.ai-seo-header h4 {
margin: 0;
color: #333;
}
.ai-seo-navigation-info {
background: #f0f8ff;
border: 1px solid #0073aa;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
.ai-seo-navigation-info h4 {
margin: 0 0 10px 0;
color: #0073aa;
font-size: 14px;
}
.navigation-data p {
margin: 5px 0;
font-size: 13px;
}
.navigation-data strong {
color: #333;
}
.navigation-data a {
color: #0073aa;
text-decoration: none;
}
.navigation-data a:hover {
text-decoration: underline;
}
#generate-seo-btn {
display: flex;
align-items: center;
gap: 5px;
}
.ai-seo-loading {
text-align: center;
padding: 20px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 20px;
}
.ai-seo-field {
margin-bottom: 20px;
}
.ai-seo-field label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
font-weight: 600;
}
.ai-seo-counter {
font-size: 12px;
color: #666;
font-weight: normal;
}
.ai-seo-counter.warning {
color: #d63638;
}
.ai-seo-counter.good {
color: #00a32a;
}
.ai-seo-preview {
margin: 20px 0;
padding: 15px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
.ai-seo-preview h4 {
margin-top: 0;
color: #333;
}
.search-preview {
background: white;
padding: 15px;
border-radius: 3px;
font-family: arial, sans-serif;
}
.preview-title {
color: #1a0dab;
font-size: 18px;
line-height: 1.3;
margin-bottom: 5px;
cursor: pointer;
}
.preview-url {
color: #006621;
font-size: 14px;
margin-bottom: 5px;
}
.preview-description {
color: #545454;
font-size: 14px;
line-height: 1.4;
}
.ai-seo-tips {
margin-top: 20px;
padding: 15px;
background: #e7f3ff;
border: 1px solid #b3d9ff;
border-radius: 5px;
}
.ai-seo-tips h4 {
margin-top: 0;
color: #0073aa;
}
.ai-seo-tips ul {
margin: 10px 0 0 20px;
}
.ai-seo-tips li {
margin-bottom: 5px;
color: #333;
}
</style>

View File

@@ -0,0 +1,96 @@
<div class="wrap">
<h1>AI SEO Generator 设置</h1>
<form method="post" action="">
<table class="form-table">
<tr>
<th scope="row">
<label for="api_key">API Key</label>
</th>
<td>
<input type="text" id="api_key" name="api_key" value="<?php echo esc_attr($api_key); ?>" class="regular-text" />
<p class="description">输入您的Dify API Key</p>
</td>
</tr>
<tr>
<th scope="row">
<label for="api_url">API URL</label>
</th>
<td>
<input type="url" id="api_url" name="api_url" value="<?php echo esc_attr($api_url); ?>" class="regular-text" />
<p class="description">Dify API的基础URL</p>
</td>
</tr>
<tr>
<th scope="row">
<label for="supported_post_types">支持的文章类型</label>
</th>
<td>
<?php
// 获取所有公开的post类型
$all_post_types = get_post_types(array('public' => true), 'objects');
$supported_post_types = get_option('ai_seo_supported_post_types', array_keys($all_post_types));
foreach ($all_post_types as $post_type_name => $post_type_obj) {
$checked = in_array($post_type_name, $supported_post_types) ? 'checked' : '';
echo '<label style="display: block; margin-bottom: 5px;">';
echo '<input type="checkbox" name="supported_post_types[]" value="' . esc_attr($post_type_name) . '" ' . $checked . ' /> ';
echo esc_html($post_type_obj->label) . ' (' . esc_html($post_type_name) . ')';
echo '</label>';
}
?>
<p class="description">选择在哪些文章类型的编辑页面显示AI SEO Generator</p>
</td>
</tr>
</table>
<?php submit_button('保存设置'); ?>
</form>
<div class="ai-seo-info">
<h2>使用说明</h2>
<ol>
<li>在上方输入您的Dify API Key和API URL</li>
<li>编辑文章或页面时,在编辑器下方会出现"AI SEO Generator"面板</li>
<li>点击"生成SEO内容"按钮AI将自动为您生成优化的标题、描述和关键词</li>
<li>生成的内容会自动应用到页面的meta标签中</li>
</ol>
<h3>API配置</h3>
<p>请在上方配置您的API密钥和URL以使用AI生成功能。</p>
<p><strong>端点:</strong> POST /chat-messages</p>
<h3>功能特性</h3>
<ul>
<li>✅ 自动生成SEO标题</li>
<li>✅ 自动生成Meta描述</li>
<li>✅ 自动生成关键词</li>
<li>✅ 前端自动应用SEO标签</li>
<li>✅ 支持文章和页面</li>
<li>✅ AJAX异步生成</li>
</ul>
</div>
</div>
<style>
.ai-seo-info {
margin-top: 30px;
padding: 20px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
.ai-seo-info h2, .ai-seo-info h3 {
margin-top: 0;
color: #333;
}
.ai-seo-info ul, .ai-seo-info ol {
margin-left: 20px;
}
.ai-seo-info li {
margin-bottom: 5px;
}
</style>