静的なHTMLウェブサイトをElementorでWordPressに移行するのは大仕事に聞こえますし、やり方を誤れば実際に大仕事になります。コンバーターを使って1ページずつ進めれば、ほとんどは機械的な作業です。ここでは、作業を管理しやすく保ち、最終的に本物の編集可能なElementorページが手に入る進め方を紹介します。
まずWordPress側を準備する
何かを変換する前に、移行先を整えておきます。Elementorを有効にしたWordPressを用意し、元のサイトがWebフォントを使っていた場合はフォントを登録し（サイト設定 → カスタムフォント）、インポートしたページにブランドカラーを反映させたい場合はグローバルカラーとして設定します。これを先に済ませておけば、変換した各ページを、代替フォントや仮の色ではなく実際のサイトの状態で判断できます。
1ページずつ変換する
サイト全体を一度の操作でインポートしようとしないでください。1ページずつ、長いページならさらに1セクションずつ進めます。変換した単位が小さければ確認は簡単ですが、サイト全体を一度に確認するのは簡単ではありません。小分けにして変換すれば、古いサイトのヘッダー、フッター、Cookieバナーをすべてのページに持ち込まずに済みます。
各ページでは、HTMLを開き、CSSがインラインかstyleブロックに入っていることを確認してから、ネイティブコンポーネントモードでコンバーターに貼り付けます。見出し、テキスト、画像、ボタン、レイアウトはElementorのネイティブなウィジェットとコンテナになり、余白、色、タイポグラフィは実際のコントロールに引き継がれます。
ページが多いときの最速の方法：一括変換
サイトのページ数がそれなりにある場合、1つずつ投入する必要はありません。すべてのHTMLファイルをまとめてコンバーターにドロップしてください。ファイルが2つ以上あると一括モードに切り替わります。ファイルは同じ設定で順番に変換され、ページごとに1つのElementor JSONテンプレートを収めた1つのZIPをダウンロードできます。
そうなれば、WordPress側の作業は変換ではなくインポートになります。テンプレート → 保存したテンプレート → インポートでテンプレートを取り込み、各ページをそのテンプレートから作成します。処理はすべてブラウザ内で行われるので、30ページのサイトでもファイルが1つもどこかへアップロードされることはありません。
正直に言うと、制約が2つあります。一括変換は自動マッピングを使います。項目別のマッピングパネルとコピールートは単一ファイルでのみ使える機能なので、何を何に変換するかを手作業で調整したいページは、あとから個別に変換し直す価値があります。また、一括変換は各ファイルを渡されたとおりに変換するため、共通のヘッダーとフッターがすべてのテンプレートに入り込みます。ドロップする前にHTMLファイルからそれらを削っておくか、インポートした各テンプレートからそのコンテナを削除してください。共通部分が多いサイトでは、先にファイルを削っておくほうが実際に速く済みます。
共通のヘッダーとフッターは一度だけ扱う
静的サイトでは、ヘッダーとフッターがすべてのHTMLファイルで繰り返されています。WordPressでは、それらをページのコンテンツに入れるのではなく、テーマのヘッダーとフッター（またはElementorテーマビルダーのテンプレート）として一度だけ作り、全体に適用したいはずです。そこで、ページを変換するときは構造マップのコピールートを使ってそのページのメインコンテンツだけを取り出し、ヘッダーとフッターは置いていきます。それらは別途、一度だけ作成します。
画像とリンクには手当てが必要
- 画像：メディアライブラリにアップロードして実際のURLを参照しておけば、手作業なしでインポートされます。ローカルのファイルパスやBase64画像は添付ファイルにできないため、空のプレースホルダーとして取り込まれます。各プレースホルダーには代替テキストがキャプションとして残るので、何をアップロードすればよいか分かります。
- 内部リンク：静的サイトは
.htmlファイル同士でリンクしています。インポート後、それらを新しいWordPressのURLを指すように更新します。これはどの移行でも唯一の面倒な部分で、避ける方法はありませんが、1ページあたりならすぐに終わります。 - フォームとメニュー：フォームの送信アクションは引き継がれないので、サイト上のElementorのフォームに接続し直します。ナビゲーションは本物のWordPressメニューにします。
うまく変換されるものと、作り直すもの
レイアウト、余白、色、タイポグラフィ、画像、アイコン、構造は忠実に変換されます。スクリプトは取り除かれるので、JavaScriptで動いていた挙動はネイティブウィジェットで作り直します。ホバー時の状態やアニメーションはElementorで設定し直します。この線引きを最初から知っておけば、移行は予想外の出来事の連続ではなく、見通しの立つチェックリストになります。
うまくいく移行の順序
- 共通のヘッダーとフッターを一度だけ作成します。
- ホームページ、次に主要なランディングページ、その後に下層ページの順に変換します。
- 各ページでコピールートを設定してコンテンツを取り出し、貼り付けてから、内部リンクと画像を修正します。
- インタラクティブな部品（スライダー、タブ）はネイティブで作り直します。
- 再利用できるセクション（機能紹介のグリッド、CTAの帯など）は、作業しながらテンプレートライブラリに保存していきます。そうすれば、後半のページは一から作るのではなく組み立てるだけになります。
- 検索順位を維持できるよう、古い
.htmlのURLから新しいURLへのリダイレクトを設定します。
このように進めれば、HTMLウェブサイトのElementorへのインポートは、1ページずつ着実に進むプロセスになり、最後には編集可能なWordPressサイトが残ります。作り直しでもなければ、編集できないコードブロックの山でもありません。