「サーバー契約はまだ…」
「まずは自分のPCでWordPressを触ってみたい」
そんな人に一番おすすめなのが Local を使ったローカル環境です 😊
この記事では、Local + Cocoon（親テーマ・子テーマ） を使って
ローカルWordPressを完成させるまでを、つまずかないよう丁寧に解説します。
🧭 この記事でやること（ゴール）
- LocalでWordPressサイトを起動
- Cocoon公式サイトから
親テーマ / 子テーマをダウンロード - WordPressにアップロード
- 子テーマを有効化
👉 ここまで出来れば、実サイト運用前の練習環境は完成です！
0️⃣ 事前準備（これだけ）
必要なもの
- PC（Windows / Mac）
- Local（無料）
- ブラウザ（Chromeなど）
1️⃣ LocalでWordPressサイトを起動する
① Localを起動
Localを起動すると、左側にサイト一覧が表示されます。
② すでにサイトがある場合
- サイト名をクリック
- ▶ START SITE を押す
→ 緑色になれば起動OK！
③ 新しく作る場合（初回のみ）
- Create a new site
- Site name：例）
cocoon-test - ユーザー名 / パスワードを設定
- 完了まで待つ
2️⃣ WordPress管理画面にログイン
- Localでサイトを選択
- WP Admin ボタンをクリック
- ブラウザで管理画面が開く
（http://○○.local/wp-admin）
3️⃣ Cocoonの親テーマ・子テーマをダウンロード
- Cocoon公式サイトを開く
👉 https://wp-cocoon.com/ - メニューから ダウンロード
- 以下2つを保存（ZIPのまま）
-
cocoon-master.zip（親テーマ） -
cocoon-child-master.zip（子テーマ）
⚠️ 解凍しないでOK！
4️⃣ WordPressにテーマをアップロード（親 → 子）
親テーマのインストール
- 管理画面
外観 → テーマ → 新規追加 - テーマのアップロード
-
cocoon-master.zipを選択 - 今すぐインストール
- ※ 有効化はしない
子テーマのインストール
同じ手順で
cocoon-child-master.zip
をアップロードします。
5️⃣ 子テーマを「有効化」する（重要）
- 外観 → テーマ
- Cocoon Child を探す
- 有効化 をクリック
✅ 親テーマは
**「インストールされているだけ」**でOK
❌ 親テーマを有効化しない
🎉 完成！Local × Cocoon 環境完成
サイトを表示すると、
CocoonデザインのWordPressサイトになっています 🎨
この環境でできること👇
- 記事投稿の練習
- テーマ設定の確認
- CSSカスタマイズ
- functions.php の実験
すべて 本番に影響ゼロ で試せます！
💡 超初心者がつまずきやすいポイント
Q. ZIPを解凍してしまった…
👉 ZIPのままアップロードしてください
Q. 親テーマしか有効化してない
👉 必ず 子テーマを有効化
Q. 表示が変わらない
👉 ブラウザ更新（⌘R / Ctrl+R）
📝 まとめ（重要ポイント）
| 項目 | OK / NG |
|---|---|
| Localを使う | ✅ |
| 親テーマDL | ✅ |
| 子テーマDL | ✅ |
| 親テーマ有効化 | ❌ |
| 子テーマ有効化 | ✅ |