wp_enqueue_script() – スクリプトを読み込む関数

投稿日 :

wp_enqueue_script() 関数はスクリプトを読み込むために利用される関数です。

目次

wp_enqueue_script() 関数とは

WordPress で JavaScript ファイルを適切に読み込むためにキューに登録し、ページに追加するための関数です。テーマやプラグイン開発に取り組む上では、かなり触れることが多い関数なのではないでしょうか。

パラメーター

$handleスクリプトのハンドル名を設定
$srcスクリプトのパス名を設定
$deps関連するスクリプトのハンドル名を配列で設定
$verスクリプトのバージョンを設定
$args追加のスクリプトを読み込む必要がある場合に配列で設定
defer or async

それ以外の場合は、真偽判定され、スクリプトをフッターで出力するかどうかを設定
デフォルトは false

使い方

この関数を使った JavaScript を読み込みは、WordPress が推奨する方法です。header.phpfooter.php などに <script> タグを使ってハードコーディング(直接書き込む)で読み込まれている場合は、こちらの利用をお勧めします。

一般的には、wp_enqueue_scripts フックを通して、当関数でスクリプトをキューに登録します。

add_action(
	'wp_enqueue_scripts',
	function () {
		wp_enqueue_script(
			'my-theme-script',
			get_template_directory_uri() . '/assets/js/my-theme-script.js',
			array(),
			'1.0.0',
			array(
				'in_footer' => true,
				'strategy' => 'defer',
			)
		);
	}
);

WordPress 6.3 から、以前は $in_footer パラメーターが利用できましたが、それに代わり $args パラメーターを使い、スクリプトの読み込み方法を指定することができるようになりました。

defer

array( 'strategy' => 'defer' )

これを $args パラメーターに指定することで追加できます。

defer を指定したスクリプトは、DOM ツリーが完全に読み込まれた時点(DOMContentLoaded や window load イベントの前)で実行されます。

defer スクリプトは、非同期スクリプトとは異なり、DOM に出力/追加された順番に実行されます。

async

array( 'strategy' => 'async' )

これを $args パラメーターに指定することで追加できます。

async を指定したスクリプトは、非同期スクリプトとしてブラウザに読み込まれるとすぐ実行されます。

非同期スクリプトは実行される順番が保証されていないことに注意しましょう。

メモ

  • 管理画面で呼び出す場合には admin_enqueue_scripts アクションフックを使う
  • ログイン画面で呼び出す場合には login_enqueue_scripts アクションフックを使う

フック

ありません。

まとめ

WordPress テーマやプラグインを開発されたことがある方であれば、利用されている関数でしょう。利用する状況(管理画面やログイン画面など)によっては、読み込む最適な関数が変わってくるので注意が必要です。

コーディングや
WordPress開発のリソースが足りない!

オレインデザインでは、デザインデータからの HTML コーディングから WordPress テーマ・プラグイン開発まで幅広くウェブ制作に対応しています。

お気軽にお問い合わせください。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。