この記事は、Webデザイナー・技術者用の記事です。
WordPressのオリジナルテーマ制作関連の書籍を読んでいると、たいていの開発環境がLocalというデスクトップアプリケーションを使っているので、私もしばらくそうやっていましたが、それほど性能のいいPCを使っていないため、WordPressの編集結果を保存するたびに、数秒の待ち時間が発生して、それをストレスに感じるようになりました。
直接サーバーで編集したほうがすぐに更新されるのですが、functions.phpやstyle.cssなどを編集する必要がある場合は、ローカルで編集してからFTPでサーバーに転送するのもすこし面倒です。
この記事では、その手間を短縮し、Visual Studio Code（VS Code）から直接Xserver上のWordPressファイルを編集する方法をご紹介します。
開発効率を大幅に向上させ、保存時の待ち時間を解消できる実践的な内容です。
前提条件
・OS：これはローカル環境がWindows11で説明しています（Macでも同様にできるはず）。
・サーバー：Xserverで説明していますが、SSH接続に対応しているサーバーならば応用可能です。
・サーバーのディスク容量：作業するディレクトリに十分な空きがある事。
・VSCode：Microsoft Visual Studio Codeが既にPCにインストールされていること。
サーバーからSSH秘密鍵をダウンロードする
サーバーに（WordPress管理者ではなく）サーバー管理者でログインします。Xserverの場合は、サーバーパネルが開きます。
上図の「SSH設定」をクリックすると下図のようになります。
SSH設定をONにします。
国外アクセス制限はこの記事に関係ありません。
パスフレーズは、サーバーに接続するときにパスワードを求められるかどうかの設定で、自分の場合は「パスフレーズを設定する」にしました。
設定を確認したら「登録して秘密鍵をダウンロードする」ボタンを押します。
ダウンロードした秘密鍵は「xs123456.key」というような名前です。
このファイルを
c\ユーザー\自分のユーザー名\.ssh
というフォルダー（.sshが無ければ作成して）の中に秘密鍵を入れます。
~/.ssh/config の編集
この.sshフォルダーの中にconfig（拡張子無し）というファイルが無ければ作成して、次のように編集します。
Hostxserver
HostName xs123456.xsrv.jp
Port 10022
User xs123456
IdentityFile ~/.ssh/xs123456.key
Host名は、xserverでなくても自分の好きな名前を付けられます。
HostNameは、自分の使用しているサーバー固有のドメイン名になります。
Port番号は、SSH接続の場合「10022」番ポートに決まっています。
User名は、Xserverの場合、自分のサーバーのサブドメイン名になります。
IdentityFileは、ダウンロードした秘密鍵ファイルへのパスです。~ はユーザーのホームディレクトリを意味します。
VSCode拡張機能「Remote SSH」をインストールする
Visual Studio Codeを開いて、左アイコンメニューから拡張機能をクリックして「ssh」で検索し「Remote SSH」という拡張機能をインストールします。
サーバーに接続する
拡張機能「Remote SSH」をインストールすると、VSCodeの左下隅が図のようになりますので緑色の「><」アイコンをクリックします。
するとVSCodeの上の中央に下図のように選択肢が出ますので「Connect to Host」を選択します。
するとホスト名一覧が表示されるので、先ほど~/.ssh/configファイルで設定したホスト名"xserver"を選びます。
サーバーから秘密鍵をダウンロードする際に「パスフレーズを設定する」を選んだ場合は、ここでパスフレーズを聴いてきますので入力します。
パスワードが正しく入力されれば、VSCodeの新しいウインドウが開き、サーバーへの接続処理を自動的に行います。
新しく開いたVSCodeの左の一番上のアイコンをクリックして「Open Folder」をクリックします。
するとVSCodeの画面上に「/home/xs123456/」と表示されます。これが自分に割り当てられたディレクトリでその下に自分で取得して割り当てているドメイン（satogo-design.com）とサーバーの元々のドメイン名（xs123456.xsrv.jp）が表示されます。
サイト公開前の開発・ステージング環境として使うならxs123456.xsrv.jpの方を選びます。
これで下図のようにWordPressのfunctions.phpなどのコードを直接修正することができます。
まとめ
この方法を使えば、ローカル環境での開発ストレスから解放され、より迅速かつ効率的にWordPressのテーマ開発やカスタマイズを進めることができます。特に、ちょっとしたCSSの調整やPHPのデバッグなど、リアルタイムでの変更確認が必要な作業において、その効果を実感できるはずです。ぜひ、VS CodeとRemote SSHを活用して、快適なWeb開発環境を構築してみてください。
