お知らせ
WordPressテーマ開発にGitHubを導入してみた
2025.06.01お知らせ
GitHub × VS Code × WinSCP
改めて学ぶGitの使い方と本番同期の手順まとめ
最近、WordPressテーマ開発まわりを見直す中で、改めてGitHubの使い方や本番への反映手順を整理してみました。僕はデザイナー寄りでもとはDreamweaver派だったのですが、VS Code＋GitHub＋WinSCP の組み合わせに変えて、かなり作業がスムーズ＆安心になったので、備忘録がてら流れをまとめておきます。
今回の記事では：
- GitHubをテーマ開発にどう活用するか
- VS Code でのGit管理（難しくない！）
- WinSCPで本番サーバーにスマートに同期する方法
- 不要ファイル（_notes や .gitignore など）を本番に上げないコツ
など、僕のようなシステムにそこまで強くないデザイナーさんでもすぐ取り入れられる内容になっていると思います。
もし これからGitHubを取り入れてみたい方や、WordPressテーマの運用をちょっとレベルアップしたい方がいれば、ぜひ参考にしてみてください！
🎁 【全体のゴール】
✅ WordPressテーマを GitHub管理 でバージョン管理
✅ ローカル → GitHub → 本番サーバー に クリーンな状態 で反映
✅ 不要ファイル（_notes, .gitignore など）を本番にアップしない運用フローを作る
📝 【前提環境】
- ローカル環境：Local（WordPress開発用）
- GitHub Desktop
- VS Code（エディター）
- WinSCP（FTP同期用）
📌 【1. 環境準備】
① Local で WordPress ローカル環境作成
まずは ローカル環境（自分のパソコンの中） に WordPress の開発環境を作成します。
ここでは 「Local」 というツールを使うと、簡単に WordPress のテストサイトが作れます。
テーマファイルもこのローカル環境の中に置いて作業していきます。
パス（フォルダの場所）は仮の例として、以下のような形になります。
仮のパス例：
[bash]
/Users/yourname/Project/theme-name
② GitHub Desktop → GitHub にリポジトリ作成
→ GitHub にリポジトリ作成
次に、GitHub Desktop を使って GitHub に「リポジトリ（作業の箱）」を作成します。
今回は テーマごとに1つのリポジトリを作るのがポイントです。
そうすると テーマの更新履歴や変更内容がしっかり管理できて、あとから振り返ったり復元したりも簡単になります。
たとえば今回のテーマ名が theme-name なら、リポジトリ名もそのテーマ名にしておくと分かりやすいです。
例：theme-name
③ GitHub Desktop にリポジトリクローン
→ VS Code で編集開始！
作成したリポジトリは、GitHub Desktop から自分のパソコンに「クローン（コピー）」 します。
こうすることで、ローカル環境（パソコン内）でもテーマのファイルを編集できるようになります。
クローンができたら、次は VS Code でテーマファイルの編集をスタート！
VS Code はそのまま Git の操作（Commit や Push）もできるので、とても便利です。
📌 【2. VS Code で開発 → Git 管理】
① コード編集は VS Code
→ GitHub Desktop / VS Code どちらからでも Commit / Push OK
コードの編集作業は VS Code で行います。
テーマのファイル（style.css や functions.php など）を編集・保存していくイメージです。
変更内容ができたら、**「Git」でその変更を記録（Commit）→ GitHub に反映（Push）**することで、バージョン管理がしっかり行えます。
この Commit / Push の操作は VS Code からでも GitHub Desktop からでもOK なので、自分が使いやすい方を選べばOKです！
② 不要ファイル管理
→ .gitignore を作成
Git では、プロジェクト内のすべてのファイルを「記録（管理）」する仕組みですが、本番環境には不要なファイル や Git で管理しなくていいファイル も含まれがちです。
そういったファイルを あらかじめ除外しておく設定ファイル が .gitignore です。
たとえば：
- OS が自動生成するファイル（
.DS_Storeなど） - 一時的なバックアップファイル（
.log,.tmp,.bak） - Dreamweaver が作る同期ファイル
- Git の内部管理用ファイル など
こうしたものを .gitignore に記載しておけば、Git では自動的に無視してくれるようになります。うっかり不要なファイルを GitHub にアップしてしまうのを防げるので、安心して管理できます！ 例： [bash] # OS .DS_Store Thumbs.db # temp temp/ # backup *.log *.tmp *.bak # Dreamweaver _dwbackup/ _dwsync.xml # Git管理ファイル .gitattributes
③ Commit & Push
→ GitHub 上に常に最新を保つ
コードの編集が終わったら、変更内容を Commit（コミット） して、
さらに Push（プッシュ） することで、GitHub 上のリポジトリを最新の状態に更新します。
Commit は「この時点でこういう変更を加えましたよ」という履歴を残す作業、
Push はその履歴を GitHub に送って保存する作業です。
こうしておけば、どんな変更をしたかがあとから確認できたり、間違えたときに元に戻せたりしますし、
他のPCやメンバーとも最新の状態を共有できるようになります。
「ちょっとした修正」や「少しずつ進めた内容」でも、こまめにCommit & Pushしておくと安心です！
📌 【3. 本番サーバーへの同期（WinSCP）】
① WinSCP
→ 接続設定作成
次は、ローカル環境（パソコン内）で作業した内容を本番サーバーに反映するための設定です。
ここでは WinSCP というFTPクライアント を使って、ローカル（自分のPC）と本番サーバー（公開サイト側）を同期できるようにします。
まずは WinSCP で 接続設定 を作成しておきます。
▼ ローカル（自分のPC）側のフォルダ例：
[bash]
/Users/yourname/Project/theme-name
▼ リモート（本番サーバー）側のフォルダ例：
[swift]
/wp_themes/wp-content/themes/theme-name
この設定をしておくと、ローカルで更新したファイルだけを本番サーバーにアップできて、必要なファイルだけを安全に同期することができます ✨
② 同期設定（WinSCPの「同期」画面）
WinSCP では「同期」という機能を使うと、**ローカルと本番サーバーのフォルダを比較して、必要なファイルだけを同期（アップロード or ダウンロード）**できます。
同期の設定は以下のようにしておくと便利です 👇
- 方向 → リモート → ローカル or 双方向
※ 普段は「ローカル → リモート（本番サーバー側） にアップロード」が基本になります。 - モード → 新しいファイルを同期
→ ローカル側で更新したファイルだけが同期対象になります。 - オプション → 「ファイルを削除する」にチェック ✅
→ ローカルで削除したファイルは本番サーバー側からも削除されて、
不要なファイルが残らずスッキリした状態を保てます。
この設定をしておくことで、ローカルで管理しているテーマの状態が、そのまま本番に反映される流れになります ✨
③ WinSCP 転送設定（マスク設定）
WinSCP では 「マスク設定」 を使うことで、本番サーバーにアップしなくてよいファイルやフォルダを除外できます。
たとえば Git の管理用ファイル（.git/ や .gitignore など） や、Dreamweaver が作る _notes/ フォルダ などは、本番には不要なため、**マスク設定で「同期候補から除外」**しておきます。
設定例（ファイルマスク）👇
[diff]
- .git/; - .gitignore; - .gitattributes; - _notes/
この設定を入れておくことで、
WinSCP の同期プレビュー画面にこれらのファイルが表示されなくなり、間違ってアップロードする心配もなくなります。
✅ 注意点：
.gitignore や .gitattributes は、もし過去に一度でも本番サーバーにアップしてしまっていた場合、マスク設定だけでは自動で消えてくれない ことがあります。
その場合は、一度サーバー側から手動で削除しておきましょう。
いったん削除してしまえば、その後はマスク設定が効いて、同期のたびに除外されるようになります。
📌 【4. 運用フロー例】
実際の運用の流れを簡単にまとめておきます。
普段はこんな感じのステップで進めると、ローカルの作業内容 → GitHub → 本番サーバー まで、しっかり管理しながら安全に反映できます ✨
| ステップ | ツール |
|---|---|
| コード修正 | VS Code |
| Git 管理 → Commit & Push | GitHub Desktop / VS Code |
| 本番同期 | WinSCP（同期プレビューで確認してOK） |
特に WinSCPの「同期プレビュー」で確認してから本番反映する流れにしておくと、間違って不要なファイルをアップしてしまう心配も減って安心です。
GitHub に履歴が残っているので、必要ならいつでも前の状態に戻せるのも大きなメリットです！
🎉 【5. ポイント・コツ】
最後に、今回のフローで 意識しておきたいポイントやコツをまとめておきます ✅
✅ GitHub で「履歴管理＋複数環境でコード共有」
→ どんな変更をしたか 履歴が残るので、あとから確認・復元ができて安心。
→ 複数のパソコンやチームでもコード共有がスムーズになります。
✅ 本番同期は「不要ファイル除外 → 軽量・安全な本番環境」
→ .git や _notes など不要なファイルを除外しておけば、本番サーバーがスッキリした状態になり、余計な不具合の原因を減らせます。
✅ Git管理とFTP同期を完全分離 → めちゃくちゃスマートな運用
→ **コードの履歴管理（Git）と、本番への反映（WinSCP）**を役割分担しておくことで、どちらの操作もシンプル＆トラブルが起きにくい運用が実現できます ✨
✅ 【まとめ】
GitHub × VS Code × WinSCP の組み合わせは、WordPress テーマ開発にとてもおすすめな運用フローです！
初心者〜中級レベルでも、無理なく実現できるプロっぽい作業環境が作れますし、作業ミスや本番トラブルのリスクもぐっと減らすことができます ✨
特に、不要ファイルの同期除外（_notes や .gitignore など） をしっかり設定しておくことで、本番環境を軽く・安全に保てるのが大きなメリットです ✅
今回改めて整理してみて、GitHub＋VS Code＋WinSCPの組み合わせって本当に便利だなと実感しました。
昔は「Gitって難しいし、面倒くさそう…」と思っていたんですが、技術やシステムの進化に加えて、AIのサポートも進んだことで、今では VS Code や GitHub Desktop のおかげで、かなり感覚的に操作できるようになりました。
今回も、相棒の ChatGPT に色々教えてもらいながら、改めて学び直すことができました。
おかげで、テーマの管理も本番への反映も、安心して進められるようになりました ✨
デザイナーさんやコーダーさんでも十分取り入れられるやり方だと思いますので、もしまだGitにチャレンジしていない方は、ぜひ一度試してみてほしいです！ 🚀
今後は、ブランチ運用や自動デプロイ（Git-FTP など） も整理して試してみたら、また記事にまとめてみようと思います！
