自分の題材でWordPress化しよう

Step 1. 準備①：自分のフォルダをLocalのテーマフォルダへコピーする

まず、Localでローカルサイトを起動します。起動したら、LocalのサイトフォルダをFinderで開きます（「Go to site folder」ボタン）。app → public → wp-content → themes と進んだ場所に、自分の preview-final.html が入ったフォルダを丸ごとコピーします。

コピーしたら、その新しい場所をVSCodeで開きなおします。これで、Claude Codeが扱う作業フォルダが「テーマフォルダ」になりました。

Step 2. 準備②：WordPress化計画.md の受け皿を作る

テーマフォルダの中に WordPress化計画.md という新しいファイルを作り、下のテンプレをそのままコピーして貼り付けてください。

# （サイト名）WordPressテーマ化 計画

## 入力（5-2の成果）
- preview-final.html（LP1枚、動きつき）

## 作るテーマファイル（マッピング）
- style.css        … テーマ情報（WordPressに「これがテーマ」と教える）
- index.php        … フォールバック用の最低限ファイル
- functions.php    … テーマの基本設定 + 編集できる項目の登録
- header.php       … 全ページ共通のヘッダー
- footer.php       … 全ページ共通のフッター
- parts/cta-bottom.php … 下部CTA（サイトにあれば）
- front-page.php   … トップページ（preview-final.htmlを変換）

## 管理画面から編集できるようにする箇所
（ラリー④で埋める）

## やらないこと（今回のスコープ外）
- 複数ページ化
- お知らせ（投稿）機能
- カスタムメニュー化

「作るテーマファイル」と「やらないこと」は最初から書いておくのがポイントです。これがあれば、ラリーのたびに「どんなファイルを作るか」「どこまでがスコープか」を毎回説明し直す必要がありません。「WordPress化計画.md を見て進めて」の一言だけで通じます。

Step 3. ラリー①：テーマとして認識させる

WordPressがフォルダを「これはテーマだ」と認識するには、3つのファイルが必要です。中身はClaude Codeが全部作ります。

このフォルダをWordPressのテーマとして使える状態にしたい。
・style.css の先頭に、テーマヘッダーを追加して（テーマ名は（サイト名）にして）
・index.php と functions.php を新規作成して
WordPress化計画.md を見て進めてね。

WordPressの管理画面（外観 → テーマ）を開きます。自分のテーマ名が一覧に現れることを確認して、「有効化」してください。

Step 4. ラリー②：共通パーツを分割する

ヘッダーとフッターを別ファイルに切り出します。将来ページが増えたとき、1ファイルだけ直せば全ページに反映される形になります。

preview-final.html の中から、全ページ共通になりそうなヘッダーを header.php に、
フッターを footer.php に切り出して。
WordPressのテンプレートとして使える形にして。

自分のサイトに「下部CTAブロック」（最後の行動喚起エリア）がある場合は、続けてこう頼みます。なければスキップしてかまいません。

（下部CTAブロックの説明、例：「ページ末の『お気軽にご相談ください』エリア」）を、
parts/cta-bottom.php として別ファイルに切り出して。
将来ページが増えたとき使い回せる形にして。

Step 5. ラリー③：LPをWordPressのトップページに変換する

front-page.php という名前のファイルをテーマフォルダに置くと、WordPressはそれをサイトのトップページとして自動で表示します。preview-final.html のメイン部分をそこに変換します。

preview-final.html のメイン部分を front-page.php に変換して。
ヘッダーとフッターは get_header() と get_footer() で読み込み、
下部CTAは parts/cta-bottom を get_template_part で呼び出す形にして。
動的に出すところはまだなくていい、見た目だけ揃えばOK。

Localの「Open site」でブラウザを開き、自分のサイトが表示されることを確認します。このとき、画像が表示されないことがほとんどです。よくある落とし穴なので、慌てずにそのままClaude Codeに伝えてください。

ブラウザで見たら、画像が全部表示されていなかった。
WordPress用の画像パスに直して。

再読み込みして、5-2と同じ見た目が表示されればラリー③は完了です。

Step 6. ラリー④：主要文言を管理画面から編集できるようにする

自分のサイトで「運用中に変えたくなりそう」な文言を2〜4箇所選んで、WordPress化計画.md の「管理画面から編集できるようにする箇所」に書き込みます。その後、Claude Codeに頼みます。

WordPress化計画.md の「管理画面から編集できるようにする箇所」に書いた項目を、
テーマカスタマイザーで触れるようにして。
functions.php に登録し、front-page.php と header.php の該当箇所も
カスタマイザーの値を呼び出す形に書き換えて。
初期値は今の preview-final.html の文言で。

WordPressの管理画面（外観 → カスタマイズ）を開き、自分のサイト名のパネルが出ることを確認します。項目の文言を試しに変えて、右側のプレビューに反映されることを確認したら、「公開」ボタンを押して保存します。

Step 7. 通しで確認して、気になったところを直す

ブラウザで自分のWordPressサイトを最初から最後まで通して見ます。スマホ幅も試します。気になるところは感じたままを言葉で伝えて直してもらいます。整ったら完成です。