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過濾器將條件注釋中包含的腳本排入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主題或插件添加腳本時，都應該使用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' );

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

執行此操作的最佳方法是將腳本排入隊列，然后使用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' );

Answer 6

由於wordpress是一個PHP腳本，它可以通過$ _SERVER訪問服務器變量

然后你可以用PHP， PHP搜索檢測瀏覽器：如果是Internet Explorer 6,7,8或9

Answer 7

嘗試使用wp_style_add_data()函數（在正式使用twentythirteen和twentyfourteen主題：

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()