WordPress 註冊和排隊條件 (browser-specific) 的 javascript 文件？

問題描述

WP.SE 社區一直建議使用 wp_register_script 和 wp_enqueue_script 在主題/模板中添加腳本 (同樣，wp_register_style 和 wp_enqueue_style 用於樣式表) 。

這是我如何註冊和排隊我的腳本…

首先，我在 functions.php 中添加了這樣的東西

add_action('init','wpse54189_register_script');
function wpse54189_register_script(){

    //Register scripts
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'aahan_bootstrap_transition', get_template_directory_uri().'/js/bootstrap-transition.js');
    wp_register_script( 'aahan_bootstrap_carousel', get_template_directory_uri().'/js/bootstrap-carousel.js', array('aahan_bootstrap_transition'));
    wp_register_script( 'wpse54189_ajax_comment', get_template_directory_uri().'/js/no-reload-comments.js');
}

然後這樣調用它在一個模板文件 (例如 header.php) 中

<?php wp_enqueue_script( 'aahan_bootstrap_carousel' ); ?>
<?php wp_enqueue_script( 'wpse54189_ajax_comment' ); ?>

現在來説，如何註冊和排入特定瀏覽器可以識別的「條件 JavaScript 文件」？例如：

<!--[if lt IE 9]>
<script src="<?php%20echo%20get_template_directory_uri();%20?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

如何正確註冊和排隊？

PS：我使用 Reddle theme，由 Automattic 的主題搖滾者開發。而主題的 header.php 直接使用上面提到的代碼 – 即它不是入隊的。那麼這是否意味着這是唯一的辦法呢？

最佳解決方案

WP_Scripts 和 WP_Styles 類別都在 wp_enqueue_script 和 wp_enqueue_style 功能之後。如果您看看類實現 (scripts 和 styles)，那麼您將看到 WP_Scripts 類不支持任何類型的條件腳本，但是！你可以看到 WP_Styles！問題是 wp_enqueue_style 不允許您設置條件。

所以我們必須做一個小黑客：

add_filter( 'wp_enqueue_scripts', 'wpse2345_enqueue_scripts' );
function wpse2345_enqueue_scripts() {
    wp_enqueue_style( 'mystyle', 'url/of/my/style.css', array(), '1.0.0' );

    global $wp_styles;
    $wp_styles->registered['mystyle']->add_data( 'conditional', 'lt IE 9' );
}

因為所有註冊的樣式都存儲在 WP_Styles 類的 registered 字段中，所以這樣的黑客成為可能。每個註冊樣式都是_WP_Dependency 類的對象，它允許您添加額外的數據。

不幸的是，這個黑客不適用於腳本。

附加信息：我昨天晚上在 Aaron Campbell’s Essence Theme 中正在執行代碼，並注意到他正在調用瀏覽器條件腳本和樣式。

/**
 * @var WP_Scripts
 */
global $wp_scripts;
// Conditionally load this only for IE < 9
$wp_scripts->add_data( 'html5', 'conditional', 'lt IE 9' );

/**
 * @var WP_Styles
 */
global $wp_styles;
// Conditionally load this only for IE < 8
$wp_styles->add_data( 'blueprint-ie', 'conditional', 'lt IE 8' );

還有一個 ticket and patch but it’s not in core yet 。顯然，條件腳本在沒有補丁的情況下將無法正常工作，但需要注意的是，可以直接在附加到 wp_enqueue_scripts 操作的函數中使用 add_data 方法。

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 註冊和排隊條件 (browser-specific) 的 javascript 文件？