WordPressのテーマ開発者の、初期に起こりやすい疑問や迷いを解決するシリーズです。今日は、テーマ開発に必須の知識ともいえる「jQueryなどの読み込み方法と、正しい使い方」です。
目次
WordPress での jQuery の読み込み方法
まずはじめに、header.phpの<HEAD>タグ内に、直接jQuery読み込み用の<script>タグを書き込んんではいけません。WordPressには、WordPressの作法があります。
wp_enqueue_script() 関数を使おう
WordPressでは、独自のJavascriptファイルを読み込む際に利用する関数があります。「wp_enqueue_script()」です。もし読み込もうとしているJavascriptファイル（/js/main.js）において、jQueryを参照する必要がある場合、下記のように記述します。これにより、WordPressコアコード内に配置されたjQueryを自動的に読み込むことができます。
<?php
/**
* Load scripts and style sheets
*/
function load_scripts(){
wp_enqueue_script(
'fancyboxs', // ハンドル名
get_template_directory_uri() . '/js/main.js', // ソース
array( 'jquery' ), // 先に読み込まれているべきScript（ハンドル名）
filemtime( get_template_directory() . '/js/mainjs' ), // バージョン情報
false // Bodyタグの最後でロードしますか？
);
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
?>
この関数を使わずに、独自にscriptタグを書き込んでしまうと、例えば、プラグインの一部がjQueryをロードしたいた場合、２重に読み込まれる事になってしまいます。ページロードのパフォーマンスの劣化だけでなく、予期せぬ不具合も引き起こしそうです。
下記に、関数について解説します。
第一引数：ハンドル名
あなたが読み込もうとしている自分のJavasciptファイルがmain.jsだとすれば、上記の様にそのファイル名を書きます。他と重複しない様に命名してください。
第二引数：ソース（URI）
該当ファイルのURLパスです。URLが参照する値ですので「get_template_directory_uri()」を利用して、パスを指定して下さい。
第三引数：依存するScriptのハンドル
この引数は重要です。ここに「jquery」と記載することで、もともとWordpressが持っている（/wp-include 配下に含まれる）jQueryをロードします。自分のテーマ内に独自に配置したjQueryや、CDN経由のjQueryを（特別な理由がなければ）ロードしないでください。
WordPressがこの様な作法になっているには、理由があります。その理由を知らないうちは、とりあえず作法に従ったほうがよいでしょう。
第四引数：バージョン情報
こちらはブラウザキャッシュが残ってしまうことによる問題を解決するものです。
「main.js?ver=1.32」など、クエリ文字列を変更してやることで、ブラウザにキャッシュを利用することを防ぐ方法はご存知だと思いますが、上記は、それを自動化したものです。ファイル更新があれば、自動的にverの値が変わってくれます。
filemtime()の引数は、URLでなく、ファイルシステム上のパスなので「get_template_directory()」関数を利用します。この関数は、get_template_directory_uri()と名前が似ているので混同しないようにして下さい。
第五引数：ロードする場所
これは特に気にしなくていいでしょう（特別な理由がなければ）。現在としては、headでロードしようが、footerでロードしようが、そこまでの大きなパフォーマンスの違いは生まれないと思います。この引数を省略するか、falseにすることで、普通にHEADにScriptをロードします。
jQuery「$」を参照する方法
上記のmain.jsの中身です。WordPressにおいて、よくある問題は、「jQueryをつかいたいのに「$」が参照できない？！」という問題です。
方法１閉じたスコープ内変数「＄」にjQueryを代入する
$が利用できないのは、ワードプレスはデフォルトで、jQuery を「no-conflictモード」で読み込んでいるためです。もしかするとあなたのテーマや、利用しているプラグインが、「$」を変数として利用するjQuery以外のjavascriptライブラリを利用しているかもしれませんので、それを避ける様に、ワードプレスでは、no-confilictモードがデフォルトなのです。
no-conflictモードでは、「jQuery」という変数名で参照する必要があることです。これは以下の様に解決するのが WordPress での作法となっています。
(function($) {
// ここに書く。「$」が参照できる。例：
$('.button').click( function() {
alert('Thank you for loading jQuery!');
});
})(jQuery);
グローバルに置いたクロージャに「jQuery」オブジェクトを引数でわたし、それを内部で「$」で参照してやります。
方法２別の変数に変数にjQueryを代入する
もしくは、あまりおすすめしませんが、このように書くこともできます。
var $j = jQuery.noConflict();
// jQueryは、「$j」で参照
$j('.button').click( function() {
alert('Thank you for loading jQuery!');
});
まとめ
繰り返しますが、独自に<HEAD>内に、読み込み用のscriptタグは書かないで下さい。あなたのWordPress開発レベルが疑われてしまうでしょう。
