初心者でもできる！子テーマでページごとにJavaScriptを読み込む手順

WordPress で「ちょっとした JS アプリを作りたい」という場面は多いですが、
本番環境で試すのは怖いですよね。

そこで今回は、本番環境から切り離したローカルな環境でJSを動かす方法を解説します。

Local（ローカル WordPress）で安全に開発
Astra の子テーマを使って JS / CSS を読み込む
固定ページごとに JS を切り替えるベストプラクティス

1. Localをインストールする

Local は https://localwp.com/ からダウンロードできます。無料です。

Mac版はちょっと迷ったので解説します

ダウンロードすると .dmg ファイルが保存されます。

これをダブルクリックして開きます。
中にある Local を Applications にドラッグします。

初回起動時、次の画面が出ますが—
アカウント作成は不要です。

Sign in → ベーシックな使用であれば、スキップしてOK
Telemetry（エラーレポート）→ お好みで

2. 新しい WordPress サイトを作成

Local の左下にある 「＋ Create new site」 を押します。

以下のように設定します：

◆ Site name

test-site など任意

◆ Environment

そのまま Preferred でOK

◆ WordPress 設定

Username： admin
Password： test1234（開発用なので簡単でOK）
Email：適当でOK

「Add Site」をクリックすると、数十秒でサイトが出来上がります。

3. WordPress 管理画面を開く

Local のこの画面から：

Admin → WordPressダッシュボード
Open Site → 実際のサイト表示

4. Astra（親テーマ）をインストール

Admin → WordPressダッシュボードを選択します。
登録したサイトの情報で、サインインします。
WordPressダッシュボード が開きます。
外観（Appearance) → テーマ(Themes) を選択し、テーマの画面を開き、新規追加します。
検索で Astra を選び、インストール → 有効化します。

5. 子テーマを作る（最重要ポイント）

WordPress は「親テーマを直接編集すると壊れる」ので、
必ず 子テーマ で作業します。

子テーマのフォルダ例：

5-1. style.css（最低限必要な内容）

/*
 Theme Name: Astra Child
 Template: astra
 Version: 1.0.0
*/

Theme Nameで指定した名前がテーマの名前になります。ここでは、Astra Child です。

5-2. functions.php（ページ限定でJSを読み込む）

この記事の肝です。

<?php
// 子テーマのCSS
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('astra-child-style', get_stylesheet_uri(), [], '1.0.0');
});

// 固定ページごとにJSを読み分ける
add_action('wp_enqueue_scripts', function () {

  // 例：スラッグが sample のページだけJSを読み込む
  if (is_page('sample')) {

    // 使用したいフォント
    wp_enqueue_style(
      'custom-font',
      'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
      [],
      null
    );

    // custom.js の読み込み
    $js_path = get_stylesheet_directory() . '/assets/js/custom.js';
    if (file_exists($js_path)) {
      wp_enqueue_script(
        'custom-js',
        get_stylesheet_directory_uri() . '/assets/js/custom.js',
        [],
        filemtime($js_path),
        true
      );
    }
  }

}, 20);

5-3. custom.js（テスト用）

console.log("Custom JS loaded!");

ここでは、コンソールにメッセージを出力するだけです。

6. 子テーマをZIP化してアップロード

フォルダごとZIPにします。

-外観（Appearance) → テーマ(Themes) → 新規追加(Add New)
→ テーマのアップロード (作成したZIPをアップロードします）

「Astra Child」を有効化します。

7. 固定ページを作り、JSを適用する

固定ページ → 新規追加
タイトル：Sample
パーマリンク（スラッグ）：sample
本文は空でもOK
公開

functions.php の中に

if (is_page('sample')) { … }

があるため、このページでだけ custom.js が読み込まれます。

8. 動作確認

ブラウザで：

http://test-site.local/sample/

を開き、開発者ツール → Console に以下が出れば成功：

Custom JS loaded!

9. よくあるエラーと対処法

症状	原因	対処
画面が真っ白	PHPの構文エラー	`{}` や `;` を確認
JSが読み込まれない	ファイル名/スラッグの不一致	`is_page('sample')` を見直す
custom.js が404	パスが違う	`/assets/js/custom.js` を確認
CSSが反映されない	子テーマが無効化	テーマ画面で確認

まとめ：これでJSページを好きなだけ作れる

この方法を使えば：

/page1/ → page1.js
/page2/ → page2.js
/page3/ → page3.js

のように、ページ単位でJSアプリを動かすことができます。

特に「JSアプリを複数展開したい人」には最適な構成です。

Discussion