内的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_Styles->add_inline_style()
:在引用的样式表之后添加内联样式(通过完成WP_Styles->print_inline_style()
)WP_Scripts->localize()
:添加一个json编码的对象(由更多“ public”wp_localize_script()
函数包装)wp_plupload_default_settings()
:为“ wp-plupload”脚本添加json编码的对象(从多维数组创建)(请注意,这将在3.4中推出)注册/排队脚本和样式时为默认脚本添加数据(
wp-includes/script-loader.php
)
从通读该方法的用法来看,它似乎没有特定的用例。在中wp_plupload_default_settings
,似乎允许任意数据注入。在中wp_register_script
,它似乎用于区分页眉和页脚脚本。在中add_inline_style
,它用于表示应在将指定的样式表加入队列后添加的内联样式。
此功能的最佳用法是类似于以下代码,在其中将外部脚本加入队列,但需要向其发送一些配置变量,其中一些来自数据库:
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
对象在属性中具有属性(之前我确实写过一些有点怪异的方法)。
编辑:我说错了。wp_localize_script
处理多维数组就好了。
由于以下原因,此方法似乎非常有效:
- 它允许您将数据附加到脚本句柄,以便始终将其与脚本正确排队。此外,将使脚本出队,脚本顺序和脚本放置变得明智。
- 它允许您使用PHP将vars发送到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>
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的一种完全合理的方法。
我不认为对此有“正确”的答案,但很想听听其他开发人员的想法。我还认为,这个难题中有一些我完全忽略了的部分,很想听听其他人对此有何评论。