はてなブログから記事をWordPressに引っ越した話。

今まで転々とブログサービスを使ってきたため、放置しているはてなブログがありました。

それなりに記事数があるからもったいないなぁと思って、はてなブログのレシピ記事をまるっと引っ越しすることにしました。

ただし、点々としてきたブログを全部引っ越すのはしんどいので、アクセスがたまーにあるレシピ記事を選んで作業することにしました。

手順
作業環境・使ったツール
1. 作業環境
2. プラグイン
参考サイト

手順

はてなブログの記事をエクスポート（A）

はてなブログの記事をエクスポートするには、下記の順序でエクスポートまでたどり着きます。

はてなブログの設定→詳細設定→記事のバックアップと製本サービス→エクスポート

「ダウンロードする」ボタンが現れるまで待って、現れたらデータをダウンロードしてください。

デスクトップに保存しておくと良いと思います。（以下、ダウンロードしてきたエクスポートデータは（A）とする）

はてなブログの記事に使っている画像をターミナルで取得

はてなブログで使っている画像は「はてなフォトライフ」に保存されているので、画像のリンク先がそのままでも使えなくはないです。

しかし、退会したりすると使えなくなるのでWordPressに保管しておきました。

Mac OSにアプリケーションとして入っている「ターミナル」を使って、一括ダウンロードを行いました。

やってみたログさんを参考しました

【Mac】はてなブログに投稿した画像を一括ダウンロードする方法

はてなブログに投稿した画像全てを、Macで一括ダウンロードする方法をご紹介します。はてなブログには、画像を一括でダウンロードする機能が無いため、この記事を書きました。この方法は、Macさえあれば余計なアプリは一切必要ありません。はてな...

（A）の見出し（H2、H3など）と画像のリンク先を置換

ダウンロードしてきたエクスポートデータファイル（Aとする）をテキストエディタで開きます。

はてなブログとWordPressは見出しレベルが違うため、下記の順番でテキストエディタを使って見出しタグのレベルを置換修正します。順番を間違うとあとで修正がめんどくさいので何も考えずに順番に置換です。

H3をH2に置換

H4をH3に置換

H5をH4に置換

念の為、H6を検索したけどなかった。あったらH5に置換。

私はSublimeTextですが、置換作業ができるならばなんでもOKです。

ちなみに、私の場合、H3を置換するときにIDか何かが検索に引っかかってしまったので、「H3>」とタグの閉じ記号を入れて検索かけてやりました。やり方は工夫は色々ありますね！

作業が終わったら保存します。

同じように、はてなブログで画像をアップロードしている記事の画像リンクははてなフォトライフを参照しているので、（A）のデータテキストで、下記を修正しました。

https://cdn-ak.f.st-hatena.com/images/fotolife/はてなID頭文字/ご自分のはてなID/([0-9]{4})([0-9]{2})([0-9]{2})

↑で検索をかけて、

↓に置換修正します。下記の末尾の年月（yyyy/mm)は画像アップロードタイミングよって変わります。

https://ご自分の新しいドメイン/wp-content/uploads/2023/03

画像アップロードした日付は、メディアからアップロードした画像の詳細を開くと、画像のURLが書いてあるので、そちらを参考にしてください。

作業が終わったら、適宜保存。

（A）の不要なリンクなどを手作業で消す

はてなブログは特定のキーワードがテキストリンクされるという仕様だそうで、エクスポートしてきたデータをそのまま使うとはてなキーワードへのリンクを残したままのWordPress運用になってしまいます。

気にしないよーって人は、この工程は飛ばしていいかと思います。

はてなキーワードは、下記で検索をかけると引っかけることができるので、検索してはタグを消して、検索をしてはタグを消して・・・を繰り返しました。

<a class=”keyword” href=”http://d.hatena.ne.jp/keyword/

あとは、前のはてなブログのURLだったり、「hatena」を検索して消したり、修正したりして保存します。

取得した画像をWordPressにアップロード

ダウンロードした画像たちは、WordPressのメディアに一括アップロードしておきます。

一括ダウンロードをしてきた場合は、デスクトップに「img」フォルダがあるので、フォルダごとアップするのではなく、フォルダを開いて、すべての画像を選択し、アップロードすればOK。

枚数が少ない場合は、手作業でフォルダにアップロードしたほうが早いと思います。

（A）データをインポート（一括ダウンロード）

今度はWordPress側で、

Movable Type and TypePad Importer

というプラグインを「新規プラグインのインストール」から探してインストールします。

すると、管理画面の左メニューのツールに「インポート」が現れるので、こちらをクリック。

「Movable typeとTypePad」の下にある、「インポーターの実行」をクリック。

（A）データのファイルを選択して一括インポートを開始します。

そして完了するまで待てば、はてなブログの記事がWordPressにアップロードされていると思います。

私の場合は、今回記事をインポートした後にカテゴリーの紐づけを行っています。そのため、インポートする際に執筆者を新規ユーザーを作っておきました。あとで一括でカテゴリーを紐づけることができたので、もしカテゴリーを変更する場合はおすすめです。

また、パーマリンクの設定が「ドメイン名/カテゴリ/記事スラッグ」という順番になっているので、次に行うのリダイレクト処理の際に少し工夫が必要になりました。

はてなブログに引っ越し用リダイレクト処理を追加

無料のはてなブログでも、下記のコードでリダイレクト処理（古いサイトから新しいサイトへ自動的に移動させることができる）をすることができます。

今回は下記のコードで3秒後くらいに新しいサイトに自動遷移させることができました。

コードを添付する場所は、管理画面の左メニューから、デザイン→カスタマイズ（スパナのマーク）→記事→記事上HTML（記事本文上）でたどり着けます。

私は特定のディレクトリ（/recipe/）配下に引っ越したため、ディレクトの指定を入れています。

<p><b>移転しました。</b></p>
<p><b>約3秒後に自動的にリダイレクトします。</b></p>
<script type=”text/javascript” language=”javascript”>
<!–
// 新URLを作成
　　var domain = “https://ご自分の新しいURL/新しいディレクトリ/”;　// 新ドメイン + ディレクトリに置換。末尾はスラッシュ。
　　var path = location.pathname.substr(6).replace(/\//g, “-“) ; // パス整形
　　var url = domain + path;

// htmlリンクの書き出し
　　document.write(“<a href=\”” + url + “\”>” + url + “</a></p>”);

a// リダイレクトまでの待ち時間
　　setTimeout(“redirect()”, 3600);　// 3 sec
　　function redirect(){
　　　location.href = url;
　　}
　
　// canonical の書き換え
　　var link = document.getElementsByTagName(“link”)[0];
　　link.href = url;
–>
</script>