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

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

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

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

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

この記事で分かること

javascriptファイルを差し替えて読み込ませる方法
1. プラグインのjavacript読み込み部分を探す
2. javascriptを差し替えるスニペット
フックを外す特殊な例
まとめ

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

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

Availability datepicker – Integrate with Contact Form 7 and Divi

The Availability datepicker by InputWP plugin allows you to convert manually or automatically a text input field into an...

プラグインの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になっています。その場合は、カスタマイズファイルを読み込むときに特に書かなくても大丈夫です。