目次
wp_enqueue_script()の用途
wp_enqueue_script() は、WordPressでJavaScriptファイル（スクリプト）を登録・読み込むための最も基本的かつ推奨される関数です。テーマ・プラグイン開発では必須と言える関数です。
🔹wp_enqueue_script()の 基本情報
| 項目 | 内容 |
|---|
| 関数名 | wp_enqueue_script() |
|---|
| 定義ファイル | wp-includes/functions.wp-scripts.php |
|---|
| 返り値 | void（返り値なし、処理を実行するのみ） |
|---|
| 専用フック | wp_enqueue_scripts（フロント）admin_enqueue_scripts（管理画面） |
|---|
| 関連関数 | wp_register_script(), wp_enqueue_style(), wp_register_style() |
|---|
wp_enqueue_script()の構文
wp_enqueue_script(
string $handle,
string $src = '',
array $deps = array(),
string|bool|null $ver = false,
bool $in_footer = false
)
wp_enqueue_script()のパラメータ
| 引数 | 型 | 説明 |
|---|
$handle | string | スクリプトの識別名（ユニークな名前） |
|---|
$src | string | スクリプトのURLまたはパス |
|---|
$deps | array | 依存するスクリプトのハンドル（例：array('jquery')） |
|---|
$ver | `string | bool |
|---|
$in_footer | bool | trueなら</body>直前で読み込み。falseなら<head>で読み込み |
|---|
wp_enqueue_script()の使用例
フロントエンドでスクリプトを読み込む
function my_theme_scripts() {
wp_enqueue_script(
'custom-script', // ハンドル名
get_template_directory_uri() . '/js/custom.js', // ファイルパス
array('jquery'), // jQueryに依存
'1.0.0', // バージョン
true // フッターで読み込み
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
管理画面で読み込む
function my_admin_scripts() {
wp_enqueue_script( 'admin-script', plugin_dir_url(__FILE__) . 'admin.js' );
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
wp_enqueue_script()の依存関係の管理
WordPressには多くの組み込みスクリプト（例：jquery, jquery-ui-core）が用意されており、依存関係を指定することで順序や重複を自動で解決できます。
$in_footer の活用
スクリプトはなるべくページ下部で読み込む方が表示速度に優しいです。
そのため、通常は $in_footer = true にするのが推奨されます。
CDNとの併用も可能
wp_enqueue_script( 'vue', 'https://cdn.jsdelivr.net/npm/vue@2', array(), '2.0.0', true );
wp_enqueue_script()のベストプラクティスまとめ
| 推奨事項 | 理由 |
|---|
wp_enqueue_scripts フック内で呼び出す | タイミング管理のため |
|---|
| 依存関係を適切に設定する | スクリプト競合を防ぐ |
|---|
フッターで読み込む（true） | ページ描画を阻害しない |
|---|
| CDN利用時もハンドル名で管理 | 重複回避・整合性維持 |
|---|
よくある間違い
| 誤用例 | 問題点 |
|---|
<script src="..."> を直接出力 | WordPressの依存管理・キャッシュ管理が無効になる |
|---|
| 同じハンドル名で複数回登録 | 後の登録が無視される |
|---|
| テーマやプラグインに jQuery を手動で読み込む | WordPressのバンドル版と競合の恐れ |
|---|
wp_enqueue_script()の関連関数
| 関数名 | 説明 |
|---|
wp_register_script() | 登録だけしておき、後で wp_enqueue_script() で呼び出せるようにする |
|---|
wp_deregister_script() | 登録済みスクリプトの解除 |
|---|
wp_enqueue_style() | CSSファイルを読み込む |
|---|
wp_register_style() | CSSを登録のみ |
|---|
wp_enqueue_script()のまとめ
| 特徴 | 内容 |
|---|
| 主な用途 | JavaScriptの読み込み |
|---|
| 実行方法 | wp_enqueue_scripts などで呼び出す |
|---|
| 強み | 依存関係管理・キャッシュ・フッター読み込みに対応 |
|---|
| 使用推奨 | すべてのテーマ・プラグイン開発者に推奨される安全な読み込み方法 |
|---|
