2020.04.27 2020.05.16

【WordPress】JavaScriptファイルを正しく読み込む方法

この記事は、最初の投稿から4年以上が経過しています。

最終更新から1577日が経過しています。

WordPressでJavaScriptの正しい読み込み方法を解説します｡
WordPressはヘッダー､フッターが共通なので､何も意識していないとJavaScriptファイルが不要なブラウザ､ページにまで読み込ませてしまうので､その対処法についても紹介します｡

目次

正しいJavaScript読み込み方法
JavaScript管理方法
まとめ

正しいJavaScript読み込み方法

以下のコードをfunctions.phpにコピペします｡
これはテーマフォルダ直下にjsフォルダをつくり､その中につくったcommon.jsを読み込む場合のコードです｡

function custom_print_scripts() {
  wp_enqueue_script('common-js', get_template_directory_uri() . '/js/common.js' , '' , '' , true );
}
add_action('wp_print_scripts', 'custom_print_scripts');

「wp_enqueue_script」には5つの引数があります｡
5番目の引数を指定しないと「wp_head()」内に出力され､「true」にすると「wp_footer()」に出力されます｡

JavaScript管理方法

JavaScriptは各ページに必ずあるものではないので､CSSほど細かく管理する必要はないです｡
ただ､読み込む必要がないページで読み込まれていたり､polifillでIEだけで読み込ませたいものを他のブラウザでも読み込ませたりしていると､エラーや速度に影響してきます｡

function custom_print_scripts() {
  // ブラウザ取得判定するのに小文字にする
  $browser = strtolower($_SERVER['HTTP_USER_AGENT']);
  // ブラウザ判定
  if (strstr($browser , 'trident') || strstr($browser , 'msie')) {
    wp_enqueue_script('ofi-js', '//cdnjs.cloudflare.com/ajax/libs/object-fit-js' , '' , '' , true );
  }

  //問い合わせページだけ読み込む
  if (is_page("contact")) {
    wp_enqueue_script('yubinbango-js', '//yubinbango.github.io/yubinbango/yubinbango.js' , '' , '' , true );
  }
}
add_action('wp_print_scripts', 'custom_print_scripts');