FC2ブログからWordPressへの引っ越しについて

公開日： 2014/07/21 : 最終更新日：2014/08/14 WordPress, サイト制作

今までFC2ブログでメモを残していましたが、WordPressに移行することにしました。理由としてはSEO的に有利ということでWordPressを使ってみたかったというのもありますが、1か月以上放置すると広告が出るのがいやだったということや、サイトのデザインが汚かったので一新したいということ、自分のドメインをとってみたかったということなどを考え、FC2で有料プランに移行するよりWordPressを使ってみることにしました。

とりあえずこの記事ではFC2からWordPressへ引っ越ししたことについて書いていきます。

1 FC2からエクスポート
- 1.1 記事のエクスポート
- 1.2 画像のエクスポート
2 WordPressの設定
3 WordPressへインポート
- 3.1 記事のインポート
- 3.2 FC2ブログのリダイレクト設定
  - 3.2.1 FC2ブログとWordPressの記事URL対応
4 その他
5 最後に

FC2からエクスポート

まずはFC2ブログのデータをエクスポートします。エクスポートするものは記事データとアップロードした画像データです。

記事のエクスポート

FC2ブログから過去に書いた記事をエクスポートします。

管理ページの左下にある「ツール」→「データバックアップ」をクリック

すると「バックアップ」という記事をエクスポートできるページに飛ぶので必要な記事だけダウンロードしてください。保存方法は全記事や年度別、月別、カテゴリ別などがあります。特に支障がなければ全ての記事をエクスポートします。

ダウンロードしたデータはテキストファイル一つですが、その中に選んだ全ての記事の情報が載っています。

画像のエクスポート

記事のエクスポートで開いたページの下の方に「ファイルバックアップ」という項目があり、100件ずつではありますが、そこから全ての画像およびファイル一覧を見ることができます

ここから1枚1枚保存してサーバーにアップロードしてもいいと思いますが、割と手間がかかるので私は一括で保存を行いました。その方法としては取得した全記事ファイルテキスト文字列から全ての画像URLを抽出し、それをPHPで指定ディレクトリに保存するというものです。以下で説明します。

画像URLリストを取得する

全ての画像リンクを正規表現を用いて取得します。これについては自前で作成して公開しているので良ければ使ってください。(「【javascript】正規表現文字抽出簡易ツール」←このツールをベースに話を進めていきます。)

まず、画像URLを抽出する正規表現ですが、あらかじめ「入力補助」の部分に用意してあるのでドロップボックスから選択してください。そして、ダウンロードしてきたエクスポートテキストファイルをメモ帳か何かで開いて文字を全てコピペして、入力部分に貼りつけ、配列状っぽくなるようにチェックボックスに全てチェックを入れて「抽出」ボタンを押します。(下画像参照)

すると「出力」欄に画像URLが配列のようになって出てきます。とりあえずこれで画像タグの抽出は完了しました。後はこのデータを利用してサーバーにアップロードするだけです。

ただし、これだとFC2にアップロードした以外の画像まで抽出されてしまうのでアップしたもののみ抽出したい場合には工夫が必要です。例えば私のアカウントの場合ですとファイルの名前はだいたい次のようになっています。

http://blog-imgs-65.fc2.com/s/h/o/shouginekochann/○○○.jpg

ここの「65」の数字の部分だけ別の数字になっている場合があるのでこれをカバーできる正規表現を使用しますと次のようになります。何桁かわかりませんが1～3桁までカバーできるようにしています。各自使用される際はIDなどの部分は自分のに変更してください。

正規表現

http:\/\/blog-imgs-[0-9]{1,3}\.fc2\.com\/s\/h\/o\/shouginekochann\/([^/]+)\.(jpg|jpeg|gif|png|bmp)

サーバーへ画像を保存する

一般的なサーバーであればPHPくらい動くと思うので、PHPを使って先ほど取得した画像URLの配列から画像を指定のディレクトリに保存していきます。まずは画像データを取得して保存するというPHPスクリプトを書きます。

imagedl.php

<?php
//一応設定
set_time_limit(2000);

