ブログカスタマイズ

はてなブログからWordPressへ移行する際にやったこと・使ったものをまとめる

投稿日: 更新日: 2017年10月24日

この記事こそ移行直後っぽい記事なのにWordPress移行一発目の記事はなぜか家系ラーメンの食レポ記事を書いてしまったでででーさん(@d3_dayo) です!

 
またまたWordPressへ戻ってきました!私のプライベートなブログ歴は直近だとGoogleのBloggerで数年、その後はてなブログに行き、昨年WordPressで新規のブログを立ち上げたんですが、非常にドタバタしている時期だったこともあり、サーバーの更新を放置していて気づいたらサイトごとなくなっていたという…。
 
個人的にWordPressを使うのはその消失事件以来となります(笑)
 
しかも、はてなから移行したのは初めてのことだったので(仕事としては人様のブログを移させて頂いとりますが)移行してみた感想としては…
 
移行は面倒くさい
移行はオススメしない
やるなら早くがいい!
 
といったところでしょうか^^;
 
さて、非常に前置きが長くなってしまいましたが、この記事では今回!私がはてなからWordPressに移行するにあたり「やったこと・使ったもの」を今憶えている限りで洗い出しておこうと思います。
 
今後また、移行作業を請け負ったりする際の備忘録として、そして同じようにはてなからWordPressへと移行してくる方々が少しでもスムーズに移行できるように…少しでも有益な情報となれば幸いです。
 
 

スポンサーリンク

記事のエクスポート・インポート

この作業自体は自動なので難しくありません。まずははてな側でこれまでしたためてきた記事をエクスポートします。
 

はてなでの記事エクスポート

記事のエクスポートははてなブログ管理画面の設定→詳細設定の下の方に「記事のバックアップと製本サービス」という項目があるので、ここをクリックします。
 

 
クリックすると「エクスポート」の画面に切り替わるので、エクスポートボタンを押してからダウンロードボタンを押してバックアップデータをダウンロードします。
 

 
ちなみに念のため、バックアップデータについて書いておくと、データはテキストファイルのみなので「なんで、これまでアップしてきた画像がダウンロードされないんだ!」と思う方もいるかもしれませんが、はてなブログで記事に挿入した画像ははてなフォトライフにアップロードしたものをリンクで引っ張ってきているので、記事の実体データそのものはテキストファイルで十分だということですから、ご安心ください(^^)/
 

WordPressでの記事インポート

WordPressへの記事インポート作業も非常に簡単です。はてなからエクスポートしたテキストファイルをWordPressの管理画面からインポーターという機能を使ってアップロードするだけなんですが…
 
インポーターを使うにはWordPressの管理画面からツール→インポートとまずは選択していきます。
 

 
インポートのページにアクセスすると、いくつかのブログサービスに対応したインポーターが一覧で表示されています。はてなブログのバックアップデータに対応しているのは「Movable Type と TypePad」形式なので、この下にある「今すぐインストール」をクリックします。
 

 
インストールが完了したら「インポーターの実行」をクリックして、切り替わった画面の「ファイルを選択」からはてなでエクスポートしたテキストを選択し「ファイルをアップロードしてインポート」をクリックすれば、これだけで後は全て自動で記事のインポートが完了します。
 

 
精度のほどは、私は330記事をアップロードしましたが329記事は問題なくアップロードされました(なぜか1記事だけアップロードされない記事があったのでこれだけは手動で移行しましたが…)
 
というわけで、記事のエクスポート・インポートはこのように簡単というか、ほぼ自動で対応することができるんですが、私ははてなからエクスポートしたテキストデータをすぐにインポートせずに、テキストエディタで開いてはてな時代に毎回手動で挿入していた定型文を全部削除してからインポートすることにしました(多分、このほうがWordPressにインポートしてから管理画面で作業するより作業が速いので)
 
 

パーマリンク設定

私ははてなブログの時にカスタムURLを設定していなかったので、記事のURLは全てこのような日付形式でした。
 
entry/2017/10/16/190000
 
移行前に過去はてなブログからWordPressへ移行した方々の残した記事を念のため複数読みましたが、けっこうこの日付を手入力で設定し直したというケースもあるんですが、その必要は全くありません。
 

カスタム構造をこうすればはてなと同じになります。

f:id:d3dayo:20171016162529p:plain

設定はWordPressの管理画面から設定→パーマリンク設定からカスタム構造にチェックを入れて上記の構造を入力するだけです。


 

アイキャッチ画像の設定

これが私にとって、地味に辛く長い作業になりました…。ちなみにはてな時代に記事へと挿入した画像は実体データについては全てはてなフォトライフ上にあるので、ペタペタ貼り直さなくても移行先の記事でも読み込んでくれるのでいいのですが…アイキャッチ画像は再設定が必要になります。
 
一応、以下のプラグインを使えば全記事に対して一括で記事先頭の画像をアイキャッチ画像に設定することができます。

ただ、理由はなんでかわかりませんが、アイキャッチ画像に設定してくれる精度が非常に低くて…結局のところ、半分くらいは手動で設定するハメになりました(180記事くらい)
 
毎回毎回、記事の編集画面を開くのは作業効率が下がるので、アイキャッチ画像を淡々と設定する時に使用したプラグインは以下の記事で紹介しているものを使いました。

