如何在Elementor中自动刷新调用POST API的WordPress短代码图片

需求背景 #

借助WPGetAPI通过POST请求调用接口返回Base64图片的WordPress短代码已正常运行，需要实现仅刷新Elementor短代码组件中的图片（而非整页刷新），且每5秒自动调用API获取新图片，现有代码无法实现该功能。

现有代码问题分析 #

<script>
var $image = <?php 
$camapi = wpgetapi_endpoint( 'levelcon2',     'test_camera_php',array('debug' => false) );
echo "<img src=",$camapi['0']['rawImage'],">"
 ?> ;
    var i = 0;
    var renew = setInterval(function(){
        document.getElementById("Image").href = $image[i]; 
        $('#refresh').load(location.href + ' #time');

    },5000);
</script>

<div class="cam_image">
<div id ="refresh">
    <div id="time">
    <?php echo $camapi['0']['rawImage']; ?>
    </div>

</div>
</div>

• PHP代码仅在页面初始加载时执行一次，定时器无法触发新的API请求
• JS逻辑错误：图片元素应修改src而非href，且$image是静态HTML字符串，不是数组，$image[i]无效
• load(location.href + ' #time') 会重新加载页面片段，但无法触发PHP重新调用API，且易受缓存影响

解决方案 #

步骤1：添加AJAX接口用于获取最新图片 #

在主题的functions.php文件中添加以下代码，创建专门的AJAX接口来触发WPGetAPI请求：

// 注册AJAX接口，支持登录/未登录用户访问
add_action('wp_ajax_get_camera_image', 'get_camera_image_callback');
add_action('wp_ajax_nopriv_get_camera_image', 'get_camera_image_callback');

function get_camera_image_callback() {
    // 调用WPGetAPI获取最新Base64图片
    $camapi = wpgetapi_endpoint('levelcon2', 'test_camera_php', array('debug' => false));
    
    if (isset($camapi[0]['rawImage'])) {
        // 返回成功响应，包含图片地址
        wp_send_json_success(array('image_src' => $camapi[0]['rawImage']));
    } else {
        // 返回错误信息
        wp_send_json_error(array('message' => '无法获取最新图片'));
    }
}

步骤2：修改短代码实现定时刷新 #

替换原短代码内容，使用AJAX定时请求新图片并更新DOM：

function camera_image_shortcode() {
    ob_start();
    // 初始加载时获取一次图片
    $camapi = wpgetapi_endpoint('levelcon2', 'test_camera_php', array('debug' => false));
    $initial_image = isset($camapi[0]['rawImage']) ? esc_attr($camapi[0]['rawImage']) : '';
    ?>
    <div class="cam_image">
        <img id="camera-real-time-image" src="<?php echo $initial_image; ?>" alt="实时摄像头图片">
    </div>

    <script>
        // 每5秒执行一次图片刷新
        setInterval(function() {
            // 调用AJAX接口获取最新图片
            fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=get_camera_image')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 更新图片的src属性，实现局部刷新
                        document.getElementById('camera-real-time-image').src = data.data.image_src;
                    }
                })
                .catch(error => console.error('图片刷新失败:', error));
        }, 5000);
    </script>
    <?php
    return ob_get_clean();
}
// 注册短代码，可在Elementor中使用[camera_image]调用
add_shortcode('camera_image', 'camera_image_shortcode');

关键说明 #

• 独立AJAX接口确保每次请求都会重新调用WPGetAPI，获取最新生成的图片
• 使用fetch API异步请求，避免整页刷新，仅更新图片元素的src属性
• 初始加载时直接渲染图片，保证页面首屏有内容，后续定时更新
• 使用esc_attr处理图片地址，符合WordPress安全规范

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