VSCodeでWordPressを直接編集できるようにする方法

VSCodeでWordPressのテーマを編集できるようにしたい。

そのような方もいるのではないでしょうか。
WordPressのテーマエディタよりもVSCodeの方が慣れているということもありますよね。

今回は、VSCodeでテーマファイルを編集して、WordPressに直接反映できるようにする方法を紹介します。

テーマが入っているフォルダをダウンロードする
VSCodeの設定をする
VSCodeからテーマを反映させる
この方法を使う上での注意点

テーマが入っているフォルダをダウンロードする

1. FTPソフトなどを使って、テーマが入っているthemesフォルダの中を表示させます。

themesフォルダがどこにあるのかわからない方もいると思います。
themesフォルダは次の場所にあります。

WordPressがインストールされているフォルダ/wp-content/themes

注意

上のパスはWordPressがインストールされているサーバーにおけるパスです。
自分のパソコンおけるパスと間違えやすいと思います。ご注意ください。

2. themesフォルダの中から、VSCodeで編集できるようにしたいフォルダをダウンロードします。

ダウンロードしたフォルダを保存する場所はどこでも大丈夫です。
自分のパソコンのお好みの場所に保存してください。

ちなみに僕はyuuki_portfolioというテーマフォルダをダウンロードして、次の位置に保存しました。

/Users/konnsuki

VSCodeの設定をする

1. 「SFTP」という名前の拡張機能をダウンロードします。

2. 先ほどダウンロードしたテーマフォルダを開きます。

3. Ctrl + Shift + P （Cmd + Shift + P）でコマンドパレットを開きます。

4. sftp: と入力すると表示される SFTP: Config を選択してください。

sftp.json というファイルが作成されます。

5. sftp.json の中身を次のように設定してください。

{
    "name": 任意の名前（例："Test Sever"）,
    "host": "リモートサーバのホスト名",
    "protocol": "sftp",
    "port": ポート番号（例：22）,
    "username": "リモートサーバーのユーザ名",
    "passphrase": "パスフレーズ",
    "privateKeyPath": 秘密鍵のパス（例："/Users/hoge.ppk/"）,
    "remotePath": サーバー側のフォルダのパス（例："/home/konsuki/konsuki.xsrv.jp/public_html/wp-content/themes/yuuki_portfolio"）,
    "context": パソコン側のフォルダのパス（例："/Users/konnsuki/yuuki_portfolio"）
}

注意

Windowsの場合、パスを次のように書き換えて書いてください。
C:\Users\konnsuki\yuuki_portfolio　▶︎　/Users/konnsuki/yuuki_portfolio