WordPress插件开发：JS类中alert弹窗无法触发的原因排查

1. PHP代码存在语法错误 #

你的Test类内部直接放置了$test = new Test();实例化语句，这违反PHP类定义规则——类内部只能声明属性和方法，不能直接执行实例化逻辑。这会导致插件初始化失败，wp_enqueue_scripts钩子未被注册，JS脚本根本不会被加载到页面中。

修复代码：将实例化代码移至类外部：

<?php
/*
Plugin Name: Test
Description: test plugin
Version: 1.0
Author: Jarda
*/

class Test{
    function __construct(){
        add_action('wp_enqueue_scripts', array($this, 'startMyScripts'));
    }

    function startMyScripts(){
        wp_enqueue_script( 'testScript', plugin_dir_url( __FILE__ ) . '/build/index.js' );
    }
}
// 将实例化语句移到类定义外
$test = new Test();

2. 加载了未编译的ES6模块代码 #

你使用@wordpress/scripts工具处理JS代码，该工具会将src目录下的ES6+代码（包含import/export语法）编译打包为浏览器兼容的JS文件，默认输出到build/index.js。但你当前直接加载了/src/index.js，浏览器不支持原生解析import语句（未设置type="module"），会导致脚本解析失败，无法执行到alert逻辑。

修复步骤：

• 在插件目录下执行打包命令：

  npm run build
  

• 修改startMyScripts方法中的脚本路径，指向编译后的文件：

  function startMyScripts(){
      wp_enqueue_script( 
          'testScript', 
          plugin_dir_url( __FILE__ ) . '/build/index.js',
          array(), // 依赖项，无依赖则留空
          '1.0', // 版本号，用于避免浏览器缓存
          true // 可选：设置为true将脚本放在页面底部加载
      );
  }
  

3. 额外验证步骤 #

• 确认插件已在WordPress后台正常激活，无PHP报错。
• 打开浏览器开发者工具（F12），查看**控制台（Console）**标签，检查是否存在JS语法错误或加载失败提示。
• 在**网络（Network）**标签中筛选JS文件，确认build/index.js已成功加载（状态码为200）。

内容的提问来源于stack exchange，提问作者Jaroslav Bartoš