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

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)

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました