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プラグイン Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG API query_posts WP使い方 RSS iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能