如何为wp_add_inline_script插入的内联脚本添加defer或async属性？

其实WordPress自带的wp_add_inline_script()函数并没有直接提供添加defer/async属性的参数，但咱们可以通过钩子来实现这个需求，下面分享两种可行的方案：

方案一：用script_loader_tag钩子识别并修改内联脚本标签 #

这个方法的核心是先给你的内联脚本做个唯一标记，然后通过钩子捕获对应的<script>标签，手动加上需要的属性。

第一步：给内联脚本加唯一标识 #

调用wp_add_inline_script()的时候，在代码开头加个独特的注释，方便后续识别：

// 先加载主脚本
wp_enqueue_script( 'my-main-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );

// 添加带标识的内联脚本
$inline_code = '/* my-custom-inline-flag */
document.addEventListener("DOMContentLoaded", function() {
    // 这里是你的内联脚本逻辑
});';
wp_add_inline_script( 'my-main-script', $inline_code, 'after' );

第二步：通过钩子修改标签 #

添加script_loader_tag过滤器，检查脚本内容里的标识，给对应的标签加上defer或async：

add_filter( 'script_loader_tag', 'attach_defer_to_my_inline_script', 10, 3 );
function attach_defer_to_my_inline_script( $tag, $handle, $src ) {
    // 内联脚本的$src是空的，同时内容包含我们的标识
    if ( empty( $src ) && strpos( $tag, '/* my-custom-inline-flag */' ) !== false ) {
        // 替换成<script defer>，要async的话改成<script async>就行
        $tag = str_replace( '<script>', '<script defer>', $tag );
    }
    return $tag;
}

方案二：把内联脚本转成独立文件（更省心的方案） #

如果你的内联代码不算短，不如直接把它放到单独的JS文件里，然后用wp_enqueue_script()加载，这样就能直接给它加defer/async属性了：

传统写法（适合所有WordPress版本） #

// 加载主脚本
wp_enqueue_script( 'my-main-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );

// 加载转成独立文件的原内联脚本，依赖主脚本
wp_enqueue_script( 'my-inline-script', get_template_directory_uri() . '/js/my-inline.js', array( 'my-main-script' ), '1.0', true );

// 给这个脚本加defer属性
add_filter( 'script_loader_tag', 'add_defer_to_inline_file', 10, 3 );
function add_defer_to_inline_file( $tag, $handle, $src ) {
    if ( 'my-inline-script' === $handle ) {
        return str_replace( '<script', '<script defer', $tag );
    }
    return $tag;
}

WordPress 6.3+ 简化写法 #

从WP6.3开始，你可以直接在wp_enqueue_script()的第6个参数里指定加载策略：

wp_enqueue_script( 'my-inline-script', get_template_directory_uri() . '/js/my-inline.js', array( 'my-main-script' ), '1.0', array(
    'strategy' => 'defer', // 换成'async'就是添加async属性
) );

注意点 #

• 如果你的内联脚本依赖主脚本的执行结果，优先用defer——defer会保证脚本按加载顺序执行；而async是异步加载，可能会导致内联脚本在主脚本之前跑起来，引发错误，用的时候要格外小心。
• 方案一里的标识要足够独特，别和其他脚本的内容撞了。

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