FC2ブログをローカル環境(Local by Flywheel)のWordPressへ移行する方法

WordPress

数年前にFC2ブログで趣味のサイトを作ったのですが、季節限定の趣味のため、一年のうち一定期間は更新が滞ってしまいます。

ですがFC2ブログでは一定期間更新が無いとトップページに広告が出るようになってしまうので、いかにも放置されたサイトのように見えてしまうのが気になっていました。

そこで、さくらのレンタルサーバに移転しWordPressで運営する事にしました。

ここでは、いきなり本番環境へアップするのではなく、ローカル環境(Local by Flywheel)のWordPressへインポートしていきます。

全ての記事のURL形式をFC2ブログ時代に揃える修正がけっこう大変でしたが、また同じ作業がありそうなので備忘録として細かく記録していきます。

スポンサーリンク

FC2ブログをローカル環境(Local by Flywheel)のWordPressへ引っ越しする手順

移行する前のFC2ブログの状態と、移行後のローカル環境は以下になります。

移行前のFC2ブログの状態

プラン:無料
記事数: 380個

移行後のローカル環境

Local by Flywheel Version 2.2.4
windows10

今回もローカル環境はLocal by Flywheelを利用します。

WordPressローカル環境ツール「Local by Flywheel」のインストール方法と使い方
今までローカル環境はXAMPP、Instant WordPressを使っていました。 初心者にはXAMPPはとても難解で四苦八苦しましたが、Instant WordPress4.5はとても使いや...

一度、ライブドアブログをインポートし、本番環境へアップするという作業をしましたがとても使い勝手が良くて気に入っています。

livedoor blog~ライブドアブログからローカル環境(Local by Flywheel)のWordPressへ引っ越す方法
長年ライブドアで運営していたブログを、さくらのレンタルサーバーに移転しWordPressで運営する事にしました。 ですがいきなり本番環境へアップするのではなく、まずはローカル環境のLocal b...
WordPress ローカル環境(Local by Flywheel)からさくらのレンタルサーバへ移行する方法
ローカル環境のWordPress(Local by Flywheel)で作ったサイトを、本番環境のさくらのレンタルサーバーへ移行する方法と、手間取った事の自分覚書です。PHPもチンプンカンプンだし、ま...

ローカルのデータを本番移行後もドメイン名を変えて残しておき、本番環境で気軽にテスト出来ない事をローカルで試して確認してから、本番環境でも反映させたりと、最小限のリスクで出来るのでとても役に立っています。

ではまず、そのLocal by Flywheelで新しいサイトを作っていきます。

1.Local by Flywheelで新規サイトを作成

Local by Flywheelを起動し「Add Local Site」をクリック。

1.新しいサイトの名前を入力

半角英数字でサイト名を入力します。

この段階では、日本語のサイト名を入力することはできませんが、サイト名を日本語にしたい場合はWPのインストールが完了してから管理画面内で変更可能です。

「入力したサイト名.local」がローカル環境のドメインになります。また、ローカル環境のフォルダのパスも表示されます。初期設定ではCドライブのユーザーフォルダ以下に作られます。

「CONTINUE」をクリックし次に進みます。

2.ローカル環境の構成を設定

次はPHPのバージョンやWEBサーバー、データベースの設定を行ないます。

「Preferred」と「Custom」がありますが、よく分からない場合「Preferred」を選んでおけば問題ないです。

「Custom」だとPHPのバージョンやWEBサーバーの種類を本番環境と合わせておけるのでそのように設定してみましたが、これらローカル環境の「PHPのバージョン」と「サーバー」は、後からでも設定変更可能です。

「CONTINUE」をクリックします。

3.WordPressのセットアップ

次に、Wordpressのセットアップ画面になりますが、すでにLocal by Flywheelで一度でもサイトを作成している場合は以前の設定した内容がフォルト値として設定されます。

テスト環境なのでこのままで「ADD SITE」ボタンをクリックします。

すると、ローカルサイトの構築が始まります。少し時間が掛かる事もありますが1分弱で構築が完了しました。

右上の「VIEW SITE」をクリックするとサイトの表示を確認できます。

