WordPress - 仅当 LT IE 9 时将脚本排入队列

php javascript internet-explorer polyfills wordpress

2022-08-30 14:21:22

在WordPress主题中，您如何有条件地包含ie8及以下版本的脚本？这主要是为各种 html5/css3 功能应用 polyfill。我看到wp具有$is_IE变量，该变量可以用作仅包含IE脚本的条件。有没有办法只为某些版本的IE添加脚本，而不是所有版本？这对于一些HTML即条件注释来说很简单，但我想将脚本全部包含在函数文件中的同一位置。

HTML 中特定版本的条件：

WP中所有IE的条件：

    global $is_IE;

    if ( $is_IE ) {
        wp_enqueue_script( 'iepolyfill', bloginfo('stylesheet_directory').'/js/iepolyfill.min.js' );
    }

我环顾四周，主要找到有关wp后端的条件脚本的详细信息。

有什么建议吗？

答案 1

对于 WordPress 4.2+

使用wp_script_add_data将脚本包装在条件注释中：

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js' );
wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'respond', get_template_directory_uri() . '/js/respond.min.js' );
wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

只需确保在调用之前注册脚本（注册由上面处理），并且您传递给的第一个参数与您注册脚本时传递的第一个参数匹配。wp_script_add_datawp_enqueue_scriptwp_script_add_data

对于 WordPress 4.1

您现在可以使用script_loader_tag筛选器对包装在条件注释中的脚本进行排队。下面是一个示例实现：

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js', array(), '3.7.2', false );
add_filter( 'script_loader_tag', function( $tag, $handle ) {
    if ( $handle === 'html5shiv' ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );

如果要以相同的方式包含多个脚本，可以使用如下内容：

// Conditional polyfills
$conditional_scripts = array(
    'html5shiv'           => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js',
    'html5shiv-printshiv' => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js',
    'respond'             => '//cdn.jsdelivr.net/respond/1.4.2/respond.min.js'
);
foreach ( $conditional_scripts as $handle => $src ) {
    wp_enqueue_script( $handle, $src, array(), '', false );
}
add_filter( 'script_loader_tag', function( $tag, $handle ) use ( $conditional_scripts ) {
    if ( array_key_exists( $handle, $conditional_scripts ) ) {
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    }
    return $tag;
}, 10, 2 );

答案 2

每当您向WP主题或插件添加脚本时，都应使用。wp_register_script()
服务器端嗅探通常是一个坏主意，因为它不确定。
通常您希望针对缺少服务功能的浏览器，而不一定只针对IE浏览器。Modernzr是很好的脚本来做到这一点。

对于IE，条件标记工作得很好。以下是将条件标记添加到脚本中的方法，例如HTML5shiv：

global $wp_scripts;
wp_register_script( 
    'html5shiv', 
    get_bloginfo('template_url').'/assets/js/html5shiv.js', 
    array(), 
    '3.6.2'
    );
$wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );