![](https://konsuki.com/wp-content/uploads/2022/03/20220324192138_0324072157-150x150.png)
VSCodeでWordPressのテーマを編集できるようにしたい。
そのような方もいるのではないでしょうか。
WordPressのテーマエディタよりもVSCodeの方が慣れているということもありますよね。
今回は、VSCodeでテーマファイルを編集して、WordPressに直接反映できるようにする方法を紹介します。
テーマが入っているフォルダをダウンロードする
1. FTPソフトなどを使って、テーマが入っているthemesフォルダの中を表示させます。
![](https://konsuki.com/wp-content/uploads/2022/11/image-55-1024x579.png)
themesフォルダがどこにあるのかわからない方もいると思います。
themesフォルダは次の場所にあります。
WordPressがインストールされているフォルダ/wp-content/themes
上のパスはWordPressがインストールされているサーバーにおけるパスです。
自分のパソコンおけるパスと間違えやすいと思います。ご注意ください。
2. themesフォルダの中から、VSCodeで編集できるようにしたいフォルダをダウンロードします。
![](https://konsuki.com/wp-content/uploads/2022/11/image-56-1024x613.png)
ダウンロードしたフォルダを保存する場所はどこでも大丈夫です。
自分のパソコンのお好みの場所に保存してください。
ちなみに僕はyuuki_portfolioというテーマフォルダをダウンロードして、次の位置に保存しました。
/Users/konnsuki
VSCodeの設定をする
1. 「SFTP」という名前の拡張機能をダウンロードします。
![](https://konsuki.com/wp-content/uploads/2022/11/image-57-1024x486.png)
2. 先ほどダウンロードしたテーマフォルダを開きます。
![](https://konsuki.com/wp-content/uploads/2022/11/image-58-1024x568.png)
3. Ctrl + Shift + P (Cmd + Shift + P)でコマンドパレットを開きます。
![](https://konsuki.com/wp-content/uploads/2022/11/image-59-1024x409.png)
4. sftp: と入力すると表示される SFTP: Config を選択してください。
![](https://konsuki.com/wp-content/uploads/2022/11/image-60-1024x228.png)
sftp.json というファイルが作成されます。
![](https://konsuki.com/wp-content/uploads/2022/11/image-62-1024x498.png)
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
VSCodeからテーマを反映させる
ここまでが完了したら、WordPressのテーマを編集して反映させられる準備が整っています。
1. VSCodeでテーマに変更を加えます。
![](https://konsuki.com/wp-content/uploads/2022/11/image-63-1024x521.png)
試しに、ページのタイトルを変更してみました。
Konsuki’s Portfolio ▶︎ Konsuki’s Portfolio(変更済)
2. ファイルを保存します。
VSCodeのメニューから ファイル > 保存 のように選択しても、ショートカットキーの Ctrl + S でも大丈夫です。
WordPressで管理しているサイトを確認します。
変更が反映されていればOKです。
![](https://konsuki.com/wp-content/uploads/2022/11/image-69.png)
![](https://konsuki.com/wp-content/uploads/2022/11/image-68.png)
この方法を使う上での注意点
この方法を使うと、VSCodeで保存するたびにサイトに変更が加わります。
すでにたくさんの人に利用されているサイトの場合、利用者に混乱が起こるかもしれません。
その点は注意する必要があります。
コメント