网络传媒WordPress柔性内容互动体验插件开发指南

引言：为什么需要柔性内容互动体验插件

在当今网络传媒领域，用户不再满足于被动接收信息，而是渴望参与、互动和个性化体验。WordPress作为全球最流行的内容管理系统，为内容创作者提供了强大的基础平台，但在互动体验方面仍有提升空间。柔性内容互动体验插件正是为了解决这一问题而生——它能够根据用户行为、偏好和上下文，动态调整内容呈现方式，创造更加个性化和沉浸式的浏览体验。

本指南将带领您从零开始开发一个功能完整的WordPress柔性内容互动体验插件，涵盖从架构设计到代码实现的完整流程。

一、插件基础架构设计

1.1 插件文件结构规划

/*
 * 柔性内容互动体验插件 - 主文件
 * Plugin Name: 柔性内容互动体验
 * Plugin URI: https://yourwebsite.com/
 * Description: 为WordPress内容提供动态互动体验
 * Version: 1.0.0
 * Author: 您的名字
 * License: GPL v2 or later
 */

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

// 定义插件常量
define('FCIE_VERSION', '1.0.0');
define('FCIE_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('FCIE_PLUGIN_URL', plugin_dir_url(__FILE__));

// 初始化插件
add_action('plugins_loaded', 'fcie_init_plugin');

function fcie_init_plugin() {
    // 检查必要组件
    if (!function_exists('register_block_type')) {
        add_action('admin_notices', 'fcie_missing_block_editor_notice');
        return;
    }
    
    // 加载核心功能
    require_once FCIE_PLUGIN_DIR . 'includes/class-content-analyzer.php';
    require_once FCIE_PLUGIN_DIR . 'includes/class-user-interaction-tracker.php';
    require_once FCIE_PLUGIN_DIR . 'includes/class-dynamic-content-renderer.php';
    
    // 初始化组件
    new FCIE_Content_Analyzer();
    new FCIE_User_Interaction_Tracker();
    new FCIE_Dynamic_Content_Renderer();
}

1.2 数据库表设计

/**
 * 创建插件所需的数据库表
 */
function fcie_create_database_tables() {
    global $wpdb;
    
    $charset_collate = $wpdb->get_charset_collate();
    $table_name_interactions = $wpdb->prefix . 'fcie_user_interactions';
    
    // 用户互动记录表
    $sql_interactions = "CREATE TABLE IF NOT EXISTS $table_name_interactions (
        id bigint(20) NOT NULL AUTO_INCREMENT,
        user_id bigint(20) DEFAULT 0,
        post_id bigint(20) NOT NULL,
        interaction_type varchar(50) NOT NULL,
        interaction_data text,
        duration int(11) DEFAULT 0,
        created_at datetime DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        KEY user_id (user_id),
        KEY post_id (post_id),
        KEY interaction_type (interaction_type)
    ) $charset_collate;";
    
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql_interactions);
    
    // 用户偏好表
    $table_name_preferences = $wpdb->prefix . 'fcie_user_preferences';
    $sql_preferences = "CREATE TABLE IF NOT EXISTS $table_name_preferences (
        id bigint(20) NOT NULL AUTO_INCREMENT,
        user_id bigint(20) NOT NULL,
        preference_key varchar(100) NOT NULL,
        preference_value text,
        updated_at datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        UNIQUE KEY user_preference (user_id, preference_key)
    ) $charset_collate;";
    
    dbDelta($sql_preferences);
}

register_activation_hook(__FILE__, 'fcie_create_database_tables');

二、核心功能模块开发

2.1 内容分析器模块

/**
 * 内容分析器类
 * 负责分析文章内容，提取关键信息用于个性化展示
 */
class FCIE_Content_Analyzer {
    
    private $content_tags = array();
    private $reading_level = 'medium';
    private $estimated_reading_time = 0;
    
    public function __construct() {
        add_filter('the_content', array($this, 'analyze_and_enrich_content'), 5);
    }
    
