如何在WordPress本地化脚本中添加自定义注释（避免生成新脚本）

问题 #

我希望在页面源码的本地化脚本块中添加自定义注释，现有代码如下：

public function front_scripts() {

    // Make sure that the GA tracking code is being included
    if ( 'on' === $GLOBALS['WP_MyPluginOne']->settings->get_option( 'install_ga_code', 'wp-MyPluginOne-profile', 'off' ) ) {

        global $current_user;

        $roles = $current_user->roles;

        if ( ! isset( $roles[0] ) or ! in_array( $roles[0], $GLOBALS['WP_MyPluginOne']->settings->get_option( 'exclude_users_tracking', 'wp-MyPluginOne-profile', array() ) ) ) {

            wp_enqueue_script( 'MyPluginOne-events-tracking', plugins_url( 'assets/js/MyPluginOne-events-tracking.min.js', __DIR__ ), array( 'jquery' ) );
            add_filter( 'script_loader_tag', array( $this, 'add_script_comment_to_tracking_min' ), 10, 3 );
            wp_localize_script(
                'MyPluginOne-events-tracking',
                'MyPluginOne_events_tracking',
                array(
                    'ajaxurl'            => admin_url( 'admin-ajax.php' ),
                    'tracking_mode'      => MyPluginOne_TRACKING_MODE,
                    'ga_mode'            => method_exists( 'WPMyPluginOne_Utils', 'get_ga_mode' ) ? WPMyPluginOne_Utils::get_ga_mode() : 'ga3',
                    'tracking_code'      => WP_MyPluginOne_FUNCTIONS::get_UA_code(),
                    'is_track_user'      => MyPluginOne_is_track_user(),
                    'root_domain'        => $this->get_root_domain(),
                    'affiliate_link'     => $GLOBALS['WP_MyPluginOne']->settings->get_option( 'affiliate_link_path', 'wp-MyPluginOne-events-tracking', '' ),
                    'download_extension' => $GLOBALS['WP_MyPluginOne']->settings->get_option( 'file_extension', 'wp-MyPluginOne-events-tracking', 'zip|mp3*|mpe*g|pdf|docx*|pptx*|xlsx*|rar*' ),
                    'anchor_tracking'    => $GLOBALS['WP_MyPluginOne']->settings->get_option( 'anchor_tracking', 'wp-MyPluginOne-events-tracking' ),
                )
            );
        }
    }
}

期望的注释显示效果如下（注释要和本地化变量在同一个脚本块里）：

<script id="MyPluginOne-events-tracking-js-extra">
/* the comment to be shown. */
var MyPluginOne_events_tracking = {"ajaxurl":"http:\/\/MyPluginOne-github.local\/wp-admin\/admin-ajax.php","tracking_mode":"gtag","ga_mode":"ga4","tracking_code":"G-PF9VK8TRF6","is_track_user":"1","root_domain":"MyPluginOne-github.local","affiliate_link":[{"path":"https:\/\/wpbrigade.com\/?edd_action=add_to_cart&download_id=1835&edd_options%5Bprice_id%5D=4&_gl=1*bzfdf6*_ga*ODA1Mzc5NjgyLjE3MDM2ODA1MzM.*_ga_YCW7CRBRMF*MTcwNDM2NjA2Ny4xMi4wLjE3MDQzNjYxMTkuOC4wLjA.","label":"test"}],"download_extension":"zip|mp3*|mpe*g|pdf|docx*|pptx*|xlsx*|rar*","anchor_tracking":"on"};
</script>

我尝试用wp_script_add_data添加注释，但会生成额外的独立脚本块，不符合需求：

$comment = "Your comment here";
wp_script_add_data('MyPluginOne-events-tracking', 'data', $comment);

解决方案 #

使用WordPress官方的wp_add_inline_script方法，将注释作为前置内容插入到目标脚本的关联块中，即可实现注释与本地化变量同块的效果。

修改步骤 #

1. 移除之前的wp_script_add_data调用。
2. 在wp_localize_script之后添加以下代码：

// 自定义注释内容
$custom_comment = '/* the comment to be shown. */';
// 将注释插入到目标脚本的关联块顶部
wp_add_inline_script('MyPluginOne-events-tracking', $custom_comment, 'before');

完整修改后的代码 #

public function front_scripts() {

    // Make sure that the GA tracking code is being included
    if ( 'on' === $GLOBALS['WP_MyPluginOne']->settings->get_option( 'install_ga_code', 'wp-MyPluginOne-profile', 'off' ) ) {

        global $current_user;

        $roles = $current_user->roles;

        if ( ! isset( $roles[0] ) or ! in_array( $roles[0], $GLOBALS['WP_MyPluginOne']->settings->get_option( 'exclude_users_tracking', 'wp-MyPluginOne-profile', array() ) ) ) {

            wp_enqueue_script( 'MyPluginOne-events-tracking', plugins_url( 'assets/js/MyPluginOne-events-tracking.min.js', __DIR__ ), array( 'jquery' ) );
            add_filter( 'script_loader_tag', array( $this, 'add_script_comment_to_tracking_min' ), 10, 3 );
            wp_localize_script(
                'MyPluginOne-events-tracking',
                'MyPluginOne_events_tracking',
                array(
                    'ajaxurl'            => admin_url( 'admin-ajax.php' ),
                    'tracking_mode'      => MyPluginOne_TRACKING_MODE,
                    'ga_mode'            => method_exists( 'WPMyPluginOne_Utils', 'get_ga_mode' ) ? WPMyPluginOne_Utils::get_ga_mode() : 'ga3',
                    'tracking_code'      => WP_MyPluginOne_FUNCTIONS::get_UA_code(),
                    'is_track_user'      => MyPluginOne_is_track_user(),
                    'root_domain'        => $this->get_root_domain(),
                    'affiliate_link'     => $GLOBALS['WP_MyPluginOne']->settings->get_option( 'affiliate_link_path', 'wp-MyPluginOne-events-tracking', '' ),
                    'download_extension' => $GLOBALS['WP_MyPluginOne']->settings->get_option( 'file_extension', 'wp-MyPluginOne-events-tracking', 'zip|mp3*|mpe*g|pdf|docx*|pptx*|xlsx*|rar*' ),
                    'anchor_tracking'    => $GLOBALS['WP_MyPluginOne']->settings->get_option( 'anchor_tracking', 'wp-MyPluginOne-events-tracking' ),
                )
            );

            // 添加自定义注释到本地化脚本块内
            $custom_comment = '/* the comment to be shown. */';
            wp_add_inline_script('MyPluginOne-events-tracking', $custom_comment, 'before');
        }
    }
}

原理说明 #

• wp_add_inline_script的第三个参数'before'，会将指定内容插入到目标脚本的关联额外脚本块（即*-js-extra）的最顶部，和wp_localize_script生成的变量处于同一个<script>标签内。
• 这种方法完全遵循WordPress的API规范，不会产生额外的独立脚本标签，也不会破坏原有脚本的加载逻辑。

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