wp_enqueue_style必须在wp_enqueue_scripts钩子中调用,否则会因函数未加载而报fatal error或静默失效;handle需加唯一前缀防冲突,$src须为可访问url而非服务器路径,$deps和$ver不可省略。

wp_enqueue_style 必须在 wp_enqueue_scripts 钩子中调用
插件里直接写 wp_enqueue_style() 会报 Fatal error: Call to undefined function wp_enqueue_style()——函数还没加载,PHP 就先执行了。WordPress 只在 wp_enqueue_scripts 这个动作触发时才准备好资源队列系统,早于它(比如 plugins_loaded)函数不存在,晚于它(比如 wp_head)则 HTML 已开始输出,<link> 插不进去。
正确做法只有一种:
- 把
wp_enqueue_style()包进一个函数里 - 用
add_action('wp_enqueue_scripts', 'your_plugin_enqueue_styles')挂载 - 如果插件有后台页面,需额外挂
admin_enqueue_scripts钩子
handle 冲突会导致 CSS 静默失效
插件里用 'style' 或 'main-css' 当 $handle,极大概率和主题或其他插件撞名。后注册的会直接覆盖前一个,浏览器里看不到 <link> 标签,控制台也无报错,样式就是不生效。
避免方式:
- handle 加插件前缀,例如
'myplugin-admin-ui'、'myplugin-frontend-theme' - 用
wp_style_is('myplugin-frontend-theme', 'enqueued')检查是否已加载 - 若要替换主题默认样式(如
'twentytwentyfour-style'),先wp_dequeue_style('twentytwentyfour-style')再wp_enqueue_style()
$src 必须是可访问 URL,不是服务器路径
常见错误是传 __DIR__ . '/assets/css/plugin.css' 或 plugin_dir_path(__FILE__) . 'css/plugin.css',结果生成 404——WordPress 不解析服务器路径,只认浏览器能直接请求的 URL。
正确写法:
- 插件根目录 CSS:
plugin_dir_url(__FILE__) . 'plugin.css' - 插件子目录 CSS:
plugin_dir_url(__FILE__) . 'assets/css/admin.css' - 避免用
plugins_url()直接拼接,它在符号链接或某些多站点配置下可能出错
按页面条件加载 CSS 的实际判断点
插件常需只在特定页面加载 CSS,但 is_page() 在插件上下文中无效(它只对前台页面有效)。真正可用的判断依据取决于场景:
- 前台某类文章页:
is_singular('product')或is_tax('product_cat') - 后台某管理页:
get_current_screen()->id === 'toplevel_page_myplugin-settings' - REST API 请求:
defined('REST_REQUEST') && REST_REQUEST为 true 时跳过 enqueue - AJAX 请求:
defined('DOING_AJAX') && DOING_AJAX为 true 时跳过
别依赖 $_GET 或 $_SERVER['REQUEST_URI'] 做判断——URL 可被重写、缓存或代理干扰,get_current_screen() 和 WordPress 条件函数才是可靠入口。
最易被忽略的是:插件 CSS 的 $deps 和 $ver 参数不能省略。PHP 8+ 下传 null 或缺省会触发 warning;更重要的是,没声明依赖(比如 array('wp-components'))可能导致样式渲染错乱,尤其在 Gutenberg 区块环境中。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











