WordPress で jQuery を使う時の注意点

Categories WordPress

慣れていない方には解りにくいところがあるようですので、いまさらですが要点をまとめます。

特別な理由がない限り WordPress に含まれている jQuery を使う

WordPress には外部スクリプトを読み込むための独自の仕組みがあります。また、WordPress インストールには初期状態で jQuery が含まれており jquery というスクリプトハンドルですぐに呼び出せる状態となっています。コンフリクトや依存関係の問題を引き起こさないように考えられていますので、特別な理由がない限りこれらを利用します。

コード例

テーマの functions.php に以下のように記述するとサイトの公開側に jQuery が読み込まれるようになります。

function my_scripts() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

例えば custom-script.js というファイルに jQuery を使ったコードを書きたい場合は、以下のような記述となります。

function my_scripts() {
	wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

2番目の例では、custom-script の依存ファイルとして jquery ハンドルをパラメーターで指定しています。このように書けば、わざわざ wp_enqueue_script() で呼び出すことなく、jQuery が custom-script.js の前に読み込まれるようになります。

WordPress 版 jQuery はそのままでは $ が使えない

WordPress 版 jQuery では、コンフリクトを避けるため、グローバルな $ ショートカットが使えなくなっています。なじみの $ を使った記述を行いたい場合は以下のようにします。

jQuery(function($) {

// ここに $ を使ったコードを書く

});

シンプルですがこれだけで、$(document).ready() 効果とローカル内だけの安全な $ の利用を可能にしています。