README

助手功能，用于在WordPress主题中使用以下<script>标签属性排队脚本，因为WordPress不支持为wp_register_script()或wp_enqueue_script()使用这些属性

• async
• defer
• nomodule
• type="module"

WordPress没有提供一种默认方式来排队带有上述属性的脚本。此包

• 添加了一个script_loader_tag过滤器，使您可以通过要排队的脚本名称来设置async和defer属性。
• 添加了一个update_script_tag()函数，以便您在无法控制脚本所使用的handle名称时，可以控制脚本如何加载。

安装

您可以使用Composer安装此包

composer require mindkomm/theme-lib-script-loader-tags

使用方法

使用名称后缀

将以下任何后缀追加到您的脚本名称，以自动设置属性

• |async用于async属性
• |defer用于defer属性
• |nomodule用于nomodule属性
• |module用于type="module"属性

add_action( 'wp_enqueue_scripts', function() {
    // Load Picturefill asynchronously.
    wp_enqueue_script(
        'js-picturefill|async',
        get_theme_file_uri( 'build/js/picturefill.js' )
    );
} );

这将产生以下输出

<script type="text/javascript" async src="build/js/picturefill.js"></script>

也可以连锁多个后缀。

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script(
        'js-app|module|async',
        get_theme_file_uri( 'build/js/app.js' )
    );
} );

使用函数

您可以使用update_script_tag()函数设置一个添加属性的过滤器。

add_action( 'wp_enqueue_scripts', function() {
    // Load Picturefill asynchronously.
    wp_enqueue_script(
        'js-picturefill',
        get_theme_file_uri( 'build/js/picturefill.js' )
    );

    update_script_tag( 'js-picturefill', 'async' );
} );

如果传递一个数组，还可以添加多个handle和/或属性

// Multiple attributes.
update_script_tag( 'js-app', [ 'async', 'module' ] );

// Multiple handles.
update_script_tag( [ 'js-frontpage', 'js-app' ], 'async' );

此函数很有用

• 如果您想更改您没有排队的现有脚本的加载方法。
• 如果您使用wp_register_script()，您不应向脚本handle添加后缀。

支持

这是我们用于开发WordPress主题的库。您可以自由使用它，但目前我们不提供任何支持。