この記事では、WordPressをVSCodeに連携させるための記事をまとめています。
どうして、WordPressをVSCodeに連携させる必要があるのか
PHPやJavaScriptなどのバックエンド言語の編集を行う場合、WordPressエディターでは可動性があまり高くありません。
構文エラーの表示も精度が高くないので、バックエンド言語での編集は、VSCodeと呼ばれるテキストエディターでの編集が好ましいです。
そのため、VSCodeとWordPressと連携させて、WordPress上のコードを編集できるようにさせます。
WordPress×VSCodeの連携手順
① VS Codeのダウンロードとインストール
② VSCodeでFTP simpleをインストール
VSCodeをインストールして開くと、□が4つ並んだボタン、が左タブに見つかると思うので、クリックして、『ftp-simple』と検索して、以下のアイコンのプラグインをインストールしてください。
③ Config設定
F1キーを押すとVSCodeのウィンドウ上部で、コマンドプロンプトを起動するので、『ftp』と入力してみてください。予測変換で『Config』と書かれたコマンドが見つかると思いますので、クリックしてください。
すると、このようなjsonファイルが開きます。
必要な入力情報は、ロリポップサーバー前提になりますが、紹介します。
[
{
// 管理に使う名称
"name": "vietnam-learning",
// サーバのIPアドレス
"host": "ftp.lolipop.jp",
// port（ポート番号）はレンタルサーバーによって決定
// ロリポップのSSHでは、接続「2222」ですが、それとは異なるみたいです
"port": 21,
// プロトコル（ftp/sftp）
"type": "ftp",
// ログイン時のusernameを記載してください（ログイン時やSSHから確認可能）
"username": " cocotte.jp-○○",
// サイトログイン時のパスワード
"password": "●●●●●●●●●●●●●●●●●●●●●●●●●",
// サーバログイン時のデフォルトPATH
// ロリポップftpで管理しているフォルダ名を記載するとそのフォルダに格納されているファイルすべてと連携できる
// 以下の起債はグローバルパスになるので、ロリポップftpで管理しているフォルダすべて対象
"path": "/",
// 自動保存の有無（true/false）
"autosave": true,
// 保存時の確認の有無（true/false）
"confirm": false
}
]④ Remote接続
F1キーをもう一度押して、『ftp』と入力すると『Remote…』が表示されるのでクリックしてください。
すると、先ほど登録した管理に使う名称『vietnam-learning』が表示されます。クリックしてから、読み込みが始まるのですが、５～１０分ほどがかかります。
読み込み状況を確認する方法
もし読み込み状況を確認したい場合は、上部タブの『ターミナル』＞『新しいターミナル』を教えてください。
下に子ウィンドウが表示されるので、『出力』を選択して、『ftp-simple』を選んでください。読み込んでいる状況がわかります。
⑤ （複数サイトがある場合）編集したいサイトを選択
しばらくすると、自分がサーバー上に登録しているサイトがすべて表示されます。私の管理しているサイトですが、今回はvietnamを選択します（*さきほどのVietnam-learningとは全く関係ありません）。
異なるサイトをロードしたくなった場合、Remote接続からやり直しましょう。
一度、Config設定を行うと、jsonファイルに値が入力されてままになるので、もう一度Config設定する必要はありません。
すると、選択したサイト内にあるデータ（フォルダ）がすべて表示されます。『.Current directory』をクリックするとすべてVSCode上にデータが展開されます。
展開すると左タブにデータが表示されます。
WordPress上のファイルと同期することが完了すると、以降編集した内容はWordpressのファイルに自動更新されていきます。自動更新を辞めたい場合は、こちらのサイトをご参考ください。
コンフィグ設定の詳細
コメント