//取得した画像URLを貼りつける
$imglist = array(
"http://blog-imgs-42.fc2.com/s/h/o/shouginekochann/nihonyuuseihanko.jpg",
"http://blog-imgs-42.fc2.com/s/h/o/shouginekochann/hankodata.jpg",
/*******略*******/
"http://blog-imgs-65.fc2.com/s/h/o/shouginekochann/caa0.gif",
"http://blog-imgs-65.fc2.com/s/h/o/shouginekochann/caaimg1.jpg",
);

foreach($imglist as $url){
    $data = file_get_contents($url);
    $filename = basename($url);
    echo $url."<br>";
    file_put_contents($filename,$data);
}
?>

上の$imglist配列の中(array(～);のところ)に先ほど正規表現で抽出した結果を貼りつけたら、このスクリプトを画像を保存したいフォルダに保存します。自分の場合は例えば「http://mementoo.info/fc2/image」に保存するとすると、「http://mementoo.info/fc2/image/imagedl.php」となります。

ソースについて一応説明すると、ただ単に配列の画像URL一つ一つをfile_get_contentsで取得して同名のファイルとしてこのPHPファイルを設置したディレクトリにfile_put_contentsで保存しているだけです。

このPHPファイルの保存が終わったらこれをWebページで開いて実行します。うまくいくと同層に画像が次々保存されていくと思います。全て保存が終了したらこのPHPファイルは消しておきます。

記事の画像URLを置換する

画像の保存も終わったらダウンロードした記事のデータの画像URLをサーバーに保存した画像の方のURLに置換する必要があります。(「【javascript】正規表現文字置換簡易ツール」で話を進めます)

今回の例ですと正規表現は次のようになります

正規表現

http:\/\/blog-imgs-[0-9]{1,3}\.fc2\.com\/s\/h\/o\/shouginekochann\/([^/]+)\.(jpg|jpeg|gif|png|bmp)

置換

http://mementoo.info/fc2/image/$1.$2

「http://mementoo.info/fc2/image/」は各自画像を保存したディレクトリにしてください。

「入力」部分にエクスポートした記事の文字列をコピペして、「置換」ボタンをおしたら「出力」部分に結果が吐き出されるのでそれをエクスポートテキストデータにコピペで上書きしてください。

WordPressの設定

まずWordPressをサーバーにインストールしたら諸設定の後にテンプレートを決めます。私はシンプルで使いやすそうなStinger3を使用させていただいております。

また、各プラグインの導入も行いました。

「Contact Form 7」：メールフォーム用
「Table of Contents Plus」：自動目次設定
「CSS & JavaScript Toolbox」：CSSとJavascript追加設定
「Wordpress Popular Posts」：人気記事表示
「WP to Twitter」：Twitter連動設定
「Google XML Sitemaps」：サイトマップ設定

WordPressへインポート

記事のインポート

「ツール」→「インポート」の「Movable Type and TypePad」を選択して先ほどFC2からダウンロードしたファイルを読み込ませます。これにより記事のインポートが完了します。

…が、これをやる前に確認しておきたいのがパーマリンク設定です。これは各記事のURLをどう設定するかというもので、FC2ブログであればこれは勝手に決まっていて、「http://(自分のブログIDなど)/blog-entry-(番号).html」の「blog-entry-(番号).html」の部分の事です。

WordPressではこの設定を記事番号や日付、タイトルなどでできますが、記事番号は連番になるとは限らず、画像データなどにも番号に含まれるようなので気を付ける必要があります。また、設定が悪かったのかわかりませんが、記事タイトルでインポートするとうまくいかず全て同じリンクになってしまったので注意してください。(この場合どの記事でも全ての記事がいっぺんに表示されてしまう)

これが完了したら、不要な記事など確認しつつちゃんと表示できてるか確認します。自分の場合は改行関係がおかしくなっていたので一応全ての記事について公開するか否かも含めて一通りチェックしました。

FC2ブログのリダイレクト設定

もしFC2ブログで独自ドメインを使っていてウェブマスターツールの登録をしていたならば、検索のインデックスをそのまま引っ越せるようなので元のブログを完全に消してしまう場合などはここの内容は飛ばしてしまって構いません。もしその場合は検索で調べてみてください。

