如何通过wp_enqueue_script实现含变量的动态脚本？

问题根源 #

直接在HTML中拼接<script>标签的写法违反了WordPress脚本加载规范，因此触发Scripts must be registered/enqueued via wp_enqueue_script错误。wp_enqueue_script不仅用于导入外部脚本文件，还可配合wp_localize_script实现PHP动态变量向前端JS的安全传递。

具体实现步骤 #

1. 创建独立JS文件
   在主题或插件的js目录下新建custom-mts-script.js，写入以下内容：

   (function($) {
       $(document).ready(function() {
           // 使用wp_localize_script传递的全局变量
           if (typeof mtsChkData !== 'undefined') {
               $MTS.openChk({
                   url: mtsChkData.url,
                   mode: mtsChkData.mode
               });
           }
       });
   })(jQuery);
   

2. PHP中注册脚本并传递变量
   在主题functions.php或插件主文件中添加代码：

   function enqueue_custom_mts_script() {
       // 注册并加载脚本文件
       wp_enqueue_script(
           'custom-mts-script', // 脚本唯一标识
           get_template_directory_uri() . '/js/custom-mts-script.js', // 脚本路径
           array('jquery'), // 依赖的脚本（如jQuery）
           '1.0', // 版本号
           true // 设为true在页脚加载，优化页面渲染
       );
   
       // 定义需要传递的动态变量
       $mts_data = array(
           'url' => esc_url($url), // 你的动态URL变量
           'mode' => 'automatic'
       );
   
       // 将PHP变量转为前端可访问的全局变量mtsChkData
       wp_localize_script('custom-mts-script', 'mtsChkData', $mts_data);
   }
   add_action('wp_enqueue_scripts', 'enqueue_custom_mts_script');
   

3. 移除旧代码
   删除之前直接在HTML中拼接<script>的代码，避免重复触发规范报错。

核心注意事项 #

• wp_localize_script是关键：它会在你加载的脚本前输出一个合法的<script>标签，将PHP变量转化为前端全局变量，既符合WordPress规范，又能安全传递动态内容。
• 脚本依赖声明：如果$MTS对象依赖jQuery，必须在wp_enqueue_script的第三个参数中声明array('jquery')，保证脚本加载顺序正确。
• 安全处理变量：始终用esc_url()处理URL这类动态内容，避免XSS安全漏洞。

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