WordPress を例に CMS 開発環境の構築

前の記事までで、Claude Code の隔離環境構築、ワークフローの設定、ファイル同期の仕組みが完成しました。ここからは実際の案件を想定して、WordPress 開発のための環境を整えていきます。

この記事では、メインPC 側に WordPress のファイルを配置し、push-to-ubuntu で Ubuntu に送り、sync-pull でカスタマイズ部分を同期する——という開発サイクルを構築します。作業が終わると、Claude Code で WordPress の独自テーマを開発できる状態になります。

メインPC側のディレクトリ構成

記事9・10で設定した _scripts・.claude・.local・.gitignore・CLAUDE.md は、前の記事の手順で既に作成されています。ここでは WordPress 固有のディレクトリを追加していきます。

最終的なディレクトリ構成は以下のようになります。

cc-sample-wp\                          ← プロジェクトルート
├── _scripts\
│   ├── _push_to_ubuntu\
│   │   └── push-to-ubuntu.cmd
│   └── _sync_claude_code\
│       ├── sync-watch.cmd
│       ├── sync-watch.ps1
│       └── sync-pull.cmd
├── .claude\
│   ├── settings.json                  ← deny ルールに WordPress の除外を追加
│   ├── CLAUDE-global.md
│   ├── commit-msg.txt
│   └── sync-ready
├── .local\
│   ├── _sync_claude_code_config.env
│   └── wp-config.php                  ← DB情報・認証キーなど（Git 管理外）
├── public_html\                       ← ドキュメントルート
│   ├── wp-admin\                      ← WordPress 本体（編集対象外）
│   ├── wp-content\
│   │   ├── themes\
│   │   │   └── cc-sample-theme\       ← 独自テーマ（Claude Code の編集対象）
│   │   ├── mu-plugins\                ← Must-Use プラグイン（Claude Code の編集対象）
│   │   └── plugins\                   ← プラグイン（編集対象外）
│   ├── wp-includes\                   ← WordPress 本体（編集対象外）
│   └── wp-*.php                       ← WordPress 本体（編集対象外）
├── .gitignore
└── CLAUDE.md

.gitignore の設定

WordPress を配置する前に、.gitignore を設定しておきます。WordPress のファイルは大部分が公式配布物なので、Git で管理する必要はありません。カスタマイズ部分（独自テーマ、mu-plugins）だけを Git 管理の対象にします。

プロジェクトルートの .gitignore に以下を追加してください。

#################################################################
# wordpress
#################################################################

**/wp-*
!**/wp-content/

**/wp-content/*
!**/wp-content/plugins/
!**/wp-content/themes/
!**/wp-content/mu-plugins/

**/wp-content/plugins/*
**/wp-content/themes/*

**/license.txt
**/readme-ja.html
**/readme.html
**/xmlrpc.php