サイトがアクティブになっているのを確認し(サイト名の横のが緑色でアクティブ)右上の「VIEW SITE」をクリックすると、サイトの表示を確認できます。

4.Local by FlywheelのAdminerでテーブル接頭辞を変更しておく。

Local by FlywheelのAdminerでテーブル接頭辞を変更する方法
さくらのレンタルサーバの「スタンダード」プランを利用しているのですが、スタンダードプランではデータベースが20個作れるので、単純計算すると20個のWordPressサイトが作れます。 原則として...

2.ローカル環境のWordPressを準備

次に、Local by FlywheelからWordPressの管理画面へ入り、最低限の初期設定を済ませます。

1.Wordpressを日本語環境にする。

Local by Flywheelはデフォルトで英語環境のWordpressがインストールされるので、日本語環境にしていきます。

ダッシュボードの「Settings」>「General」を選択。

「Site Language」で日本語を選択後、設定を保存すればOKです。

2.WordPressを真っさらな状態にしておく。

・ワードプレスを最新版にアップしておく。
・デフォルトで入っている記事、固定ページ、コメント、タグ、カテゴリーを全て削除する。

3.最低限のプラグインを入れておく

ローカル環境でワードプレスを構築できるLocal by FlywheelでインストールされるWordPressは、デフォルトでプラグインが何も入っていないので、とりあえず最低限必要なプラグインを入れて設定します。

Akismet

コメントスパムを防ぐプラグイン。必須。

Akismetの設定方法と、複数サイトでAkismetを使う方法
WordPressに標準搭載されているプラグイン「Akismet」。 自動的にコメントスパムをふせいでくれる非常に便利なプラグインなので必ず有効化しておきたいところです。 ですが、ただ有効化し...
WP Multibyte Patch

日本語の不具合解消に、必須。

4.パーマリンク設定を変更

WordPressのパーマリンクを、FC2ブログのパーマリンクと同じ形式にしておきます。
そうする事で、個別記事単位でのリダイレクトした時に新ドメインでも同記事を表示させる事が出来ます。

WordPress管理画面 >設定 >パーマリンク設定 をクリック

FC2ブログ側は以下のような形式なので

http://任意名.blog.fc2.com/blog-entry-389.html

ローカル環境下のWordPressのパーマリンクを「カスタム構造」にして、以下の赤字の部分を入力します。

http://任意のサイト名.local/blog-entry-%postname%.html

「変更を保存」をクリック。

これで、FC2ブログのパーマリンクとWordPressのパーマリンクが、同じ形式になりました。

3.FC2ブログから記事を移行する

つづいて、FC2ブログから記事を移行していきます。

1.FC2ブログから記事をエクスポート

FC2ブログの管理画面に入り、左サイドバーの「ツール 」→「データバックアップ」をクリック。

バックアップの画面になるので、エクスポートから「全ての記事」をダウンロードします。

ダウンロードしたテキストはひとまず保存しておきます。

2.WordPressへ記事をインポート

FC2ブログから記事データを取得できたら、次はWordPressにインポートします。

ですが、何も手を加えずにダウンロードした記事をインポートすると、FC2ブログではちょうど良かった行間が、WordPressでは詰まった感じになってしまうのです。

そこで、インポートするプラグインで行間を引き継ぐカスタマイズをしていきます。

「Movable Type と TypePad」のインストールと編集

WordPress管理画面 >ツール > インポート からMovable Type と TypePadの「今すぐインストール」をクリックし有効化します。

最新のWordPress 4.9.4ではWordPressの管理画面からPHPを直接編集するとエラーが出るので、ローカルに置いてあるファイルを直接編集します。

ローカルのプラグインのある場所は以下です。

C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\plugins

その中の、「Movable Type and TypePad Importer」をクリック、中にある「movabletype-importer.php」をTeraPadなどテキストエディタで開きます。

万が一エラーになった場合は、プラグインの「Movable Type and TypePad」をいったん削除してから再びインストールする方法もありますが、編集前は必ずバックアップをとっておきましょう。

