静的HTMLウェブサイトをElementorでWordPressに移行するのは大きな作業に思えますが、間違った方法で行えば実際に大きな作業になります。コンバーターを使ってページごとに行えば、大部分は機械的な作業です。ここでは、管理しやすく、最終的に本当に編集可能なElementorページが得られる進め方を紹介します。
まずWordPress側をセットアップする
何かを変換する前に、移行先を準備します。Elementorが有効なWordPressをインストールし、元サイトがウェブフォントを使っていた場合はフォントを登録し（サイト設定 → カスタムフォント）、読み込んだページにブランドカラーを適用したい場合はグローバルカラーを設定します。最初にこれを行うことで、変換した各ページをフォールバックフォントや仮の色ではなく、実際のサイトと照らし合わせて確認できます。
1ページずつ変換する
サイト全体を一度に取り込もうとしないでください。ページごとに、そして長いページではセクションごとに進めます。変換した単位ごとなら確認が簡単です。サイト全体を一度に確認するのは簡単ではありません。分割して変換することで、古いサイトのヘッダーやフッター、Cookieバナーを各ページに引きずり込まずに済みます。
各ページでは、HTMLを開き、CSSがインラインまたはstyleブロック内にあることを確認し、ネイティブコンポーネントモードでコンバーターに貼り付けます。見出し、テキスト、画像、ボタン、レイアウトはネイティブのElementorウィジェットとコンテナになり、余白、色、タイポグラフィは実際のコントロールに引き継がれます。
共通のヘッダーとフッターは一度だけ処理する
静的サイトではヘッダーとフッターがすべてのHTMLファイルに繰り返されます。WordPressでは、それらをページコンテンツに入れたくありません。テーマのヘッダーとフッター（またはElementorテーマビルダーのテンプレート）として一度作成し、全ページに適用します。そのため、ページを変換するときは、ストラクチャーマップのコピールートを使ってそのページのメインコンテンツだけを取得し、ヘッダーとフッターは含めないようにします。それらは別途、一度だけ作成します。
画像とリンクには注意が必要です
- 画像: メディアライブラリにアップロードして実際のURLを参照すると、手動の手順なしで取り込まれます。ローカルファイルパスやBase64画像は添付ファイルにできないため、空のプレースホルダーとして取り込まれます。各プレースホルダーには代替テキストがキャプションとして残るので、何をアップロードすればよいか分かります。
- 内部リンク: 静的サイトは
.htmlファイル同士をリンクしています。取り込み後、新しいWordPressのURLを指すように更新します。これはどの移行でも面倒な部分で、回避する方法はありませんが、ページごとならすぐに済みます。 - フォームとメニュー: フォームの送信アクションは引き継がれないため、サイト上のElementorフォームに接続します。ナビゲーションは実際のWordPressメニューになります。
うまく変換されるものと、作り直すもの
レイアウト、余白、色、タイポグラフィ、画像、アイコン、構造は忠実に変換されます。スクリプトは取り除かれるため、JavaScriptで動く振る舞いはネイティブウィジェットで再構築します。ホバー状態やアニメーションはElementorで再適用します。この境界を最初に把握しておけば、移行は次々に起こる予想外の出来事ではなく、予測可能なチェックリストになります。
うまくいく移行の順序
- 共通のヘッダーとフッターを一度作成します。
- ホームページ、次に主要ランディングページ、その後に内部ページを変換します。
- 各ページで、コンテンツを取得するコピールートを設定して貼り付け、内部リンクと画像を修正します。
- インタラクティブな要素（スライダー、タブ）はネイティブに再構築します。
- 再利用できるセクション（機能グリッド、CTAバンドなど）は、進めながらテンプレートライブラリに保存します。そうすれば後半のページは構築ではなく組み立てになります。
- 検索順位を維持できるよう、古い
.htmlURLから新しいURLへのリダイレクトを設定します。
この方法で進めれば、HTMLウェブサイトのElementorへの取り込みは、ページごとの着実なプロセスとなり、最後には編集可能なWordPressサイトが残ります。再構築ではなく、編集できないコードブロックの山でもありません。