本文详解为何直接使用相对路径引用css/js在wordpress插件中失效，并提供符合wordpress规范的解决方案：通过wp_enqueue_script()和wp_enqueue_style()安全注册并加载本地资源。
在WordPress插件开发中，直接在HTML中使用相对路径（如 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() 函数精准定位插件内资源：
⚠️ 关键注意事项：
- 绝对禁止使用 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安全性、可维护性与主题兼容性最佳实践。
立即学习“前端免费学习笔记（深入）”；
