WordPress で jQuery などの外部ファイルを読み込む wp_enqueue_script()

外部ファイルを読み込むには wp_enqueue_script() を使うと良いです。
Function Reference/wp enqueue script « WordPress Codex

例えば jQuery を読み込む際にわざわざ公式サイトからダウンロードして来て head 内に書く必要はありません。以下のようにコードで WordPress に含まれているライブラリから読み込めるし、jQuery を複数読み込んでしまうという無駄がありません。

1
wp_enqueue_script('jquery');

また自分で用意したオリジナルスクリプトも以下のようにして読み込むことで複数読み込むという無駄を省いたり、直接 head 内を弄ってごちゃごちゃさせる必要はがなくなります。

1
wp_enqueue_script( 'example', 'http://example.com/hoge.js');

なお、wp_enqueue_script() は functions.php やプラグイン内で書くと良いです。

WordPress にデフォルトで含まれているライブラリ

WordPress には以下のライブラリがデフォルトで同梱されているので、以下のライブラリは一番最初に紹介したように jquery とするだけで読み込むことができます。

scriptaculous-root, scriptaculous-builder, scriptaculous-dragdrop, scriptaculous-effects, scriptaculous-slider, scriptaculous-sound, scriptaculous-controls, scriptaculous, Image cropper (not used in core, see jcrop), Image copper, swfobject, swfupload, swfupload-degrade, swfupload-queue, swfupload-handlers, jquery, jquery-form, jquery-color, jquery-ui-core, jquery-ui-tabs, jquery-ui-sortable, jquery-ui-draggable, jquery-ui-droppable, jquery-ui-selectable, jquery-ui-resizable, jquery-ui-dialog, schedule, suggest, thickbox, jquery-hotkeys, sack, quicktags, farbtastic, colorpicker, tiny_mce, prototype, autosave, wp-ajax-response, wp-lists, common, editor, editor-functions, ajaxcat, admin-categories, admin-tags, admin-custom-fields, password-strength-meter, admin-comments, admin-users, admin-forms, xfn, upload, postbox, slug, post, page, link, comment, admin-gallery, media-upload, admin-widgets, word-count, theme-preview, json2

知っているのと知らないのでは効率が変わるので覚えておきましょう。

コメント

  1. とおりすがりさんのコメント

    ソースを拝見させいただいたところ、直接headにjqueryを書いているようですが、
    この記事の趣旨と矛盾していますよね。

    あえてそうしている理由をお教えください。

  2. とおりすがりさんのコメント

    すいませんtwitterでのやり取りは控えさせてください。
    該当のソースとは、このサイトのソースのことです。

    • webleさんのコメント

      実際のテンプレートには出力されます。要するに実際のテーマファイルではあの記述を書いていないんですよ。wp_enqueue_script(‘jquery’); と書くことで HTML を出力する際に JavaScript ライブラリ読み込みを行ってくれます。

      プラグインなどを使うと自動的に JS の読み込みを行ってくれますよね。あれはこれによって行われていますのです。ご理解頂けたでしょうか。

      基本的に Twitter で質問して頂ければすぐに返答することが可能で御座います。

  3. とおりすがりさんのコメント

    なるほど・・・。
    そういう仕組みなのですね。

    分かりやすい説明をしていただき、ありがとうございました。