ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

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

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

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

目次
  1. 正しいJavaScript読み込み方法
  2. JavaScript管理方法
  3. まとめ

正しい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');

まとめ

JavaScriptは不要なページで読み込んでいると、思いがけないエラーがでていたり干渉したりで不具合が起きている時があります。
適切に読み込んであとから不具合対処に時間をかけることにないようにしていったほうがいいと思います。