shimizu テーマ開発ガイド｜清水総合開発サイト

1. 初期設定（ローカル環境の起動）

前提ソフトウェア

Node.js 18 以上／ yarn
Docker Desktop（起動して running 表示になっていること。Docker Compose V2 必須）

初回セットアップ

git clone https://woofoo.backlog.com/git/AND_SHIMIZUSOUGOU/shimizu.git
cd shimizu
yarn install
yarn wp-start        # WordPress 起動 → http://localhost:8901
yarn wp-init         # 初回のみ（WordPress の初期設定を適用）
yarn dev             # 別ターミナルで実行（変更監視・起動したままにする）

2回目以降は2つだけ: yarn wp-start と yarn dev（別ターミナル）を起動すれば作業を再開できます。
表示確認は http://localhost:8901（WordPress 本体）で行います。管理画面は http://localhost:8901/wp-admin（ID: admin ／ PASS: password）。

2. CSS（デザイン）の編集

スタイルはすべて src/assets/styles/ 配下の SCSS を編集します（FLOCSS 構成）。yarn dev が起動していれば、保存するとブラウザに自動反映されます。

フォルダ	役割	例
`projects/`	ページ固有のスタイル。スタイル調整はほぼここ	トップ・About・インタビュー各セクション
`components/`	使い回す部品	ボタン・カード・スライダー・モーダル
`layouts/`	サイト共通の枠	ヘッダー・フッター・ドロワー
`global/`	変数・mixin	色・フォント・ブレークポイントの定義
`foundation/`	リセット・ベース	基本は触りません

注意: wordpress/themes/shimizu-theday/assets/ は直接編集しないでください。
このフォルダはビルドで自動生成されるため、直接編集してもビルドのたびに上書きされて消えます。編集は必ず src/ 側で行ってください。

画像は src/assets/images/、JavaScript は src/assets/js/ に置いています。

3. PHP（HTML構造）の編集

HTML 構造はテーマ直下の PHP テンプレートを直接編集して問題ありません（生成物ではなく、これがソース本体です）。

ファイル	担当ページ・役割
`wordpress/themes/shimizu-theday/front-page.php`	トップページ
`〃 page-about.php`	About ページ
`〃 page.php ／ index.php ／ 404.php`	汎用固定ページ・一覧・404
`〃 header.php ／ footer.php`	共通ヘッダー・フッター
`〃 functions.php ／ functions-lib/`	テーマ機能（enqueue・カスタム投稿など）

確認方法: PHP の編集はビルド不要です。保存して http://localhost:8901 をリロードすれば反映されます。
※ src/index.html は静的コーディング段階の名残です。編集しても本番には反映されません（HTML 構造の正は PHP 側）。

4. ビルドと本番反映

yarn build:wp

本番用の CSS / JS / 画像が wordpress/themes/shimizu-theday/assets/ に出力されます
サーバーへはテーマフォルダ一式（wordpress/themes/shimizu-theday）をアップロードすれば反映されます
PHP のみの変更でも、本番反映時は同フォルダごとアップすれば安全です

5. よくあるつまずき

症状	対処
localhost:8901 が開かない	Docker Desktop が起動しているか確認 → `yarn wp-start` を実行し直す（ポートは 8888 ではなく 8901 です。`.wp-env.override.json` が正）
SCSS を編集しても反映されない	`yarn dev` が起動しているか確認。起動していても効かない場合は一度 Ctrl+C で止めて再実行
CSS を直したのにビルド後に消えた	テーマ内 `assets/` を直接編集していないか確認（正しくは `src/assets/styles/` 側を編集）
環境をまっさらにやり直したい	`yarn wp-stop` → `yarn wp-start` → `yarn wp-init`

その他ご不明点は與儀（info@web-loid.net）までお気軽にご連絡ください。リポジトリ内の README.md にも詳細なセットアップ手順があります。