WordPress插件注册JS生效但jQuery修改元素样式无响应问题排查

问题原因定位 #

• jQuery无冲突模式限制：WordPress 内置的jQuery默认运行在无冲突（noConflict）模式下，全局作用域中$别名默认不会绑定到jQuery对象，直接使用$("h3")会抛出未定义错误，导致样式修改代码执行失败。
• 脚本执行时机过早：你的JS文件会在后台页面头部加载执行，此时页面Body内的h3元素还未完成渲染，jQuery选择器无法匹配到对应元素，修改操作自然无效。alert不需要依赖DOM元素即可执行，所以可以正常弹出。

修复方案 #

将你的JS文件代码替换为如下写法即可同时解决上述两个问题：

jQuery(document).ready(function($) {
  // 该回调内可正常使用$作为jQuery别名，且会等待DOM全部渲染完成后执行
  $("h3").css("color", "red");
  alert("Hello world");
});

如果需要优化脚本加载范围，避免在所有后台页面都加载你的脚本，可以修改入队函数，增加插件页判断逻辑，示例如下：

function wpplugin_admin_scripts($hook_suffix){
  // 这里替换为你自己的插件页对应的hook后缀
  if($hook_suffix != 'toplevel_page_your_plugin_slug') return;
  wp_enqueue_script(
    'myplugin-admin',
    WPPLUGIN_URL.'admin/js/eylonplugin-admin.js',
    ['jquery'],
    time()
  );
}
add_action('admin_enqueue_scripts', 'wpplugin_admin_scripts', 100);

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