WordPressのCSSを高速更新

WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORE SERVER。

VSCode設定

Sass編集

大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassを入れる。

コンパイル

拡張機能Live Sass Compilerを入れる。ステータスバーWatch Sassで監視開始。.sass/.scss保存時に.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
}

VALUE SERVER以外の場合は秘密鍵のパスが必要。

"uploadOnSave": trueは.css更新と同時にUPされる。プレビュー確認も出来ないので、手動で.cssを右クリック > Uploadが安全。

サーバ設定

SSH接続

秘密鍵発行ではなくIP登録制。30日毎に要登録。

VALUE SERVER

コントロールパネル > お役立ちツール > SSH接続 > SSH登録

CORE SERVER

新コントロールパネル > サイト設定 > ツール/セキュリティー > SSH接続IP許可

運用

VSCodeでSassを編集。 Watch Sass状態でCtrl+S
.cssを右クリック > Upload。おわり