HTMLサイトをWordPress化する方法｜既存のデザインをそのまま使える？

HTMLとCSSで作ったサイトを、WordPressで更新できるようにしたい。ノーコードツールで作ったサイトと違い、HTMLサイトはファイルが手元にあるので、デザインを活かしやすいのが特徴です。ただし、WordPressへの載せ方によって、移行したあとの編集のしやすさが大きく変わります。

この記事では、HTMLサイトをWordPressへ移す4つの方法を比べ、URLとSEOを守りながら移す手順を解説します。

HTMLサイトをWordPressへ移す4つの方法

方法	作業の内容	デザイン	移行後の編集	向いているケース
テーマにする	HTML・CSSを、WordPressのテーマのテンプレートに分けて組み込む	ほぼそのまま	作り方しだい。コードの知識が必要な部分が残る	開発者がいて、長く運用する
固定ページに組み込む	ページのHTMLを「カスタムHTML」ブロックに貼り、CSSを読み込む	ほぼそのまま（テーマのCSSとぶつかることがある）	HTMLを直接編集する	ページ数が少なく、更新も少ない
ページビルダーなどで作り直す	ブロックエディタやページビルダーで、同じ見た目を作る	作り直す人しだい	ノーコードで編集できる	デザインも見直したい
自動変換ツールで取り込む	公開中のページのURLを入れて取り込む	元のHTML・CSSを保ったまま	ツールのエディタで編集	見た目を変えずに早く移したい

テーマにする

HTMLを、ヘッダー・フッター・本文などの部品に分けて、WordPressのテーマにする方法です。見た目は元のままにでき、WordPressのメニューや投稿の仕組みも使えます。一方で、テーマを作るにはWordPressのテーマの仕組みの知識が必要で、デザインを変えるときもコードを直すことになります。

固定ページに組み込む

WordPressの固定ページに「カスタムHTML」ブロックを置き、元のページのHTMLを貼り付ける方法です。手軽ですが、WordPressのテーマのCSSと元のCSSがぶつかって、見た目が崩れることがあります。文章を変えるときはHTMLを直接編集するので、HTMLに慣れていない人には更新しにくい形です。

ページビルダーなどで作り直す

ブロックエディタやページビルダーのプラグインで、同じ見た目のページを作り直す方法です。移行したあとはノーコードで編集できますが、元のデザインを再現するには時間がかかります。

自動変換ツールで取り込む

WPSitePortでは、公開中のページのURLを入れて、ページをWordPressにコピーします。HTMLサイトのページは「見た目をそのまま複製する」方法で取り込み、元のHTML・CSSを保ったまま、ビジュアルエディタでの変更をその上に重ねます。公開したページはテーマを通さずに表示されるので、WordPressのテーマのCSSとぶつかって崩れることもありません。

コードで管理したい場合は、「コードとしてコピー」も選べます。HTML・CSS・JavaScriptのファイルとして、そのページのURLで公開されます。サーバー上のファイルを直接編集するか、ZIPでダウンロードして編集し、アップロードして更新します。

WPSitePortがコピーするのは、ログインしなくても開ける公開中のページです。手元にファイルしかない場合は、いったんサーバーに置いて、URLで開けるようにしてからコピーします。

移行の手順

1. ページとファイルの一覧を作る：HTMLファイル、CSS、JavaScript、画像、PDFなど。URLの一覧は、そのままリダイレクトの対応表の元になります
2. WordPressを用意する：同じサーバーを使う場合は、今のファイルのバックアップを取ってから作業します
3. ページを移す：上の4つの方法から選びます
4. 共通の部分を整える：ヘッダー、フッター、メニューなど
5. URLを決め、301リダイレクトを設定する
6. 表示を確認して公開する：PC・スマホの表示、フォーム、計測タグ

同じサーバーの同じ場所にWordPressを入れる場合、古い index.html が残っていると、サーバーの設定によっては、WordPressのトップページより先に表示されます。移行が終わったら、古いHTMLファイルはバックアップを取ったうえで、公開している場所から外しましょう。

WPSitePortでは、1回の登録で1ページをコピーします。ヘッダーやフッターは各ページの中に含まれた形で取り込まれるので、メニューを変えるときは、ページごとに直す必要があります。

URLとSEOを守る

HTMLサイトのURLは /about.html のように .html で終わることが多く、WordPressでは /about/ のような形になるのが一般的です。URLが変わるページには、古いURLから新しいURLへ301リダイレクトを設定します。

Googleは、URLが変わるサイト移転について、次のような手順を案内しています（Google 検索セントラル「URL の変更を伴うサイト移転」）。

• 古いURLと新しいURLの対応表を作る
• サーバー側で恒久的なリダイレクト（301など）を設定する。リダイレクトを何回もつなげない
• 内部リンクを新しいURLに更新する
• サイトマップを送信し、Search Consoleで状況を見守る
• リダイレクトは1年以上残す

サーバーがApacheの場合は、.htaccessに次のように書くと、ページごとに301リダイレクトを設定できます。WordPressが書き込む「# BEGIN WordPress」の行より上に書きます。

RewriteEngine On
RewriteRule ^about\.html$ /about/ [R=301,L]
RewriteRule ^company/profile\.html$ /company/profile/ [R=301,L]
RewriteRule ^index\.html$ / [R=301,L]

.htaccessを編集できない場合や、管理画面で管理したい場合は、リダイレクト用のプラグインを使う方法もあります。

WPSitePortでコピーしたページの中の、同じサイトへのリンクは、WordPress側のアドレスに書き換えられます（パスはそのまま）。/about.html を /about/ に変えるなど、URLの形を変える場合は、コピーのときに「URL変換ルール」で書き換え先を指定すると、ページの中のリンクも新しいURLになります。

ページ数が多いHTMLサイトの場合

100ページ、1000ページといった規模のHTMLサイトを、すべて同じ方法で移そうとすると、作業量が大きくなります。ページを次の2つに分けて考えると、移し方を選びやすくなります。

• デザインの決まったページ（トップ、サービス紹介、会社概要など）：見た目を保って移す（テーマにする、自動変換ツールで取り込むなど）
• 同じ形が続くページ（お知らせ、ブログ、事例など）：WordPressの投稿として移し、一覧やカテゴリーはWordPressの機能で表示する

WPSitePortは、1回の登録で1ページをコピーするツールで、サイト全体を自動で巡回してコピーすることはしません。同じ形が続く大量のページは、投稿として移す方法と組み合わせるのがおすすめです。

自分のサイトで試すときのポイント

HTMLサイトといっても、作り方によって移しやすさが変わります。試すときは、サイトの種類ごとに次の点を確認しましょう。

• シンプルなHTMLとCSSのサイト：文字・画像・レイアウトがそのまま移るか、スマホの表示が崩れないか
• Bootstrapなどのフレームワークを使ったサイト：メニューの開閉など、フレームワークのJavaScriptで動く部分が動くか
• JavaScriptで表示を作っているサイト：スライダーやタブ、表示される内容が、取り込んだあとも同じか
• Tailwind CSSのCDNのように、ブラウザでCSSを作るサイト：ブラウザで表示した状態のスタイルが取り込まれているか

WPSitePortは、ページを実際のブラウザで表示した状態から取り込み、コピー元との見た目の一致度をレポートします。まずは無料版で、いちばん作りの複雑なページを1ページ試すと、ほかのページの移しやすさも見当がつきます。

開発者コメント