WordPressでJS（JavaScript）を正しく読み込む方法

JavaScriptの読み込みが必要な理由

「ただのHTMLとCSSだけじゃ、物足りない…」と思ったことはありませんか？Webサイトにインタラクティブな動作や動きのあるUIを取り入れるには、JavaScriptが不可欠です。WordPressでも、見た目だけでなく操作性の向上を目的として多くの場面でjsが活用されています。

jsでできることとは？

JavaScriptの活用シーンは非常に幅広く、以下のような処理が実現できます。

• ドロップダウンメニューの開閉
• モーダルウィンドウの表示
• Ajax通信による非同期データ取得
• スクロール連動のアニメーション
• 入力フォームのリアルタイムバリデーション

特にスマートフォン閲覧の増加に伴い、ユーザーが快適に操作できる動的UIは重要視されています。

WordPressとjsの連携に注意が必要な理由

WordPressはテーマやプラグインの構造が複雑なため、通常のHTMLサイトとは異なる読み込み方法が求められます。特に次のような課題が初心者を悩ませます。

• jsファイルを読み込んでも動作しない
• 他のスクリプトやプラグインと干渉する
• 読み込み順のミスで意図した動作にならない

これらを避けるには、WordPress独自のwp_enqueue_script()による読み込みが基本です。

jsを読み込む基本的な方法

WordPressでは、functions.phpファイルに記述してjsファイルを読み込むのが正しい方法です。直接HTMLにscriptタグを書くのではなく、WordPressが用意している関数を使うことで、読み込み順や依存関係が自動で処理されます。

wp_enqueue_script()の基本構文

function my_theme_scripts() {
    wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

この関数では以下のような要素を設定します。

引数	内容
ハンドル名	スクリプトの識別子
URL	読み込むスクリプトのパス
依存関係	他に先に読み込むスクリプト名
バージョン	スクリプトのバージョン
フッター読み込み	trueでフッターに読み込む

例えばGoogle Analyticsなどのスクリプトは、ページ下部での読み込みが推奨されるため、trueを指定するのが推奨されます。

テーマフォルダの正しい指定方法

子テーマを使用している場合、ファイルのパスを指定する関数も変わります。

wp_enqueue_script('child-script', get_stylesheet_directory_uri() . '/js/child.js', array(), null, true);

ここで混同しがちなのがget_template_directory_uri()（親テーマ用）とget_stylesheet_directory_uri()（子テーマ用）の違い。実際の開発現場でもこの違いに気づかず、jsが読み込まれないというミスはよく見られます。

読み込みの位置に注意

scriptをhead内に読み込むか、bodyの閉じタグ前にするかで、表示速度やユーザー体験が大きく変わります。一般的にはtrue（フッター読み込み）を推奨しますが、jQueryなどはhead内に先に読み込んだ方が適しているケースもあります。

外部JavaScriptの読み込み方法

WordPressでは、自分のテーマ内だけでなく、外部CDNや他ドメインから提供されているjsファイルを読み込むことも可能です。特に高速性や信頼性を求めるならCDNの利用が効果的です。

CDNスクリプトの読み込み

wp_enqueue_script('jquery-cdn', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), null, true);

CDNのメリットは以下の通りです。

• 高速な読み込みが可能
• キャッシュが共有されやすい
• サーバー負荷の軽減

ただし、CDN側の障害でスクリプトが読み込めなくなる可能性もあるため、信頼性のあるサービスを選びましょう。

複数のjsファイルを読み込むには？

複数のjsファイルを扱う場合、それぞれの依存関係を明確にしておかないと、順序の乱れによって不具合が発生します。

wp_enqueue_script('plugin-core', get_template_directory_uri() . '/js/core.js', array(), null, true);
wp_enqueue_script('plugin-ui', get_template_directory_uri() . '/js/ui.js', array('plugin-core'), null, true);

このように依存関係を指定すれば、WordPressが自動で順序を制御してくれます。

JavaScriptを特定ページだけで読み込む方法

すべてのページで同じjsを読み込む必要はありません。むしろ、不要な読み込みはページの表示速度を低下させます。ページごとに読み込みを制御することで、パフォーマンスとSEO効果が高まります。

is_page()やis_single()を使った条件分岐

function custom_scripts() {
    if (is_page('contact')) {
        wp_enqueue_script('contact-js', get_template_directory_uri() . '/js/contact.js', array(), null, true);
    }
}
add_action('wp_enqueue_scripts', 'custom_scripts');

固定ページIDを指定することも可能です。

if (is_page(42)) { ... }

テンプレートファイルごとに条件分け

ランディングページなど、特定のテンプレート専用にjsを追加したいケースもあります。

if (is_page_template('template-lp.php')) {
    wp_enqueue_script('lp-js', get_template_directory_uri() . '/js/lp.js', array(), null, true);
}

この方法を使えば、不要な読み込みを防ぎ、スリムで最適な構成が可能になります。

プラグインでjsを読み込む方法

テーマファイルを直接編集せずに、プラグインを活用してjsを読み込む方法もあります。コード編集に不安がある方におすすめです。

「WPCode – Insert Headers and Footers」プラグインの活用

このプラグインを使えば、管理画面からスクリプトを手軽に挿入できます。

1. プラグインをインストール・有効化
2. 管理画面の「設定」→「WPCode」などを開き、ヘッダー・フッターの項目を選択
3. 「フッター」などのセクションにjsを記述
4. 保存すれば完了

テーマファイルを編集しないため、初心者でも安心して使えます。

特定ページで読み込みたい場合

「Header Footer Code Manager」などのプラグインでは、ページ単位でスクリプトの表示・非表示を管理できます。条件付き読み込みが必要な場合にはこちらの方が柔軟性があります。

トラブルシューティングとjs読み込みの注意点

jsを正しく記述したはずなのに動作しない…。そんな時は、以下の観点で確認してみましょう。

jQueryが二重に読み込まれている

テーマやプラグインでjQueryが重複して読み込まれると、競合してjsが動作しないことがあります。対処法としては、不要なスクリプトを読み込まないように調整します。

wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, null);
wp_enqueue_script('jquery');

コンソールエラーを確認する

ChromeなどのブラウザでF12キーを押し、「Console」タブを開いてエラーを確認します。特定の行で「Uncaught ReferenceError」などの表示が出ていれば、読み込み順や関数名ミスの可能性があります。

キャッシュクリアも忘れずに

サーバーキャッシュやブラウザキャッシュにより、古いjsが読み込まれている場合もあります。変更後は以下の対処を行ってください。

• ブラウザのキャッシュクリア（Shift+更新）
• キャッシュ系プラグインのクリア
• CloudflareなどCDNのキャッシュ更新

まとめ