🚀 新規事業

TERASU_既存WordPress統合の進め方

最終更新 2026年07月08日 ／ 40_新規事業/TERASU/TERASU_既存WordPress統合の進め方.md

既存WordPressサイトへTERASUデザインを載せる進め方

受注方針（2026-07-08 大串決定）: クライアントがWordPress希望でも受注してOK。
今回の方式は子テーマ・白紙テンプレ・ライブプレビュー等すべてWordPress標準機能で、SWELL固有ではない＝ほぼどのテーマでも同じ型で対応可能。TERASUの通常フロー（静的サイトでデザイン制作）はそのまま・移植の型も確立済み。
受注前チェック3点のみ: ①テーマ名（クラシックテーマなら◎） ②ブロックテーマ（フルサイト編集型）は一手間増える ③記事本文がElementor等ページビルダー製なら記事系の型に追加検証。

既にWordPress（特にSWELL等の有料テーマ・記事多数）で運用しているクライアントに、
TERASUの新デザインを適用したい場合の設計。初回事例＝ミライ共創コミュニティ（miraikyoso.jp）。

大前提（ここを外すと事故る）

  • 既存WordPressに記事が大量にある場合（例：1000記事）、SEO資産＝会社の宝。絶対に壊さない。
  • 本番WordPressで直接テーマ開発するのは禁止。必ずローカル複製環境で開発 → 本番反映。
  • 既存がSWELL等の有料テーマ＋カスタム投稿タイプで作り込まれている場合、
    独自テーマをゼロから作ると既存機能・記事表示が全部壊れる → 子テーマ方式が正解。

なぜ「別ドメイン」「サブドメイン」はダメだったか

クライアントがSEOを分かっている場合、以下は拒否される（＝先方が正しい）。

案 判定 理由
別ドメイン（新規取得） NG ドメインが別＝SEO完全分断。記事資産がHPに効かない
サブドメイン（blog.〇〇） NG サブドメインでも完全一体ではない
同一WordPress内に統合 ◎ 同一ドメイン・同一サイトでSEO最強。これが本命

→ 記事資産が大きいほど「同一ドメイン・同一サイト内にHPを載せる」が唯一の正解になる。

切り分け（これが楽の核心）

動きのないページ（トップ・会社概要・about・plan・faq・contact 等）
   → TERASUの静的HTML/CSSを「そのまま流し込む」だけ  ★簡単

記事系ページ（column・interview・event・report・expert 等・大量記事）
   → 既存WordPressの動的表示のまま活かす  ★ここだけ手間

デザイン再現は簡単・記事機能との統合だけが手間。この2つを混同しない。

実装レベル（簡単な順）

  1. 【レベル1】固定ページにHTML貼り付け … 最も手軽。ただしSWELLのヘッダー/フッターが残る・CSS衝突。完全再現は不可
  2. 【レベル2】子テーマに白紙テンプレを1枚作り、静的HTMLを流し込む … ★現実的ベスト。ヘッダー/フッター含め完全再現。記事系はSWELLのまま
  3. 【レベル3】全ページ子テーマ化 … 記事一覧・詳細もTERASUデザインで作り込む。フル対応・工数大

→ レベル2から始めるのが最適。「器（白紙テンプレ）を最初に1回だけ作る」→以降は各ページのHTMLを入れるだけ。

着手時の手順（2026-07-08 シンプル版に改訂・大串確定）

ローカルWordPress複製は作らない。「有効化しないライブプレビュー」を検証環境として使う（本番実データ×新デザインを公開せず確認できる）。工数1.5〜2日。

STEP1  子テーマ一式をローカルでファイル作成（WP環境不要・1日）
        └ style.css / functions.php / template-blank.php(白紙テンプレ)
          / archive-*.php / single-*.php / assets/(CSS・画像・JS)
STEP2  バックアップ確認（5分）
        └ エックスサーバー自動バックアップ(14日)有効を目視＋管理画面からエクスポート1回
STEP3  php -l 全ファイル構文チェック → ZIP化 → 本番へアップ（有効化しない）
        └ 外観→テーマ→新規追加→ZIPアップロード
