正しいJavaScriptファイルの読み込み方法

スポンサーリンク

今まで、javaScriptファイルの読み込み方法も間違えていたようです。headタグ内で読み込みをしていましたが、WordPressが推奨する読み込み方法は、functions.phpファイル内での読み込みでした。

テーマで利用したいJavaScriptファイル(JQueryファイルも)を読み込むには、functions.phpファイル内で wp_enqueue_script関数を使って読み込みを行います。wp_enqueue_script関数を使うと、安全に読み込んでくれます。重複チェックとか適切な読み込み場所とか勝手に判断してくれます。

wp_enqueue_script(①ハンドル名, ②JavaScriptファイルのURL, ③先に読み込みたいJSファイルを配列で指定, ④バーションを指定, ⑤head内読み込み)

<使用例>


    wp_enqueue_script('bootstrap-min-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array(), '3.3.6', true);
    wp_enqueue_script('touchSwipe-min-js', get_template_directory_uri() .'/js/jquery.touchSwipe.min.js', array(), '1.6.18' , true);
    wp_enqueue_script('trio-js', get_template_directory_uri() .'/js/trio.js', array(), wp_theme_version() , true);

/* テーマのバーション取得 */
function wp_theme_version() {
    $theme = wp_get_theme();
    return $theme->get('Version');
}


第4引数の④バーションを指定しておくと、サイトの高速化処理でファイルのキャッシュ保存期間を長く設定していた場合でも、バーションをチェックして新しいCSSファイルを読み込んでくれるようになります。

第5引数をtrueにすると、JavaScriptファイルの読み込みが、ヘッダーではなくフッター部分(</body>タグの直前)になります。デフォルトはfalseでヘッダーでの読み込みです。

JSファイルは、wp_enqueue_script関数を使って、functions.phpファイルで一元管理すると、修正も楽になります。

スポンサーリンク

逆引き辞典 

この記事と一緒によく読まれています!