これを使うと、記事の編集画面を開かなくても、記事一覧から直接アイキャッチ画像を設定することができるので、たった数十秒でも作業の速度が上がりますし、数十秒が何百記事になればけっこうなボリュームで時短ができますからね(^^)/
 
 

はてなの機能で挿入したAmazonリンクの修正

はてな時代にエディタの標準機能で記事に挿入したAmazonリンクは、当然のことですがCSSが効いてないのでレイアウトがグチャグチャになります。WordPress側で新たにリンクを貼り直そうかとも思いましたが、数がけっこうあったので私は以下のCSSをWordPress側で記述してレイアウトを整えることにしました。

 

はてなの記事に挿入したシンタックスハイライトの修正

今回の記事にも挿入していますが、記事の中にコードを掲載する時にはてなではスーパーpre記法が便利でコードを「>||」「||<」で囲めば、自動でシンタックスハイライトしてくれましたが、これも当然WordPressでは書式が効かなくなります。
 
これについてはいくつかの方法を試して、WordPress側でコードの書式を再整形することにしたんですが、結局は以前からあるCrayon Syntax Highlighterで暫定的にコードは表示させています。読み込みがあまり速くないので今後また別運用に変えるかもしれませんが…。

 

ドメイン・サーバー関連

はてなで使っていた独自ドメインをそのままロリポップサーバーで使っています。移行時の流れはこんな感じでした。
 
・ロリポップのドメインで簡単インストールからWordPressを作成
・WordPress側は移行完了まで検索にインデックスされないように管理画面で設定
・ブログデザインの作成
・記事のエクスポート・インポート
・アイキャッチ画像や記事の細かな修正
・独自ドメインをはてなから外す
・独自ドメインをロリポップサーバーに設定
・WordPressの管理画面からサイトアドレスを独自ドメインに変更
・WordPressが検索にインデックスされるように設定を戻す
・独自SSLの設定
・はてなのheadにWordPressへのリダイレクトコードを記述

 
この辺りは各TIPSを改めて記事にもしていきたいと思っていますが、ロリポップで新規にWordPressを構築する前提だとドメイン移行は非常に簡単です。とりあえず新サイト完成まではロリポップのドメインを当てておいて、完成したらはてなから独自ドメインを外して、ロリポップの管理画面から独自ドメインを設定するだけなので。
 
あと、独自SSLの設定もロリポップは非常に簡単です。

 

記事内に挿入しているURLなどを一括修正

ドメイン変更・独自SSL化に伴い、記事内のURLなどを一括で修正する必要性が生じる場合があります。私は以下の記事で紹介しているプラグインで一括置換しました。

 

旧はてなへのアクセスを新WordPressへリダイレクトさせる

はてな時代についたブックマークは独自ドメインなら引き継げるかと思いきや、独自ドメインを外すとはてなブログ標準のサブドメインに全て書き換えられてしまうため、ブックマーク情報を引き継ぐことはできません。
 
しかしながら、はてなブックマークに掲載された記事ははてなブックマークページ内、そして検索流入も一定数あるので、このままにしておくのは非常にもったいない…。ということで私は以下のコードをはてなの管理画面からデザイン→カスタマイズ→ヘッダタイトル下に記述してリダイレクトさせています。

これを記述しておくことで、例えば旧はてなのentry/2017/10/14/030000というURLの記事にアクセスされたとしても、新WordPress側で同様のentry/2017/10/14/030000をしっかり作っておけば、同じURLの記事にリダイレクトされるようになります。
 
ただ、トップページへのアクセスはトップページには飛ばせず404ページに着地してしまうので、こちらはWordPress側で管理画面から→テーマの編集「404 テンプレート (404.php)」の先頭に以下のコードを記述して404から自動でトップページへと遷移するようにしています。

ちなみに、これはあくまでも読みに来てくれた人を速やかに誘導するための施策でSEO的な観点では…ということは予めご了承ください。
 
 

新WordPressサイトの記事がブックマークされても通知が来るようにする

はてなブログでは、記事がブックマークされるとはてなの通知画面でお知らせが受け取れたと思いますが、これはあくまでもはてなブログユーザーの特典であって、はてなアカウントを持っていても他のブログサービスを使っているユーザーはブクマの通知はそのままでは受け取れないので、ブックマークがついても気づかないことがしばしばあります。
 
はてなでブックマーク文化に慣れてしまうと、ブックマークへのレスポンスなども気になるところだとは思いますので、その場合には以下の記事で紹介しているプラグインが有効です!

このプラグインを導入すれば、新WordPressサイトでしたためた記事にブックマークがついても、はてな時代のようにはてなの通知画面にブックマークされた通知が表示されるようになります。
 
 

おわりに

というわけで、現時点で思いつく限りの今回はてなブログからWordPressへ移行する際に「やったこと・使ったもの」をまとめてみました。まだ何かあったような気もしますが、それは…もし思い出したら今後改めてTIPSとして個別の記事にしていきたいと思います!

移行はなんだかんだ言って作業がとっても面倒くさいです。これを楽しいと思う人はあんまりいないと思います(笑)だからこそ、移行想定でいる人は早めに移行しておくことをオススメします。記事や独自の運用方法が増えれば増えるほど、移行時の修正作業が膨大なものになっていきますから…。

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