FC2の旧ブログにはできればブログを移転した主旨のメッセージとその記事のリンク先、およびリダイレクト設定(FC2ブログなのでJavaScriptで行う)を書きたいものですが、それをするにはFC2ブログ記事のURLとWordPress記事のURLの対応を知る必要があります。一応旧ブログを丸ごと削除するという方向性もあり、検索インデックスのペナルティを受けない(コピーサイトという判定によるもの)というメリットがあります。

方針としては旧ブログの記事一つ一つを書き換える、もしくは、なんとか一括で書き換えることだと思います。

記事数が多い場合さすがに記事一つ一つを書き換えるのは骨が折れるのでできればJavaScriptを用いて旧ブログの記事を書き換えられないかを考えました。

ただし、FC2記事の番号と対応させようとしても、FC2側で削除した記事があったり、WordPress側でも記事番号を連番にするのが難しくうまくいかないと思うので、こちらの作戦としてはJavaScriptで旧ブログ記事URLをキーとした新ブログ記事URLの配列を作成して、開いた記事のURLから新ブログのリンク先を判定して、リンク先やリダイレクト処理をするという方針をとりました。

こんな感じ↓

var fc2towp = {
"http://shouginekochann.blog9.fc2.com/blog-entry-234.html":"https://mementoo.info/archives/1427",
"http://shouginekochann.blog9.fc2.com/blog-entry-233.html":"https://mementoo.info/archives/1436",

/*****省略*****/

"http://shouginekochann.blog9.fc2.com/blog-entry-232.html":"https://mementoo.info/archives/794",
"http://shouginekochann.blog9.fc2.com/blog-entry-231.html":"https://mementoo.info/archives/793",
"http://shouginekochann.blog9.fc2.com/blog-entry-230.html":"https://mementoo.info/archives/792",
}

var target = '';
var nowlink = location.href;    //FC2ブログで表示したときのURL

//現在のURLを含むURLが配列内のキーにあるか調べる
for (var key in fc2towp) {
    if (key.indexOf(nowlink) != -1) {
        target = fc2towp[key];
        break;
    }
}
var output = 'このブログは<a href="http://mementoo.info/">移転</a>しました。';

//対応先の新ブログのリンクがある場合
if (target) {
    output = output + '<br>この記事につきましては<a href="' + target + '">こちら</a>の記事を参考にしてください。<br>3秒後にリンク先へ飛びます。';
    function redirect()
    {
        location.href = target;
    }
    //3秒後に移転用にする
    setTimeout("redirect()", 3000);
}
//移転する旨のメッセージを出力
document.write(output);

連想配列は

“(旧ブログ記事URL)” : “(新ブログ記事URL)”

の形となっています。

また、リダイレクトを行うスクリプトについては次のように書くだけですが、これを3秒後に動くようにsetTimeout関数を使用します。

location.href = "(移転先URL)";

後は記事の対応付けの付いた連想配列を作るだけです。これも極力手間のかからないようにします。

移転先へ自動移動(転送/リダイレクト)させる方法

FC2ブログとWordPressの記事URL対応

さすがに手作業ですると手間がかかるので、記事タイトルは一致しているというのを利用して連想配列を作る下準備をします。考えとしては新・旧ブログでそれぞれタイトルをキーとしてURLを代入した連想配列を作り、それをもとに先ほどの記事URLの連想配列を作ります。

そこで、その取得方法なのですが、各ブログ管理画面の記事一覧のページからjavascript(jquery)でDOM操作(jQueryオブジェクト)でそれを作成します。

FC2ブログの記事配列を作る

まずはFC2ブログの管理画面にログインして「ホーム」→「記事の管理」を開きます。そしたら、一番多い100件の記事を表示させます。

そしてブラウザによって少し異なりますが、Chromeを例にとると右クリックをして「要素を検証」でコンソールに以下のソースを打ち込んでエンターキーを押します。大体どのブラウザにもこういったスクリプトを実行する機能は備わっているのでGoogle検索などで調べてみてください。

