本文详解为何直接使用相对路径引用css/js在wordpress插件中失效，并提供符合wordpress规范的解决方案：通过wp_enqueue_script()和wp_enqueue_style()安全注册并加载本地资源。
在WordPress插件开发中，直接在HTML中使用相对路径（如 <link href="bootstrap4/css/bootstrap.min.css">）引入静态资源是不可靠且不推荐的做法。原因在于：WordPress的请求入口统一为 index.php（主题根目录），而插件中的 index.php 并非Web服务器的文档根目录访问入口；浏览器发起的资源请求始终基于当前页面URL（即WordPress前端URL），而非插件文件所在物理路径。因此，上述相对路径会错误地解析为类似 https://yoursite.com/bootstrap4/css/bootstrap.min.css，而非插件目录下的真实路径，导致404。
✅ 正确做法是使用WordPress官方推荐的资源加载机制——wp_enqueue_script() 与 wp_enqueue_style()，配合 plugins_url() 函数精准定位插件内资源：
<?php
// 假设这是你的主插件文件：sw/sw.php（位于 wp-content/plugins/sw/）
function sw_add_styles_scripts() {
// ✅ 正确加载 jQuery UI（依赖 jQuery）
wp_register_script(
'sw-jquery-ui',
plugins_url('bootstrap4/other/jquery-ui.js', __FILE__),
array('jquery'),
'1.13.2', // 推荐指定版本号便于缓存管理
true // 在页脚加载
);
// ✅ 正确加载 Bootstrap JS（依赖 jQuery）
wp_register_script(
'sw-bootstrap-js',
plugins_url('bootstrap4/js/bootstrap.min.js', __FILE__),
array('jquery'),
'4.6.2',
true
);
// ✅ 加载 Bootstrap CSS（注意：不要用 get_template_directory_uri()！那是主题路径）
wp_enqueue_style(
'sw-bootstrap-css',
plugins_url('bootstrap4/css/bootstrap.min.css', __FILE__),
array(),
'4.6.2'
);
// ✅ 加载自定义CSS（路径需相对于当前 __FILE__ 所在位置）
wp_enqueue_style(
'sw-custom-css',
plugins_url('include/css/stili-custom.css', __FILE__),
array('sw-bootstrap-css'), // 可声明依赖，确保 Bootstrap 先加载
'1.0.0'
);
// ✅ 加载自定义JS文件
wp_enqueue_script(
'sw-funzioni',
plugins_url('funzioni.js', __FILE__),
array('jquery'),
'1.0.0',
true
);
wp_enqueue_script(
'sw-funzioni-tour',
plugins_url('funzioni_tour.js', __FILE__),
array('jquery'),
'1.0.0',
true
);
// 最后才实际输出已注册的脚本（顺序由依赖关系自动控制）
wp_enqueue_script('sw-jquery-ui');
wp_enqueue_script('sw-bootstrap-js');
}
add_action('wp_enqueue_scripts', 'sw_add_styles_scripts');⚠️ 关键注意事项：
- 绝对禁止使用 get_template_directory_uri() 加载插件资源：该函数返回的是当前主题目录URL，而非插件目录，会导致路径错乱（原答案中此用法有误，已修正）；
- plugins_url($path, __FILE__) 是插件内资源定位的黄金标准，__FILE__ 确保路径基准为当前插件主文件；
- 所有资源应通过 add_action('wp_enqueue_scripts', ...) 挂载，确保在WordPress生命周期正确时机注入；
- 显式声明依赖（如 array('jquery')）可避免执行顺序错误导致的 $ is not defined 等问题；
- 版本号参数（第4个参数）有助于强制刷新浏览器缓存，上线更新时务必修改。
完成配置后，清除WordPress对象缓存（如有启用）及浏览器缓存，即可看到Bootstrap组件与自定义样式正常渲染。此举不仅解决加载问题，更符合WordPress安全性、可维护性与主题兼容性最佳实践。
立即学习“前端免费学习笔记（深入）”；