    /**
     * 分析并丰富内容
     * @param string $content 原始内容
     * @return string  enriched content
     */
    public function analyze_and_enrich_content($content) {
        if (!is_single() || empty($content)) {
            return $content;
        }
        
        // 提取内容标签
        $this->extract_content_tags($content);
        
        // 计算阅读等级
        $this->calculate_reading_level($content);
        
        // 估计阅读时间
        $this->estimate_reading_time($content);
        
        // 添加互动元素
        $content = $this->add_interactive_elements($content);
        
        return $content;
    }
    
    /**
     * 从内容中提取标签
     * @param string $content 文章内容
     */
    private function extract_content_tags($content) {
        // 移除HTML标签，获取纯文本
        $text_content = wp_strip_all_tags($content);
        
        // 提取关键词（简化版，实际应使用更复杂的NLP算法）
        $words = str_word_count($text_content, 1);
        $word_frequencies = array_count_values($words);
        
        // 过滤常见词
        $common_words = array('the', 'and', 'to', 'of', 'a', 'in', 'is', 'it', 'you', 'that');
        foreach ($common_words as $common_word) {
            unset($word_frequencies[$common_word]);
        }
        
        // 获取前5个高频词作为标签
        arsort($word_frequencies);
        $this->content_tags = array_slice(array_keys($word_frequencies), 0, 5);
    }
    
    /**
     * 添加互动元素到内容中
     * @param string $content 原始内容
     * @return string 添加互动元素后的内容
     */
    private function add_interactive_elements($content) {
        // 在段落间插入互动按钮
        $paragraphs = explode('</p>', $content);
        $enhanced_paragraphs = array();
        
        foreach ($paragraphs as $index => $paragraph) {
            $enhanced_paragraphs[] = $paragraph;
            
            // 每3段添加一个互动元素
            if ($index % 3 === 2 && $index < count($paragraphs) - 1) {
                $interactive_element = $this->generate_interactive_element($index);
                $enhanced_paragraphs[] = $interactive_element;
            }
        }
        
        return implode('', $enhanced_paragraphs);
    }
    
    /**
     * 生成互动元素
     * @param int $paragraph_index 段落索引
     * @return string HTML格式的互动元素
     */
    private function generate_interactive_element($paragraph_index) {
        $element_id = 'fcie-interactive-' . $paragraph_index;
        
        return '
        <div class="fcie-interactive-element" id="' . esc_attr($element_id) . '">
            <div class="fcie-question-prompt">
                <p>这段内容对您有帮助吗？</p>
                <button class="fcie-feedback-btn" data-value="helpful" data-element="' . esc_attr($element_id) . '">有帮助</button>
                <button class="fcie-feedback-btn" data-value="neutral" data-element="' . esc_attr($element_id) . '">一般</button>
                <button class="fcie-feedback-btn" data-value="unhelpful" data-element="' . esc_attr($element_id) . '">没帮助</button>
            </div>
            <div class="fcie-feedback-response" style="display:none;">
                感谢您的反馈！
            </div>
        </div>';
    }
}

2.2 用户互动追踪模块

/**
 * 用户互动追踪类
 * 追踪用户在内容上的互动行为
 */
class FCIE_User_Interaction_Tracker {
    
    public function __construct() {
        // 前端互动追踪
        add_action('wp_enqueue_scripts', array($this, 'enqueue_tracking_scripts'));
        add_action('wp_ajax_fcie_save_interaction', array($this, 'save_interaction_ajax'));
        add_action('wp_ajax_nopriv_fcie_save_interaction', array($this, 'save_interaction_ajax'));
        
        // 阅读进度追踪
        add_action('wp_footer', array($this, 'add_scroll_tracking'));
    }
    
    /**
     * 加载追踪脚本
     */
    public function enqueue_tracking_scripts() {
        if (is_single()) {
            wp_enqueue_script(
                'fcie-tracking',
                FCIE_PLUGIN_URL . 'assets/js/tracking.js',
                array('jquery'),
                FCIE_VERSION,
                true
            );
            
            // 传递数据到JavaScript
            wp_localize_script('fcie-tracking', 'fcie_ajax', array(
                'ajax_url' => admin_url('admin-ajax.php'),
                'nonce' => wp_create_nonce('fcie_tracking_nonce'),
                'post_id' => get_the_ID(),
                'user_id' => get_current_user_id()
            ));
        }
    }
    
