WordPressで独自のJavaScriptファイルを読み込みたいとき、どのように書くのが正解でしょうか？
実は wp_enqueue_script() 関数を使うことで、WordPressに最適な形でJSを安全に読み込むことができます。
この記事では、基本的な使い方に加えて、「特定ページだけ読み込む」などの条件分岐テクニックも解説します。
✅ wp_enqueue_script() の基本構文
まずは functions.php に以下のように記述します。
function my_theme_enqueue_scripts() {
if ( !is_admin() ) {
wp_enqueue_script(
'custom-script', // ハンドル名（識別用）
get_template_directory_uri() . '/js/script.js', // JSファイルのパス
array(), // 依存スクリプト（例: jQuery）
'1.0.0', // バージョン
true // フッターで読み込む（true = </body>直前）
);
}
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
💡 各引数の意味
| 引数位置 | 説明 |
|---|---|
'custom-script' | 読み込み対象に付ける名前（識別名） |
get_template_directory_uri() . '/js/script.js' | 読み込むJSファイルのURL |
array() | 依存ファイル（例：array('jquery')） |
'1.0.0' | バージョン指定（キャッシュ対策） |
true | フッターで読み込む（falseにするとheadで読み込む） |
✅ 条件分岐で「特定のページだけ」読み込む方法
WordPressには条件分岐タグが豊富に用意されているため、指定ページだけにJSを読み込むことが可能です。
例：固定ページ「お問い合わせ」だけに読み込む
function my_theme_enqueue_scripts() {
if ( !is_admin() && is_page('contact') ) {
wp_enqueue_script(
'contact-form-script',
get_template_directory_uri() . '/js/contact.js',
array(),
'1.0.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
その他の条件分岐例：
| 条件 | 関数 |
|---|---|
| トップページのみ | is_front_page() |
| 投稿ページのみ | is_single() |
| カスタム投稿タイプのアーカイブ | is_post_type_archive('custom-post') |
| 特定の投稿ID | is_single(123) |
| 特定のカテゴリページ | is_category('news') |
✅ jQueryに依存したスクリプトを読み込む場合
WordPressには jQuery があらかじめ同梱されています。依存させる場合は以下のように記述します。
function my_theme_enqueue_scripts() {
if ( !is_admin() ) {
wp_enqueue_script(
'jquery-script',
get_template_directory_uri() . '/js/jquery-custom.js',
array('jquery'),
'1.0.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
🔒 is_admin() を使う理由
is_admin() を使うことで、管理画面ではスクリプトを読み込まないようにできます。
テーマや管理プラグインに干渉する心配を避けるためにも、特にフロント専用スクリプトではこの条件分岐を加えるのがベストプラクティスです。
🧪 まとめ
- JavaScriptは
wp_enqueue_script()で読み込むのがWordPressの正しい方法 - 条件分岐で「必要なページだけ」読み込めるので高速化にも貢献
is_admin()を使って管理画面の影響を防ぐのもポイント
✅ 今すぐ使えるシンプル実装
function my_theme_enqueue_assets() {
// 管理画面では読み込まない
if ( !is_admin() ) {
// CSSの読み込み
wp_enqueue_style(
'main-style',
get_template_directory_uri() . '/style.css',
array(),
'1.0.0',
'all'
);
// JavaScriptの読み込み
wp_enqueue_script(
'main-script',
get_template_directory_uri() . '/js/script.js',
array('jquery'), //
'1.0.0',
true // trueでフッターに読み込み
);
}
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_assets');