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

Question

在 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 后端条件脚本的详细信息。

有什么建议么？

score 73 · Accepted Answer

对于 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_data（注册由wp_enqueue_script上面处理），并且您传递给wp_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 );

score 24 · Accepted Answer

wp_register_script()每当您将脚本添加到您的 WP 主题或插件时，您都应该使用它。
服务器端嗅探通常是个坏主意，因为它不确定。
通常您希望针对缺乏某些功能的浏览器，不一定只针对 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' );

score 8 · Accepted Answer

WordPress 4.2 及以上版本的解决方案

正确的方法是应用 wp_enqueue_script，因为它在这里是 JavaScript，而不是 css 样式。此外，最好使用 get_bloginfo('stylesheet_url') 来确保这也适用于子主题。

/**
 * IE Fallbacks
 */

function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', get_bloginfo('stylesheet_url'). '/js/html5shiv.min.js', __FILE__, false, '3.7.2' );
    wp_enqueue_script( 'ie_html5shiv');
    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_script( 'ie_respond', get_bloginfo('stylesheet_url'). '/js/respond.min.js', __FILE__, false, '1.4.2' );
    wp_enqueue_script( 'ie_respond');
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );

score 8 · Accepted Answer

使用从 CDN 加载的脚本更新 WordPress 4.7.3：

    add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );
function load_IE_fallback() {
    wp_register_script( 'ie_html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js', '', '3.7.3', false );
    wp_register_script( 'ie_respond', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '1.4.2', false );

    wp_enqueue_script( 'ie_html5shiv');
    wp_enqueue_script( 'ie_respond');

    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );    
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );
}

score 2 · Accepted Answer

最好的方法是将脚本排入队列，然后使用 wp_style_add_data() 放置条件。这种方法被官方主题使用，比如二十三

有一个与此类似的答案，但如果条件错误，他会添加额外的内容。

wp_register_style( 'ie_html5shiv', get_template_directory_uri() . '/js/html5shiv.js' );
    wp_enqueue_style( 'ie_html5shiv');
    wp_style_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_style( 'ie_respond', get_template_directory_uri() . '/js/respond.min.js' );
    wp_enqueue_style( 'ie_respond');
    wp_style_add_data( 'ie_respond', 'conditional', 'lt IE 9' );

score 1 · Accepted Answer

由于 wordpress 是一个 PHP 脚本，它可以通过 $_SERVER 访问服务器变量

然后你可以搜索检测浏览器 PHP, PHP: If internet explorer 6, 7, 8 , or 9

score 1 · Accepted Answer

尝试使用wp_style_add_data()功能（官方在二十三和二十四主题中使用：

wp_enqueue_style( 'iepolyfill', bloginfo( 'stylesheet_directory' ) . '/js/iepolyfill.min.js' );
wp_style_add_data( 'iepolyfill', 'conditional', 'if lt IE 9' );

更新：由于 WordPress >= 4.2.0 有一个以相同方式使用的函数。它被称为：

wp_script_add_data()

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

7 回答 7

Related

Reference