WordPressでwp_enqueue_script()を使ってJsファイルを読み込む時の注意点

WordPressでwp_enqueue_script()を使ってJsファイルをヘッダーなどで読み込む際の注意点です。

WordPressにはjQueryなどのライブラリが同包されており、それを wp_enqueue_script() というタグを使用して呼び出す事ができます。(WordPressで外部ファイルに置いたjQueryスクリプトを使う | memocarilog

ハンドル名を記入する事が必須となっていますが、そのハンドル名で使えないものがあるので注意が必要です。

上記の参考記事にもありますが、wp_enqueue_script()で読み込まれたスクリプトは一旦グローバル変数 $wp_scripts に入るようなのですが、この $wp_scripts にはデフォルトで登録されているスクリプトがいろいろある為、デフォルトと同じハンドル名を付けた場合は wp_enqueue_script() 第二引数の src で本来読み込みたいスクリプトのパスを指定していても、デフォルトのスクリプトの方が呼び出されてしまうようです。

common.js というスクリプトファイルに、common というハンドル名をつけてしまって、本来読み込みたいスクリプトが読み込まれずに utils.js というスクリプトが読み込まれてしまってあれっ??となる自体がおきました…。
common.js ではなく utils.js が読み込まれる
スクリプトファイル名等はそのままで、ハンドル名だけ変更したら解決しました!

デフォルトで登録されているハンドル名をみる限り、よく間違えそうなのは common くらいかなと思いますが、もし思ってもみないスクリプトが読み込まれていた場合は、ハンドル名がデフォルトのものとかぶってるのかもしれません。

すごく沢山ありますが、デフォルトのハンドル名は以下になります。

utils / common / sack / quicktags / colorpicker / editor / wp-fullscreen / prototype / wp-ajax-response / wp-pointer / autosave / wp-lists / scriptaculous-root / scriptaculous-builder / scriptaculous-dragdrop / scriptaculous-effects / scriptaculous-slider / scriptaculous-sound / scriptaculous-controls / scriptaculous / cropper / jquery / jquery-ui-core / jquery-effects-core / jquery-effects-blind / jquery-effects-bounce / jquery-effects-clip / jquery-effects-drop / jquery-effects-explode / jquery-effects-fade / jquery-effects-fold / jquery-effects-highlight / jquery-effects-pulsate / jquery-effects-scale / jquery-effects-shake / jquery-effects-slide / jquery-effects-transfer / jquery-ui-accordion / jquery-ui-autocomplete / jquery-ui-button / jquery-ui-datepicker / jquery-ui-dialog / jquery-ui-draggable / jquery-ui-droppable / jquery-ui-mouse / jquery-ui-position / jquery-ui-progressbar / jquery-ui-resizable / jquery-ui-selectable / jquery-ui-slider / jquery-ui-sortable / jquery-ui-tabs / jquery-ui-widget / jquery-form / jquery-color / suggest / schedule / jquery-query / jquery-serialize-object / jquery-hotkeys / jquery-table-hotkeys / thickbox / jcrop / swfobject / plupload / plupload-html5 / plupload-flash / plupload-silverlight / plupload-html4 / plupload-all / plupload-handlers / swfupload / swfupload-swfobject / swfupload-queue / swfupload-speed / swfupload-all / swfupload-handlers / comment-reply / json2 / imgareaselect / password-strength-meter / user-profile / admin-bar / wplink / wpdialogs / wpdialogs-popup / word-count / media-upload / hoverIntent

読み込まれるスクリプトなどの詳細は参考記事(wp_enqueue_script:WordPress私的マニュアル)に詳しくあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です