既存のHTMLサイトをWordPressに移行する時の変更箇所や注意する点を紹介

既存のHTMLサイトは、ページの追加・更新をするにあたって、タグや内容などを全て自分で打ち込む必要があります。

また、更新したファイルをFTPでアップロードしないとサイトに反映することができます。

一方、Wordpressだとタグの打ち込みが必要なく、さらに更新もボタン一つで可能です。管理が簡単なのが特徴です。

そのため、既存のHTMLサイト（静的HTMLサイト）をWordpressに移行して管理したいと思うことも多いはずです。

このページでは、既存のHTMLのサイトを移行するための大まかな流れを紹介していきます。

移行方法は、既存のHTMLサイトをスクレイピングで必要な部分を抜き取りつつWordpressのテーブルにアップデートしていきます。
※PHPなどの知識がある程度必要です。

HTMLサイトをWordpressに移行するための手順

HTMLサイトをWordpressに移行する場合は下記のような作業が発生します。

「スクレイピングで既存の記事をWPに保存」までが事前に準備する作業です。

「ツールでドメイン一括置換」からは、リリース当日から行う作業です。

それぞれの手順の内容を紹介します。

既存のイメージ画像をWP側にアップロード

HTMLサイトの場合は、イメージ画像ディレクトリーを作成してまとめている場合が多いと思います。

https://hoge.com/img/xxxxx

WordPressの場合は設定を変更しない限り、uploadディレクトリの下に日付ごとにフォルダがつくられ、その中に画像が保存されます。

今までの画像を日付ごとに振り分けるのは不可能なので、下記の場所にまとめてアップロードして、画像URLを変更します。

/wp-content/uploads/

例えば、HTMLサイトで下記の画像を使っていたとします。

<img src="../img/categorya/a.jpg">

WordPress側では、下記のように絶対パスで置換します。

<img src="https://hoge.com/wp/wp-content/uploads/img/categorya/a.jpg">

WordPress側に移行後にURLを置換するのであれば、「Search Regex」というプラグインを使って置換ができます。

もしくは、後述する「Search Replace DB」でも変更できます。

WordPressテーマの選択

WordPressでは、どんなサイトでもテーマを使っています。

テーマを使うことで、サイトのデザインを統一させることができます。

「どのテーマを利用するか」「オリジナルのテーマを作成するか」「無料テーマをそのまま使うか」を決める必要があります。

無料テーマを使う場合であっても、デザイン性を求めるのであれば、ほぼ開発が必要で、テーマ開発が一番時間がかかります。

有料であれば、開発しなくてもよいものが多いです（必要に応じて修正が必要になる場合があります）。

時間をかけたくない場合は、有料テーマがおすすめです。

有料Wordpressテーマ
・THE THOR（個人・企業どちらも）
・STREETIST（個人・企業どちらも）
・Emanon（個人・企業どちらも）
・「スワロー」（個人・企業どちらも）
・「STORK19」（個人・企業どちらも）
・「ストーク」（個人・企業どちらも）
・「RUMBLE」（個人向け）
・「ONE」（個人向け）
・「FAKE」（企業向け）
・AFFINGER（個人向け）
・SWELL（個人向け）

無料Wordpressテーマ
・「BlogPress」（無料）
・「Cocoon」（無料）

テーマが決まったら、Wordpressにインストールして操作感をチェックしましょう。

テーマにはカスタマイズなどで変更できる項目があり、基本的に有料テーマは変更できるカスタマイズ内容が多くあります。

早めに確認することで、開発しなくても変更できる部分を把握できます。

プラグインの選択

WordPressには、プラグインを使って便利な機能を実現できます。

ただし、機能がテーマについているものもあったりするので、テーマでないものを入れるようにしましょう。

• Smush：画像最適化・Lazyload処理
• Table of Contents Plus：目次プラグイン
• WP Revisions Control：リビジョンを制限できる
• WordPress Popular Posts：人気記事一覧
• contact form7：フォーム作成
• Shortcoder：ショートコード作成
• Yoast SEO：title、description設定・Googleアナリティクス設定・XMLサイトマップ
• XML Sitemaps：XMLサイトマップ
• Classic Editor：グーテンベルグが使いにくい場合
• WP Crontrol：WPクーロン操作