    /**
     * 保存互动数据（AJAX处理）
     */
    public function save_interaction_ajax() {
        // 验证nonce
        if (!wp_verify_nonce($_POST['nonce'], 'fcie_tracking_nonce')) {
            wp_die('安全验证失败');
        }
        
        global $wpdb;
        $table_name = $wpdb->prefix . 'fcie_user_interactions';
        
        $data = array(
            'user_id' => intval($_POST['user_id']),
            'post_id' => intval($_POST['post_id']),
            'interaction_type' => sanitize_text_field($_POST['interaction_type']),
            'interaction_data' => json_encode($_POST['interaction_data']),
            'duration' => intval($_POST['duration']),
            'created_at' => current_time('mysql')
        );
        
        $format = array('%d', '%d', '%s', '%s', '%d', '%s');
        
        $result = $wpdb->insert($table_name, $data, $format);
        
        if ($result) {
            wp_send_json_success(array('message' => '互动数据保存成功'));
        } else {
            wp_send_json_error(array('message' => '保存失败'));
        }
    }
    
    /**
     * 添加滚动追踪
     */
    public function add_scroll_tracking() {
        if (is_single()) {
            ?>
            <script type="text/javascript">
            jQuery(document).ready(function($) {
                var scrollTracked = false;
                var maxScroll = $(document).height() - $(window).height();
                
                $(window).scroll(function() {
                    var currentScroll = $(this).scrollTop();
                    var scrollPercentage = Math.round((currentScroll / maxScroll) * 100);
                    
                    // 每25%发送一次进度报告
                    if (scrollPercentage >= 25 && !scrollTracked) {
                        scrollTracked = true;
                        
                        $.ajax({
                            url: fcie_ajax.ajax_url,
                            type: 'POST',
                            data: {
                                action: 'fcie_save_interaction',
                                nonce: fcie_ajax.nonce,
                                user_id: fcie_ajax.user_id,
                                post_id: fcie_ajax.post_id,
                                interaction_type: 'scroll_progress',
                                interaction_data: {progress: scrollPercentage},
                                duration: 0
                            }
                        });
                        
                        // 重置标记，以便下次追踪
                        setTimeout(function() {
                            scrollTracked = false;
                        }, 1000);
                    }
                });
            });
            </script>
            <?php
        }
    }
}

三、动态内容渲染引擎

3.1 个性化内容适配

/**
 * 动态内容渲染类
 * 根据用户行为和偏好动态调整内容展示
 */
class FCIE_Dynamic_Content_Renderer {
    
    private $user_preferences = array();
    
    public function __construct() {
        add_filter('the_content', array($this, 'render_personalized_content'), 10);
        add_action('wp_enqueue_scripts', array($this, 'enqueue_dynamic_styles'));
        
        // 加载用户偏好
        $this->load_user_preferences();
    }
    
    /**
     * 加载用户偏好
     */
    private function load_user_preferences() {
        $user_id = get_current_user_id();
        
        if ($user_id) {
            global $wpdb;
            $table_name = $wpdb->prefix . 'fcie_user_preferences';
            
            $preferences = $wpdb->get_results(
                $wpdb->prepare(
                    "SELECT preference_key, preference_value FROM $table_name WHERE user_id = %d",
                    $user_id
                ),
                ARRAY_A
            );
            
            foreach ($preferences as $pref) {
                $this->user_preferences[$pref['preference_key']] = maybe_unserialize($pref['preference_value']);
            }
        }
    }
    
    /**
     * 渲染个性化内容
     * @param string $content 原始内容
     * @return string 个性化内容
     */
    public function render_personalized_content($content) {
        if (!is_single()) {
            return $content;
        }
        
        // 根据用户偏好调整内容
        $content = $this->adjust_content_based_on_preferences($content);
        
        // 添加个性化推荐
        $content = $this->add_personalized_recommendations($content);
        
        // 添加交互式目录
        $content = $this->add_interactive_toc($content);
        
        return $content;
    }
    
