web-dev-qa-db-ja.com

プラグインにJavaScriptをエンキューする方法

今回は、プラグインフォルダにJavaScriptファイルを含めることに取り組んでいます。

私はthemesディレクトリからウィジェットファイルを転送することによってプラグインを作成しようとしています。ウィジェットファイルをコピーしましたが、そのウィジェットファイルはJavaScriptファイルに依存していたので、プラグインディレクトリに/ js /フォルダを作成しました。このファイルがホストされている場所 "jquery.repeatable.js"

私はこのコードを使用しましたが、jsファイルが含まれていないようです - 

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

私はこれをforum- https://stackoverflow.com/questions/31489615/call-a-js-file-from-a-plugin-directory で検索しました。

しかし、それでも役に立ちませんでした。

私は私の質問をまとめています。私のプラグインディレクトリでは、このフォルダの下にjsファイルがあります - /js /

正しいプロセスを教えてください。何かを登録する必要がありますか。

この部分に何か問題がありますか - 'admin_enqueue_scripts'？

plugin-developmentwp-enqueue-script
10
The WP Novice

あなたのコードは正しいように見えますが、スクリプトを admin_enqueue_scripts action にエンキューしているので、スクリプトは管理領域にのみロードされます。

フロントエンドでスクリプトをロードするには、wp_enqueue_scriptsアクションを使用します（これは wp_enqueue_script() function とは異なります）。

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

また、そのスクリプトはjQueryに依存しているように思われるので、その依存関係またはスクリプトをjQueryの前にロードできると宣言してください。また、スクリプトポットのバージョンを宣言することを強くお勧めします。このようにして、スクリプトを新しいバージョンに更新した場合、ブラウザはそれを再度ダウンロードし、キャッシュに保存されている可能性のあるコピーを破棄します。

たとえば、スクリプトのバージョンが1.0の場合

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

あなたが管理領域にそれをロードしたい場合：

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');
24
cybmeta

更新しました：

代わりにこのコードを使ってください

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0.0', false );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

3番目のパラメータは依存関係を宣言することであり、4番目のパラメータはバージョンを定義することです。

wp_enqueue_script()の5番目のパラメータをtrueに設定します。つまり、このファイルはフッターに読み込まれます。

1
mukto90

通常、 plugins_url（） メソッドを使用してエンキューを実現します。

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugins_url('js/jquery.repeatable.js', __FILE__ ), '1.0.0', false );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');
0
Zaheer Abbas