外部JSファイルをラクラク管理する方法

functions.phpで外部JSファイルをラクラク管理する方法

JSファイルの管理をfunctions.phpで一元化。
まだ、header.phpのheadに直接書き込んでる方は是非こちらの方法を覚えて下さい。

functions.phpの設定

JavaScriptの登録

<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
引数初期値説明
$handle(なし)必須 / 識別名
$src(なし)必須 / JSファイルのパス
$depsarray()JSファイルの依存性 / このJSより前に読み込まれる必要があるJSのハンドルを配列指定。
ない場合、空の配列を指定。
$verfalsefalseの場合、?ver=5.2.2のようにWPのバージョンが付与されます。
1.2のようにすると、?ver=1.2が付与されます。
nullにすると表示されません
$in_footerfalsetrueにすると、html最後のwp_footer()の位置で読み込まれる

JavaScriptの読み込み

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

wp_register_scriptと異なる点

$srcは必須ではなく、オプションとなります。
wp_register_script()で登録されている場合、そのハンドルを使って追加できます。

実例

よくあるパターンをサンプルとして説明。

if ( ! is_admin() ) {
	function wpqw_register_script() {
		wp_register_script( 'slider', get_template_directory_uri() . '/js/jquery.slider.min.js', array( 'jquery' ) );
		wp_register_script( 'menu', get_template_directory_uri() . '/js/menu.min.js');
		wp_register_script( 'script', get_template_directory_uri() . '/js/script.js', array(), false, true );
	}
	function wpqw_add_script() {
		wpqw_register_script();
		wp_enqueue_script( 'jquery' );
		wp_enqueue_script( 'menu' );
		wp_enqueue_script( 'script' );
		if ( is_front_page() ) {
			wp_enqueue_script( 'slider' );
		} elseif ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
			wp_enqueue_script( 'comment-reply' );
		}
	}
	add_action( 'wp_print_scripts', 'wpqw_add_script' );
}

1行目の!is_admin()は、管理画面以外に適応するための記述です。
3行目〜のwp_register_script()でjsファイルを登録しています。
9行目〜のwp_enqueue_script()で、登録済みjsファイルのハンドル名を使って呼び出しています。ここで設定した内容は全ページに適応されます。
jqueryなどの一部は、ワードプレスに組み込まれているため、wp_register_script()で登録しなくても使えます。
wp_register_script()でjQueryと依存関係がある場合、9行目の記述がなくても自動でjQueryが読み込まれます。
12行目〜のように、条件分岐が使えるのでトップページだけで使いたいScriptは、こちらに設定し、他のページで不要な読み込みをやめる事で表示速度の向上が望めます。
15行目のcomment-replyはワードプレスに組み込まれており、なおかつテーマチェックプラグインで必須となっています。
最後に、add_action()で出力します。

参考:ワードプレスに組み込み済みのスクリプトとハンドル名一覧
※情報が最新ではない可能性があります

htmlの最後に読み込みたい場合

5行目のscript(ハンドル)のように途中のarray()falseを省略せずに書き、最後にtrueをつける事で、footer.phpwp_footer()の位置で読み込まれます。

wp_register_script( 'script', get_template_directory_uri() . '/js/script.js', array(), false, true );

jQuery関係

jQuery依存ファイルの場合

実例サンプル4行目
3つ目の引数($deps)のarray()array( 'jquery' )とする事で、jQuery読み込み完了後に読み込まれるようになります。

wp_register_script( 'menu', get_template_directory_uri() . '/js/menu.min.js', array( 'jquery' ) );

jQueryを止める

実例サンプル9行目
wp_enqueue_script()wp_deregister_script()にする。
jQueryを止めた場合、$depsでjQueryと依存関係にあるファイルも読み込まれなくなります。

//wp_enqueue_script( 'jquery' );
wp_deregister_script( 'jquery' );

別のjQueryを読み込む

実例サンプル9行目
標準のJqueryを止めて、jQuery2系だったりCDN利用など、別のjQueryを指定します。

wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' );

Codex

CSS編はこちら