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私的マニュアル)に詳しくあります。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS