WordPress中wp_upload_dir()路径被覆盖致JS文件404如何解决？

核心问题分析 #

你代码里的关键错误是没有输出$upload_base_url变量：用<?php $upload_base_url ?>只是引用变量，不会把变量值输出到HTML中，最终生成的script标签src属性实际是"/arcade-js/xxx.js"，浏览器会将这个相对路径解析为域名根目录下的路径，也就是http://localhost/arcade-js/xxx.js，自然找不到目标文件。

修正后的代码 #

将输出变量的部分改成echo输出即可：

// Single post addition of javascript for arcade game project
function wpb_hook_javascript_footer() {
    if (is_single ('317')) {

    // Get the upload directory information
    $upload_dir = wp_upload_dir();

    // Access specific information
    $upload_base_url = $upload_dir['baseurl']; // URL to the uploads directory
    $upload_path = $upload_dir['path'];         // Server path to the uploads directory
?>
        <script src="<?php echo $upload_base_url ?>/arcade-js/resources.js"></script>
        <script src="<?php echo $upload_base_url ?>/arcade-js/app.js"></script>
        <script src="<?php echo $upload_base_url ?>/arcade-js/engine.js"></script>
<?php
}
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

如果你的PHP环境启用了短标签支持，也可以用更简洁的写法：

<script src="<?= $upload_base_url ?>/arcade-js/resources.js"></script>

更规范的WordPress实践 #

推荐使用WordPress官方的wp_enqueue_script函数加载脚本，能更好地管理脚本依赖、版本控制和避免冲突，示例如下：

function enqueue_arcade_game_scripts() {
    if (is_single('317')) {
        $upload_dir = wp_upload_dir();
        $base_url = $upload_dir['baseurl'];
        
        // 按依赖顺序加载脚本，最后一个true参数表示在页脚加载
        wp_enqueue_script('arcade-resources', $base_url . '/arcade-js/resources.js', array(), false, true);
        wp_enqueue_script('arcade-app', $base_url . '/arcade-js/app.js', array('arcade-resources'), false, true);
        wp_enqueue_script('arcade-engine', $base_url . '/arcade-js/engine.js', array('arcade-app'), false, true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_arcade_game_scripts');

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