「movabletype-importer.php」をTeraPadなどテキストエディタで開き、以下のコードを検索します。TeraPadでは455行目あたりにありました。

if( !empty($line) )

この行頭に「//」を追加記述してコメントアウトします。
黄色い部分が変更箇所です。

//if( !empty($line) )

出来たら、保存します。

phpを保存する時のコードは「UTF-8N」(ボム無し)、改行コードは「LF」にします。

WordPressへ記事をインポート
記事を全て「下書き状態」でインポートしたい場合
FC2ブログから記事を移行した後は、少なからず記事の修正をしなければなりませんが、
すぐにでも移行後のWordPressで記事を書いて運営をスタートさせたい場合などは、修正前の記事を下書き状態にしておくのも手です。
インポートする記事はステイタスが「公開」になっているので、全ての記事を「下書き」状態でアップしたい場合、テキストエディタ(TeraPadなど)で以下のように一括変換してからアップします。
変換前(記事は公開状態)
STATUS:Publish
変換後(記事は下書き状態)
STATUS:Draft

ここまで準備できたら、FC2ブログからエクスポートした記事をインポートしていきます。

記事が多いと、万が一改行設定などを失敗した時など、また記事を全部削除してやり直すのにも時間が掛かります。その対策として、まずは確認用にエクスポートしたtextをコピーして投稿を2~3個程度にしてインポートしてみて確認しすると楽です。それで問題なければ本格的にインポートします。

WordPress管理画面 > インポート > ツール をクリックします。

Movable Type とTypePadの「インポーターの実行」をクリック。

「参照」から、FC2ブログから取得した記事を選択し、「ファイルをアップロードしてインポート」をクリックします。

投稿者の割り当ての画面になりますが、あとで変更も出来るのでとりあえず「admin」にして「実行」をクリックすると、インポートが始まります。

しばらく画面はそのままですが、インポートが終わると更新内容が表示され、以下の表示が出るのでクリックすると、サイトが表示されます。

今回は380記事でしたが2分程度でインポートが完了しました。
次は、元記事のURLに合わせてWordPressの記事URLを修正していきます。

4.WordPressの記事URLを修正

この作業の目的は、FC2ブログのアクセスを引き継いで今まで得たSEO評価も引き継ぐための作業なので、必要のない方は飛ばしても大丈夫です。

ライブドアブログからWordPressへ移行した時は、パーマリンク設定だけでドメイン以下のURLがそのまま移行されましたが、FC2ブログからの移行の場合は修正が必要です。

すでにWordPress側のパーマリンク設定を以下のようにFC2ブログと揃えました。

http://任意のサイト名.local/blog-entry-%postname%.html

ですがFC2ブログのURLの%postname%の部分が以下のように123と数字なのに対し、

blog-entry-123.html

インポートした記事は以下のように、記事のタイトル名になってしまいます。

blog-entry-記事のタイトル.html

そこで、ここを元記事と同じ数字に一つずつ設定し直さなければなりません。

FC2の元記事についている数字が、初投稿の1から順番についているのなら何か一気に変換できる方法があるかもと思ったのですが、FC2の元記事を確認すると、最初の記事は2で、次の記事は4など、削除した記事もカウントされるのか必ずしも連番では無かったのであきらめました。

記事URLの修正方法

まずはFC2ブログにログインして、元記事のURLを調べます。

FC2ブログの管理画面にログインし、左サイドバーの「記事の管理」をクリックします。

右に記事一覧が表示されるので、表の先頭の「#」をクリック。

すると記事別の数字が表示されるので、この数字をWordPressに移行した同記事に組み込んでいきます。

WordPress管理画面 > 投稿一覧 をクリックし該当記事の「クイック編集」をクリック。

スラッグに、タイトル名が表示されているので削除し、FC2の元記事についている数字を入力し、更新します。

これで1記事分のURLの修正が完了しました。380記事あるので1個ずつ頑張ります(涙)

5.WordPressのカテゴリーURLを修正

移行後は、カテゴリーのURLも修正が必要でした。

例えば「2008」というカテゴリーのURLの場合、FC2ブログでは以下のように記事同様にカテゴリNo(数字)で表示されます。

