サードパーティは$ wp_scripts / $ wp_styles-> add_dataを使用する必要がありますか?


31

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多次元配列をうまく処理します。

この方法は、次の理由で本当にうまくいくようです:

  1. これにより、スクリプトハンドルにデータを添付できるため、常にスクリプトで適切にキューに登録されます。さらに、スクリプトのデキュー、スクリプトの順序、およびスクリプトの配置についてインテリジェントになります。
  2. PHPを使用して変数をJSに送信できます。
  3. 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を注入する完全に合理的な方法のようです。

これに対する「正しい」答えがあるとは思いませんが、他の開発者の意見を聞きたいです。また、このパズルには、私が完全に無視しており、他の人がそれについて何を言っているのか聞いてみたいと思うピースがあることも想像します。

回答:


4

この関数は、WordPressのロード中にキューに入れられたスクリプト/スタイルにデータを追加します。

あんまり。これまでのスクリプト/スタイルにデータを追加しますregistered

によって設定されたデータキーはwp_localize_script、の呼び出しによって最終的に上書きされ$wp_scripts->add_dataますwp_localize_scriptが、同じスクリプトに対して2回呼び出すと、文字列は適切に連結されます。

右。両方とも、基礎となる(アクセスできない内部)APIを呼び出すため、上書きされます(あなたが述べたように)。これはを呼び出すときに発生します$this->get_data( $handle, 'data' );

質問

私の主な質問は次のとおりです。開発者はこの関数を使用すべきですか?

回答

簡単に言った:はい、あなたが必要なことをする他の機会がなかったとき。

別の例:スクリプトが登録されているかどうかを確認し(たとえばjson2/jquery)、フッターに移動しextra['group']ます(確認)。

// Move scripts to the footer - in case it isn't already there
if ( ! $wp_scripts->get_data( 'json2', 'group' ) )
    $wp_scripts->add_data( 'json2', 'group', 1 );

if ( ! $wp_scripts->get_data( 'jquery', 'group' ) )
    $wp_scripts->add_data( 'jquery', 'group', 1 );

注:この↑は、extra

その他の注意事項

反質問:コアによって登録されたスクリプトに依存関係を追加しようとしたことがありますか?例:JSON2必要に応じてに追加してみてくださいjQuery。これを傍受しないと不可能global $wp_scriptsです。

global $wp_scripts;

$scripts = array( 
     'jquery'      => array( 'json2' )
    ,'jquery-form' => array( 'json2' ) 
);

foreach ( $scripts as $handle => $deps )
{
    // Ugly hack: Intercept the global to force the "natural"/needed order: JSON2 » jQuery
    $deps_default =& $wp_scripts->registered[ $handle ]->deps;
    $wp_scripts->registered[ $handle ]->deps = array_merge( $deps_default, $deps );
}

クラスにはできないことがたくさんあります。以下のようなものを使用してそう->add_data()である完全に有効。コアクラスの欠如を生き抜くよりも優れているため、入手したものを使用してください。


「コアがデフォルトおよび組み込みスクリプトに依存関係を追加する可能性を追加するまで待ちます」tracでチケットを開きましたか?
スクライブ

@scribuありがとう、しかし、いや、私は持っていないし、いや、そうしません。私のチケットはすべてそこで腐敗しているので、私はtracチケットに労力を費やすことを控えました。これは違反ではなく、私がこれまでに経験したことの結論に過ぎません。しかし、あなたと議論を開始しないために、これは私のプラグインの1つからの単純なコピー/ペーストから残されているだけなので削除します。
カイザー

それでは、ここで質問する必要があると思います。jQueryの前にJSON2をロードする利点は何でしょうか。
スクライブ

それは抽象的な例なので、何もありません。より詳細な例を見つけようとする場合、必要なライブラリを想像できますがJSON2、事前にロードする必要があります。jQuery名前を付けましょうUberjQuery。Btw:掘り下げてコアをうまく​​やっているので、時間を取って答えを書いてみませんか?時間をかけて読む価値があると思います。
カイザー

ご意見ありがとうございます。カイザー!「API」でサポートされているJSを追加するメソッドを間違いなく探しています。私はあらゆる種類のことをするためにそれを曲げることができることを知っていますが、それは不安定なコードにつながる可能性があります。それが何をすることができるかというよりも、何を目的としているのかを知ることは素晴らしいことであり、確かに、それで多くのことができる。
トールマンズ

1

WP 3.3では、スクリプトデータの処理方法について大きな議論がありました。

http://core.trac.wordpress.org/ticket/11520

ネストされた配列を今に渡すことができることに注意してくださいwp_localize_data()

wp_localize_script( 'jquery', 'jQueryL10n', array(
    'foo' => array(
        'bar' => array( 'apple', 'orange' )
    ),
) );

したがって、add_data()連結が関係する場合など、エッジケースによっては動作が変わる可能性があることを理解して、必要なことに対して高レベルのAPIがない場合に使用します。


ご意見ありがとうございます!あなたがそのチケットにリンクしているのは面白いです!私は投稿でそれをリンクしましたが、多次元配列が現在サポートされていることを理解できなかったという点で、あまりにも多くのことが行われていました。
トールマンズ

うん...素敵な編集!私は思ったほどそのチケットに混乱していませんでした。
トールマンズ

@tollmanzええ、それはかなり混乱しています。特にIRCにいなかった場合はなおさらです。
スクライブ

@ungestaltbar氏は、数ヶ月前に多次元配列を追加する方法を教えてくれました。これはすでにコアになっていることを知りませんでした。
カイザー

@scribu-多次元配列のサポートはまだありませんか?-少なくとも私は...何の問題もなく、それらを使用する
スティーブン・ハリス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.