基于类的WordPress插件中wp_enqueue_scripts无法加载问题求助

问题概述 #

开发基于类的WordPress插件时，通过wp_enqueue_scripts钩子加载CSS/JS资源始终失败；直接在构造函数中调用资源加载方法虽能生效，但会触发WordPress的"wp_enqueue_script was called incorrectly"警告，排查3小时后找到问题根源。

错误原因分析 #

1. 资源路径类型错误：
   wp_enqueue_style和wp_enqueue_script要求传入浏览器可访问的URL路径，但代码中使用了THESIS_DIR（由plugin_dir_path()定义，返回服务器本地文件系统路径，比如/var/www/html/wp-content/plugins/thesis/），浏览器无法识别本地路径，导致资源请求404。
2. 钩子使用时机错误：
   直接在构造函数中调用thesis_scripts()，跳过了WordPress的钩子执行机制，违背WP资源加载规范，因此触发警告。

正确解决方案 #

1. 替换路径常量

将资源加载代码中的THESIS_DIR替换为THESIS_URL（由plugin_dir_url()定义，返回插件的公开URL路径，比如https://your-site.com/wp-content/plugins/thesis/）：

public function thesis_scripts()
{
    wp_enqueue_style( 'thesis-admin', THESIS_URL . "app/assets/css/thesis.admin.css", array(), null );
}

2. 按需选择钩子（可选）

如果资源是给后台管理页面使用的，应使用admin_enqueue_scripts钩子而非wp_enqueue_scripts（后者用于前端页面），调整钩子绑定代码：

public function thesis_hooks()
{
    add_action('admin_menu', array($this, 'thesis_admin_page'));
    // 后台资源加载用admin_enqueue_scripts钩子
    add_action('admin_enqueue_scripts', array($this, 'thesis_scripts'));
}

验证步骤 #

• 打开浏览器开发者工具「网络」面板，查看资源请求状态，确认路径正确、无404错误。
• 检查THESIS_URL常量输出，确保结尾包含斜杠（plugin_dir_url()会自动添加），避免路径拼接出错。

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