    /**
     * 根据用户偏好调整内容
     * @param string $content 原始内容
     * @return string 调整后的内容
     */
    private function adjust_content_based_on_preferences($content) {
        // 检查用户是否偏好简化的内容
        if (isset($this->user_preferences['content_complexity']) && 
            $this->user_preferences['content_complexity'] === 'simple') {
            
            // 简化长段落（示例逻辑）
            $paragraphs = explode('</p>', $content);
            $simplified_paragraphs = array();
            
            foreach ($paragraphs as $paragraph) {
                // 如果段落超过200字符，添加"阅读更多"折叠
                if (strlen(strip_tags($paragraph)) > 200) {
                    $paragraph_id = 'para-' . md5($paragraph);
                    $short_version = substr(strip_tags($paragraph), 0, 200) . '...';
                    
                    $simplified_paragraph = '
                    <div class="fcie-simplified-paragraph">
                        <div class="fcie-paragraph-preview">
                            ' . $short_version . '
                            <a href="#" class="fcie-read-more" data-target="' . $paragraph_id . '">阅读更多</a>
                        </div>
                        <div class="fcie-paragraph-full" id="' . $paragraph_id . '" style="display:none;">
                            ' . $paragraph . '
                        </div>
                    </div>';
                    
                    $simplified_paragraphs[] = $simplified_paragraph;
                } else {
                    $simplified_paragraphs[] = $paragraph;
                }
            }
            
            $content = implode('', $simplified_paragraphs);
        }
        
        return $content;
    }
    
    /**
     * 添加个性化推荐
     * @param string $content 原始内容
     * @return string 添加推荐后的内容
     */
    private function add_personalized_recommendations($content) {
        $recommendations = $this->generate_recommendations();
        
        if (!empty($recommendations)) {
            $recommendations_html = '
            <div class="fcie-personalized-recommendations">
                <h3>根据您的兴趣推荐</h3>
                <div class="fcie-recommendations-grid">';
            
            foreach ($recommendations as $rec) {
                $recommendations_html .= '
                <div class="fcie-recommendation-item">
                    <a href="' . get_permalink($rec->ID) . '">
                        <h4>' . get_the_title($rec->ID) . '</h4>
                        <p>' . wp_trim_words(get_the_excerpt($rec->ID), 20) . '</p>
                    </a>
                </div>';
            }
            
            $recommendations_html .= '
                </div>
            </div>';
            
            // 在文章末尾添加推荐
            $content .= $recommendations_html;
        }
        
        return $content;
    }
    
    /**
     * 生成个性化推荐
     * @return array 推荐文章数组
     */
    private function generate_recommendations() {
        $current_post_id = get_the_ID();
        $recommendations = array();
        
        // 基于用户互动历史生成推荐（简化版）
        $user_interaction_tags = $this->get_user_interaction_tags();
        
        if (!empty($user_interaction_tags)) {
            $args = array(
                'post_type' => 'post',
                'post_status' => 'publish',
                'post__not_in' => array($current_post_id),
                'tag__in' => $user_interaction_tags,
                'posts_per_page' => 3,
                'orderby' => 'rand'
            );
            
            $recommendations = get_posts($args);
        }
        
        // 如果没有基于标签的推荐，使用默认推荐
        if (empty($recommendations)) {
            $args = array(
                'post_type' => 'post',
                'post_status' => 'publish',

                'posts_per_page' => 3,
                'orderby' => 'date',
                'order' => 'DESC'
            );
            
            $recommendations = get_posts($args);
        }
        
        return $recommendations;
    }
    
    /**
     * 获取用户互动标签
     * @return array 标签ID数组
     */
    private function get_user_interaction_tags() {
        $user_id = get_current_user_id();
        if (!$user_id) return array();
        
        global $wpdb;
        $interactions_table = $wpdb->prefix . 'fcie_user_interactions';
        
        // 获取用户最近互动的文章
        $post_ids = $wpdb->get_col($wpdb->prepare(
            "SELECT DISTINCT post_id FROM $interactions_table 
             WHERE user_id = %d AND interaction_type IN ('click', 'scroll_progress', 'feedback')
             ORDER BY created_at DESC LIMIT 10",
            $user_id
        ));
        
        if (empty($post_ids)) return array();
        
        // 获取这些文章的标签
        $tag_ids = array();
        foreach ($post_ids as $post_id) {
            $post_tags = wp_get_post_tags($post_id, array('fields' => 'ids'));
            $tag_ids = array_merge($tag_ids, $post_tags);
        }
        
        // 返回出现频率最高的3个标签
        $tag_counts = array_count_values($tag_ids);
        arsort($tag_counts);
        return array_slice(array_keys($tag_counts), 0, 3);
    }
    
