在WP_Dependencies
类存在一个名为add_data
. 此函数用于将数据添加到WordPress加载期间排队的脚本/样式中。此函数的一个常用用法是在添加针对不同版本IE的样式表时添加条件。例如,针对IE8及更低版本:
function test_wp_print_styles() {
global $wp_styles;
wp_enqueue_style( \'test-style\', get_template_directory_uri() . \'/css/test.css\', array(), 1, \'all\' );
$wp_styles->add_data( \'test-style\', \'conditional\', \'lte ie8\' );
}
add_action( \'wp_print_styles\', \'test_wp_print_styles\' );
这将呈现为:
<!--[if lte ie8]>
<link rel=\'stylesheet\' id=\'test-style-css\' href=\'http://trunkosaurus.dev/wp-content/themes/twentyeleven/css/test.css?ver=1\' type=\'text/css\' media=\'all\' />
<![endif]-->
当我查看Core时,我看到了使用此方法的几个地方:
通过阅读该方法的使用,它似乎没有特定的用例。在里面
wp_plupload_default_settings
, 它似乎允许任意数据注入。在里面
wp_register_script
, 它似乎用于区分页眉和页脚脚本。在里面
add_inline_style
, 它用于表示应在指定样式表排队后添加的内联样式。
此函数的一个很好的用途是类似于以下代码的代码,其中您将外部脚本排队,但需要向其发送一些配置变量,其中一些来自DB:
function zdt_enqueue_add_this() {
global $wp_scripts;
wp_enqueue_script( \'zdt-add-this\', \'http://s7.addthis.com/js/250/addthis_widget.js#pubid=myidhere\' );
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "\' } };\\n";
$js .= \'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };\';
$wp_scripts->add_data( \'zdt-add-this\', \'data\', $js );
}
add_action( \'wp_enqueue_scripts\', \'zdt_enqueue_add_this\' );
这将导致:
<script type=\'text/javascript\'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @tollmanz\' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere\'></script>
请注意,这无法通过
wp_localize_script
因为
addthis_share
对象在属性中具有属性(
I did write about a somewhat hacky way around this before).
编辑:我说得不对。wp_localize_script
可以很好地处理多维数组
这种方法似乎非常有效,原因如下:
它允许您将数据附加到脚本句柄,以便它始终与脚本一起正确排队。此外,它还可以智能地取消查询脚本、脚本顺序和脚本位置它允许您使用PHP将变量发送到JS它似乎比使用wp_print_styles
打印一些任意脚本,这些脚本稍后由排队脚本执行对于这种方法,有些事情没有按预期工作,这让我很担心。其中一个问题是wp_localize_script
随着$wp_scripts->add_data
, 您可能会得到意外的结果。例如:
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "\' } };\\n";
$js .= \'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };\';
$wp_scripts->add_data( \'zdt-add-this\', \'data\', $js );
wp_localize_script( \'zdt-add-this\', \'addthis_share\', array( \'var\' => \'val\' ) );
产生:
<script type=\'text/javascript\'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @tollmanz\' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
var addthis_share = {"var":"val"};
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere\'></script>
鉴于此脚本:
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "\' } };\\n";
$js .= \'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };\';
wp_localize_script( \'zdt-add-this\', \'addthis_share\', array( \'var\' => \'val\' ) );
$wp_scripts->add_data( \'zdt-add-this\', \'data\', $js );
产生:
<script type=\'text/javascript\'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @tollmanz\' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere\'></script>
The
data
由设置的键
wp_localize_script
最终被调用覆盖
$wp_scripts->add_data
, 如果你打电话
wp_localize_script
对于同一脚本,字符串将被正确连接两次。
虽然所有这些都是打印任意脚本以便与排队脚本一起使用的一种非常方便的方法,但我认为它不应该被广泛使用,因为可能会发生冲突。我当然可以看到在个人项目中使用此功能的理由,因为这些代码不会在社区插件/主题中使用。
我还查看了Core-Trac,看看是否有任何关于函数用途的线索。我找到一张票(http://core.trac.wordpress.org/ticket/11520)(这是一部史诗般的作品),探索了添加任意JS的其他方法。因此,似乎有兴趣创建一种更好的方法来添加任意JS,但不确定是否add_data
应该是流程的一部分。
我的主要问题是:开发人员应该使用这个函数吗?在某些情况下(例如。,wp_register_script
), 这似乎是第三方不应使用的“私有”功能;然而,在其他情况下(例如。,wp_plupload_default_settings
), 在排队脚本之前注入任意JS似乎是一种非常合理的方法。
我不认为有一个“正确”的答案,但我很想听听其他开发人员的想法。我还认为,这个谜题中有一些我完全忽视了的部分,我很想听听其他人对它的看法。