Go to top Go to bottom

WordPressでJavaScriptを読み込むには、<head><script>タグを直接書き込むのではなくwp_enqueue_script()という関数を使用します。

テーマに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にこれらの関数が正しく配置されていないと、スクリプトおよびスタイルの読み込みは実行されません。