ワードプレスでオリジナルのjavascript（jQuery）ファイルを読み込む方法
ワードプレスでブログやサイトを運営していると、オリジナルの外部javascript（jQuery）ファイルを読み込みたくなる事ってあると思います。そこで、今回はWordPressでの外部javascriptファイルの設置方法と読み込ませ方です。
～ 目次 ～
外部jsファイルの設置
まずはWordPressで使用中のテーマ内にjavascriptファイルを設置します。
FTPツールを使って、使用中のテーマフォルダ直下にorigin-jsというフォルダを作りましょう。
※フォルダを作らずにテーマフォルダ直下にアップロードしても問題ありませんが、その場合は後述する読み込みコードのパスを書き換えて下さい。
作成したorigin-jsフォルダに、設置したいjsファイルをアップロードします。
以上で、jsファイルの設置は完了です。
jsファイルの読み込み
続いて設置したjsファイルの読み込みの設定です。
スクリプトファイルの読み込みにはwp_enqueue_script関数を使います。wp_headにフックしてもファイルの読み込みは可能ですが、スクリプトの読み込みにはこちらの関数の使用が推奨されています。
以下のコードは、テーマフォルダ直下に作成したorigin-jsフォルダの中のcommon.jsを読み込むものです。コピーして使用中のテーマのfunctions.phpに貼り付けましょう。3行目のjsファイルの名前部分（common.js）は、実際に読み込むjsファイルの名前に書き換えて下さい。
基本的なコード
|
1 2 3 4 5 |
/* 外部スクリプト挿入 */ function add_origin_js(){ wp_enqueue_script('origin-common',get_stylesheet_directory_uri().'/origin-js/common.js',array(),false,false); } add_action('wp_enqueue_scripts','add_origin_js'); |
引数はすべて初期値なので、省略できるものもあるのですが、一応全部書いておきました。wp_enqueue_script関数は、最後の引数をtrueにすると読み込みタイミングをbody終了直前に変更できます。初期値はfalseで、HTMLのhead内で読み込まれます。
jQueryを記述したファイルの場合
WordPressでは、デフォルトでjQueryが使えますので、jQueryを書きたい場合も多いかと思います。jQuery本体より先に読み込むと動きませんので、下の様に読み込むと確実です。
|
1 2 3 4 5 |
/* 外部スクリプト挿入 */ function add_origin_js(){ wp_enqueue_script('origin-common',get_stylesheet_directory_uri().'/origin-js/common.js',array('jquery'),false,true); } add_action('wp_enqueue_scripts','add_origin_js'); |
3番目の引数は、読み込むファイルがjQueryに依存しているので、それより先に読み込ませないでね！という事です。5番目の引数をtrueにして、head内ではなくbodyの最後で読み込むように設定しています。ソース上でファイルが読み込まれているのにjQueryが動かない時はこちらのコードを試してみて下さい。
それでも動かない方は下の記事も参考になるかもしれません。
最後に
個人的にはwp_headにフックする方が、書き方がカンタンで好きなんですけど。まぁ、こうしろと言うんで、これで慣れましょう。読み込みタイミングを設定出来たり、たしかに機能的にはこっちで読み込んだ方がいいですね。
ちなみに、この関数の読み方、「エンクエウエ」じゃないですよ。エンキューですから。念のため。
以上、外部jsを読み込む方法のまとめでした。
参考サイト
関数リファレンス/wp enqueue script – WordPress Codex 日本語版
[…] ワードプレスでオリジナルのjavascript（jQuery）ファイルを読み込む方法｜WEB TIPS～ホームページ制作の覚え書き […]