Claude Code・Codex用のhtml2wpプラグイン

インストール

プラグインはGitHubの2つのリポジトリで公開しています。1つはClaude Code用、もう1つはCodex用です。中身もバージョン番号も同じです。違うのは、各ツールが読み込む方法だけです。使っているツールに合うほうをインストールしてください。もう一方は読み込まれません。

使うツールに切り替えて、2つのコマンドを順に実行します。

1つ目のコマンドで、GitHubからプラグインのカタログ（マーケットプレイス）を追加します。2つ目のコマンドで、そこからhtml2wpをインストールします。Codexは.agents/plugins/marketplace.jsonというファイルを通じてプラグインを見つけますが、Claude Code用のリポジトリにはこのファイルがありません。そのためCodexには専用のリポジトリが必要です。

アップデート

アップデートのコマンド名はツールごとに違います。Codexではupgrade、Claude Codeではupdateです。

インストール済みのバージョンは、Codexではcodex plugin listで確認できます。Claude Codeでは/plugin →「Marketplaces」→ html2wpの順に開きます。

アップデートしてもCodexのバージョンが変わらない場合は、古いコピーがCodexに残っています。それを削除して、プラグインをインストールし直してください。

それでも直らない場合は、手動でインストールした別の古いコピーがCodexに残っているかもしれません。codex plugin marketplace listを実行すると、すべてのカタログが表示されます。そこにhtml2wp@<other-name>があれば、codex plugin remove html2wp@<that-name>で削除してください。

作業の大部分はhtml2wpのサービス側で行われ、サービスは自動で更新されます。次の変換は、もう新しいバージョンで動きます。アップデートが必要なのは、あなたのコンピューターで動く部分だけです。チェック、スクリプト、外部に送るデータのフィルターがそれにあたります。バージョンごとの変更点は、GitHubのコミット履歴で確認できます。

動作環境

これを自分で確かめる必要はありません。変換を始めると、プラグインがまずコンピューターを確認し、足りないものを一覧にします。

Node.js                ok        v22.14.0
Python                 ok        3.12.4
Playwright             MISSING   mirroring, prerendering and every screenshot
Docker                 NOT RUNNING  installed, but the daemon is not up

Playwrightやchromiumブラウザーのように、ユーザーフォルダーにだけ入るパッケージは、プラグインがインストールを申し出ます。コマンドを実行する前には毎回確認を求めます。Docker Desktopや新しいNode.jsのようにシステム全体を変えるものは、報告するだけです。そのあとは、あなたが自分でインストールするまで待ちます。

Pythonのパッケージを手動でインストールする場合：

どのモデルを使うか

変換中、AIは多くの判断をします。たとえば、どのページがトップページか、チェックがなぜ失敗したか、2枚のスクリーンショットの違いにクライアントが気づくかどうか、といった判断です。そのため、モデルの選択はほかのどの設定よりも結果を左右します。

Claude Codeでは、Opus 5が作業を進め、重要な判断ではFable 5に相談します。変換がいちばんつまずきやすいのは、そうした判断の場面です。

ライセンスキー

無料枠ではキーは不要なので、このセクションは飛ばしてください。ライセンスをお持ちの場合は、最初の変換の前にキーをコンピューターに保存します。作業は1回だけで、どのフォルダーから実行してもかまいません。

キーは環境変数H2WP_KEYで渡すこともでき、その場合はファイルより優先されます。安全なのはファイルのほうです。キーがターミナルの履歴に残らないからです。

このファイルに入れるのは、Proの購入時に受け取るhtml2wpのライセンスキーです。Visual Edit Proのキーは入れません。そちらは編集するサイトのVisual Editプラグインに入力するもので、変換には使えません。

キーが有効か、何に使えるか、いつまで使えるかはnpx html2wp-license YOUR-KEYで確認できます。結果の読み方はライセンスのページのキーの確認で説明しています。ライセンスに含まれるものと購入方法はライセンスのページにあります。

プロジェクトの変換

変換したいプロジェクトのフォルダーでターミナルを開き、そこでエージェントを起動します。

Claude Codeを使う場合は、最後の行でcodexの代わりにclaudeと入力します。

あとはエージェントにコマンドを1つ渡すだけです。

これで終わりです。npm installもnpm run buildも実行せず、設定も一切いりません。Bolt、v0、shadcn、Next.jsのエクスポートから作ったプロジェクトも同じように変換できます。Claude Codeでは/html2wp:html2wpとだけ入力してもかまいません。Codexには、html2wpを使うよう頼むこともできます。その場合は、何を変換するかをプラグインが尋ねます。

変換の最初の数分

> convert this project

  Checking this machine first…
    Node.js     ok    v22.14.0
    Playwright  MISSING
  Two Python packages are missing. Shall I install them? (they go in your
  user directory, no root)

