ホームページ制作アトリエ

心えがおホームページ制作 atelier(アトリエ)は、ホームページ・動画制作、教育ICT・アプリ開発、名刺・ポスター・チラシの作成を行っております。

WordPress で JavaScript ファイルを読み込む

カテゴリー:Wordpress
実は、今まで間違った読み込み方法をしていた為に、先日悲惨な目にあいまして・・・。
なので自分用に備忘録。本当に今更って感じだけど。。X(


jquery

読み込みたいエリア別に適切なフックを使用する

関数を使ってファイルを登録・読み込みキューに追加

wp_enqueue_script() の場合、パラメーターは以下。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$handleスクリプトの識別名、ハンドル。
$srcスクリプトの URL(オプション)
$deps依存スクリプト識別名の配列(オプション)
$verバージョン文字列。クエリーストリングに付加される。(オプション)
$in_footertrue にすることで、スクリプトは </body> の前のエリアで読み込まれる。デフォルトでは false になっており、</head> の前のエリアで読み込まれる。(オプション)

記述例

例えば、こんな風にfunctions.php に記述します。

jQueryのコードを記述するときに、“$” は使えない

実は、WordPress は jQuery の他に、Prototype.js というライブラリを使用しているので、jQueryのコードを記述するときに、“$” が使えません。Prototype.js には $()という getElementById のように利用する関数が定義されている為、jQuery で “$” を使うとコンフリクトを起こしてしまうのだとか。
なので、”$”の変わりにjQueryと書きます もともと”$”は、”jQuery”のエイリアスなので、”jQuery”と書けば問題なく動作しました。