开发WordPress插件遇CSS文件404错误，求技术解决

核心问题原因 #

wp_enqueue_style 第二个参数要求传入浏览器可直接访问的URL地址，但你使用 __DIR__ 获取的是服务器本地文件系统路径（例如 /Users/xxx/Sites/wp-content/plugins/your-plugin/css/main.css）。浏览器无法识别本地文件路径，因此请求会返回404。而 echo readfile(__DIR__.'/css/main.css') 能正常输出是因为PHP在服务器端直接读取本地文件，和浏览器请求的路径逻辑完全无关。

解决步骤 #

1. 替换路径为插件URL
   使用WordPress内置的 plugin_dir_url(__FILE__) 函数获取插件目录的完整URL，修改代码如下：

   function callback_for_setting_up_scripts() {
       wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css', null, null);
       wp_enqueue_style('main-sincoe-style', plugin_dir_url(__FILE__) . 'css/main.css', null, null);
   }
   
   add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
   

   注：wp_enqueue_style 参数顺序为（handle, src, deps, ver, media），若习惯PHP8命名参数，也可保留 ver:null 写法。

2. 验证路径正确性
   修改后刷新页面，查看源码中对应 link 标签的 href 属性，确认其为类似 http://your-site/wp-content/plugins/your-plugin/css/main.css 的可访问URL，直接访问该URL应能看到CSS内容。

3. Mac权限排查（若上述步骤无效）

   • 打开终端进入插件目录，执行 chmod -R 755 ./css，确保文件夹及文件具备服务器可读权限。
   • 若使用MAMP等本地服务器，可执行 chown -R _www:_www ./css（根据服务器环境调整用户组），确保文件所有者与Web服务器进程一致。

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