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で確認することができます。
No Comments & Tracbacks