このプロジェクトは、WordPress の本番環境データを使用しながら安全にテーマ開発を行うためのソリューションです。本番サイトのデータを使いながらも、実際のサイト訪問者には影響を与えず、開発者だけが新しいテーマを確認できる環境を提供します。
- 実データを使った開発: 本番環境のデータを使用して開発を行うため、実際のコンテンツで正確にテストできます
- 安全な環境: 訪問者には影響を与えず、開発者のみが新しいテーマを確認できます
- リアルタイム更新: ファイル変更を検知して自動的にサーバーにアップロードし、ブラウザも自動リロード
- 対話式セットアップ: 簡単なセットアップウィザードで環境構築が可能
- 環境変数による設定:
.envファイルで簡単に設定を管理 - VSCode との連携: VSCode の SFTP プラグインと連携して効率的な開発が可能
- WordPress サイトに Theme Switcha プラグインがインストールされていること
- Visual Studio Code に SFTP プラグイン がインストールされていること
- Node.js と npm がインストールされていること
- SFTP 接続用の SSH キーが設定済みであること
- このリポジトリをクローンまたはダウンロードします
- プロジェクトディレクトリで依存パッケージをインストールします
npm install- セットアップウィザードを実行します
npm run prepare- ウィザードの指示に従って設定を行います
- WordPress サイトのホスト名
- SFTP 接続情報
- テーマディレクトリのパス
- Theme Switcha の設定情報など
以下のコマンドで開発環境を起動します：
npm run devこのコマンドで以下の機能が同時に起動します：
- BrowserSync によるブラウザの自動リロード
- SFTP による自動ファイルアップロード
VS Code の SFTP プラグインを使って、初期ファイルをアップロードできます：
- VS Code で SFTP: Upload Project コマンドを実行
- 必要なファイルを選択してアップロード
src ディレクトリ内のファイルを編集すると、自動的にサーバーにアップロードされ、ブラウザが自動的にリロードされます。
Theme Switcha プラグインの設定に従って、開発中のテーマを確認できます。通常は以下のような URL でアクセスします：
https://example.com/?theme-switch=theme-dev&passkey=yourpasskey
package.json: npm パッケージと開発スクリプトの設定.env: 環境変数（セットアップウィザードで自動生成）.vscode/sftp.json: VS Code SFTP プラグインの設定（セットアップウィザードで自動生成）script/: 開発スクリプトsetup.js: セットアップウィザードdeploy.js: 自動アップロードスクリプトbrowser-sync.js: ブラウザ自動リロードスクリプト
src/: テーマファイル（ここに WordPress テーマファイルを配置）
chokidar と ssh2-sftp-client を使用して、ファイルの変更を監視し自動的にサーバーにアップロードします。
- 監視対象:
srcディレクトリ内のファイル - 除外対象:
.vscode,.git,.DS_Store,node_modules,script,template
browser-sync を使用して、ブラウザの自動リロードを実現します。
- 監視対象: PHP, CSS, JavaScript, HTML, 画像ファイル
- リロード遅延: 環境変数で設定可能（デフォルト: 1000ms）
Theme Switcha プラグインを利用して、一般訪問者には影響を与えずに開発者だけが新しいテーマを確認できるようにします。
- パラメータ設定:
theme-switchパラメータとpasskeyで保護可能 - 詳細情報: Theme Switcha プラグイン公式ページ
.envファイルには機密情報が含まれるため、バージョン管理システムにコミットしないでください- 本番環境でのテーマ変更には十分注意し、必ずテストを行ってから適用してください
- Theme Switcha のパスキーは十分に複雑なものを使用してください
MIT ライセンスの下で公開されています。詳細はプロジェクトの LICENSE ファイルを参照してください。