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でエンコードされたオブジェクトを追加します(より「パブリック」な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を使用して変数をJSに送信できます。
wp_print_styles
後でエンキューされたスクリプトによって処理される任意のスクリプトを印刷するために使用するよりも、組織化されているようです。
この方法について心配する、期待どおりに動作しないものがいくつかあります。そのような問題の1つは、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を調べて、関数の目的に関する手がかりがあるかどうかを確認しました。私は、任意のJSを追加する他の方法を探求する1つのチケット(http://core.trac.wordpress.org/ticket/11520)(その時点で壮大なもの)を見つけました。したがって、任意のJSを追加するより良い方法を作成することに関心があるようですがadd_data
、プロセスの一部であるかどうかは正確にはわかりません。
私の主な質問は次のとおりです。開発者はこの関数を使用する必要がありますか?場合によっては(例:)、wp_register_script
サードパーティが使用すべきではない「プライベート」機能のように思われます。ただし、他の場合(例wp_plupload_default_settings
:)では、エンキューされたスクリプトの前に任意のJSを注入する完全に合理的な方法のようです。
これに対する「正しい」答えがあるとは思いませんが、他の開発者の意見を聞きたいです。また、このパズルには、私が完全に無視しており、他の人がそれについて何を言っているのか聞いてみたいと思うピースがあることも想像します。