ポイントは、** パターンで public_html のパスに依存しない汎用的な書き方にしていることです。wp-content 配下は一旦すべて除外し、plugins・themes・mu-plugins のディレクトリだけを ! で戻しています。ただし plugins/* と themes/* で中身は再度除外しているため、ディレクトリの存在だけが Git に残り、中身は追跡されません。

テーマごとの .gitignore

独自テーマだけを Git 管理の対象にするため、wp-content/themes/ ディレクトリに .gitignore を配置します。

# wp-content/themes/.gitignore
!twentytwentyfive/
!twentytwentysix/
!cc-sample-theme/

プロジェクトルートの .gitignore で **/wp-content/themes/* を除外しているため、何もしなければすべてのテーマが無視されます。この .gitignore で必要なテーマを ! で戻すことで、使用するテーマだけがコミット対象になります。テーマを追加・変更したら、この .gitignore を更新してください。

WordPress の配置

.gitignore の準備ができたので、WordPress のファイルを配置していきます。プロジェクトルートに public_html ディレクトリを作成してください。

ダウンロードと展開

WordPress 日本語公式サイトから最新版の ZIP ファイルをダウンロードしてください。ZIP を展開すると wordpress フォルダが作られるので、中身を public_html 直下に配置します。wordpress フォルダごと入れるのではなく、中のファイル・フォルダを直接 public_html に移動してください。

# 展開後のイメージ
public_html\
├── wp-admin\
├── wp-content\
├── wp-includes\
├── index.php
├── wp-config-sample.php
├── wp-login.php
└── （その他の wp-*.php）

wp-config.php の設定

wp-config.php には DB の接続情報や認証キーなど、Git にコミットしたくない情報が含まれます。ここでは wp-config.php 自体には require_once の1行だけを書き、実際の設定は Git 管理外の .local/ ディレクトリに置いた別ファイルに記述する方法を紹介します。

<?php
// public_html/wp-config.php
require_once __DIR__ . '/../.local/wp-config.php';
?>

require 先の .local/wp-config.php には、DB の接続情報や認証キーをそのまま記述します。wp-config-sample.php の内容をベースに、環境に合わせて値を書き換えてください。

cc-sample-wp\
├── .local\
│   ├── _sync_claude_code_config.env   ← rsync の設定（既存）
│   └── wp-config.php                  ← DB情報・認証キーなど（Git 管理外）
├── public_html\
│   └── wp-config.php                  ← require_once の1行だけ
└── .gitignore

この方法の利点は、wp-config.php の構造がシンプルになること、そして DB の接続情報をドキュメントルートの外に出せることです。.local/ ディレクトリは rsync の設定ファイルで既に使っており、.gitignore で Git 管理から除外済みです。

テーマの .gitignore を配置

WordPress を展開すると wp-content/themes/ にデフォルトテーマが入っています。先ほど設定した .gitignore でテーマは全除外になっているので、使用するテーマを Git 管理に戻す .gitignore を wp-content/themes/ に配置してください。

# wp-content/themes/.gitignore
!twentytwentyfive/
!twentytwentysix/
!cc-sample-theme/

WordPress のセットアップ

wp-config.php の設定が終わったら、メインPC のブラウザから WordPress のインストールウィザードにアクセスし、セットアップを完了してください。管理画面にログインできる状態になれば、WordPress の配置は完了です。

settings.json の更新

記事9で作成した .claude/settings.json の deny ルールに、WordPress の編集対象外ディレクトリを追加します。Claude Code がこれらのファイルを読み込むとコンテキストウィンドウを消費するだけで、カスタマイズには不要です。

以下の deny ルールを追加してください。

{
  "$schema": "https://json.schemastore.org/claude-code-settings.json",
  "permissions": {
    "deny": [
      "Bash(sudo:*)",
      "Bash(su:*)",
      "Bash(chmod:*)",
      "Bash(chown:*)",
      "Bash(rm -rf:*)",
      "Bash(curl:*)",
      "Bash(wget:*)",
      "Bash(ssh:*)",
      "Bash(scp:*)",
      "Bash(sftp:*)",
      "Bash(nc:*)",
      "Bash(ncat:*)",
      "Bash(nmap:*)",
      "Bash(docker:*)",
      "Bash(systemctl:*)",
      "Bash(service:*)",
      "Read(../**)",
      "Read(/etc/**)",
      "Read(/home/**/.credentials.json)",
      "Read(./public_html/wp-admin/**)",
      "Read(./public_html/wp-includes/**)",
      "Read(./public_html/wp-content/plugins/**)",
      "Read(./public_html/wp-content/uploads/**)",
      "Read(./vendor/**)",
      "Write(./public_html/wp-admin/**)",
      "Write(./public_html/wp-includes/**)",
      "Write(./public_html/wp-content/plugins/**)",
      "Write(./public_html/wp-content/uploads/**)",
      "Write(./public_html/wp-*.php)",
      "Write(./public_html/index.php)",
      "Write(./vendor/**)",
      "Edit(./public_html/wp-admin/**)",
      "Edit(./public_html/wp-includes/**)",
      "Edit(./public_html/wp-content/plugins/**)",
      "Edit(./public_html/wp-content/uploads/**)",
      "Edit(./public_html/wp-*.php)",
      "Edit(./public_html/index.php)",
      "Edit(./vendor/**)"
    ],
    "allow": [
      "Read",
      "Glob",
      "Grep",
      "LS"
    ]
  }
}

