Furnitage を WordPress へ移行する
Cocoon Child テーマへの FTP アップロードから WordPress ページ設定まで、全手順をステップ形式で解説します。
ファイル構成と配置先の概要
エクスポートされたバンドルは大きく 2つのパーツ に分かれます：
preview/ はローカルの開発プレビュー専用です。本番サーバーにはアップロードしないでください。アップロードするのは wp-templates/ の中身と、ルートの index.html / images/ / kaitori/ / products/ フォルダのみです。
ZIP の中身を確認・整理する
FTP 転送の前に、アップロードする内容を整理しましょう。サーバーには以下のファイルだけを送ります。
wp-templates/ → PHPテンプレート（4ファイル）
page-about.php、page-products.php、page-kaitori.php、page-item.php
これら4ファイルは cocoon-child-master の ルート直下 に置きます。
静的ファイル群 → furnitage/ フォルダとして転送
ルートにある index.html、images/、kaitori/、products/ を
furnitage/ という名前のフォルダを作ってその中に入れます。
静的アセットのフォルダ名は必ず furnitage（小文字）にしてください。PHPテンプレート内のパス (get_stylesheet_directory() . '/furnitage/...') と一致しないと404エラーになります。
PHP テンプレートを FTP で転送する
FileZilla などの FTP クライアントで接続し、4つの PHP ファイルを Child Theme のルートに転送します。
| ローカルファイル（送り元） | サーバー転送先（絶対パス） |
|---|---|
wp-templates/page-about.php |
/wp-content/themes/cocoon-child-master/page-about.php |
wp-templates/page-products.php |
/wp-content/themes/cocoon-child-master/page-products.php |
wp-templates/page-kaitori.php |
/wp-content/themes/cocoon-child-master/page-kaitori.php |
wp-templates/page-item.php |
/wp-content/themes/cocoon-child-master/page-item.php |
FTPクライアントで /wp-content/themes/cocoon-child-master/ を開き、4つの page-*.php ファイルが並んでいれば転送完了です。
各PHPテンプレートの役割と内容（参考）：
furnitage/ フォルダを FTP で転送する
静的 HTML・画像・CSS などをすべて含む furnitage/ フォルダを Child Theme 内に転送します。
ローカルには furnitage/ フォルダは存在しません。FTPクライアント上で cocoon-child-master/ の中に furnitage という新規フォルダを作成してから、中身を転送してください。
| ローカル（転送元） | サーバー転送先 |
|---|---|
index.html（ルート直下） |
/cocoon-child-master/furnitage/index.html |
images/（フォルダごと） |
/cocoon-child-master/furnitage/images/ |
kaitori/（フォルダごと） |
/cocoon-child-master/furnitage/kaitori/ |
products/（フォルダごと） |
/cocoon-child-master/furnitage/products/ |
転送後のサーバー側ディレクトリ構造（確認用）：
images/内の sofa_new_arrival.jpg は約5.5MBあります。FTP転送は完了まで時間がかかる場合があります。転送完了を確認してから次のステップに進んでください。
WordPress 管理画面でページを作成する
FTP 転送が完了したら、WordPress 管理画面（https://furnitage.tokyo/wp-admin/）にログインして4つのページを作成します。
「固定ページ」→「新規追加」を開く
WordPress 管理画面の左メニューから 固定ページ → 新規固定ページを追加 をクリック。
ページタイトルとスラッグを設定
タイトル・スラッグは下の表を参考に設定。本文エリアは空白のままで構いません。
右パネルの「テンプレート」でFurnitage用を選択
右側サイドバー → ページ属性 → テンプレート ドロップダウンから Furnitage - About などを選択。
「公開」ボタンをクリック
設定後、右上の 公開 ボタンをクリックして保存。URL にアクセスして表示を確認してください。
作成するページの設定一覧
| ページタイトル | スラッグ | テンプレート選択 | 完成後のURL |
|---|---|---|---|
| Furnitage - トップ | about |
Furnitage - About |
furnitage.tokyo/about/ |
| Furnitage - 商品一覧 | products |
Furnitage - Products |
furnitage.tokyo/products/ |
| Furnitage - 買取 | kaitori |
Furnitage - Kaitori |
furnitage.tokyo/kaitori/ |
| Furnitage - 商品詳細 | item |
Furnitage - Item |
furnitage.tokyo/item/?id=商品ID |
▼ テンプレート選択画面のイメージ
テンプレートのドロップダウンに「Furnitage」の選択肢が出ない場合は、PHPファイルの転送が完了していない可能性があります。FTPクライアントで /cocoon-child-master/ 直下に4ファイルが存在するか再確認してください。
動作確認
各ページにアクセスして正常に表示されるか確認します。
トップページ
https://furnitage.tokyo/about/ にアクセス → ヒーロー画像・ロゴ・商品セクションが正常表示されること
商品一覧
https://furnitage.tokyo/products/ → 商品カードが全件表示・フィルターが動作すること
買取ページ
https://furnitage.tokyo/kaitori/ → ヒーローボタン・お問い合わせフォームが表示されること
商品詳細（パラメータ付き）
https://furnitage.tokyo/item/?id=cassina-lc2 → 商品詳細が動的にレンダリングされること
ブラウザの開発ツールで確認
F12 → Console タブを開き、404エラー（赤い行）が出ていないか確認。Mixed Content 警告も出ないことを確認。
パスマッピング一覧
本番 HTML 内のアセット URL がどのサーバーパスを指しているかの対応表です。
| HTML内の絶対URL（抜粋） | サーバー上の実ファイルパス |
|---|---|
https://furnitage.tokyo/wp-content/themes/cocoon-child-master/furnitage/images/top_space.jpg |
/cocoon-child-master/furnitage/images/top_space.jpg |
https://furnitage.tokyo/wp-content/themes/cocoon-child-master/furnitage/images/ceo.jpg |
/cocoon-child-master/furnitage/images/ceo.jpg |
https://furnitage.tokyo/wp-content/themes/cocoon-child-master/furnitage/products/index.html |
/cocoon-child-master/furnitage/products/index.html |
https://furnitage.tokyo/wp-content/themes/cocoon-child-master/furnitage/kaitori/index.html |
/cocoon-child-master/furnitage/kaitori/index.html |
https://furnitage.tokyo/wp-content/themes/cocoon-child-master/furnitage/products/item.html?id=xxx |
/cocoon-child-master/furnitage/products/item.html |
完了チェックリスト
よくある問題と解決策
テンプレートのドロップダウンに「Furnitage」が表示されない
→ PHPファイルが cocoon-child-master/ の直下（ルート）にあるか確認。サブフォルダに入っていると認識されません。転送後、WordPress 管理画面を一度リロードしてください。
ページは表示されるが画像が404エラーで表示されない
→ furnitage/images/ フォルダのパスを確認。正しいパス: /wp-content/themes/cocoon-child-master/furnitage/images/ファイル名.jpg。FTPクライアントで階層が正しいか再確認してください。
Mixed Content 警告が出る（セキュリティエラー）
→ HTML ファイル内に http://（非HTTPS）のリソースが残っている可能性があります。本番 HTML の全 URL が https:// で始まっているか確認してください。
商品詳細（item）ページで商品が表示されない
→ URL に ?id=商品ID パラメータが付いているか確認。また、WordPress のパーマリンク設定が 投稿名 になっているかを 設定 → パーマリンク から確認してください。パーマリンク設定変更後は必ず「変更を保存」をクリック。
ページにCocoonのヘッダー・フッターが残って表示される
→ テンプレートが正しく選択されていない状態です。固定ページの編集画面 → 右パネルの「テンプレート」を Furnitage - ○○ に変更して再公開してください。
https://furnitage.tokyo/about/→ トップ・ブランドページhttps://furnitage.tokyo/products/→ 商品一覧https://furnitage.tokyo/kaitori/→ 買取ページhttps://furnitage.tokyo/item/?id=cassina-lc2→ 商品詳細テスト