WordPress - 仅在LT IE 9时排队脚本

Question

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

HTML中特定版本的条件:

<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->

WP中所有IE的条件:

    global $is_IE;

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

我环顾四周,主要只查找有关wp后端的条件脚本的详细信息.

有什么建议？

Answer 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_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 );

Answer 2

• 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' );

Answer 3

WordPress 4.2及更高版本的解决方案

正确的方法是应用wp_enqueue_script,因为它是JavaScripts,而不是css样式.此外,最好使用get_bloginfo('stylesheet_url')来确保它也适用于Child Themes.

/**
 * 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' ); 

Answer 4

使用从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' );
}

Answer 5

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

然后你可以用PHP搜索检测浏览器，PHP：如果是internet explorer 6、7、8或9