読者です 読者をやめる 読者になる 読者になる

ゲインオーバー

MUGA, I am. 映画のことや英国のこと、加えてゲームやテクノロジーも。気になることを気侭に記していくブログです。

Wordpressからはてなブログへ移行した際の手順記録



Wordpressからはてなブログに移行した際の手順を記録として。ある程度時間はかかりましたが、想定していたよりも作業量は少なくて簡単でした。ちなみに移行時点での記事数は678。

他のサービスからブログを移転する(ブログデータのインポート) - はてなブログ ヘルプ

手順

  1. Wordpressのデータエクスポート

  2. とりあえずインポートしてみてチェック

  3. エクスポートしたデータを整える

  4. はてなブログへのインポート

  5. Wordpressからの301リダイレクト設定

  6. はてなブログのデザイン設定

Wordpressのデータエクスポート

管理画面にログイン→ダッシュボード→ツール→エクスポート。エクスポートする内容は投稿を選択、データが重いとエラーになると他ブロ グで読んだため、年度に分けてダウンロード。

作業完了後、Wordpress全体のバックアップを取るためさくらのコントロールパネルにログインしてファイルマネージャからサイトデータをダウンロード。リモートで圧縮してtar.gzで落とすと楽でした。データベースもエクスポート。

とりあえずインポートしてみてチェック

一旦はてなブログを自分だけに公開に設定変更して、初年度のデータをインポートしてどうなるかチェックしました。そうしたら出てきたのが以下の点。

*画像のズレ→改行を加える対応

*画像の表示サイズ→一部の画像が無理に引き伸ばされているものの一律に乱れているわけではないので気が向いた時に手修正

*スニペットがおかしい→幸い使っているのがコード表示のタグだけだったのでMarkdown形式の「```」に変更

*HTML特殊文字が乱れている→おそらくクォーテーションや小なり大なり等限られた文字だけだと思うのですが直すのが面倒なのでスルー

エクスポートしたデータを整える

Wordpressからエクスポートしたデータの中で変更しないと見栄えが悪かったり、あるいは動かなくなる可能性があるものを修正しました。使ったのはCotEditor。WordpressのプラグインであるSearch Regexで行う方法もありますが、Wordpressのデータ自体はそのまま残して置きたかったのでエクスポートしたデータをCotEditorで開いて置換する方法を採りました。Windowsの場合でも正規表現に対応しているテキストエディタがあれば同様にできると思います。

画像の前後に改行挿入

Wordpressでは1行の改行を挟まずにimgタグを入れても改行されて表示されていたものの、はてなブログでは1行の改行でimgタグを挟まないと同じ行に表示されるためimgタグの前後に強制的に改行が入れるようにbrタグを追加する形で全て置換。

自分のサーバーに上げていた画像に対しては以下のとおり。

検索文字列 <a href="http://muga.me/blog/wp-content/uploads/(.*)</a>

置換文字列 <br /><a href="http://muga.me/blog/wp-content/uploads/\1</a><br />

Flickrの画像も一部使っていたので同様に対応。iframeで埋め込んでいるものは対応不要でしたが、昔の投稿に何故かaタグで挿入しているものがあったため。

検索文字列 <a href=“http://www.flickr.com/photos/(.*)</a>

置換文字列 <br /><a href=“http://www.flickr.com/photos/\1</a><br />

自サイト内でのリンクの変更

自分のサイト内でのリンクの変更は面倒だろうなと思ったのですが、正規表現で検索置換したらあっという間でした。検索で探しているのは「http://muga.me/〜」へのリンクが貼ってあるaタグの内「http://muga.me/blog/wp-content〜」と続くものを除外したものです。「http://muga.me/blog/wp-content〜」は前述の画像に該当するaタグなのですが、これはインポート後にはてなブログ上で自動的に修正できるので一括での置換は行いません。というよりも置換してしまうとおそらく自動修正がうまく動かなくなるものと思われます。

検索文字列 <a href="http://muga.me/(?!blog/wp-content)(.*)</a>

置換文字列 <a href="http://muga.hatenablog.com/entry/\1</a>

スニペットの整理

数が少なかったので手作業で[css]や[php]を検索して「```」に変換。

はてなブログへのインポート

ダッシュボード→インポート→2ステップでかんたんインポートへ進み、Wordpress形式を選択して各年度のxmlファイルを順番にアップロード。文字コードは次の画面で実際に見ながら選択できました。初めからutf-8が選ばれていたので確認程度でしたが。

インポートが完了したら続いて画像データの移行。自サーバーに上げていた画像だけ移行。画像枚数が多いと移行までに時間が掛かるものの何もやることはないので待つだけでした。

画像はhttp://f.hatena.ne.jp/muga_gain/Hatena%20Blog%20Import/に保存されていました。

全てのインポートが終わった時点でアクセス数の多い記事だけ実際に目で見て確認。そううしたら一部記事で画像のインポートに失敗していました。imgタグはフォトライフに移行できているのに、aタグのリンクがWordpressのブログのままというのが数十件出ました。同じ記事の中でも直っているものと直っていないものが混在していて原因はよく分かりません。

それから自サイト内でのリンクについてブログカード以前の、サムネ+ページタイトルで書いていたものが修正できていなかったので修正。

Wordpressからの301リダイレクト設定

古いサーバーからはてなブログへリダイレクトの設定。検索エンジンからの流入の問題もあるので設定しないわけにはいかないだろうと思います。そう言えば、今までその前提で書いてきましたがはてなブログでは独自ドメインを使いません。

旧URLは http://muga.me/[category]/[id]/

新URLが http://muga.hatenablog.com/entry/[category]/[id]/

.htaccessの文頭に以下を追記。

RedirectMatch 301 /(iphone|london|mac|web|wordpress|appdev|game|neta|essay|travel|diary|cinema|life|bike|book)(.*) http://muga.hatenablog.com/entry/$1$2

アクセスしてきちんと転送されることを確認してから、ようやくはてなブログを公開。ああ、ちゃんと見られる。よかったよかった。既存のURLを残す、独自ドメインを用いる場合は他にもやることがあると思いますが、はてなブログのサブドメインで運用する場合は一旦これで作業完了のようです。あとは記事を見て個別に修正するべき箇所があれば直していくという具合かな。

はてなブログのデザイン設定

構想はあるのですがまだ手を付けられていないので完了したら追記します。。。