WordPressで外部ファイルに置いたjQueryスクリプトを使う

WordPress 内で外部ファイルに置いた自作の jQuery やプラグインを使用する方法です。WordPress はデフォルトで本体にjQuery本体が入っているので、jsフォルダ等にわざわざ本体を置かなくても、jQuery等のライブラリを使用することができます。

jQueryのスクリプトを読み込むには wp_enqueue_script() を使用します。
プラグインの読み込みも同じ方法です。head内か function.php で読み込みをします。

使用する注意点

prototype.js等とのコンフリクトを防ぐために、WordPressではjQueryという変数名でアクセスするので、$をjQueryに書き換えます。
head内に記入する場合は、wp_head();よりも前に記入します。

wp_enqueue_script()では以下のパラメータを入れる事ができます。

wp_enqueue_script( 
     $handle,$src,$deps,$ver,$in_footer 
);

$handle 必須 — スクリプトの名前(任意の名前)。
$src オプション — スクリプトファイルへのパス。htmlから見た絶対パスで指定。
$deps オプション — 依存するスクリプトの名前を配列で指定
先にjQeryを読み込む必要があるならばarray(‘jquery’)と指定。
$ver オプション — スクリプトのバージョン
$in_footer オプション — スクリプトの呼び出し場所
true ならば head 要素に、false ならば wp_footer() に出力します。

具体的な使用例

例えば、テーマファイルの jsフォルダに置いた memocaliscript.js に jQuery のスクリプトがある場合は下記のように書いて読み込みします。

<?php
wp_enqueue_script('memocaliscript',get_template_directory_uri() . '/js/jquery.memocaliscript.js',array('jquery'));
?>

ライブラリにあるものなら $handle に指定するだけで呼び出しが出来ます。jquery-formを読み込みたい場合は下記のように記入すれば読み込みできます。

<?php
wp_enqueue_script('jquery-form');
?>

デフォルトで入っているスクリプトはwp-includes/script-loader.phpか、codex Function Reference/wp enqueue scriptで確認することができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です