お問い合わせはコチラから

wp_enqueue_scriptのdequeueが上手くいかない!それ簡単に解決します

サイト運営

WordPressのテーマやプラグインなどのjavascriptをカスタマイズしたい時に、ファイルを直接書き換えるしか方法が無いと思っていませんか?

javascriptファイルを直接編集してしまうと、テーマやプラグインのアップデートでカスタマイズ内容が消えてしまいます。

そうならないためには、既存のjavascriptファイルの読み込みを解除して、カスタマイズしたjavascriptファイルを読み込ませればよいです。

この記事では、wp_enqueue_scriptで読み込まれたjavascriptの読み込みの解除方法と、カスタマイズしたファイルの読み込み方法をまとめておきます。

javascriptファイルを差し替えて読み込ませる方法

例として、date-time-picker-fieldプラグインのdtpicker.jsを差し替える場合で説明します。

プラグインのdtpicker.jsは、date-time-picker-field/assets/js/dtpicker.jsにあります。

このファイルをカスタマイズしたファイルと差し替えます。

カスタマイズしたファイルは、子テーマのdate-time-picker-field/assets/js/dtpicker.jsになります。

プラグインのjavacript読み込み部分を探す

プラグインファイルで、カスタマイズしたjsが読み込まれている部分を探します。

wp_enqueue_script( 'dtp-moment', plugins_url( 'assets/js/vendor/moment/moment.js', dirname( __FILE__ ) ), array( 'jquery' ), $version, true );
wp_enqueue_style( 'dtpicker', plugins_url( 'assets/js/vendor/datetimepicker/jquery.datetimepicker.min.css', dirname( __FILE__ ) ), array(), $version, 'all' );
wp_enqueue_script( 'dtpicker', plugins_url( 'assets/js/vendor/datetimepicker/jquery.datetimepicker.full.min.js', dirname( __FILE__ ) ), array( 'jquery' ), $version, true );
wp_enqueue_script( 'dtpicker-build', plugins_url( 'assets/js/dtpicker.js', dirname( __FILE__ ) ), array( 'dtpicker', 'dtp-moment' ), $version, true );

javascriptを差し替えるスニペット

assets/js/dtpicker.jsは、wp_enqueue_scriptで読み込まれていますので、wp_dequeue_scirptでdequeueします。

javascriptの読み込み解除でwp_deregister_scriptを使用する例がありますが、wp_register_scriptで登録されていないので、wp_deregister_scriptは不要です。

再度、wp_enqueue_scriptするときは、読み込むファイルは変更して、残りの部分は元の記述と同じように記述します。

function remove_dtpicker_script() {
  wp_dequeue_script('dtpicker-build');
	wp_enqueue_script( 'dtpicker-build', get_stylesheet_directory_uri().'/date-time-picker-field/assets/js/dtpicker.js', array( 'dtpicker', 'dtp-moment' ), null, true );
}
// オリジナルのwp_enque_scriptとpriorityを同じにしないと上手くいかない
add_action( 'wp_enqueue_scripts', 'remove_dtpicker_script' );

add_actionする時のwp_enqueue_scriptのPriorityはオリジナルと同じでないと上手くいきません。

Priorityが記載されていない場合は、初期値の10になっています。その場合は、カスタマイズファイルを読み込むときに特に書かなくても大丈夫です。

フックを外す特殊な例

プラグイン内部などで、thisを使ったフックの外し方です。

まとめ

よく知られた内容ですが、たまにやるとうまくdequeue出来ないことが殆どなので、自分のメモとしてまとめておきました。

wp_enque_scriptを解除して、別のファイルをwp_enque_scriptする時のポイント
  • wp_register_scriptが無ければ、wp_deregister_scriptは不要
  • add_aciontのwp_enqueue_scriptのPriorityは合わせないとダメ(初期値は10)

タイトルとURLをコピーしました