    /**
     * 添加交互式目录
     * @param string $content 原始内容
     * @return string 添加目录后的内容
     */
    private function add_interactive_toc($content) {
        // 提取标题
        preg_match_all('/<h([2-4])[^>]*>(.*?)</h[2-4]>/i', $content, $matches);
        
        if (count($matches[0]) < 2) return $content;
        
        // 生成目录HTML
        $toc_html = '<div class="fcie-interactive-toc">';
        $toc_html .= '<div class="fcie-toc-header">';
        $toc_html .= '<h3>文章目录</h3>';
        $toc_html .= '<button class="fcie-toc-toggle">展开</button>';
        $toc_html .= '</div>';
        $toc_html .= '<div class="fcie-toc-content" style="display:none;">';
        $toc_html .= '<ul class="fcie-toc-list">';
        
        foreach ($matches[0] as $index => $heading) {
            $level = $matches[1][$index];
            $title = strip_tags($matches[2][$index]);
            $anchor = 'fcie-heading-' . $index;
            
            // 为标题添加锚点
            $content = preg_replace(
                '/<h' . $level . '[^>]*>' . preg_quote($matches[2][$index], '/') . '</h' . $level . '>/i',
                '<h' . $level . ' id="' . $anchor . '">' . $matches[2][$index] . '</h' . $level . '>',
                $content,
                1
            );
            
            // 添加到目录
            $toc_html .= '<li class="fcie-toc-level-' . $level . '">';
            $toc_html .= '<a href="#' . $anchor . '" data-index="' . $index . '">' . $title . '</a>';
            $toc_html .= '</li>';
        }
        
        $toc_html .= '</ul></div></div>';
        
        // 在文章开头添加目录
        return $toc_html . $content;
    }
    
    /**
     * 加载动态样式
     */
    public function enqueue_dynamic_styles() {
        if (is_single()) {
            wp_enqueue_style(
                'fcie-dynamic-styles',
                FCIE_PLUGIN_URL . 'assets/css/dynamic-styles.css',
                array(),
                FCIE_VERSION
            );
            
            // 根据用户偏好添加内联样式
            $custom_css = $this->generate_custom_styles();
            wp_add_inline_style('fcie-dynamic-styles', $custom_css);
        }
    }
    
    /**
     * 生成自定义样式
     * @return string CSS样式
     */
    private function generate_custom_styles() {
        $css = '';
        
        // 根据用户偏好调整字体大小
        if (isset($this->user_preferences['font_size'])) {
            $font_size = $this->user_preferences['font_size'];
            $css .= '.entry-content { font-size: ' . esc_attr($font_size) . 'px; }';
        }
        
        // 根据用户偏好调整行高
        if (isset($this->user_preferences['line_height'])) {
            $line_height = $this->user_preferences['line_height'];
            $css .= '.entry-content p { line-height: ' . esc_attr($line_height) . '; }';
        }
        
        return $css;
    }
}

四、前端交互与用户体验优化

4.1 交互式组件JavaScript实现

/**
 * 柔性内容互动体验插件 - 前端交互脚本
 * 文件位置: assets/js/fcie-interactive.js
 */

