使用SCRIPT_LOADER_TAG在<脚本>标记中添加额外参数

时间：2020-02-27 作者：Frank

我在插件中使用以下代码来排队脚本：

wp_enqueue_script( \'wpfrank-ptbw-pinit-js\', PTBW_PLUGIN_URL . \'assets/js/pinit.js\', array(\'jquery\'), \'\', true );

Thewp_enqueue_script 函数设置默认值<script> 标记输出如下：

<script type=\'text/javascript\' src=\'http://localhost/development/wp-content/plugins/pin-it-button-pinterest-widgets/assets/js/pinit.js\'></script>

要在脚本标记中添加一些额外的参数，如：

<script async defer data-pin-hover="true" src="http://localhost/development/wp-content/plugins/pin-it-button-pinterest-widgets/assets/js/pinit.js"></script>

asysnc
defer
data-pinhover="true"

如何使用wp_enqueue_script?

是否有任何钩子或操作来传递额外的参数？

非常感谢您的帮助。

3 个回复

SO网友:Chetan Vaghela

您可以使用script_loader_tag 过滤以满足您的要求。在活动主题的函数中添加以下代码。php文件。它将在脚本标记中添加额外的参数。

function add_attribute_to_script_tag($tag, $handle) {
   # add script handles to the array below
   $scripts_to_defer = array(\'wpfrank-ptbw-pinit-js\');

   foreach($scripts_to_defer as $defer_script) {
      if ($defer_script === $handle) {
         return str_replace(\' src\', \'  async defer data-pin-hover="true" src\', $tag);
      }
   }
   return $tag;
}
add_filter(\'script_loader_tag\', \'add_attribute_to_script_tag\', 10, 2);

SO网友:Sally CJ

我再次修改了答案，因为我最近注意到Twenty Twenty 开发人员使用script_loader_tag 要添加的挂钩async 和defer 到<script> 主题脚本的标记。

输入twentytwenty_theme_support() 在里面functions.php, lines #139 & #140:

$loader = new TwentyTwenty_Script_Loader();
add_filter( \'script_loader_tag\', array( $loader, \'filter_script_loader_tag\' ), 10, 2 );

英寸twentytwenty_register_scripts() 在里面functions.php, lines #208 & #209:

wp_enqueue_script( \'twentytwenty-js\', get_template_directory_uri() . \'/assets/js/index.js\', array(), $theme_version, false );
wp_script_add_data( \'twentytwenty-js\', \'async\', true );

TwentyTwenty_Script_Loader class:

public function filter_script_loader_tag( $tag, $handle ) {
    foreach ( [ \'async\', \'defer\' ] as $attr ) {
        if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
            continue;
        }
        ...
    }
    return $tag;
}

wp_script_add_data() 添加/注册自定义HTML属性（例如。async) 并使用wp_scripts()->get_data() 检查<script> 标签应与自定义HTML属性一起添加，而无需手动指定句柄（例如wpfrank-ptbw-pinit-js).

下面是一个基于上述方法的示例，其中我使用wp_script_add_data( \'<handle>\', \'html_attrs\', [ list here ] ). 此外，我正在使用PHP的DOMDocument 为了获得更精确的结果str_replace() 或preg_replace() 也可以。

add_action( \'wp_enqueue_scripts\', \'my_register_scripts\' );
function my_register_scripts() {
    wp_enqueue_script( \'wpfrank-ptbw-pinit-js\', PTBW_PLUGIN_URL . \'assets/js/pinit.js\', array( \'jquery\' ), \'\', true );
    wp_script_add_data( \'wpfrank-ptbw-pinit-js\', \'html_attrs\', [
        \'async\'          => \'async\',
        \'defer\'          => true,
        \'data-pin-hover\' => \'true\',
    ] );
}

add_filter( \'script_loader_tag\', \'my_filter_script_loader_tag\', 10, 2 );
function my_filter_script_loader_tag( $tag, $handle ) {
    $attrs = wp_scripts()->get_data( $handle, \'html_attrs\' );

    // Bail if the script doesn\'t have any registered custom HTML attrs.
    if ( empty( $attrs ) || ! is_array( $attrs ) ) {
        return $tag;
    }

    $dom = new DOMDocument;

    //$tag = mb_convert_encoding( $tag, \'HTML-ENTITIES\', \'UTF-8\' );
    $dom->loadHTML( $tag, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

    $node = $dom->getElementsByTagName( \'script\' )[0];
    foreach ( $attrs as $key => $value ) {
        $node->setAttribute( $key, $value );
    }

    return $dom->saveHTML();
}

SO网友:José Carlos

除了Chetan Vaghela answer之外，您还可以使用switch语句，仅用于性能和自定义相关目的：

function add_attribute_to_script_tag($tag, $handle) {

    switch($handle){
        case \'wpfrank-ptbw-pinit-js\': return str_replace(\' src\', \' async defer data-pin-hover="true" src\', $tag);
        default: return $tag;
    }
}
add_filter(\'script_loader_tag\', \'add_attribute_to_script_tag\', 10, 2);

小码农CODE

使用SCRIPT_LOADER_TAG在<脚本>标记中添加额外参数

相关推荐

从PHP获取数据到JavaScript以设置每个帖子在首页上的位置