🛠️

🏠 Local × WordPressでJSアプリを動かす方法

に公開
JavaScript
PHP
WordPress
local
Astra
tech

初心者でもできる！子テーマでページごとに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を適用する

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

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