記事9で設定した deny ルールに、WordPress 固有のルールを追加しています。Read でコンテキストへの読み込みを防ぎ、Write / Edit で書き込み・編集もブロックしています。Claude Code が変更してよいのは独自テーマ（themes）と mu-plugins だけという状態になります。

push-to-ubuntu で WordPress を送る

メインPC側に配置した WordPress のファイルを、push-to-ubuntu.cmd を使って Ubuntu に送ります。

初回送信（public_html 丸ごと）

最初の1回は public_html 以下をまるごと送ります。push-to-ubuntu.cmd を開いて、以下の2箇所を変更してください。

REM 1. exit /b を REM にする
REM exit /b

REM 2. public_html 丸ごとの include を有効にする
set INCLUDE_RULES=%INCLUDE_RULES% --include="/public_html/***"

ダブルクリックで実行し、ドライランで対象ファイルを確認してから本番実行します。完了したら exit /b と INCLUDE_RULES を元に戻してください。

通常運用の include ルール

初回送信が終わったら、push-to-ubuntu.cmd の INCLUDE_RULES を通常運用用に書き換えます。WordPress 本体のアップデートやプラグインの追加・更新をメインPC側で行ったら、このスクリプトで Ubuntu に送ります。Claude Code が WordPress のバージョンやインストール済みプラグインの構成を正確に把握するために、Ubuntu 側のファイルを常に最新に保っておくことが重要です。

REM ============================================================
REM  WordPress 本体の更新時に使う include ルール
REM  必要なものだけ REM を外して実行する
REM ============================================================
set INCLUDE_RULES=
REM set INCLUDE_RULES=%INCLUDE_RULES% --include="/public_html/***"
set INCLUDE_RULES=%INCLUDE_RULES% --include="/public_html/wp-admin/***"
set INCLUDE_RULES=%INCLUDE_RULES% --include="/public_html/wp-includes/***"
set INCLUDE_RULES=%INCLUDE_RULES% --include="/public_html/wp-content/plugins/***"
set INCLUDE_RULES=%INCLUDE_RULES% --include="/public_html/wp-*.php"
set INCLUDE_RULES=%INCLUDE_RULES% --include="/public_html/index.php"
set INCLUDE_RULES=%INCLUDE_RULES% --include="/.claude/settings.json"

このルールはいつでも実行して構いません。WordPress 本体をメインPC側でアップデートしたら、このスクリプトで Ubuntu に送るだけです。Claude Code の編集対象ではないため、上書きしても問題ありません。

sync-pull にカスタマイズ部分を追加

Claude Code が編集するファイルを Ubuntu からメインPC に同期するため、sync-pull.cmd の include ルールに WordPress のカスタマイズ部分を追加します。

追加する include ルールは以下のとおりです。

