WordPressのCSSを高速更新

WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORESERVER。
(特にWordPress限定ではない)

VSCode設定

Sass編集

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

コンパイル

  1. 拡張機能Live Sass Compilerをインストール
  2. ステータスバーWatch Sassで監視開始
  3. Sassを更新 (.css自動生成)

プレビュー

  1. 拡張機能Live Serverをインストール
  2. ローカルに保存したhtmlの.cssリンク先を編集
  3. ステータスバーGo Liveで開始 (.css更新時に自動リロード)

ファイル > 自動保存でライブプレビュー。
今はChromeの開発者ツールを使う事が多い。

SFTP接続

  1. 拡張機能SFTPをインストール
  2. 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。おわり

更新
  • 2023.1　非推奨になったSFTPからSFTPへ移行
CSSSASSVSCodeWeb制作WordPress拡張機能

関連