【WordPress】はてなブログからWordPressへ移転する時にしたことまとめ

ブログ・サイト

2020.11.02 2020.03.08

ブログ・サイト

WordPress

この記事は約9分で読めます。

とっちゃん@nyanco! です。

はてなブログからWordPressに移行する際にしたことまとめです。

前提条件
はてなブログから記事データをエクスポート
テキストエディタで編集
WordPressにインポート
「はてなブログ」にリダイレクト設定
落ち着いたらやること
終わりに

前提条件

無料はてなブログからの移行（移行元は独自ドメインでない）
独自ドメインは取得済み（Google Domainより）
サーバーはレンタル済み（ロリポップサーバーのライトプラン）
WordPressはインストール済み

はてなブログから記事データをエクスポート

まずは、はてなブログから記事をエクスポートします。

はてなブログの「管理画面」→「設定」→「詳細設定」→「エクスポート」の「記事のバックアップと製本サービス」をクリック。

「エクスポートする」または「エクスポートしなおす」をクリック後、「ダウンロードする」をクリックすると、「xxxxxxxxxx.hatenablog.jp.export.txt」のようなテキストファイルがダウンロードされます。

600近い記事数でしたが、エクスポートもダウンロードもすぐでした。

テキストエディタで編集

先程ダウンロードしたテキストファイルをすぐにワードプレスにインポート、と行きたいところですが、先にこのテキストファイルの状態で色々編集しておくとインポート後の作業がスムーズです。

そのままインポートしてしまっても、ワードプレスのプラグインを使えば同じことはできると思いますが、テキストファイルで編集する方が効率は良いです。

編集には「正規表現」を使うので、高機能なテキストエディタを使いましょう。

Macなら「CotEditor」、Windowsなら「Mery」あたりがオススメです（どちらも無料ソフトです）。

CotEditor

Text Editor for macOS

窓の杜

「Mery」フリーの高機能テキストエディター

「はてなキーワードリンク」の削除

はてなブログには、「はてなキーワード」というキーワード共有サービスに登録された単語をブログで使うと、自動でリンクがつくという機能があります。

気にならなければそのままでも良いかと思うのですが、自分の意図しない箇所にリンクがたくさんあるというのはあまり気持ちの良いものではないし、記事を読む方も混乱するかと思ったので私は除去することにしました。

「class=”keyword”」という特定のクラスが使われているので、「正規表現」を使えばほぼ一発でキーワードリンクのaタグだけ削除することができました。

その正規表現がこちら。

・検索文字列
([. – ( ) \w ! 亜-熙ぁ-んァ-ヶ・「」＆&：:；; / ’ ％%]+)
・置換文字列
$1

私の場合、検索すると6,000箇所ほど該当箇所がありました！

これは手作業では途方に暮れる数ですね ^^;

正規表現のありがたみを痛感。

▼より詳しい手順はこちらの記事をどうぞ。

はてなブログの「キーワードリンク」の削除方法

とっちゃん@nyanco! です。今回は「はてなキーワードリンク」の削除についての備忘録です。無料はてなブログから別のブログに移転する時のお話となります。「はてなキーワードリンク」とは？そもそも「はてなキーワードリン...

「a class=”keyword”」で検索してヒットしなくなれば除去完了です！

hタグのレベル変更

はてなブログは「hタグ」で表す見出しの概念が独自のものなので、標準仕様に変更しておきます。

<h3> → <h2>
<h4> → <h3>
<h5> → <h4>

上から順番に行わないとぐちゃぐちゃになります。
閉じタグも忘れずに！

目次（[:contents]）の削除

はてなブログで挿入した目次も一旦削除しておきます。

・検索文字列
[\s\S]+?
・置換文字列
空欄

WordPressではプラグイン「Easy Table of Contents」を使えば自動で目次を挿入できちゃいます！

ページが見つかりませんでした – なるブログ

ブログカードの下のリンクは要らないので削除

こちらもはてなブログ独自のものなので削除。

・検索文字列
<cite class=”hatena-citation”>.+</cite>
・置換文字列
空欄

内部リンクを独自ドメインに変更

移行先は独自ドメインになるので、内部リンクを独自ドメインのURLに変更しておきます。

・検索文字列
https://hatenablog-parts.com/embed?url=http%3A%2F%2F[はてなブログ標準のサブドメイン].hatenablog.jp%2Fentry%2F
・置換文字列
https://hatenablog-parts.com/embed?url=[移転先ドメイン(https含む)]

これで内部リンクは機能しますが、「はてなブログパーツ」という外部サービスを流用したままになります。気になる方はこちらも自前のデザインに変えておくと良いかもしれません。私はここは一旦そのままいって、何か問題が起こればそこで対処しようかなと思ってます。

テキストファイルの状態でここまで編集しておけば後が楽です。

いよいよWordPressにインポートしていきます。

WordPressにインポート

先程編集したテキストファイルをWordPressにインポートしていきます。

インポート自体はめちゃ簡単です。

WordPress管理画面左メニュー「ツール」→「インポート」→「Movable Type と TypePad」の「インポーターの実行」→「ファイルを選択」からテキストファイルを選択して「ファイルをアップロードしてインポート」をクリックで完了です。

インポート完了後、ページを確認して記事が表示されていればOKです！

ただ、アイキャッチが表示されてなかったりなど細かい部分で気になるところがたくさんあると思いますが、それは後ほど対処していきます。

「はてなブログ」にリダイレクト設定

インポート完了後、はてなブログの記事にアクセスがあった場合、自動で移転先の記事に移動させるように「はてなブログ」側でリダイレクト設定をしておきます。

本来、リダイレクト設定は「.htaccess」というファイルで設定するものですが、はてなブログはそのファイルをいじれないため、scriptで擬似的にリダイレクトさせます。

「はてなブログ管理画面」→「デザイン」→「スパナマーク（カスタマイズ）」→「ヘッダ」→「タイトル下」に以下のコードをコピーペースト。

<div style="text-align:center;margin:100px 0;font-size:2em;">
<p><b>nyanco! ブログは移転いたしました。</b></p>
<p><b>約 5 秒後に自動的にリダイレクトします。</b></p></div>
<script type="text/javascript" language="javascript">
<!--
// 新urlの作成
var domain = "新ドメイン";　// 最後のスラッシュは不要です
var path = location.pathname.substr(6) ; // パスの整形（entry/の除去）
var url = domain + path;
// リンクhtmlの書き出し
document.write("<a href=\"" + url + "\">" + url + "</a></p>");
// リダイレクト
setTimeout("redirect()", 5000);　// 5000 は 5秒
function redirect(){
location.href = url;
}
// canonical の書き換え
var link = document.getElementsByTagName("link")[0];
link.href = url;
-->
</script>

html部分はお好きなように変更してください。

移転元の記事にアクセスすると移転した旨のメッセージが表示され、自動的に移転先の記事に移動するはずです。

▼下記の記事がとても参考になりました、ありがとうございます。