WordPressでスクリプトファイルを読み込むときはwp_enqueue_script関数を使う

（投稿日：2015年07月21日）

jQueryをはじめ、読み込むだけで使える便利なjsライブラリがいろいろありますが、WordPressでそれを使う場合、wp_enqueue_script関数を使って読み込みの制御を行う必要があります。

特にjQuery系のプラグインなどを併用する場合注意が必要で、何も考えずにjQueryの読み込みコードを追加してしまうとWordPress本体に含まれるjQueryとコンフリクトを起こす可能性があります。また、一見問題なく動いているようでも、jQueryを複数回無駄に読み込んでいたりしてパフォーマンスが悪いです。

wp_enqueue_script関数とは

スクリプトファイルを「重複しないように」また「適切な順番」で読み込むように制御してくれる関数です。

wp_enqueue_script関数の使い方

wp_enqueue_script関数はfunctions.phpに記述します。（ヘッダーやフッターには記述不要）

function my_scripts_method() {
  	wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

各パラメータは

$handle	スクリプトの識別名
$src	スクリプトのパス
$deps	依存スクリプト
$ver	スクリプトのバージョン
$in_footer	スクリプトの読み込み位置（trueで/body前、falseで/head前）

例：jQueryのスライダー（jquery.bxSlider.min.js）を使うとき

function my_scripts_method() {
  	wp_enqueue_script('bxSlider', get_settings('site_url').'/wp-content/themes/your-theme/js/jquery.bxslider.min.js', array('jquery'), '4.1.2', true);
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

複数のスクリプトを読み込むときはwp_enqueue_script()を併記します。

WordPress本体とは違うバージョンのjQueryを指定したいとき

WordPress本体に含まれるjQueryのバージョンはバージョンアップとともに変わってしまいます。バージョンを指定して読み込ませたいときは次のようにします。

function my_scripts_method() {
  	wp_deregister_script('jquery');
  	wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3');
  	wp_enqueue_script('bxSlider', get_settings('site_url').'/wp-content/themes/your-theme/js/jquery.bxslider.min.js', array('jquery'), '4.1.2', true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

はまるポイント

スクリプトの識別名に注意

jQuery、commonなどいくつかの識別名がすでに予約されているので、自作のスクリプトを読み込ませるときはスクリプトの識別名に注意しましょう。

jQueryをカプセル化

WordPress本体のjQueryを使う場合、jQueryはカプセル化する必要があります。

通常は次のように書いてあるコードを

$(function() {
  // jQueryコード
});

を次のように書き換えます。

jQuery(document).ready(function() {
  // jQueryコード
});

または

(function($) {
  // jQueryコード
})(jQuery);

一部のプラグインとの相性

Head Cleanerなど、スクリプトの読み込み順を操作するプラグインを使うとうまく動作しなくなることがあります。