--include=/public_html/ ^
  --include=/public_html/wp-content/ ^
  --include=/public_html/wp-content/themes/ ^
  --include=/public_html/wp-content/themes/** ^
  --include=/public_html/wp-content/mu-plugins/ ^
  --include=/public_html/wp-content/mu-plugins/** ^

rsync の include ルールでは、途中のディレクトリも明示的に include する必要があります。/public_html/wp-content/themes/** だけでは public_html/ や wp-content/ が exclude されて到達できません。

あわせて、settings.json は sync-pull の同期対象から除外します。settings.json はメインPC側で管理し push-to-ubuntu で送る運用のため、Ubuntu→メインPC 方向で上書きされると困ります。

WordPress 対応後の rsync コマンド全体は以下のようになります。

rsync %RSYNC_OPTS% ^
  -e "ssh -i %RSYNC_KEY%" ^
  --rsync-path="sudo rsync" ^
  --exclude=.gitignore ^
  --exclude=/.claude/settings.json ^
  --include=/CLAUDE.md ^
  --include=/.claude/ ^
  --include=/.claude/** ^
  --include=/.local/ ^
  --include=/.local/*.sample ^
  --include=/_scripts/ ^
  --include=/_scripts/** ^
  --include=/public_html/ ^
  --include=/public_html/wp-content/ ^
  --include=/public_html/wp-content/themes/ ^
  --include=/public_html/wp-content/themes/** ^
  --include=/public_html/wp-content/mu-plugins/ ^
  --include=/public_html/wp-content/mu-plugins/** ^
  --exclude=* ^
  %RSYNC_USER%@%RSYNC_HOST%:%RSYNC_REMOTE_DIR%/ %RSYNC_LOCAL_DIR%/

独自テーマの作成

WordPress の独自テーマを開発するためのディレクトリを作成します。ここでは cc-sample-theme という名前にします。

メインPC 側で public_html\wp-content\themes\cc-sample-theme\ ディレクトリを作成し、最低限のファイルを配置します。

public_html\wp-content\themes\cc-sample-theme\
├── style.css        ← テーマ情報（必須）
├── index.php        ← メインテンプレート（必須）
└── functions.php    ← テーマ機能

style.css の先頭にはテーマ情報のコメントが必要です。

/*
Theme Name: CC Sample Theme
Description: Claude Code で開発するサンプルテーマ
Version: 1.0.0
*/

index.php は空でも構いませんが、動作確認用に最低限の内容を入れておきます。

<?php get_header(); ?>
<main>
  <h1>CC Sample Theme</h1>
  <p>テーマが正常に読み込まれています。</p>
</main>
<?php get_footer(); ?>

このテーマを push-to-ubuntu で Ubuntu に送り、Claude Code で開発を進めていきます。WordPress の管理画面からテーマを有効化すれば、メインPC側のブラウザで動作確認できます。

rsync の方向と対象のまとめ

WordPress 案件では、ファイルの種類によって rsync の方向が異なります。整理しておきます。

WordPress 本体やプラグインはメインPC側で管理し、カスタマイズ部分は Claude Code（Ubuntu 側）で開発するという役割分担です。

実行環境について

繰り返しになりますが、メインPC側の実行環境（Apache・PHP・MySQL）の構築手順はこの記事では扱いません。WordPress を動かすには LAMP 環境が必要ですので、ご自身で構築してください。

• public_html を Apache のドキュメントルートに設定する
• PHP は WordPress の動作要件を満たすバージョンをインストールする
• MySQL（または MariaDB）のデータベースとユーザーを作成する

Windows 上での LAMP 環境構築については、以下のガイドで Apache・PHP・MySQL のインストール手順をまとめています。

Windows で PHP 実行環境を作る方法

現在の状態まとめ

ここまでで、WordPress 案件の開発環境が整いました。

• .gitignore に WordPress 関連の除外を設定済み
• メインPC側に public_html を作成し、WordPress を配置済み
• settings.json の deny ルールに WordPress の編集対象外を追加済み
• push-to-ubuntu.cmd で WordPress ファイルを Ubuntu に送信済み
• sync-pull.cmd に themes / mu-plugins の同期ルールを追加済み
• 独自テーマ cc-sample-theme のディレクトリを作成済み

この環境を応用すれば、WordPress 以外の LAMP システムでも同じ構成で Claude Code を導入できます。public_html の中身と rsync のルールを案件に合わせて変えるだけです。

次の記事では、MySQL クライアントの導入や Composer の考え方など、開発ツールの追加設定を行います。