↑コンソールにスクリプトをコピペしてエンターで実行

var dst = '';
$("#oldlog_list td .title a").each(function(){
    var title = $(this).attr("title");
    title = title.replace(/"/g,'\\"');
    var href = $(this).attr("href");
    var tdst = '"'+title+'":"'+href+'"'+",<br>\n";
    dst += tdst;
});
//末尾に結果を追加
$("body").append(dst);

うまくいくとページの末尾に表示されている各記事について「”記事タイトル”：”記事URL”」の一覧が出てくるのでそこの部分をコピーしてメモ帳か何かにペーストしておきます(後で使う)。この処理はjQueryで行っていますが、FC2ブログの管理ページにはjQueryがロードされているのでそのまま使えます。

↑こんな感じで表示される

全ての記事一覧ページについてこれをひたすら行って結果を一つにくっつけます。残念ながら最大表示件数が100件までなので、例えばこの場合のように全体記事数が226件ですと3回に分けて行う必要があります。

WordPressの記事配列を作る

次にWordPressにインポートした記事について同じようにして記事とURLの配列を作ります。

「投稿一覧」のページを開いたら「すべて」もしくは「公開済み」を開きます。移転の際にいらないと思う記事はFC2側で記事のリンク先およびリダイレクトをさせたくないときは「公開済み」で大丈夫です。

記事の最大表示数は右上の「表示オプション」をクリックして変更することができます。

そして、先ほどと同じようにコンソールから以下のスクリプトをコピペして実行させます。

var dst = '';
jQuery("#the-list td.post-title").each(function(){
    var tt = jQuery(this).find(".post-state").text();
    if(tt=="下書き"){
        
    }else{    
        var tmp = jQuery(this).find('.view a');
        var title = tmp.attr("title");
        title = title.replace(/“(.+)” を表示/,"$1");
        title = title.replace(/"/g,'\\"');
        var href = tmp.attr("href");
        var tdst = '"'+title+'":"'+href+'"'+",<br>\n";
        dst += tdst;
    }
})
jQuery("body").append(dst);

すると次のように先ほどと同じような記事配列ができるのでこれもまたコピーして別のメモ帳ファイルか何かにペーストしておきます。

FC2とWordPressのURL対応配列を作る

これまでで取得したFC2とWordPressのそれぞれの記事タイトルをキーとした記事URLの連想配列を使用して以下のソースを作成します。

var fc2  ={
    /*****ここに先ほどのFC2ブログのデータをコピペする*****/
};
var wp = {
    /*****ここに先ほどのWordPressのデータをコピペする*****/
};

//jQueryのないページでは以下のソースを有効にする
/*
(function (callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "//code.jquery.com/jquery-2.0.0.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")(jQuery.noConflict(true));";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
})(function ($) {
  alert('jQuery is ' + typeof $);
});
$ = jQuery;
*/

$(function(){    
    var dst = '';   //記事URLの連想配列
    var fdst = '';  //該当しない記事を記録(一応)
    
    for (var fc2key in fc2) {
        var flag = false;
        if (fc2key in wp){
                //同じタイトルの記事があれば付け足しておく
               var tdst = '"'+fc2[fc2key]+'":"'+wp[fc2key]+'",<br>\n';
               dst += tdst;
               flag = true; 
        }
        if(!flag){
            fdst += '"'+fc2key+'"<br>\n';
        }
    }
    //適当にページの末尾に書き出しておく
    $("body").append(dst);
    $("body").append("<hr>");
    $("body").append(fdst);
});

「ここに先ほどのFC2ブログのデータをコピペする」、「ここに先ほどのWordPressののデータをコピペする」の部分に文字通り先ほどコピペで取っておいた配列のもととなるデータをそれぞれコピペします。後は全体をコピペして適当なページ(この場合ですとbodyタグの末尾に追記するので、少なくともbodyタグのある通常のページ)で実行するとページの末尾にFC2ブログの記事URLをキーとしてそれに対応するWordPressの記事URLの配列が生成されます。

そして、確認用としてそのあとにFC2ブログにはあるがWordPressでなくなっている記事タイトルを表示させています。もし、公開しない記事のほかにタイトルを変更していた記事があればそれもここに表示されるのでそういったのがれば別途手動で配列を追加します。

そんなこんなで完成した配列はちょっと前で紹介した簡単なスクリプトで使用しますので戻って確認してください。それで最後にFC2ブログ側できちんと表示させるためにテンプレートをいじります。

Chrome の userscript （とConsole）で jQuery を使う方法

FC2ブログのテンプレート設定

FC2のテンプレートの設定を開いてHTML編集のところを見ます。ブログの記事そのものの出力を行っているところを探しますと次のようなところが必ずあると思います。(前後のタグ構造やクラス名はテンプレートによって異なります)

私のブログのその該当部分を抜粋してみました。

		<div class="entry_body">
			<%topentry_body>
			<!--more_link-->
			<p class="entry_more"><a href="<%topentry_link>#more" title="<%topentry_title>">→<%template_extend></a></p>
			<!--/more_link-->
			<!--more--><div id="more"><%topentry_more>

</div><!--/more-->

FC2ブログでは記事本文は「<%topentry_body>」で、記事の追記は「<%topentry_more>」で表示されるようになっているのでこれを削除します。一応これらの変数は適切な変数タグ(コメントのところ)の間で表示可能となっているので余計なところは削除しない方がいいです。

そしたら、記事追記部分に移転のお知らせおよびリダイレクト設定を行うようにここの部分のテンプレートを変更します。

テンプレート用　変数一覧(FC2ヘルプ)

		<div class="entry_body">
			<!--more_link-->
			<p class="entry_more"><a href="<%topentry_link>#more" title="<%topentry_title>">→<%template_extend></a></p>
			<!--/more_link-->
			<!--more--><div id="more">

<div style="font-size:large;">
<script type="text/javascript">
<!--
var fc2towp = {
/*****(省略)*****/
};
var target = '';
var nowlink = location.href;
for (var key in fc2towp) {
 if(key.indexOf(nowlink)!=-1){
  target = fc2towp[key];
  break;
 }
}
var output = 'このブログは<a href="http://mementoo.info/">移転</a>しました。';
if(target){
 output = output + '<br>この記事につきましては<a href="'+target+'">こちら</a>の記事を参考にしてください。<br>3秒後にリンク先へ飛びます。';
 function redirect()
 {
  location.href=target0;
 }
 setTimeout("redirect()",3000);
}
document.write(output0);
-->
</script>
</div>
</div><!--/more-->

元々ある余計なコメントを消すとブログ自体が表示されなくなってしまう場合もあるので、あらかじめ複製するなりしてバックアップをとっておいたから更新を行ってください。

途中からは先ほどの作業で作成した配列を用いたスクリプトを使ってdocument.writeで追記部分に表示させてます。これを追記部分でなく、本文に表示させてしまうと記事一覧ページでどのURLか判定ができないため適切な表示が望めなくなってしまうので注意してください。

そして、もうひとつ変更することがあるのですが、引っ越しをしましたということを検索クローラーに知らせるためのタグを設定します。

<link rel="canonical" href="新しいサイトのURL"/>
<meta name="robots" content="noindex,follow">

初めのlinkタグはhrefのサイトがコピーサイトであることをきちんと示すもので、次のmetaタグは検索インデックスのボットを停止させるもののようです。(canonicalのタグは移転先を明示する形にした場合必要なのか書かない方がいいのかちょっとわからなかったですがとりあえず書いておきました)

検索エンジンに向けたブログお引っ越し通知の方法

その他

Googleのウェブマスターツールに新しいブログを登録しておくとよいです。その際にはプラグインの「Google XML Sitemaps」が役に立ちます。

ウェブマスターツールにはサイトの引っ越し用に「アドレス変更」などという項目があるのですが、FC2ブログのようなサブドメインからの移動には対応していません。もし独自ドメインで運営していたならば元のブログは消してしまってもGoogleのインデックスをそのまま引き継げる形でそのまま簡単に移動できると思います。