(function($) {
    'use strict';
    
    /**
     * 初始化所有交互组件
     */
    function initInteractiveComponents() {
        // 初始化反馈按钮
        initFeedbackButtons();
        
        // 初始化阅读更多功能
        initReadMoreToggle();
        
        // 初始化目录交互
        initInteractiveTOC();
        
        // 初始化个性化设置面板
        initPersonalizationPanel();
        
        // 追踪用户阅读行为
        trackReadingBehavior();
    }
    
    /**
     * 初始化反馈按钮
     */
    function initFeedbackButtons() {
        $(document).on('click', '.fcie-feedback-btn', function(e) {
            e.preventDefault();
            
            var $button = $(this);
            var $container = $button.closest('.fcie-interactive-element');
            var feedbackValue = $button.data('value');
            var elementId = $button.data('element');
            
            // 发送反馈数据
            $.ajax({
                url: fcie_ajax.ajax_url,
                type: 'POST',
                data: {
                    action: 'fcie_save_interaction',
                    nonce: fcie_ajax.nonce,
                    user_id: fcie_ajax.user_id,
                    post_id: fcie_ajax.post_id,
                    interaction_type: 'content_feedback',
                    interaction_data: {
                        element: elementId,
                        feedback: feedbackValue,
                        timestamp: new Date().toISOString()
                    },
                    duration: 0
                },
                success: function(response) {
                    if (response.success) {
                        // 显示感谢信息
                        $container.find('.fcie-question-prompt').hide();
                        $container.find('.fcie-feedback-response').show();
                        
                        // 3秒后隐藏反馈元素
                        setTimeout(function() {
                            $container.fadeOut(300);
                        }, 3000);
                    }
                }
            });
        });
    }
    
    /**
     * 初始化阅读更多切换功能
     */
    function initReadMoreToggle() {
        $(document).on('click', '.fcie-read-more', function(e) {
            e.preventDefault();
            
            var $link = $(this);
            var targetId = $link.data('target');
            var $target = $('#' + targetId);
            
            if ($target.is(':visible')) {
                $target.slideUp(300);
                $link.text('阅读更多');
            } else {
                $target.slideDown(300);
                $link.text('收起内容');
                
                // 记录用户展开内容的行为
                $.ajax({
                    url: fcie_ajax.ajax_url,
                    type: 'POST',
                    data: {
                        action: 'fcie_save_interaction',
                        nonce: fcie_ajax.nonce,
                        user_id: fcie_ajax.user_id,
                        post_id: fcie_ajax.post_id,
                        interaction_type: 'content_expand',
                        interaction_data: {
                            paragraph_id: targetId,
                            action: 'expand'
                        },
                        duration: 0
                    }
                });
            }
        });
    }
    
    /**
     * 初始化交互式目录
     */
    function initInteractiveTOC() {
        // 目录切换
        $(document).on('click', '.fcie-toc-toggle', function() {
            var $tocContent = $(this).closest('.fcie-interactive-toc').find('.fcie-toc-content');
            var $toggleBtn = $(this);
            
            if ($tocContent.is(':visible')) {
                $tocContent.slideUp(300);
                $toggleBtn.text('展开');
            } else {
                $tocContent.slideDown(300);
                $toggleBtn.text('收起');
            }
        });
        
        // 目录点击滚动
        $(document).on('click', '.fcie-toc-list a', function(e) {
            e.preventDefault();
            
            var targetId = $(this).attr('href');
            var $target = $(targetId);
            
            if ($target.length) {
                // 平滑滚动到目标位置
                $('html, body').animate({
                    scrollTop: $target.offset().top - 100
                }, 500);
                
                // 高亮当前阅读的章节
                $('.fcie-toc-list a').removeClass('active');
                $(this).addClass('active');
                
                // 记录目录点击
                $.ajax({
                    url: fcie_ajax.ajax_url,
                    type: 'POST',
                    data: {
                        action: 'fcie_save_interaction',
                        nonce: fcie_ajax.nonce,
                        user_id: fcie_ajax.user_id,
                        post_id: fcie_ajax.post_id,
                        interaction_type: 'toc_navigation',
                        interaction_data: {
                            target: targetId,
                            title: $(this).text()
                        },
                        duration: 0
                    }
                });
            }
        });
        
        // 滚动时更新目录高亮
        $(window).scroll(function() {
            var currentPosition = $(this).scrollTop() + 150;
            var $headings = $('h2[id], h3[id], h4[id]');
            var $currentHeading = null;
            
            $headings.each(function() {
                if ($(this).offset().top <= currentPosition) {
                    $currentHeading = $(this);
                }
            });
            
            if ($currentHeading) {
                var currentId = '#' + $currentHeading.attr('id');
                $('.fcie-toc-list a').removeClass('active');
                $('.fcie-toc-list a[href="' + currentId + '"]').addClass('active');
            }
        });
    }
    
    /**
     * 初始化个性化设置面板
     */
    function initPersonalizationPanel() {
        // 创建设置面板
        var $settingsPanel = $(
            '<div id="fcie-settings-panel">' +
            '<div class="fcie-settings-header">' +
            '<h4>阅读设置</h4>' +
            '<button class="fcie-settings-close">&times;</button>' +
            '</div>' +
            '<div class="fcie-settings-content">' +
            '<div class="fcie-setting-group">' +
            '<label>字体大小</label>' +
            '<input type="range" id="fcie-font-size" min="14" max="22" value="16">' +
            '<span id="fcie-font-size-value">16px</span>' +
            '</div>' +
            '<div class="fcie-setting-group">' +
            '<label>行高</label>' +
            '<select id="fcie-line-height">' +
            '<option value="1.5">标准</option>' +
            '<option value="1.8">宽松</option>' +
            '<option value="2.0">更宽松</option>' +
            '</select>' +
            '</div>' +
            '<div class="fcie-setting-group">' +
            '<label>内容复杂度</label>' +
            '<select id="fcie-content-complexity">' +
            '<option value="simple">简化版</option>' +
            '<option value="normal" selected>标准版</option>' +
            '<option value="detailed">详细版</option>' +
            '</select>' +
            '</div>' +
            '<button id="fcie-save-settings">保存设置</button>' +
            '</div>' +
            '</div>'
        );
        
        // 创建设置按钮
        var $settingsButton = $(
            '<button id="fcie-settings-toggle" title="阅读设置">' +
            '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">' +
            '<path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>' +
            '<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>' +
            '</svg>' +
            '</button>'
        );
        
        // 添加到页面
        $('body').append($settingsPanel).append($settingsButton);
        
        // 设置面板交互
        $(document).on('click', '#fcie-settings-toggle', function() {
            $('#fcie-settings-panel').toggleClass('active');
        });
        
        $(document).on('click', '.fcie-settings-close', function() {
            $('#fcie-settings-panel').removeClass('active');
        });
        
        // 字体大小滑块
        $('#fcie-font-size').on('input', function() {
            var size = $(this).val();
            $('#fcie-font-size-value').text(size + 'px');
            $('.entry-content').css('font-size', size + 'px');
        });
        
        // 行高选择
        $('#fcie-line-height').on('change', function() {
            var lineHeight = $(this).val();
            $('.entry-content p').css('line-height', lineHeight);
        });
        
        // 保存设置
        $('#fcie-save-settings').on('click', function() {
            var settings = {
                font_size: $('#fcie-font-size').val(),
                line_height: $('#fcie-line-height').val(),
                content_complexity: $('#fcie-content-complexity').val()
            };
            
            // 保存到服务器
            $.ajax({
                url: fcie_ajax.ajax_url,
                type: 'POST',
                data: {
                    action: 'fcie_save_user_preferences',
                    nonce: fcie_ajax.nonce,
                    user_id: fcie_ajax.user_id,
                    preferences: settings
                },
                success: function(response) {
                    if (response.success) {
                        alert('设置已保存！');
                        $('#fcie-settings-panel').removeClass('active');
                        
                        // 如果改变了内容复杂度，重新加载页面
                        if (settings.content_complexity !== 'normal') {
                            location.reload();
                        }
                    }
                }
            });
        });
    }
    
    /**
     * 追踪用户阅读行为
     */
    function trackReadingBehavior() {
        var startTime = new Date();
        var activeTime = 0;
        var lastActive = startTime;
        var checkInterval;
        
        // 检测用户活动
        function updateActiveTime() {
            var now = new Date();
            var inactiveTime = now - lastActive;
            
            // 如果用户离开时间少于10秒，计入活跃时间
            if (inactiveTime < 10000) {
                activeTime += 1000; // 增加1秒活跃时间
            }
            
            // 每10秒发送一次活跃时间数据
            if (Math.floor(activeTime / 1000) % 10 === 0) {
                sendReadingData();
            }
        }
        
        // 发送阅读数据
        function sendReadingData() {
            $.ajax({