codebase-to-wordpress-converter

コードベースから WordPress への変換

概要

このスキルは、静的なフロントエンドや React ベースのフロントエンドを、完全に機能する CMS 駆動の WordPress テーマへ高精度で変換するために設計されています。シニア WordPress アーキテクト、React エキスパート、QA エンジニアとして機能し、ACF、動的メニュー、技術的な SEO の維持といった WordPress の高度な機能を統合しながら、ピクセル単位で完全に一致するようにします。

このスキルを使う場面

• React（CRA/Vite/Next.js）または HTML のプロジェクトを WordPress テーマに変換するとき。
• クライアントが元のソースとの完全なピクセル単位の一致を求めているとき。
• 既存の WordPress 変換に、構造上の問題や SEO 上の欠陥がないか監査するとき。
• 技術的な SEO（スキーマ、メタタグ、見出し階層）が正確に維持されていることを確認するとき。

主な機能

段階的な変換と監査

このスキルでは、厳密な 4 段階のフォレンジックプロセスに従います。

1. フェーズ 1：フォレンジック UI 比較：React コンポーネントと WordPress テンプレートを並べた表で監査し、相違点を見つけます。
2. フェーズ 2：完全監査：UI、SEO、CMS での編集可能性、ナビゲーション、機能、パフォーマンスを詳しく調査します。
3. フェーズ 3：アクションプラン：UI を壊さないよう、タスクを 安全、リスクあり、ブロック中 に分類します。
4. フェーズ 4：段階的な修正：安全なタスクを一度に 1 つずつ実行し、各ステップの後に検証します。

UI の完全固定

これらを視覚的な一致の目標としてください。セキュリティ、有効なマークアップ、アクセシブルなナビゲーションのために構造の変更が必要となる場合は、不可能な一致を約束するのではなく、そのトレードオフを報告してください。

• レイアウト、余白、タイポグラフィ、色を一切変更しません。
• Tailwind または CSS のクラス名を正確に維持します。
• DOM 構造や HTML のネストを一切変更しません。

手順ガイド

1. 検出とフォレンジック監査

まず、ソースコード内のすべてのコンポーネントを特定します。元のソースの出力と、変換先の WordPress の出力を比較する UI 比較表を作成します。

• ルール：このフェーズでは修正を行わず、検出だけを行います。

2. 戦略的なフィールドマッピング

静的な React/HTML のコンテンツを、動的な WordPress 関数にマッピングします。

• 静的なテキストを the_title()、get_field()、または the_content() に置き換えます。
• 静的なパスを get_template_directory_uri() に置き換えます。

3. 基本フックの実装

すべてのテーマで、WordPress の基本フックが適切に含まれていることを確認します。

• レイアウトファイル（header.php / footer.php）：</head> の前に wp_head() を、</body> の前に wp_footer() を含める必要があります。
• ページテンプレート：get_header() と get_footer() を呼び出す必要があります。
• 元の HTML 構造を壊さずに動的なナビゲーションを実現するための register_nav_menus()。

4. 検証とライブトラッカー

課題の合計数、修正済みの数、残りの数をライブトラッカーで管理します。修正のたびに、次の項目を確認します。

• ✅ UI に変更がない
• ✅ DOM に変更がない
• ✅ クラスに変更がない

例

例 1：ナビゲーションの変換

// WRONG: Static replacement that adds wrappers
wp_nav_menu(['theme_location' => 'primary']);

// CORRECT: Preserving original Tailwind classes and structure
wp_nav_menu([
    'theme_location' => 'primary',
    'container' => false,
    'items_wrap' => '<ul class="flex space-x-8">%3$s</ul>',
    'walker' => new Custom_Tailwind_Walker()
]);

例 2：アセットのパス指定

// Source: <img src="/images/logo.png" />
// WP Conversion:
<img src="<?php echo esc_url( get_template_directory_uri() . "/assets/images/logo.png" ); ?>" alt="Logo" />

ベストプラクティス

• ✅ 推奨： 内部リンクを堅牢にするため、get_page_by_path() を使用します。
• ✅ 推奨： functions.php に ACF（Advanced Custom Fields）のフォールバックを実装します。
• ✅ 推奨： プロジェクトのアセットパイプラインで Tailwind をビルドし、WordPress フックでコンパイル済み CSS を読み込みます。header.php での実行時の Tailwind 設定には依存しないでください。動的なテキスト、属性、URL は出力先のコンテキストに合わせてエスケープし、承認済みの WordPress フィルターを通じて意図されたリッチコンテンツを維持します。
• ❌ 禁止： コードを「整理する」ために「div」ラッパーを追加したり、クラス名を変更したりしないでください。
• ❌ 禁止： 元のデザインと競合する場合は、WordPress 標準のデフォルトスタイルを使用しないでください。

参考資料

• ACF のドキュメント
• WordPress での Tailwind CSS
• WordPress テーマハンドブック

制限事項

• このスキルは、タスクが上記のスコープに明確に一致する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代替として扱わないでください。
• 必要な入力、権限、安全境界、成功基準が欠けている場合は、作業を中断して確認を求めてください。