SmushはLazyloadができるのでかなりおすすめです。

テーマでGoogleアナリティクスなどの設定ができない場合は、Yoast SEOまたはAll in One SEOをいれましょう。

もし、XML Sitemaps（Googleに渡すXMLサイトマップ）だけでよい場合もあります。テーマでどこまで対応しているか確認が必要です。

HTMLサイトの内容をスクレイピングして保存する

いよいよ本題になります。

HTMLサイトが数ページ規模であれば、コピペですみますが、数十ページ以上あるサイトになるとコピペもかなり大変です。

その場合は、既存サイトのHTMLをスクレイピングして、Wordpressに保存する方法があります。

スクレイピングには、GoogleのphpQueryというライブラリを利用できます。

phpQueryを使うと、「CSSのidやclass」を指定してHTMLを抽出することができます。逆にいうと、抜き出す部分に下記のようにidやclassの指定がないと抜き出せません。

<div id="main_body">・・・</div>

phpQueryの設定方法から使い方は下記の記事が参考になります。

phpQueryでは抽出したデータは、下記のWordpress関数を使ってDBに登録します。

wp_insert_post()で更新する主な項目

wp_insert_post()では、投稿記事に関する情報を保存＆更新します。

update_post_meta()で更新する主な項目

次にupdate_post_meta()でアイキャッチ画像の情報を登録します。

アイキャッチ画像は、投稿IDで紐づけるのでwp_insert_post()が成功した場合に返ってくる投稿IDを使って作成します。

meta_valueに登録するのは、画像IDという点に注意が必要です。

【補足】画像IDを取得する方法

画像IDは、wp_postsテーブルの「ID」のことです。

WordPressにアップロードした画像は、wp_postsテーブルに保存されます。

wp_postsテーブルに保存された主な画像情報

//phpMyAdminなどでSQLを書いて確認できます。
//テーブル名は自分のwp_postsテーブル名になおしてください。
SELECT * FROM wp_posts WHERE guid = "https://xxxxxx/xxxxx/xxxxx/xxxxx.jpg"

IDが画像IDになります（投稿の時はIDが投稿ID）。

guidに画像URLがフルパスで設定されるので、これを使って取得します。

//画像はhttpsからフルパスで指定します。
//テーブル名は自分のwp_postsテーブル名になおしてください。
$url = 'https://xxxx/wp-content/uploads/xx/xx/xxxx.png';

function get_attachment_id_from_url($url) {
  global $wpdb;
  $query = 'SELECT ID FROM wp_posts WHERE guid ="'.$url.'"';
  $id = $wpdb->get_var($query);
  return $id;
}

この方法を使って、スクレイピングした内容を登録する時に一緒にアイキャッチ画像を登録する方法は、下記の2つの方法があります。

事前にアイキャッチ画像をアップして投稿に紐づける方法

※投稿の投稿スラッグを使って画像検索できるように、アイキャッチ画像の名前に投稿スラッグ入れます。

投稿と同時にアイキャッチ画像も登録する方法

※投稿の投稿スラッグとアイキャッチ画像の名前を同じにしておくと今後便利かも。

投稿スラッグ名とアイキャッチ画像名を合わせるところが重要です。

【補足】ページ内で利用しているJavascriptを確認する

スクレイピングするHTMLの範囲にJavascriptのコードが直接書かれていれば、phpQueryで一緒に抜き出すことができます。

ただし、Javascriptを外部ファイルにして、読み込みませている場合は、functions.phpにwp_enqueue_scriptの記述を追加して読み込ませます。

どのページでJavascriptを使っているか確認しておきましょう。

【補足】既存サイトとWordpressのURLの違いに注意

WordPressでは、URLがディレクトリ表示になります。

https://example.com/category/aiueo/
https://example.com/aiueo/ranktracker/

