WordPressでスクリプトを読み込もう

WordPressでのJavaScriptの読み込み方

WordPressでは、CSSファイルと同じように、JavaScriptの読み込みもfunctions.phpにて行います。

その際に必要なこととして、

• wp_enqueue_script()を使って読み込む
• defer属性を付与する
• WordPress標準のjQueryを取り除く

などを行います。

それでは詳しく見ていきましょう。

基本的な読み込み方

WordPressでJavaScript読み込むためには次のようにwp_enqueue_script()という関数を使用します。

wp_enqueue_script(
  'main_script',
  get_template_directory_uri() . '/js/main.js',
  array(),
  '1.0'
);

この関数を使用すると、記述したスクリプトを読み込む順番に追加してくれます。現段階では「JavaScriptを読み込む時に使う関数」だと思ってください。

wp_enqueue_script()の引数をみていきます。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

※WordPressCodexより一部引用

• $handle →第一引数で、任意の名前をつけてあげる必要があります。
• $src →第二引数で、読み込むJavaScriptの絶対パスを書きます。テーマまでのディレクトリを出力するget_template_directory_uri()を使います。
• $deps →第三引数で、ここで指定したスクリプトよりも、前に読み込まれてほしいスクリプトを指定します。詳しくは後述します。
• $ver →スクリプトのバージョンがあれば指定します。初めのうちはとりあえず「’1.0’」と入れておけば良いです。
• $in_footer →基本的には、wp_head()の記述箇所で出力が行われているところを、wp_footer()（ = </body>終了タグの前）の箇所にスクリプトの読み込みを出力させるオプション。

複数のJavaScriptを読み込む方法

複数のスクリプトの読み込みを行いたいときは、次の２種類のパターンがあります。

• 読み込み順を気にしなくて良い場合
• 読み込み順を決めなければいけない場合

読み込み順を気にしなくて良い場合

読み込み順を気にしなくて良い場合は、次のようにそのまま並べて記述します。

wp_enqueue_script(
  'sub_script',
  get_template_directory_uri() . '/js/sub.js',
  array(),
  '1.0'
);

wp_enqueue_script(
  'main_script',
  get_template_directory_uri() . '/js/main.js',
  array(),
  '1.0'
);

このように書くと、記述した「sub_script」「main_script」の二つのファイルが読み込まれます。

基本的には上から順に「sub_script」→「main_script」で呼び出されますが、書き方として厳密に決めているわけではありません。

そこで、読み込む順番を厳密に定めたいときは次の方法を使います。

読み込み順を決めなければいけない場合

JavaScriptで複数のファイルがある場合、プラグインやライブラリを使用する関係で読み込み順を決めたい場合があります。

そのためには

• スクリプトの登録
• 依存関係の指定

の二つを行う必要があります。

スクリプトの登録はwp_register_script()を使って、次のように行います。

wp_register_script(
  'jquery_script', // 登録する式別名
  'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', // 登録するJavaScriptのパス
  array(), // JavaScriptの依存関係
  '1.0' // バージョンの指定
);

wp_register_script()は記述したスクリプトを登録することができます。

よく似ていますが、wp_enqueue_script()とは異なり、登録をするだけで、このままでは読み込まれる処理に含まれません。

読み込まれる処理に追加するには、それ専用のwp_enqueue_script()を使い、次のように依存関係の指定をします。

wp_register_script( //'jquery_script'を登録
  'jquery_script',
  'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',
  array(),
  '1.0'
);

wp_enqueue_script(
  'main_script',
  get_template_directory_uri() . '/js/main.js',
  array('jquery_script'), // 'jquery_script'が読み込まれた後に'main_script'を読み込む
  '1.0'
);

wp_enqueue_script()の第三引数を用いて依存関係の指定を行い、「登録したスクリプトの後に読み込む」と書けば、読み込み順を厳密に管理することができます。

読み込みタイミングを決める

読み込みタイミングについては、スタイルの読み込みと同様に、add_action()を使用します。また、アクションフックも同様のwp_enqueue_scriptsを使います。

add_action()などについては次の記事を振り返ってみましょう。

WordPressでCSSを読み込もう | ZeroPlus Media

defer属性を付与する

ここまでスクリプトの呼び出しについて扱ってきましたが、メインとなるスクリプトの記述にはdefer属性の記述を、これまでやってきました。

JavaScriptを勉強する準備をしよう | ZeroPlus Media

wp_enqueue_script()のみの記述だと、defer属性をつけられないので、次にような記述を加えます。

add_filter('script_loader_tag', 'add_defer', 10, 2);
function add_defer($tag, $handle) {
  // 識別名がmain_script以外はそのまま返却
  if ($handle !== 'main_script') {
    return $tag;
  }

  // deferを追加して返却する
  return str_replace(' src=', ' defer src=', $tag);
}

defer属性はメインとなるスクリプトにつけられれば良いので、今回はmain_scriptに対してつけています。

こちらは、基本的に理解の優先度が低く、「この記述を使えばdefer属性がつけられる」ということだけ分かれば大丈夫です。

それでも詳しく知りたい方は、こちらの記事が参考になります。

WordPress標準のjQueryを取り除く

最後に、WordPress標準のjQueryを取り除く方法について解説していきます。

まず前提として、WordPressでは標準でjQueryを使うことができます。

ただし、次のような理由でWordPress標準のjQueryを削除する場合があります。

• jQueryのバージョンをこちらで指定したい場合
• 使用する時に、jsファイルで特殊な記述をする必要があるが、それを避けたい場合

その際には、次の記述を行うと、WordPress標準のjQueryの削除を行うことができる。

// デフォルトのjQueryを削除
wp_deregister_script('jquery');

もちろん、その場合は、スクリプトの読み込みの中でjQueryを記述する必要がある。

まとめ

本記事では、

• スクリプトの読み込み
• スクリプトの登録と、読み込み順の指定
• defer属性の付与方法
• jQueryを取り除く方法

を扱ってきました。

これらをまとめると、次のような記述になります。

// jsの読み込み
add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts() {
  // デフォルトのjQueryを削除
  wp_deregister_script('jquery');

  // jQueryを読み込む
  wp_register_script(
    'jquery_script',
    'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',
    array(),
    '1.0'
  );

  // メインのスクリプトを読み込む
  wp_enqueue_script(
    'main_script',
    get_template_directory_uri() . '/js/main.js',
    array('jquery_script'),
    '1.0'
  );
}

/* main.js にdefer属性を付与 */
add_filter('script_loader_tag', 'add_defer', 10, 2);
function add_defer($tag, $handle) {
  // 識別名がmain_script以外はそのまま返却
  if ($handle !== 'main_script') {
    return $tag;
  }

  // deferを追加して返却する
  return str_replace(' src=', ' defer src=', $tag);
}

全て完璧に自分でかける必要はありませんが、大まかな流れと、これからの学習のヒントとして、本記事の内容を使ってもらえればOKです。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー