ワードプレスでオリジナルのjavascript(jQuery)ファイルを読み込む方法

ワードプレスでオリジナルのjavascript(jQuery)ファイルを読み込む方法
2018年8月9日2019年1月16日
この記事は最終更新から4年以上経過しています。内容が古くなっている可能性があります。

ワードプレスでブログやサイトを運営していると、オリジナルの外部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ファイルの名前に書き換えて下さい。

基本的なコード

引数はすべて初期値なので、省略できるものもあるのですが、一応全部書いておきました。wp_enqueue_script関数は、最後の引数をtrueにすると読み込みタイミングをbody終了直前に変更できます。初期値はfalseで、HTMLのhead内で読み込まれます。

jQueryを記述したファイルの場合

WordPressでは、デフォルトでjQueryが使えますので、jQueryを書きたい場合も多いかと思います。jQuery本体より先に読み込むと動きませんので、下の様に読み込むと確実です。

3番目の引数は、読み込むファイルがjQueryに依存しているので、それより先に読み込ませないでね!という事です。5番目の引数をtrueにして、head内ではなくbodyの最後で読み込むように設定しています。ソース上でファイルが読み込まれているのにjQueryが動かない時はこちらのコードを試してみて下さい。

それでも動かない方は下の記事も参考になるかもしれません。

WordPressでjQueryが動かない時の原因と解決法

最後に

個人的にはwp_headにフックする方が、書き方がカンタンで好きなんですけど。まぁ、こうしろと言うんで、これで慣れましょう。読み込みタイミングを設定出来たり、たしかに機能的にはこっちで読み込んだ方がいいですね。

ちなみに、この関数の読み方、「エンクエウエ」じゃないですよ。エンキューですから。念のため。

以上、外部jsを読み込む方法のまとめでした。

参考サイト

関数リファレンス/wp enqueue script – WordPress Codex 日本語版

One Reply to “ワードプレスでオリジナルのjavascript(jQuery)ファイルを読み込む方法”

Comments are closed for this post.

関連のある記事

ワードプレスの管理画面メニューのラベルテキストを変更する方法

ワードプレスの管理画面メニューのラベルテキストを変更する方法

記事を読む

ブロックエディタ(Gutenberg)の編集画面にeditor-style.cssを読み込ませる方法【WordPress】

ブロックエディタ(Gutenberg)の編集画面にeditor-style.cssを読み込ませる方法【WordPress】

記事を読む

ワードプレスで管理画面やログイン画面にもファビコン・サイトアイコンを設定する方法

ワードプレスで管理画面やログイン画面にもファビコン・サイトアイコンを設定する方法

記事を読む

ワードプレスで選択した特定の記事を表示する一番(?)簡単な方法

ワードプレスで選択した特定の記事を表示する一番(?)簡単な方法

記事を読む

WordPressでカテゴリーページのタイトルを親カテゴリー付きで表示する方法

WordPressでカテゴリーページのタイトルを親カテゴリー付きで表示する方法

記事を読む

アーカイブページのタイトルから「カテゴリー:」を消す方法【ワードプレス】

アーカイブページのタイトルから「カテゴリー:」を消す方法【ワードプレス】

記事を読む

Generic selectors
Exact matches only
Search in title
Search in content

目次へ