wordpress-plugins/AI SEO 助手/admin/meta-box.php

<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>