一方、HTMLサイトでは、URLにhtml拡張子がつくことがあります。

https://example.com/aiueo/index.html
https://example.com/aiueo/ranktracker.html

WordPressに合わせたURLにするには、html拡張子を省いた状態を「投稿スラッグ」に保存します。

例えば、下記のURLであれば、

//変換前
//HTMLサイトでのURL
https://example.com/aiueo/ranktracker.html

投稿を保存する時に下記の登録を行います。

このように設定することで、下記のURLに変換できます。

//変換後
//WordpressでのURL
https://example.com/aiueo/ranktracker/

また、カテゴリー一覧にはURLにcategoryという文字が入ってしまうので、これを削除したい場合は下記の記事を参考にしてください。

URL変換を行ったときはGoogle検索対応が必要

さらに、URL変換を行ったときに必要になるのがGoogle検索対応です。

URLを変更する以上、アクセスは減少します。

ただし、リダイレクトの処理を行うことで、アクセスが減るのを多少防ぐことができるので必ず設定しましょう。

※リダイレクトを設定しないと、Wordpressでは「404エラー」になってしまいます。

【補足】ドメイン関連

同じドメインでHTMLからWordpressに移行する場合は、Wordpressは仮URLで作業することになります。

WordPress側の設定が整ったら、ドメインを変更して運用を始めることになります。

運用開始するまでは「仮URL」でチェックしますが、移行後は正規のドメインで運用するので、画像などのURLが仮URLのまま残ってしまわないようにチェックが必要です。

「Search Replace DB（外部リンク）」を使うと、画像URLや内部・外部リンクを一括置換できます。

使い方は、下記のページの「インポートデータを成型（置換）する」で解説しているので参考にしてください。

次にWordpressでパーマリンクの変更を行います。

サーバー側でドメイン変更（ドメインとWordpressのあるフォルダをむずびつける設定※DNS設定など）は下記の点に必要が必要です。

どちらも完了すればなおりますが、突然アクセスできなくなったり、表示されなくなるのでびっくりします。

実際の変更作業はWordpressの設定で、下記の2つを変更します。

先に、上記のWordpressの変更してからドメインを変更すれば、サイト表示が停止することはありません。

ただし、DNSの設定が完了するまでWordpress管理画面へアクセスできなくなります

【補足】htaccessの設定変更について

既存ドメインへ変更して運用開始となったらhtaccessの変更も必要になる場合があります。

例えば、フォルダを含んだサーバー名で作業していた場合、

https://仮URL.com/wp

から、

https://サイト名.com/

に変更したとします。

この場合、wpフォルダを含んだURLがドメインに切り替わっているので、wpフォルダを除いたhtaccess設定が必要になります。

変更前

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>

変更後

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

インデックス登録開始（Wordpress設定画面から）

Google検索でひっかかるようにインデックス登録を開始しましょう。

「設定」＞「表示設定」＞「検索エンジンでの表示」のチェックを外します。

Search Console設定

Google側での設定です。

急ぎではありませんが、登録しておくとどういうキーワードで流入しているかが分かります。

Googleアナリティクス設定

アクセス解析の基本ツールです。

テーマやプラグイン、コードに直接書く方法などがありますが、設定できるのであればやっておきましょう。

Googleアドセンス設定

必要に応じて設定しましょう。

【まとめ】HTMLサイトをWordpressに移行するための手順

移行の手順をまとめると下記のようになります。

「WordPressテーマの選択」と「HTMLサイトの内容をスクレイピングして保存する」でほとんどの時間を使います。

スクレイピングして保存する時はテストしながらになると思うので、はじめてやると時間がかかります。

また、HTMLからWordpressに変更するとURLが変わってしまうので、404エラーにならないように対策が必要です。

（※1）画像URLやリンクなどの変更は、仮URLで実施し本番リリース前に一気に置換してしましょう。

以上、ファイルが多ければ多いほど時間がかかってしまうので、少ないうちに移行してしまうのがベストです。