STEP4  ライブプレビューで実記事×新デザインを確認（管理者にだけ実行される＝訪問者無影響）
        └ 修正あれば STEP1に戻り再アップ（数分/回）
STEP5  有効化＝公開（大串の号令・低トラフィック帯・数秒）
        └ 崩れたら「外観→テーマ→SWELL」1クリックで原状復帰
STEP6  公開後チェック（主要記事URLの200確認・Search Console翌日確認）

安全性の整理（先方説明にも使える）

  • 記事・データ消失は構造的に起きない（テーマ＝表示層・DBには読み取りのみ）
  • リスクは有効化の瞬間のみ（PHPエラー→一時表示乱れ）。php -l＋ライブプレビュー＋WP5.2+の致命エラー保護モード＋1クリック復帰の4重で対策
  • 「絶対」と言えるのは「いつでも元に戻せること」

白紙テンプレの実体（十数行）

<?php
/*
Template Name: TERASU白紙テンプレート
*/
?><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body>
<!-- ここにTERASUの静的HTMLをまるごとコピペ -->
<?php wp_footer(); ?>
</body>
</html>
  • 静的ページ＝この器にHTMLコピペ（固定ページでテンプレ選択）
  • 動的ページ＝同じ器で archive-interview.php 等のファイル名を置くだけで自動適用（テンプレート階層）。カード1枚分のHTMLの文字だけ the_title() 等に置換し、ループで囲む→1000記事に自動適用。ページ送りは the_posts_pagination()

役割分担（2026-07-08 大串確定）

  • 静的ページ（トップ・会社概要等）＝TERASUボール: previewのデザインを子テーマに移植。更新はTERASUがHTML編集
  • 動的ページ（interview・column等）＝先方ボール: デザイン(型)だけTERASUが作る。記事の投稿・更新は先方が今まで通りWordPress管理画面で
  • トップもCloudflareに置かずWordPress内に移植（同一ドメインSEO統合が先方の絶対要件のため）
  • エックスサーバー側の作業はゼロ（バックアップ目視のみ）・FTP不要・WordPress管理画面ログインだけで完結

公開後の更新運用フロー（2026-07-08 大串と擦り合わせ確定）

更新の種類 誰が テーマ再アップ
記事の投稿・更新（コラム/インタビュー/イベント等） 先方がWP管理画面で従来通り 不要（テンプレが自動表示）
デザイン・レイアウト・リンクの変更 TERASU側 必要（コード修正→ZIP→アップ）
  • 正本は常にGitHub（scale-group-jp/client-miraikyousou）。大串がチャットで指示した修正もClaudeが裏で必ずpush（ver管理・巻き戻し可）。ZIP直入れ・本番テーマエディタ編集は禁止
  • ZIP生成の責任分界: Claudeが関わった修正→ZIP生成まで自動セット（完了報告=ZIP最新）／デザイナーが直接pushした更新→大串が「反映して」と一言→Claudeがpull+ZIP生成
  • 本番へのZIPアップ（置き換え）は毎回大串の手作業（管理画面・数クリック）
  • 退化注意: デザイナーがGitHub外（手元ファイル）で作った最新版をもらった場合、ここで入れた修正が入っていない。丸ごと上書きせずマージしてからZIP化（理想はデザイナーもGitHubリポを直接使う）

ミライ共創コミュニティ（初回事例）メモ

  • 本番：miraikyoso.jp（WordPress + SWELL テーマ）
  • カスタム投稿：インタビュー/イベント/お知らせ/開催レポート/認定専門家
  • 記事数：約1000本（SEO資産大）
  • TERASU preview：preview.client-miraikyousou.pages.dev（約15ページの静的サイト）
  • preview のページ（interview/event/column/expert/report）が既存WordPressのカスタム投稿と1対1で対応
  • 認識違いの経緯：当初「別ドメイン/サブドメイン」で提案 → 先方はSEO統合のため「同一WordPressにデザインを載せる」を要求。TERASU側がWordPress知見不足で方向修正・お詫び済み
  • 期待値調整：「他クライアントで対応経験のない業務。質問・試行錯誤しながら進める」旨を先方に伝達済み