> yes

  … installed. Building the project, then prerendering it.
  7 routes found: /, /about, /pricing, /blog, /blog/launch, /contact, /faq
  Decided: /blog is the listing, /blog/launch an article, the rest are pages.
  Written to the manifest; carrying on.

最後の数行で、プラグインはページの分類を記録しています。/blogは記事一覧、/blog/launchは記事、残りは通常のページです。この判断は、最後に完成したサイトで確認してください。

その他の入力

convert this projectというコマンドは、今いるフォルダーを変換します。ファイルが別の場所にある場合は、convert ./distのようにパスを入力します。

入力は必ず手元のディスクに置きます。公開中のサイトのアドレスは変換できません。必要なのはブラウザーに表示される内容ではなく、サイトの元になるファイルです。

Lovableのプロジェクトを変換する仕組み

LovableのアプリはReactで作られています。そのindex.htmlには空の要素とスクリプトしかなく、ページはブラウザーの中で初めて形になります。そこでプラグインはまずプロジェクトをビルドし、本物のブラウザーで開いて、各ページを完成したHTMLとして保存します。開いたアコーディオンやドロップダウンメニューのように、スクリプトが動いたあとに現れる内容も取り込みます。そのうえで、これらのページからテーマを作ります。詳しくはLovable WordPress移行のガイドをご覧ください。

プラグインが代わりに判断すること

どのページが何か

結果をいちばん大きく左右する判断が1つあります。どのページがトップページで、どれが記事一覧、どれが記事、どれが商品か、という判断です。プラグインはこれをページのコードから判断して記録し、確認を求めずに先へ進みます。止まるのは判断できないときだけです。たとえば、サイトのページ数が上限を超えている場合や、2つのページが同じページに見える場合です。

判断が間違っていても、直すのは簡単です。分類を修正して、変換をもう一度実行します。これが再実行で、変換の回数には数えません。

あとはほぼ自動で進む

Flashは約30分、Fullは約1時間かかります。ページ数とコンピューターの速さによって変わります。その間にプラグインはサイトをビルドし、元のサイトと比べ、html2wpのサービスに送って変換します。そのあと、完成したテーマをコンピューター上のDockerにある一時的なWordPressにインストールし、そこでテストします。

省略できない確認

最後に、プラグインは各ページを元のページと並べた画像を見せます。すべての画像を見て、気づいたことを伝えてください。

受け取るもの

• ZIPファイルのテーマ。WordPressの「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」からアップロードします。壊れたテーマは、プラグインがそもそも作りません。たとえば、PHPに構文エラーがある、コンテンツが欠けている、テーマのスクリーンショットのサイズが違う、ショップで購入できない、といった場合です。
• レポートCONVERSION-REPORT.md：ZIPと同じフォルダーに入っています。変換したページ、つないだメニュー、確認で見つけた点、変換中のすべての警告、残っている作業が書かれています。
• Visual Edit Liteへのリンク：クリックで編集できる無料のエディターです。エディターはテーマの一部ではなく、テーマはエディターなしでも動きます。Visual Edit Proは別売りの有料ライセンスです。

テーマは単体で動きます。ページ、ブログ、フォーム、メニュー、SEO、リダイレクトはテーマのコードに含まれ、プラグインなしで動作します。中身は読みやすいPHP、CSS、JavaScriptです。このコードはあなたのもので、私たちに縛られることはありません。テーマが外部に接続することもありません。クリックで編集する方法は、アプリのドキュメントのVisual Editの項で説明しています。

コンピューターの外に出るデータ

ブラウザーを使う作業は、あなたのコンピューターが受け持ちます。ページのビルド、スクリーンショットの比較、最終チェック用にDockerで動かす一時的なWordPressです。テーマそのものは、html2wpのサービスが作ります。そのためプラグインはビルドしたサイトをサービスに送り、テーマを受け取ります。

テーマのチェックはあなたの側で実行されるので、サービスにはその結果が見えません。そこでプラグインは、最後に結果をサービスに送ります。これは必須です。前の変換が結果を送るまで、サービスは次の変換を始めません。

• 送るもの：チェックの名前、合否、ページ数、もっとも低い一致率、失敗したページの短い名前（aboutやpricingなど）。
• 送らないもの：サイトのアドレスやドメイン、コード、テキスト、スクリーンショット、ファイルパス、ライセンスキー、サイト名。プラグインが送るのは、あらかじめ決めた項目だけです。
• 自分で確かめる：send-verdicts.sh <workspace> --dry-runを実行すると、送られる内容がそのまま表示されます。実際には何も送りません。短いスクリプト1本なので、中身を読めます。

プラグインがほかのデータを送ることはありません。完成したテーマは何も送りません。データの保存期間を含む詳しい説明は、データのページにあります。

不具合の報告

変換ツールそのものが間違えた場合は、次のコマンドで報告してください。

報告はすべて担当者が読みます。修正はサービスに反映されるので、すべての利用者の役に立ちます。