feat: 新增AI SEO助手插件，支持自动生成SEO内容和导航主题适配
添加完整的AI SEO助手WordPress插件，主要功能包括： - 集成Dify API自动生成SEO优化的标题、描述和关键词 - 支持导航主题的自定义字段适配 - 提供管理界面设置API和文章类型支持 - 包含前端SEO标签自动应用功能 - 添加详细的测试和调试功能
This commit is contained in:
387
AI SEO 助手/assets/admin.css
Normal file
387
AI SEO 助手/assets/admin.css
Normal file
@@ -0,0 +1,387 @@
|
||||
/* AI SEO Generator 管理界面样式 */
|
||||
|
||||
/* 主容器样式 */
|
||||
.ai-seo-meta-box {
|
||||
background: #fff;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.ai-seo-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin: -15px -15px 20px -15px;
|
||||
}
|
||||
|
||||
.ai-seo-header h4 {
|
||||
color: white !important;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#generate-seo-btn {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
padding: 8px 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#generate-seo-btn:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-color: rgba(255,255,255,0.5);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#generate-seo-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.ai-seo-loading {
|
||||
background: linear-gradient(45deg, #f0f8ff, #e6f3ff);
|
||||
border: 2px dashed #4a90e2;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
margin-bottom: 20px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.ai-seo-loading .spinner {
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
.ai-seo-loading p {
|
||||
color: #4a90e2;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 字段样式 */
|
||||
.ai-seo-field {
|
||||
background: #fafafa;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ai-seo-field:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #d1d1d1;
|
||||
}
|
||||
|
||||
.ai-seo-field label {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ai-seo-field input,
|
||||
.ai-seo-field textarea {
|
||||
border: 2px solid #e1e1e1;
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.ai-seo-field input:focus,
|
||||
.ai-seo-field textarea:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 计数器样式 */
|
||||
.ai-seo-counter {
|
||||
background: #e9ecef;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.ai-seo-counter.good {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.ai-seo-counter.warning {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
/* 复制按钮样式 */
|
||||
.copy-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 预览样式 */
|
||||
.ai-seo-preview {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.ai-seo-preview h4 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search-preview {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
border-left: 4px solid #4285f4;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
color: #1a0dab;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.preview-title:hover {
|
||||
color: #0d47a1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.preview-url {
|
||||
color: #006621;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.preview-description {
|
||||
color: #545454;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* SEO评分样式 */
|
||||
.seo-score {
|
||||
background: white;
|
||||
border: 2px solid #e1e1e1;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.seo-score h4 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.score-good {
|
||||
color: #28a745;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.score-ok {
|
||||
color: #ffc107;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.score-poor {
|
||||
color: #dc3545;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.seo-issues {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
|
||||
.seo-issues li {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 4px;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 8px;
|
||||
color: #856404;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.seo-perfect {
|
||||
background: #d4edda;
|
||||
border: 1px solid #c3e6cb;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
color: #155724;
|
||||
margin: 15px 0 0 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 提示样式 */
|
||||
.ai-seo-tips {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.ai-seo-tips h4 {
|
||||
color: white !important;
|
||||
margin-top: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ai-seo-tips ul {
|
||||
margin: 15px 0 0 20px;
|
||||
}
|
||||
|
||||
.ai-seo-tips li {
|
||||
margin-bottom: 8px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 通知样式 */
|
||||
.notice {
|
||||
border-radius: 6px;
|
||||
margin: 15px 0;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.ai-seo-header {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ai-seo-field label {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.ai-seo-counter {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置页面样式 */
|
||||
.ai-seo-info {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.ai-seo-info h2,
|
||||
.ai-seo-info h3 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ai-seo-info ul li,
|
||||
.ai-seo-info ol li {
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ai-seo-info ul li:before {
|
||||
content: "✓";
|
||||
color: #27ae60;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.ai-seo-field {
|
||||
animation: fadeInUp 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ai-seo-field {
|
||||
background: #2c3e50;
|
||||
border-color: #34495e;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.ai-seo-field input,
|
||||
.ai-seo-field textarea {
|
||||
background: #34495e;
|
||||
border-color: #4a5f7a;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.search-preview {
|
||||
background: #2c3e50;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
}
|
||||
258
AI SEO 助手/assets/admin.js
Normal file
258
AI SEO 助手/assets/admin.js
Normal file
@@ -0,0 +1,258 @@
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
/**
|
||||
* 初始化字符计数器
|
||||
*/
|
||||
function initCharCounters() {
|
||||
// 标题计数器
|
||||
$('#ai_seo_title').on('input', function() {
|
||||
updateCounter(this, '#title-counter', 60);
|
||||
updatePreview();
|
||||
}).trigger('input');
|
||||
|
||||
// 描述计数器
|
||||
$('#ai_seo_description').on('input', function() {
|
||||
updateCounter(this, '#desc-counter', 160);
|
||||
updatePreview();
|
||||
}).trigger('input');
|
||||
|
||||
// 关键词计数器
|
||||
$('#ai_seo_keywords').on('input', function() {
|
||||
updateCounter(this, '#keywords-counter', 100);
|
||||
}).trigger('input');
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新字符计数器
|
||||
*/
|
||||
function updateCounter(input, counterSelector, maxLength) {
|
||||
var length = $(input).val().length;
|
||||
var counter = $(counterSelector);
|
||||
var percentage = (length / maxLength) * 100;
|
||||
|
||||
counter.text(length + '/' + maxLength);
|
||||
|
||||
// 根据长度设置颜色
|
||||
counter.removeClass('warning good');
|
||||
if (percentage > 90) {
|
||||
counter.addClass('warning');
|
||||
} else if (percentage >= 70) {
|
||||
counter.addClass('good');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新搜索结果预览
|
||||
*/
|
||||
function updatePreview() {
|
||||
var title = $('#ai_seo_title').val() || $('#title').val() || '未设置标题';
|
||||
var description = $('#ai_seo_description').val() || '暂无描述';
|
||||
|
||||
$('#preview-title').text(title);
|
||||
$('#preview-description').text(description);
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成SEO内容
|
||||
*/
|
||||
$('#generate-seo-btn').on('click', function() {
|
||||
var button = $(this);
|
||||
var postId = $('#post_ID').val();
|
||||
|
||||
if (!postId) {
|
||||
alert('请先保存文章草稿后再生成SEO内容');
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
button.prop('disabled', true);
|
||||
$('#ai-seo-loading').show();
|
||||
$('.ai-seo-fields').css('opacity', '0.5');
|
||||
|
||||
// 发送AJAX请求
|
||||
$.ajax({
|
||||
url: aiSeoAjax.ajax_url,
|
||||
type: 'POST',
|
||||
timeout: 120000, // 设置超时时间为120秒（2分钟）
|
||||
data: {
|
||||
action: 'generate_seo_content',
|
||||
post_id: postId,
|
||||
nonce: aiSeoAjax.nonce
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success && response.data) {
|
||||
// 填充生成的内容
|
||||
if (response.data.title) {
|
||||
$('#ai_seo_title').val(response.data.title).trigger('input');
|
||||
}
|
||||
if (response.data.description) {
|
||||
$('#ai_seo_description').val(response.data.description).trigger('input');
|
||||
}
|
||||
if (response.data.keywords) {
|
||||
$('#ai_seo_keywords').val(response.data.keywords).trigger('input');
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
showNotice('SEO内容生成成功！', 'success');
|
||||
} else {
|
||||
showNotice('生成失败：' + (response.data || '未知错误'), 'error');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
var errorMessage = '请求失败：';
|
||||
if (status === 'timeout') {
|
||||
errorMessage = 'AI生成超时，请稍后重试。如果问题持续存在，请联系管理员。';
|
||||
} else if (status === 'error') {
|
||||
errorMessage = '网络错误，请检查网络连接后重试。';
|
||||
} else {
|
||||
errorMessage += error;
|
||||
}
|
||||
showNotice(errorMessage, 'error');
|
||||
},
|
||||
complete: function() {
|
||||
// 恢复界面状态
|
||||
button.prop('disabled', false);
|
||||
$('#ai-seo-loading').hide();
|
||||
$('.ai-seo-fields').css('opacity', '1');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 显示通知消息
|
||||
*/
|
||||
function showNotice(message, type) {
|
||||
var noticeClass = type === 'success' ? 'notice-success' : 'notice-error';
|
||||
var notice = $('<div class="notice ' + noticeClass + ' is-dismissible"><p>' + message + '</p></div>');
|
||||
|
||||
$('.ai-seo-meta-box').prepend(notice);
|
||||
|
||||
// 自动移除通知
|
||||
setTimeout(function() {
|
||||
notice.fadeOut(function() {
|
||||
notice.remove();
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制到剪贴板功能
|
||||
*/
|
||||
function addCopyButtons() {
|
||||
$('.ai-seo-field').each(function() {
|
||||
var field = $(this);
|
||||
var input = field.find('input, textarea');
|
||||
|
||||
if (input.length) {
|
||||
var copyBtn = $('<button type="button" class="button button-small copy-btn" title="复制到剪贴板">📋</button>');
|
||||
field.find('label').append(copyBtn);
|
||||
|
||||
copyBtn.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
|
||||
var originalText = copyBtn.text();
|
||||
copyBtn.text('✅');
|
||||
setTimeout(function() {
|
||||
copyBtn.text(originalText);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 键盘快捷键
|
||||
*/
|
||||
$(document).on('keydown', function(e) {
|
||||
// Ctrl+Shift+G 生成SEO内容
|
||||
if (e.ctrlKey && e.shiftKey && e.keyCode === 71) {
|
||||
e.preventDefault();
|
||||
$('#generate-seo-btn').click();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 自动保存功能
|
||||
*/
|
||||
var autoSaveTimeout;
|
||||
$('.ai-seo-field input, .ai-seo-field textarea').on('input', function() {
|
||||
clearTimeout(autoSaveTimeout);
|
||||
autoSaveTimeout = setTimeout(function() {
|
||||
// 这里可以添加自动保存逻辑
|
||||
console.log('Auto-saving SEO data...');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
/**
|
||||
* 验证SEO内容质量
|
||||
*/
|
||||
function validateSeoContent() {
|
||||
var title = $('#ai_seo_title').val();
|
||||
var description = $('#ai_seo_description').val();
|
||||
var keywords = $('#ai_seo_keywords').val();
|
||||
|
||||
var issues = [];
|
||||
|
||||
if (!title || title.length < 30) {
|
||||
issues.push('标题太短，建议至少30个字符');
|
||||
}
|
||||
if (title && title.length > 60) {
|
||||
issues.push('标题太长，建议不超过60个字符');
|
||||
}
|
||||
if (!description || description.length < 120) {
|
||||
issues.push('描述太短，建议至少120个字符');
|
||||
}
|
||||
if (description && description.length > 160) {
|
||||
issues.push('描述太长，建议不超过160个字符');
|
||||
}
|
||||
if (!keywords) {
|
||||
issues.push('建议添加相关关键词');
|
||||
}
|
||||
|
||||
return issues;
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示SEO质量评分
|
||||
*/
|
||||
function showSeoScore() {
|
||||
var issues = validateSeoContent();
|
||||
var score = Math.max(0, 100 - (issues.length * 20));
|
||||
|
||||
var scoreHtml = '<div class="seo-score">';
|
||||
scoreHtml += '<h4>SEO质量评分: <span class="score-' + (score >= 80 ? 'good' : score >= 60 ? 'ok' : 'poor') + '">' + score + '/100</span></h4>';
|
||||
|
||||
if (issues.length > 0) {
|
||||
scoreHtml += '<ul class="seo-issues">';
|
||||
issues.forEach(function(issue) {
|
||||
scoreHtml += '<li>⚠️ ' + issue + '</li>';
|
||||
});
|
||||
scoreHtml += '</ul>';
|
||||
} else {
|
||||
scoreHtml += '<p class="seo-perfect">✅ SEO内容质量良好！</p>';
|
||||
}
|
||||
|
||||
scoreHtml += '</div>';
|
||||
|
||||
$('.seo-score').remove();
|
||||
$('.ai-seo-tips').before(scoreHtml);
|
||||
}
|
||||
|
||||
// 初始化所有功能
|
||||
initCharCounters();
|
||||
updatePreview();
|
||||
addCopyButtons();
|
||||
|
||||
// 监听内容变化以更新评分
|
||||
$('.ai-seo-field input, .ai-seo-field textarea').on('input', function() {
|
||||
setTimeout(showSeoScore, 100);
|
||||
});
|
||||
|
||||
// 初始评分
|
||||
showSeoScore();
|
||||
|
||||
// 添加提示信息
|
||||
$('.ai-seo-header').append('<small style="color: #666; margin-left: 10px;">快捷键: Ctrl+Shift+G</small>');
|
||||
});
|
||||
Reference in New Issue
Block a user