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 文件？