如何在WordPress中使用wp_enqueue_script为脚本添加id与data-name属性

嘿，这个需求我太熟悉了！WordPress自带的wp_enqueue_script函数本身确实不支持直接添加自定义ID和data属性，但咱们可以借助WordPress的钩子系统轻松搞定，具体操作分两步：

第一步：正常注册并加载你的脚本 #

首先还是用wp_enqueue_script把脚本注册到WordPress里，重点是要给它设置一个唯一的句柄（handle），后面的钩子要靠这个句柄来识别目标脚本：

function enqueue_my_custom_script() {
    wp_enqueue_script(
        'custom-main-js', // 这是咱们的脚本句柄，一定要记好
        'https://url.com/main.js',
        array(), // 脚本依赖项，没有的话留空数组即可
        '1.0.0', // 版本号，可选，用来避免浏览器缓存
        true // 是否在页面底部加载，true=页脚，false=头部
    );
}
// 前端页面加载脚本用这个钩子，后台的话换成admin_enqueue_scripts
add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

第二步：用script_loader_tag过滤器添加自定义属性 #

接下来咱们用script_loader_tag这个过滤器，专门针对刚才设置的句柄，给脚本标签加上ID和data-name属性：

function add_custom_attrs_to_script_tag( $tag, $handle ) {
    // 只处理咱们指定的脚本，避免影响其他脚本
    if ( 'custom-main-js' === $handle ) {
        // 替换原标签的开头部分，插入需要的属性
        $tag = str_replace( '<script', '<script id="customID" data-name="customDataName"', $tag );
    }
    return $tag;
}
// 优先级10，接收2个参数：原标签和脚本句柄
add_filter( 'script_loader_tag', 'add_custom_attrs_to_script_tag', 10, 2 );

额外小提示 #

• 如果你的data-name属性值需要动态生成（比如从后台选项获取），直接把customDataName换成你的动态变量就行，比如get_option('my_custom_data_name')。
• 如果是在WordPress后台（wp-admin）加载这个脚本，记得把第一步里的wp_enqueue_scripts钩子换成admin_enqueue_scripts。

内容的提问来源于stack exchange，提问作者Iván Tammaro