web-dev-qa-db-ja.com

異なるアクションフックでエンキューされたスクリプト間のスクリプト依存関係の宣言

このシナリオを考えます：

カスタムテーマにいくつかのスクリプトを追加しました。それから私はその一つのテーマでのみ使用したいと思うプラグインを構築することを始めました。テーマにエンキューされたスクリプトに依存する他のスクリプトを自分のプラグインにエンキューしたいです。 wordpressでスクリプトの依存関係を宣言する標準的な方法は、依存関係の配列をwp_enqueue_scriptに渡すことです。例えば。：

wp_enqueue_script('tagsinput-scripts', plugin_dir_url( __FILE__ ) . 'js/tagsinput/bootstrap-tagsinput.min.js', array('bootstrap-js'), '130215', false);

bootstrap-jsがエンキューされるまでキューに入れられません。

上記のスクリプトが私のプラグインによってadmin_enqueue_scriptsアクションフックでエンキューされ、bootstrap-jsがwp_enqueue_scriptsアクションフックでエンキューされたと想像してください。

このシナリオでは、2つのスクリプトが異なるアクションを使用してキューに入れられたときに、tagsinput-scriptsとbootstrap-jsの間の依存関係をWordpressで正しく解決できますか？

pluginsplugin-developmentwp-enqueue-script
2
luqo33

簡単な答えは「いいえ」です。 admin_enqueue_scriptsとwp_enqueue_scriptsフックは全く同じことをしますが、それらはお互いに何の参照もしない別々の場所でそれらの仕事をします。

  • wp_enqueue_scriptsはパブリックサイドまたはフロントエンドで動作します

  • admin_enqueue_scripts名前が示すように、管理者側またはバックエンドで実行されます。

それが他のフックを介してロードされるスクリプトに依存している場合、依存関係を持ったスクリプトはこのようにロードされません。

これを機能させるには、bootstrap-jsを両方のフックにフックする必要があります。これにより、依存関係も機能するようになります。

例：

add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap_js' );
add_action( 'admin_enqueue_scripts', 'enqueue_bootstrap_js' );

function enqueue_bootstrap_js()
{
    //Register and enqueue your bootstrap-js script
}

add_action( 'wp_enqueue_scripts', 'tagsinput_scripts' );

function tagsinput_scripts()
{
    wp_enqueue_script('tagsinput-scripts', plugin_dir_url( __FILE__ ) . 'js/tagsinput/bootstrap-tagsinput.min.js', array('bootstrap-js'), '130215', false);
}
0
Pieter Goosen

簡単な答えは「はい」です。

wp_enqueue_scriptsまたはadmin_enqueue_scriptsを使用すると、スクリプトは依存関係になりますが、ローカル環境でのみ呼び戻すことができます。したがって、あなたがそれを登録しているテーマまたはプラグインでのみ。しかし、Pieter GoosenもWordPressもあなたに教えてくれないのは、インストールワイドスクリプトを登録するためにwp_default_scriptsフックを使うことができるということです。

使用方法？WordPress開発者の wp_default_scriptsアクションフックの「ユーザー投稿ノート」のモデレーションを待っている、以下のメモを参照してください。リソース .

wp_enqueue_scriptまたはadmin_enqueue_scriptを使って、あなたのWordPressインストールのどこからでも参照できるスクリプトを追加してください。

まずあなたのプラグインなどでフックを設定します。

add_action('wp_default_scripts', function(&$scripts) {
  // Arguments order: `$scripts->add( 'handle', 'url', 'dependencies', 'version', 'in_footer' );`
  // Set "in_footer" argument to 1 to output the script in the footer.
  $scripts->add('my-plugin-script', '/path/to/my-plugin-script.js', array('jquery'), 'alpha', 1);
});

これで、あなたのテーマの中など、プラグインからのスクリプトをどこでも使うことができます。

add_action('wp_enqueue_scripts', function () {
  // Note the third argument: `array('my-plugin-script')`
  wp_enqueue_script('my-theme-script', '/path/to/my-theme-script.js', array('my-plugin-script'), null, true);
});

必ず "handle"引数に同一の文字列を選択するようにしてください。プラグイン名またはテーマ名をハンドル名の前に付けることをお勧めします。

1
Fleuv