036
テーマにJavaScript（jsファイル）を正しい方法で読み込む
Library
WordPressでJavaScriptを読み込むには、<head>に<script>タグを直接書き込むのではなく、wp_enqueue_script()という関数を使用します。
| 用例 |
|
|---|---|
| 関連 | |
| Codex |
テーマにJavaScriptを正しい方法で読み込む
テーマにJavaScript（jsファイル）を読み込むには、wp_enqueue_script()関数を使います。
WordPress関数
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
WordPressで使用するスクリプトファイルをキューに追加します。すでにwp_register_script()で登録している場合は、ハンドル名を渡すだけでキューへ追加されます。
$handle | スクリプトの名前。すでに登録済みの名前を入れると、新しいスクリプトはキューに追加されないので注意 |
|---|---|
$src | スクリプトファイルまでのURL |
$deps | このスクリプトを読み込む前に読み込むべきスクリプト（$handle）を配列形式で渡す。初期値はarray() |
$ver | バージョン番号を指定できる。ブラウザのキャッシュにかかわらず、新規スタイルを確実に読み込ませる場合などに使用できる。初期値はfalse |
$in_footer | trueにするとスクリプトをフッターで読み込む。通常bodyの直前。wp_footer()により読み込まれる。初期値はfalseで、<head>タグ内でwp_header()により読み込まれる |
たとえば、jsフォルダに保存されたmain.jsというスクリプトファイルを読み込むには、functions.phpに次のように記載します。
function twpp_enqueue_scripts() {
wp_enqueue_script(
'main-script',
get_template_directory_uri() . '/js/main.js'
);
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );wp_enqueue_script()の第1引数にはスクリプトの名前を、第2引数にはjsファイルまでのURLを渡します。get_template_directory_uri()はテーマのディレクトリまでのURLを返す関数です。
これにより、<head>タグ内に次のようなコードが出力されます。
<script type='text/javascript' src='http://localhost/minimalist/wp-content/themes/minimalist/js/main.js?ver=4.8.2'></script>スクリプトが読み込まれる順番を制御する
「あるスクリプトが正しく動作するには、別のスクリプトを先に読み込んでいる必要がある」というようなケースはよくあります。このような依存関係をコントロールするには、wp_enqueue_script()の第5引数を使用します。
function twpp_enqueue_scripts() {
wp_enqueue_script(
'primary-script',
get_template_directory_uri() . '/js/primary.js'
);
wp_enqueue_script(
'secondary-script',
get_template_directory_uri() . '/js/secondary.js',
array( 'primary-script' )
);
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );10行目で、「’primary-script’がキューに追加されてから、この’secondary-script’を追加する」という指定を行っています。この結果、primary.jsの<script>タグが出力された後にsecondary.jsが出力されるようになります。
なお、配列に渡すハンドル名が間違っていたり、存在しなかったりする場合、secondary.js自体も読み込まれなくなってしまいます。スクリプトが動作しない場合は、ハンドル名が正しいかどうか確認してみてください。
スクリプトをフッターで読み込む
スクリプトを<head>で読み込むと、その分ページのレンダリングが遅れてしまいます。特に最初に読み込む必要のない場合は、フッターで読み込むことでUXを向上させることができます。
function twpp_enqueue_scripts() {
wp_enqueue_script(
'main-script',
get_template_directory_uri() . '/js/main.js',
array(),
false,
true
);
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );7行目で、wp_enqueue_script()の第5引数をtrueにしています。こうすることで、<head>ではなく</body>の直前でスクリプトを読み込むようになります。
'wp_enqueue_scripts'のアクションはwp_head()またはwp_footer()により実行されます。header.php/footer.phpにこれらの関数が正しく配置されていないと、スクリプトおよびスタイルの読み込みは実行されません。
はじめまして。ひなと申します。
たいへん勉強になりました。
フッターでJSを読み込むのにずっと苦労していたので本当に助かりました。
ありがとうございます！