wp_enqueue_scriptで外部のjQueryライブラリを使う
通常のHTMLでjQueryを使う場合、下記のようにライブラリを読み込ませるだけで特に問題はありません。
1 | <script type="text/javascript" src="/js/jquery.js"></script> |
ところがWordPressでは各種プラグインがさまざまなJavaScriptのフレームワークを使うので、コンフリクト（競合）を起こさないようにグローバル変数を変えていたり、何重にもライブラリを読み込まないようにしたり、適切な順番で読み込んだりするような配慮がなされています。
では自前でスクリプト（今回はjQuery）を設置する場合は、どのようにすればスマートに読み込ますことができるでしょうか。
いろいろ調べていると、wp_enqueue_script()というwp_head()にフックする関数がありました。
これを使うとほかのプラグインなどとは競合せずに、安全にjsライブラリや自前のjsファイルを読み込むようになるようです。
また、WordPressには主要なライブラリが組み込み済みなので、テーマファイル内に自分でライブラリを設置しなくても、この関数を使えば使用できるようになります。
関数は以下のように呼び出します。
1 | wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false ); |
$handle
スクリプトの識別名
$src(optional)
スクリプトファイルへのパス。http://で始まるURLまたはサイトルートから絶対パス。
$deps(optional)
依存するスクリプトのリスト（配列）
$ver(optional)
スクリプトのバージョン
wp_enqueue_script()の実装例
実際は下記のコードを<head></head>内に読み込ませます。
注意点としては、必ず<?php wp_head(); ?>の前に記述します。そうしなければフックしないのでロードされません。
1 2 3 | <?php wp_enqueue_script('jquery'); ?> <?php wp_enqueue_script('sample','/wp-content/themes/yourthemes/js/sample.js',array('jquery'),'0.1.0'); ?> <?php wp_head(); ?> |
2行目の第3引数に依存するファイルを指定すると、読み込む順番も調整してくれます。
この状態でHTMLソースを見るとファイルを正しく読み込んでいることが確認できますが、前述の通りグローバル変数が変わっているので、自前のjsファイルの中身を修正する必要があります。
WordPressではjQueryという変数名でアクセスするので、$をjQueryにすべて修正します。これで正しく動作するはずです。
すべて置換するのが面倒だったりする場合は、自前のfunctionだけ$でアクセスできるように下記のコードで括ります。
1 2 3 4 5 6 7 8 | jQuery(document).ready(function($) { //下のfunction内だけ$が有効 $(document).ready(function() { alert("サンプルコード"); }); }); |
0 コメント （コメントはまだありません）