Elementor小部件开发：如何向content_template方法传递动态数据？

Elementor的render()方法负责前端页面渲染，而content_template()是编辑器内的预览模板，两者运行环境不同，直接通过settings.posts无法获取动态查询的文章数据，需要通过以下步骤处理：

1. 封装文章查询逻辑 #

先把文章查询的代码封装成独立方法，方便前后端复用：

private function get_target_posts() {
    $args = [
        'order'          => 'DESC',
        'posts_per_page' => 4,
        'post_status'    => 'publish', // 仅获取已发布文章
        'post_type'      => 'post'     // 指定文章类型，可根据需求修改
    ];

    $query = new \WP_Query($args);
    return $query->posts;
}

2. 优化前端渲染（render()方法） #

在render()中调用封装的方法，同时注意处理全局$post变量的上下文：

protected function render() {
    $posts = $this->get_target_posts();

    foreach ($posts as $post) :
        setup_postdata($post); // 初始化文章数据上下文，支持the_title()等模板函数
        ?>
        <!-- 自定义文章渲染结构 -->
        <div class="widget-post-item">
            <h4 class="post-title"><?php the_title(); ?></h4>
            <div class="post-excerpt"><?php the_excerpt(); ?></div>
        </div>
        <?php
    endforeach;

    wp_reset_postdata(); // 重置全局post变量，避免影响其他查询
}

3. 处理编辑器预览（content_template()方法） #

编辑器预览使用Underscore JS模板，需要将PHP查询到的文章数据转为JSON注入模板：

protected function content_template() {
    $posts = $this->get_target_posts();
    // 将文章数据转为JSON格式，注入JS模板
    $posts_json = wp_json_encode($posts);
    ?>
    <# 
        // 将JSON字符串转为JS对象
        var posts = <?php echo $posts_json; ?>;
        _.each(posts, function(post) { 
    #>
        <!-- 对应前端的渲染结构，使用Underscore语法调用文章属性 -->
        <div class="widget-post-item">
            <h4 class="post-title">{{ post.post_title }}</h4>
            <div class="post-excerpt">{{ post.post_excerpt }}</div>
        </div>
    <# }); #>
    <?php
}

关键说明 #

• setup_postdata()和wp_reset_postdata()必须配对使用，防止全局$post变量污染其他功能。
• 编辑器模板中直接使用文章对象的原始属性（如post_title、post_excerpt），因为无法调用WordPress的模板函数（如the_title()）。
• 如果需要更复杂的文章数据（如特色图片URL），可以在get_target_posts()方法中提前处理，再注入模板。

内容的提问来源于stack exchange，提问作者ronaldtgi