WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORESERVER。
(特にWordPress限定ではない)
VSCode設定
Sass編集
大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassをインストール。
コンパイル
- 拡張機能Live Sass Compilerをインストール
- ステータスバー
Watch Sass
で監視開始 - Sassを更新 (.css自動生成)
プレビュー
- 拡張機能Live Serverをインストール
- ローカルに保存したhtmlの.cssリンク先を編集
- ステータスバー
Go Live
で開始 (.css更新時に自動リロード)
ファイル > 自動保存
でライブプレビュー。
今はChromeの開発者ツールを使う事が多い。
SFTP接続
- 拡張機能SFTPをインストール
Ctrl + Shift + P > SFTP: config
で生成される.vscode/sftp.json
を編集
{
"name": "(任意の設定名)",
"host": "(ホスト名).valueserver.jp",
"protocol": "sftp",
"port": 22,
"username": "(ユーザ名)",
"password": "(FTPパスワード)",
"remotePath": "/virtual/(ユーザ名)/public_html/(WPフォルダ名)/wp-content/themes/(子テーマフォルダ名)",
"uploadOnSave": false
}
IP登録制ではないサーバは秘密鍵のパスが必要。
"uploadOnSave": true
は.css更新と同時にUPされる。手動で.cssを右クリック > Upload
が安全。
サーバ設定
SSH接続
秘密鍵発行ではなくIP登録制。30日毎に要登録。
- CORESERVER
新コントロールパネル > サイト設定 > ツール/セキュリティー > SSH接続IP許可
- VALUE SERVER
コントロールパネル > お役立ちツール > SSH接続 > SSH登録
運用
VSCodeでSassを編集。 Watch Sass
状態でCtrl+S
。
.cssを右クリック、Upload
。おわり