項目	ローカル環境（例: Local by Flywheel, XAMPP）	本番に近いテスト環境（例: サブドメイン + SFTP）
環境の再現性	❌ データベースの文字コード、PHPのモジュール、サーバー設定などが本番と異なる場合が多い。	✅ 本番と同じサーバー上なので、再現性が非常に高い。
外部連携テスト	❌ 外部API連携やメール送信機能のテストに制約がある。	✅ ほぼ本番と同様に動作するため、正確なテストが可能。
公開設定	❌ サーバーへの**移行作業（デプロイ）が別途必要。	✅ サーバーに直接作業するため、移行の手間が最小限**。
筆者のおすすめ	初期の学習・練習用	実際の開発・カスタマイズ

結論： 実際にサイトを公開・運営していく上で、ローカル環境は「練習」にはなりますが、「確実な開発」には向きません。あなたの作業を本番と同じ環境でテストすることこそが、トラブルを未然に防ぎ、作業効率を最大化する唯一の方法なのです。

3. ✨ 最速・確実！VS CodeとSFTPでテスト環境を作る具体的なステップ

本番に近い環境で作業するためのベストプラクティスは、「本番サーバー上にサブドメインでテストサイトを作り、SFTP機能を使って直接編集する」方法です。

ここでは、多くの開発者に愛用されている高機能エディタ VS Code（Visual Studio Code） を使った設定方法をご紹介します。

ステップ1：サーバーにテスト環境（サブドメイン）を作る

サブドメインの作成:
- ご利用のレンタルサーバー（XServer, ConoHa WINGなど）のコントロールパネルにログインします。
- 「サブドメイン設定」から、例えば test.yourdomain.com のようなドメインを作成します。
WordPressのインストール:
- サブドメインのディレクトリに、本番環境と同じバージョンのWordPressをインストールします。
- （理想は本番サイトのデータをコピーすることですが、学習中は新規インストールでもOKです。）

ステップ2：VS CodeにSFTP拡張機能をインストール・設定する

拡張機能のインストール:
- VS Codeを開き、左側の拡張機能アイコン（☐4つの四角）をクリック。
- 検索窓で「SFTP」と検索し、最も評価の高い拡張機能（例: NatizyskunkのSFTP）をインストールします。
SFTP設定ファイルの作成:
- VS Codeで作成中フォルダー内の任意のファイルを選択→Shift + Ctrl（Macの場合はCommand） + p を押します。
- 検索窓に「sftp」と入力します。
接続情報の記述:
- .sftp.json を開き、以下の情報をサーバーに合わせて記述・編集します。

{
    "name": "My Server",
    "host": "localhost",
    "protocol": "sftp",
    "port": 22,
    "username": "username",
    "password": "/",
    "uploadOnSave": false,
    "userTempFile": false,
    "openSsh": false
}

name：

任意の名前。

host：

protocol：

“sftp”（デフォルトでこの値が入っている。このままでOK）

port：

上記画像の”接続ポート”の数字を入力(サーバーによる)

username：

上記画像のモザイク処理してる”アカウント”を入力

password：

上記画像の”SSHパスワード”表示ボタンがあるのでボタンをクリック。

remotePath：

アカウント情報 > フルパスの情報とサーバー上のディレクトリー名を組み合わせます。ディレクトリー名はFileZillaから確認できます。
⚠️FTPソフトなどで接続した際に、「このサブドメインのWordPressが置いてある場所」を指し示すように正確に入力してください。

ignore：

作成中フォルダー内でサーバーにアップロードしたくないフォルダーをしていすることができます。sftp.jsonを設定する際、自動的にフォルダーないにvscodeという名前が作成されているのでこのフォルダーはアップロードしないようにしましょう。以下のように記述をすることで設定できます。

"ignore": [
        ".vscode"
    ],

uploadOnSave：

“true”にするとVSCode上でファイルを保存した時に自動的に保存されたファイルがサーバー上にアップロードされるようになります。任意のタイミングでアップロードしたいときは”false”にしましょう。その場合、Shift + Ctrl (Command) + pで表示される検索窓から「SFTP: Sync Local -> Remote」を選択するとアップロードできます。

これで設定は完了です！

驚くべき開発体験！

この設定をすると…

VS Codeでファイルを編集し、保存 (Ctrl+S) を押す。
その瞬間、 変更されたファイルが自動でサブドメインのサーバーにアップロードされます。
ブラウザでサブドメインのサイトをリロードするだけで、本番環境で実際に動作する様子を確認できます！

ローカル環境のように「保存→ファイル転送ソフトを開く→アップロード」という手間がなくなり、驚異的なスピードで開発が進みます。

4. 🗣️今すぐVS Codeに「SFTP」拡張機能をインストールしましょう！

開発環境の賢い選択は、あなたのWordPress学習の成功を左右する最初のステップです。

ローカル環境での「練習」は卒業し、本番に近いサブドメイン環境で、SFTP機能を使って効率的かつ確実にスキルアップしましょう！

🔥 今すぐ行動！

お使いのレンタルサーバーでサブドメインを作成する。
VS CodeにSFTP拡張機能をインストールする。
本記事の ステップ3 を参考に、設定ファイルを作成・記述する。

もし設定方法で詰まってしまったら、Twitterやフォーラムなどで「VS Code SFTP 使い方」と検索してみてください。この環境を整えることが、あなたのWordPress開発者としての第一歩になります！

複数のサイト（サブドメイン）に切り替える方法🔄

複数のサブドメインや、全く別の本番サイトの開発をVS Codeで行う場合、設定ファイルを切り替える必要が出てきます。

方法1：サイトごとにフォルダを分ける（最も推奨）

最もシンプルで確実な方法は、サイト（サブドメイン）ごとにローカルの作業フォルダを分けることです。

サイトA（サブドメイン1）用のフォルダを作成し、その中にサイトAの設定を記述した .sftp.json を置く。

サイトB（サブドメイン2）用の別のフォルダを作成し、その中にサイトBの設定を記述した .sftp.json を置く。

作業する際は、該当のフォルダをVS Codeで開き直すだけで、設定ファイルが自動で読み込まれ、意図しないサイトにファイルをアップロードするミスを防げます。

この記事が役に立ったら、ぜひSNSでシェアしていただけると嬉しいです。

▶️ X@TumaLOVE0127もフォローしてもらえるとめちゃくちゃ嬉しいです！

🚀 WordPress開発の落とし穴回避！ローカル vs 本番環境、賢い選択はどっち？

1. その作業、本番で動きますか？