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 檔案？