埼玉のWebコンサルタント

お問合せ

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

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

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);
トップに戻る