WordPress实现指定div#show局部自动刷新求助

你的问题出在$('#show').load('#show')这个写法上——jQuery的load()方法需要传入一个服务器端资源的URL来获取最新内容，而不是页面内的元素选择器。直接用选择器只会把当前页面里的#show内容再复制一遍，根本不会请求服务器获取最新的赛事数据，所以看起来没效果。

下面给你两种可行的解决方案，推荐第二种更符合WordPress开发规范：

方案一：创建独立的PHP文件返回短代码内容 #

1. 创建刷新用的PHP文件 #

在你的WordPress主题目录下，新建一个refresh-game-widget.php文件，内容如下：

<?php
// 加载WordPress核心环境，确保能调用do_shortcode
require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');

// 直接输出短代码渲染后的内容
echo do_shortcode('[game-widget]');
?>

注意：如果你的WordPress安装在子目录里，需要调整wp-load.php的路径，比如/subfolder/wp-load.php。

2. 修改前端JS脚本 #

把你原来的脚本替换成下面的代码，确保jQuery已正确加载（WordPress默认会加载jQuery，但需要注意noConflict模式）：

jQuery(document).ready(function($) {
    // 设置刷新间隔，30000 = 30秒，可按需调整
    const refreshTime = 30000;

    // 定义刷新函数
    function updateGameWidget() {
        // 请求刚才创建的PHP文件，添加时间戳避免浏览器缓存旧内容
        $('#show').load('/wp-content/themes/你的主题文件夹名/refresh-game-widget.php?' + new Date().getTime(), function(response, status, xhr) {
            // 可选：处理加载失败的情况
            if (status === 'error') {
                console.log('赛事数据加载失败：', xhr.status, xhr.statusText);
            }
        });
    }

    // 页面加载完成后先执行一次（可选，确保首次加载和AJAX内容一致）
    updateGameWidget();

    // 设置定时自动刷新
    setInterval(updateGameWidget, refreshTime);
});

记得把你的主题文件夹名替换成你实际的主题目录名称，比如twentytwentyfour。

方案二：使用WordPress内置AJAX API（推荐） #

这种方法不需要额外创建PHP文件，利用WordPress自带的AJAX机制，更安全规范：

1. 在主题functions.php中添加AJAX处理函数 #

打开主题的functions.php文件，追加以下代码：

// 处理赛事部件的AJAX刷新请求
function refresh_game_widget_callback() {
    // 直接输出短代码渲染后的内容
    echo do_shortcode('[game-widget]');
    // 必须调用wp_die()终止输出，避免返回多余内容
    wp_die();
}

// 注册AJAX动作，支持登录和未登录用户访问
add_action('wp_ajax_refresh_game_widget', 'refresh_game_widget_callback');
add_action('wp_ajax_nopriv_refresh_game_widget', 'refresh_game_widget_callback');

2. 前端JS脚本 #

替换原来的脚本为：

jQuery(document).ready(function($) {
    const refreshTime = 30000;

    function updateGameWidget() {
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                // 对应functions.php里注册的AJAX动作名
                action: 'refresh_game_widget'
            },
            success: function(response) {
                // 把最新内容替换到#show容器里
                $('#show').html(response);
            },
            error: function(xhr, status, error) {
                console.log('AJAX请求失败：', error);
            }
        });
    }

    updateGameWidget();
    setInterval(updateGameWidget, refreshTime);
});

额外注意事项 #

• 如果你的主题没有加载jQuery，需要在functions.php里添加加载代码（不过WordPress默认主题都会加载）：

  function enqueue_jquery() {
      wp_enqueue_script('jquery');
  }
  add_action('wp_enqueue_scripts', 'enqueue_jquery');
  

• 测试时可以把refreshTime改成5000（5秒），方便快速看到效果，没问题再改回30秒。
• 如果遇到跨域或者权限问题，检查你的服务器是否限制了PHP文件的访问，或者WordPress的权限设置。

内容的提问来源于stack exchange，提问作者paul lorenz buscano