WordPress自定义主题：JSON文件与JavaScript代码对接失败求助

1. 用WordPress内置函数传递JSON路径（最可靠方案） #

WordPress有严格的资源加载规范，直接硬写路径容易踩坑，通过wp_localize_script把JSON路径注入全局变量是标准做法：

在主题的functions.php中添加：

function enqueue_custom_theme_scripts() {
    // 注册并加载你的JS文件
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true );
    
    // 将JSON文件的绝对URL传递给JS全局变量
    wp_localize_script( 'custom-script', 'ThemeVars', array(
        'jsonPath' => get_template_directory_uri() . '/your-path/data.json'
    ) );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_theme_scripts' );

然后在JS文件里用全局变量发起请求：

fetch(ThemeVars.jsonPath)
    .then(res => {
        if (!res.ok) throw new Error('请求失败');
        return res.json();
    })
    .then(data => {
        // 处理JSON数据
        console.log(data);
    })
    .catch(err => console.error('加载JSON出错:', err));

2. 排查缓存问题 #

路径正确但加载失败时，缓存是高频诱因：

• 浏览器强制刷新（Ctrl+F5）清除本地缓存
• 暂时禁用WordPress缓存插件（如WP Rocket、W3 Total Cache）
• 修改JS文件版本号（上面PHP代码里的'1.0'改成'1.1'），强制WordPress加载新文件

3. 检查JSON文件访问权限 #

WordPress的.htaccess可能限制了JSON文件的直接访问，检查主题目录下的.htaccess，如果有类似规则：

<Files ".json">
    Order Allow,Deny
    Deny from all
</Files>

修改为允许访问：

<FilesMatch "\.(json)$">
    Order Allow,Deny
    Allow from all
</FilesMatch>

4. PHP直接读取JSON注入JS（绕开前端请求） #

如果前端请求始终有问题，可在PHP中直接读取JSON内容，注入页面：
在主题模板文件（如footer.php）中添加：

<?php
$json_content = file_get_contents(get_template_directory() . '/your-path/data.json');
?>
<script>
const siteData = <?php echo $json_content; ?>;
// 直接使用siteData变量
console.log(siteData);
</script>

内容的提问来源于stack exchange，提问作者ubaid ur rehman