http://任意名.blog.fc2.com/blog-category-23.html

しかしローカルへインポート後のカテゴリー「2008」は以下のように表示されます。

http://任意名.local/blog-entry-category/2008

カテゴリーのURLの形式の変更はリダイレクトで行う事にして(この移行作業の一番最後で行います)、ここではインポート後のカテゴリ名をFc2ブログのカテゴリNo(数字に揃えておく事だけやっておきます。

そうすると移転前のカテゴリーURLにアクセスがあった場合、移転先の同じカテゴリーページに飛ばす事が可能になります。

テゴリー名を移行前の数字に変更

FC2ブログの管理画面にログインし左サイドバーの「カテゴリの編集」をクリック。

右にカテゴリ一覧が表示されるので、表の先頭の「#」をクリックすると、カテゴリに割り当てられた数字が表示されます。

この数字をWordPressに移行したカテゴリーのスラッグに組み込んでいきます。

WordPress管理画面 > 投稿 >カテゴリー をクリックし該当記事の「クイック編集」をクリック。

「スラッグ」に、先ほど確認したFC2ブログのカテゴリNoを打ち込みます。

「カテゴリーを更新」をクリックして保存します。

カテゴリーが複数ある場合、同じように作業を繰り返して完了です。

しかし1個だけ、Fc2ブログの最初のカテゴリ名に付くと思われる数字の「0」 を持つカテゴリだけスラッグ名を変更できませんでした。スラッグに「0」 を入力できないのかな?「1」以降は問題なく変更できました。。

6.画像を移行する

移行前の段階でもサイトを見ると画像は表示されていますが、これらは全てFC2ブログに置いてある画像を読みに行っているだけなので、画像を取得して完全に移行していきます。

FC2ブログから画像をエクスポート

FC2ブログの管理画面に入り、左サイドバーの「ツール 」→「データバックアップ」をクリック。

中盤より下の方に「ファイルバックアップ」があるので「リストを開く」をクリックします。

100枚分の画像ファイルが一覧で表示されるので、画像の欄外で「右クリック」>「名前を付けてページを保存」をクリック。

すると保存形式の画面が表示されるので「ウェブページ、完全」になっているのを確認し、任意の場所に保存します。

すると、FC2 ID名のついたhtmlファイルと、画像データの入ったフォルダがダウンロードされます。

画像ファイルのフォルダの中に、「sh_help_icon」というデータも入っていますが不要なので削除しておきます。

FC2ブログでは画像を100個毎にしかダウンロードできないので、以上の作業を全て取得するまで繰り返します。

7.画像データをアップロードする。

ダウンロードした画像をローカル上のWordPressにアップします。

WordPress管理画面 >メディア >新規追加をクリック。

先ほどダウンロードした画像ファイルをアップロードしたら完了です。

8.記事内リンクを修正

次は記事内の内部リンクと画像リンクを修正していきます。
入れ替えには「Search Regex」というプラグインを使うので、インストールします。

「Search Regex」をインストール&有効化

WordPress管理画面 > プラグイン > 新規追加 をクリックし、キーワードに「Search Regex」と入力して検索します。

「今すぐインストール」をクリックして有効化します。

内部リンクを検索&置き換え

まずはFC2ブログ時代のドメインがついた内部リンクを、ローカルサイトのドメインへ置き換えます。

WordPress管理画面 > ツール> Search Regexをクリックします。

「Search pattern」には変更前のFC2ブログのURLを、「Replace pattern」に変更後(ここではローカルサイト)のURLを入力します。

「Replace & Save」をクリック。

これで内部リンクの置き換えは完了です。

画像リンクを検索&置き換え

次に画像のリンクを修正していきます。

FC2ブログの画像リンクはドメイン部分の数字パターンが複数あるので、全てのパターンを修正していく必要があります。

変更前:
http://blog-imgs-〇〇.fc2.com/▲/▲/▲/FC2ユーザID/ファイル名.jpg
変更後:
http://ローカルサイトURL/wp-content/uploads/ファイル名.jpg

FC2ブログの画像リンクの○○の部分は数字が変わりますが、▲部分は固定になっているので「/▲/▲/▲/FC2ユーザID/」で全ての画像のURLを検索します。

まずは一つの記事を「テキストモード」で開き、画像リンクを確認し以下の赤字の部分をコピーします。

http://blog-imgs-〇〇.fc2.com/▲/▲/▲/FC2ユーザID/ファイル名.jpg

またSearch Regexに戻り、「Search pattern」に/▲/▲/▲/FC2ユーザID/を入力し、「Search」をクリックします。

すると、画像の検索結果が以下のようにずらりと表示されます。

上記のように、fc2.comの前の数字が110だったり、21だったりと画像により何パターンかに変わるので、そのパターンごとに「Search pattern」で置き換えていきます。

まず、今回一つ目に出てきた画像のURLの「・・・・110.fc2.com」を置き換えます。

変更前:
http://blog-imgs-110.fc2.com/▲/▲/▲/FC2ユーザID/
変更後:
http://ローカルサイトURL/wp-content/uploads/

「Search pattern」には変更前のFC2ブログのURLを、「Replace pattern」に変更後(ここではローカルサイト)のURLを入力します。

「Replace & Save」をクリック。

これで「・・・・110.fc2.com」の画像リンクの置き換えは完了です。

これを繰り返して、全ての画像データを置き換えたら完了です。

今回画像は約2,000枚ほどありましたが、数字のパターンは22個ありました。

また、このままではアイキャッチ画像が表示されないのでプラグイン「Auto Post Thumbnail」で設定します。

ライブドアブログからワードプレスへ引っ越し後に「Auto Post Thumbnail」でアイキャッチ画像を設定する方法
ライブドアブログ(livedoor blog)では、サムネイル画像を指定しない限り、記事の一番最初にある画像が自動でサムネイル画像として表示されていました。 ですが、ライブドアブログからワードプ...

これで、ローカル環境へのデータ移行は完了です。

9.FC2ブログにリダイレクト設定

このあと、ブログのデザインなどをカスタマイズして確認、本格的にサーバに移行した後はFC2ブログにアクセスした時に新しいサイトへ自動的に飛ばすためのリダイレクト設定をします。

そうする事で、元のFC2ブログのアクセスを引き継ぐ事が出来ます。

ライブドアブログの場合は301リダイレクト設定ができるので簡単でしたが、FC2ブログはそれが出来ないので、JavaScriptによるリダイレクトを使用します。

※2018年4月19日の時点では有効でしたが、今後FC2ブログの仕様変更などでうまく動作しない場合もあるかもしれません。

 JavaScriptによるリダイレクト設定の手順

FC2ブログにログインし、左のメニューの設定 > テンプレートの設定をクリック。

すると、使用しているテンプレートのhtml編集画面になるので、上の方にある「head」を探します。

その下に、以下のコードを追加し保存します。

<!--リダイレクト用コード-->
<!--index_area-->
<link rel="canonical" href="移転先のURL">
<SCRIPT type="text/javascript">
setTimeout("link()", 0);
function link(){
location.href='移転先のURL';
}
</SCRIPT>
<!--/index_area-->
<!--permanent_area-->
<link rel="canonical" href="移転先のURL/blog-entry-<%pno>.html">
<SCRIPT type="text/javascript">
setTimeout("link()", 0);
function link(){
location.href='移転先のURL/blog-entry-<%pno>.html';
}
</SCRIPT>
<!--/permanent_area-->
<!--date_area-->
<link rel="canonical" href="移転先のURL">
<SCRIPT type="text/javascript">
setTimeout("link()", 0);
function link(){
location.href='移転先のURL';
}
</SCRIPT>
<!--/date_area-->
<!--category_area-->
<link rel="canonical" href="移転先のURL/blog-entry-category/<%cno>">
<SCRIPT type="text/javascript">
setTimeout("link()", 0);
function link(){
location.href='移転先のURL/blog-entry-category/<%cno>';
}
</SCRIPT>
<!--/category_area-->
<!--リダイレクトここまで-->

これで完全に引っ越し完了です。