ワードプレス

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

2018年12月2日

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

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

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

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

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

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

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

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

移行作業手順

  • 既存のイメージ画像をWP側にアップロード
  • WordPressテーマの選択
  • プラグインの選択
  • HTMLサイトの内容をスクレイピングして保存する
  • ツールでドメイン一括置換
  • ドメイン設定変更(Wordpress設定画面から)
  • ドメイン更新(必要に応じて)
  • htaccessのドメイン関連変更(必要に応じて)
  • インデックス登録開始(Wordpress設定画面から)
  • Search Console設定
  • Googleアナリティクス設定
  • Googleアドセンス設定

「スクレイピングで既存の記事を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では、どんなサイトでもテーマを使っています。

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

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

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

メモ

オリジナルテーマにしたい場合は、トップページ、一覧ページ、記事ページ、404ページ、検索ページなどのテンプレートがあるのでその修正などが必要になります。

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

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

無料Wordpressテーマ
「BlogPress」(無料)
「Cocoon」(無料)

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

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

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

プラグインの選択

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

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

  • Smush:画像最適化・Lazyload処理
  • Table of Contents Plus:目次プラグイン
  • WP Revisions Control:リビジョンを制限できる
  • WordPress Popular Posts:人気記事一覧
  • WPForms Lite(または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(外部リンク)
※遷移先で「phpQuery-0.9.5.386-onefile.zip」をダウンロードします。

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

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

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

こちらもCHECK
【PHPでスクレイピングする方法】phpQueryの設定方法から使い方

疑問 PHPで簡単にスクレイピングする方法はある? Googleが提供しているphpQueryを使うと、idやclassを指定してスクレイピング(中身を抽出)することができます。 利用するのは、下記の ...

続きを見る

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

  • wp_insert_post()
  • update_post_meta()

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

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

フィールド名 保存データ
post_content 本文
post_name 投稿スラッグ
post_title タイトル
post_type 投稿種別:post(投稿)、page(固定ページ)など
post_status ステータス:publish(公開済み)、draft(下書き)など
post_date 投稿日時
tags_input タグ

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

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

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

フィールド名 保存データ
post_id 投稿ID
meta_key _thumbnail_id(アイキャッチ画像を示すキー)
meta_value 画像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
post_name 投稿スラッグ(拡張子なしのファイル名)
post_parent 投稿ID
guid 画像のフルパス
post_status inherit
post_date 投稿日時
post_type attachment
post_mime_type image/jpeg(pngならimage/png)

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つの方法があります。

  • 事前にアイキャッチ画像をアップして投稿に紐づける方法
  • 投稿と同時にアイキャッチ画像も登録する方法

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

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

  • ※アイキャッチ画像をメディアからアップロードしておく
  • 記事を登録する(wp_insert_post)
  • 画像URLから画像IDを取得する(get_attachment_id_from_url)
  • 投稿IDと画像IDを使ってアイキャッチ画像を登録する(update_post_meta)

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

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

  • 記事を登録する(wp_insert_post)
  • 画像を登録する(wp_insert_post)
  • 投稿IDと画像IDを使ってアイキャッチ画像を登録する(update_post_meta)

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

【補足】ページ内で利用している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

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

wp_postsテーブル

  • post_name:ranktracker

wp_term_relationshipsテーブル

  • object_id:投稿ID
  • term_taxonomy_id:カテゴリーID

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

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

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

こちらもCHECK
WordPressでURLからcategoryを消す方法と注意すること

WordPressを自分で修正する人向けの内容です。 WordPressでカテゴリーを表示すると、URLに「category」という文字が表示されてしまいます。 https://wporz.com/c ...

続きを見る

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

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

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

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

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

【補足】ドメイン関連

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

メモ

もし、別で作っておいて、メンテンナンスにして丸ごと入れ替える場合はこの部分はスキップしてOKです。

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

ドメインを変更する時に気を付けるのが下記の2点です。

  • 画像URLや内部・外部リンクURL
  • パーマリンクの設定

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

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

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

こちらもCHECK
別サーバーで運用中のWordPressサイトをコアサーバーへ移行する方法|ドメインを変えずに移行するには?

・別サーバーで運用中のWordpressサイトをコアサーバーへ移行する方法は? ・ドメインを変えずに、そのまま移行するにはどうすればいい? 「現在、利用しているサーバーの費用が高いので、低価格のコアサ ...

続きを見る

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

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

  • ドメイン変更前にWordPress アドレス(URL)を変更してしまうと、ドメイン変更完了まで管理画面にアクセスできなくなります(ドメイン変更すればなおる)。
  • ドメイン変更後でWordPress アドレス(URL)を変更すると、変更完了までWordPressで作ったサイトが正常に表示されない可能性があります(一時的)。

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

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

  • WordPressの「設定」>「一般」>「WordPress アドレス(URL)」
  • WordPressの「設定」>「一般」>「サイトアドレス(URL)」

先に、上記の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に移行するための手順

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

移行作業手順

  • 既存のイメージ画像をWP側にアップロード
  • WordPressテーマの選択
  • プラグインの選択
  • HTMLサイトの内容をスクレイピングして保存する
  • ツールでドメイン一括置換(※1)
  • ドメイン設定変更(Wordpress設定画面から)
  • ドメイン更新(必要に応じて)
  • htaccessのドメイン関連変更(必要に応じて)
  • インデックス登録開始(Wordpress設定画面から)
  • Search Console設定
  • Googleアナリティクス設定
  • Googleアドセンス設定

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

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

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

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

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

「現在、利用しているサーバーからコアサーバーに移行したい」場合で、運用中のWordpressサイトをドメインを変えずに、サーバー移行したい場合はこちら。
別サーバーで運用中のWordPressサイトをコアサーバーへ移行する方法|ドメインを変えずに移行するには?

-ワードプレス
-, , ,