作業ログ：LocalにCocoon子テーマを設定する

ガジェット・ツール活用

目的

WordPressのしぼそのブログをダークモードやグレースケール対応できる状態にしたいと思い、Localアプリ、GitHub、VSCode、ターミナルなどを使用しローカル環境で安全にcss編集を行うための準備

やったこと・わかったこと

環境の全体像

Local Sites/
└── sibosono.com/
    └── app/public/wp-content/themes/
        ├── cocoon-master/   ← 親テーマ（有効化不要）
        └── cocoon-child/    ← 作業対象・有効化済み

Claude Codeはcocoon-childフォルダで起動して使う。

ハマったこと①：「壊れているテーマ」が消えない

原因： style.css の Template: の値と親テーマのフォルダ名が一致していなかった。

  • Cocoonの親テーマのフォルダ名は cocoon-master
  • なので Template: cocoon-master と書かないといけない
  • Template: cocoon と書いていたのが間違いだった

正しいstyle.css：

/*
Theme Name: Cocoon Child
Template: cocoon-master
*/

教訓： Template: にはテーマ名ではなくフォルダ名を書く。

ハマったこと②：WP管理画面でcocoon-childが表示されない

WP管理画面からの削除・再インストールを繰り返しても認識されなかった。

解決方法：WP-CLIを使う

LocalアプリのサイトからSite Shellを開いて実行。

# テーマ一覧を確認（--allで未認識のものも表示）
wp theme list --all

# 有効化
wp theme activate cocoon-child

教訓： WP管理画面で解決しない場合はWP-CLIが使える。LocalにはWP-CLIが内蔵されている。

作成したファイル

cocoon-child/
├── style.css       ← Theme Name・Template を記述
├── functions.php   ← 中身は空でOK（WPがテーマとして認識するのに必要）
└── .gitignore      ← .DS_Store などを除外

.gitignoreの中身：

# Macが自動生成する不要ファイル
.DS_Store

# エディタの設定ファイル（個人情報が入ることがある）
.vscode/settings.json

# もし将来APIキーや設定ファイルを置いたら追加する
# .env
# secrets.json

使ったコマンドまとめ

# フォルダ作成
mkdir -p "/Users/natsumi/Local Sites/サイト名/app/public/wp-content/themes/cocoon-child"

# フォルダに入る
cd "/Users/natsumi/Local Sites/サイト名/app/public/wp-content/themes/cocoon-child"

# ファイル作成
touch style.css functions.php .gitignore

# VS Codeで開く
code .

# Git初期化
git init

# テーマフォルダの中身確認
ls "/Users/natsumi/Local Sites/サイト名/app/public/wp-content/themes/"

# style.cssの中身確認
cat style.css

次のステップ

  • [ ] GitHubにリポジトリを作成する
  • [ ] ローカルのcocoon-childとGitHubをつなぐ
  • [ ] Claude Codeでダークモード・アクセシビリティ対応CSSを追加する
  • [ ] Localで表示確認してからサーバーに反映する

コメント