WordPress統合の再発防止ルール（2026-07-08 大串FB「今後間違わないように」・恒久）

今回「横幅・フォントが所々ズレる」が複数回発生した反省から。正本＝リポ直下CLAUDE.md「絶対の地雷」（同内容）。

  1. htmlのfont-sizeに触らない（TERASU静的CSSは62.5%+vw連動のremスケール設計。固定するとrem箇所だけ膨張）
  2. wp_head()は静的CSSより前（meta charset直後）。後ろだとWP/プラグインCSSが静的デザインを後勝ち上書き
  3. テーマフォルダ名は既存テーマと衝突させない（SWELL公式子テーマ=swell_childが有効テーマだった。同名アップ=置き換え=即本番事故）
  4. 崩れたら推測ラリーせず実測: 静的正本をローカル実レンダリング→computed style実測→WP側との差分で真因特定（今回この手順5分で確定）

実装進捗（2026-07-08 STEP1完了・STEP4ライブプレビューOK）

  • 2026-07-08 12:30 ライブプレビューで表示OK（大串確認済み「バッチリ」）。フォント・横幅ズレも解消。残り＝STEP5有効化（大串の号令・低トラフィック帯）とSTEP6公開後チェック。ただし現状front-page（トップ）のみ移植・記事系テンプレは雛形のため、有効化タイミングは下層の型が揃ってからが安全

  • ** テーマフォルダ名を terasu_child に変更（2026-07-08）: 本番はSWELL公式子テーマ（フォルダ名 swell_child・LOOS製）が現在有効化中**で、当初の同名ZIPだと稼働中テーマを直接置き換え＝即本番事故だった（アップ時の「置き換える」画面でストップ・キャンセルで回避）。ZIP=dist/terasu_child.zip・テーマ名「TERASU CHILD - 未来共創」

  • 管理画面エクスポート1回目取得済み（~/miraikyoso-backups/WordPress-export_2026-07-08.xml・51MB）。ただしpost 1141件+attachmentのみでカスタム投稿（interview等）が未収録 → 「すべてのコンテンツ」で再エクスポート依頼中（入らなければXserver自動バックアップ目視でカバー）

  • 子テーマ骨組み一式 作成完了。リポ= ~/dev/client-miraikyousou-wp/（GitHub: scale-group-jp/client-miraikyousou-wp・private・main）

  • 静的リポ（client-miraikyousou）とは別リポ（同リポだとPagesデプロイpages deploy .でPHPソースがpreview URLに公開されてしまうため）
  • 中身: swell_child/（style.css / functions.php / template-blank.php / front-page.php / archive・single×5タイプ / home.php・single.php / assets 199ファイル）
  • front-page.php＝トップ完全移植（静的ver135から自動生成・アセットパス154箇所置換・未置換0を機械確認・CSS内url(/fonts/)も置換済）
  • カスタム投稿タイプ実名を本番REST APIで実測（/wp-json/wp/v2/types）: interview / event / report / expert / news（0件）＋コラム=通常投稿post（/{数字ID}/ → home.php・single.php）→ テンプレ名ズレの地雷を潰した
  • ビルド: bash build_zip.sh → 再ビルド＋php -l全15ファイルチェック＋dist/swell_child.zip（6.7MB）生成まで動作確認済み
  • 注意: 静的サイトの下層13ページはver135で撤去済（中身未投入）。確定デザイン=トップのみ。動的テンプレは雛形（型のデザイン確定後にカードHTML移植）
  • 次の手（STEP2〜）は大串マター: ①Xserver自動バックアップの目視＋管理画面エクスポート1回 ②管理画面からZIPアップ（有効化しない）→ライブプレビュー確認。WordPressログインは大串保有
  • 料金（2026-07-08 大串決定）: この統合対応の別途見積もり・追加請求はしない（見積もり作成タスクなし・蒸し返さない）

関連