既存のHTMLサイトをWordPressに移行する場合の大まかな手順

既存のHTMLサイトをWordPressに移行する場合の大まかな手順

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

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

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

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

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

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

サイト移行にあたって事前確認が必要な項目

HTMLサイトを移行するにあたって、事前にいくつか、確認しておくことがあります。

既存サイトのイメージ画像について

WordPressと既存のサイトでは、おそらくイメージ画像の保存場所が違います。

WordPressでは、何も設定していなければ、イメージ画像はuploadの下に日付毎にフォルダが作成されて保存されます。

一方、既存サイトのイメージ画像ディレクトリーは下記のように一つのディレクトリにまとめている場合が多いと思います。

https//:hoge.com/img/xxxxx

移行する時は、このイメージ画像のURLをWordpressのURLに「ドメインを含めて置換」する必要があるため、WordpressのイメージURLを確認しておく必要があります。

できるだけ変更を加えずに移行する方法として、移行する画像については、Wordpressでも一つのディレクトリにしてアップしてまとめてしまいます。

/wp-content/uploads/

そして、既存サイトのイメージ画像URLをWordpress側に合わせて置換します。
例えば、

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

というイメージタグを

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

に変換します。

既存のサイトのHTMLをスクレイピングする

数ページのサイトであれば、内容をコピペするだけで移行できます。しかし、数十ページ以上あるサイトになるとかなり大変です。

ファイル数が多い場合は、既存サイトのHTMLをスクレイピングして、Wordpressに保存する方法が便利です。

スクレイピングには、グーグルのライブラリを利用できます。ただし、抜き出す内容が「特定のidやclass」で指定できることが必要です。

<div id="main_body">・・・</div>
スクレイピングのライブラリのダウンロード
phpquery(外部リンク)
※遷移先で「phpQuery-0.9.5.386-onefile.zip」をダウンロードします。

ページ内でJavascriptを使っているものを確認

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

しかし、Javascriptを外部ファイルにして、読み込みませている場合は、Wordpressで外部ファイルを読み込ませる記述が必要です。

事前にどのページでJavascriptを使っているかを確認しておく必要があります。

既存サイトとWordpressのURLの違いに注意

HTMLサイトは、html拡張子で運用していることがあります。一方、Wordpressはディレクトリでの表示になります。

html拡張子を省いた状態をスラッグに保存することになります。

また、必要になるのがGoogle検索対策です。URLを変更する以上、アクセスが一時的に減少する可能性があります。

ただし、最低限の対応はできます。

既存の拡張子付きのURLはGoogle検索結果に残っているので、そのままアクセスしようとするとWordpressでは「404エラー」になってしまいます。
※ドメインもまるごとWordpressに移行した場合は、.htmlのURLをWordpressで処理できないため。

それを回避するために、リダイレクト対策を行います。

テーマの選択

「どのテーマを利用するか」「変更せずにデフォルトのテーマのまま使うか」「必要なものを開発するか」を決める必要があります。

無料テーマを、自分が想像しているようなサイトにするには、ほぼ開発が必要です。そして、テーマの開発は一番時間がかかります。

トップのイメージが良くても、各記事ページのテンプレートが良くないこともあります。

有料であれば、開発がなくてもいけるくらい完成しているものが多いです。

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

ドメインに関すること

ドメインは同じままで移行したい場合、新しいサイトは仮のURLで作業して、Wordpress側の設定が整ったら、ドメインを変更して運用を始めることになります。

ここで気を付ける必要があるのが下記の2点です。

  • 画像URLや内部リンク
  • パーマリンク

運用開始するまでは「仮のURL」でチェックする必要がありますが、移行後は既存ドメインで運用しなければいけません。

Search Replace DB(外部リンク)」を使って、画像URLや内部リンクを一括置換します。

使い方について詳しく解説しているサイト
https://junjun-web.net/tool/search-replace-db-master/

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

サーバー側でドメイン変更(ドメインとWordpressのあるフォルダをむずびつける設定、DNS設定など)を行っていないと、びっくりするような事態が発生するので注意が必要です。
・ドメイン変更前にWordPress アドレス (URL)を変更してしまうと、ドメイン変更完了まで管理画面にアクセスできなくなります。
・ドメイン変更後でWordPress アドレス (URL)を変更すると、変更までWordPress で作ったサイトが正常に表示されない可能性があります。

パーマリンクの変更はWordpressの設定でできます。2つを変更します。
・Wordpressの「設定」>「一般」>「WordPress アドレス (URL)」
・Wordpressの「設定」>「一般」>「サイトアドレス (URL)」

どのタイミングで更新するかは、状況に応じて検討が必要です。サイト表示を一瞬たりとも崩したくない場合は、ドメイン変更前にWordpressを変更すれば、停止状態にはほぼなりません(ただし、DNSの設定が完了するまで管理画面へアクセスできなくなります)。

htaccessの設定変更について

既存ドメインへ変更して運用開始となったらhtaccessの設定も変更が必要です。

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

https://仮URL.com/wp

https://既存サイト名.com/

にした場合、wpフォルダを指定しているので、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>

移行作業手順

実際に既存のHTMLサイトを移行する時の移行作業手順を紹介します。

WordPressテーマとスクレイピングのフォーマットが決まれば、それほど大変な作業はありません。

  • WordPressインストール&初期設定
  • プラグイン設定

※ドメイン変更はまだしない。

新規ドメインでない限り、前のHTMLサイトでドメインを利用しているので、DNS変更などはWordpressの新サイトが完成するまで行わずに、仮のURLのままで画像やリンクの確認をしてしまいます。リリース直前に本番用のURLに全置換します。

移行作業手順

  • 既存のイメージ画像をWP側にアップロード
  • テーマ設定
  • プラグイン設定
  • スクレイピングで既存の記事をWPに保存
  • ツールでドメイン一括置換
  • ドメイン変更(サーバー側)
  • ドメイン設定変更(Wordpress設定画面から)
  • htaccessのドメイン関連変更
  • インデックス登録開放(Wordpress設定画面から)
  • Search Console設定
  • Google Analytics設定
  • Google Adsense設定

以上で完了です。結構時間がかかります。

スポンサード

メニューを閉じる