Web

はてなブログ移行後にWordPressで行う修正マニュアル

Wordpress

はてなブログからWordpressへの引越し作業第2弾!前回の記事で、はてなブログの記事データをWordpressにインポートした所まで紹介しました。

今回はその後、Wordpress側で行った設定を画像を使い1つずつ紹介したいと思います。移行作業の終盤戦ですが私が一番苦労した箇所です。正直ここからが本番ですよ!

移管の大まかな流れです(次は⑦からスタート)

  1. はてなブログの移管準備
  2. サーバー契約
  3. ドメイン設定
  4. WordPress設定
  5. hostsファイル書き換え
  6. WordPress修正
  7. エラー修正(←ココからスタート)
  8. サーバー切り替え作業

修正を始める前に

WordPressのバージョンが上がり修正画面が新しくなっています。正直使いづらいし慣れないので以前の修正画面に戻すプラグイン(Classic Editor)をインストールして利用します。

クラシックエディタ

WordPressの管理画面から「プラグイン」→「新規追加」→検索窓に「Classic Editor」と入力→「インストール」をして下さい。

※上の画像はインストール済みなので「有効」の文字になっています。

インストールして有効になったら修正作業をはじめましょう。

WordPressのエラー修正

はてなブログからWordpressへデータをインポートした後に起こったエラーの修正を行います。一括で変更出来る修正と、1記事ずつ変更していく修正がありますのでまとめて紹介していきます。

ちなみに、インポートしてすぐの画面が下の画像です。cssなどの設定もしていないので参考になるかは分かりませんが、ただデータをインポートしただけではまだ見れる状況ではないんですよね。これを最適化させていく作業を行います。

Wordpressのhタグ変更

[1] hタグ変更

まず最初の修正は「hタグ(見出しタグ)」の修正です。

はてなブログとWordpressの仕様が違うのでインポートしたデータを見るとhタグ(見出しで使っている文字コード)が1つずれるんです。

ちなみに、はてなブログのhタグ(見出しタグ)は下の画像の場所ね。

はてなブログ見出し

h2タグがはてなには無いんですよね。なぜh2が無いのか説明は省きますが、hタグが順番通り記載がないとSEO的に良くないのでタグの修正を最初に行います。プラグインを利用して一括で変更していくのでここからの作業は慎重に行いましょう。

変更箇所はこれです。<h2><h3><h4>タグの変更を行います。

[はてな]→[Wordpress]
<h3> → <h2>
<h4> → <h3>
<h5> → <h4>

Search Regexで一括変換

作業手順は簡単です。まずはWordpressの管理画面から「プラグインページ」へ行き検索窓に「Search Regex」と入力。

下の画像が出てきたらSearch Regexの「今すぐインストール」のボタンがあるので押してインストールして下さい。

Search Regexインストール

「ツール」の中にインストールされていますので立ち上げた画面がこれ!英語だけど使う機能は限られるのでご安心を。

WordpressSearch Regex

主に使う機能はコチラ

  • Search pattern:現在の文字を入力する場所
  • Replace pattern:変更後の文字を入力する場所
  • Searchボタン:「Search pattern」で入力した文字を検索出来る
  • Replaceボタン:置換した場合どうなるかをプレビューしてくれます(まだ置換はされていません)
  • Replace&Saveボタン:これが置換されるボタンです(ボタンを押したら元に戻すことは出来ません)

上の選択できる項目「Source」「Limit to」「Order By」はこのままでいいです。

一応説明を下に書いておきます。

「Source」

  • Comment author:コメントの名前
  • Comment author email:コメントのメールアドレス
  • Comment author URL:コメントのURL
  • Comment content:コメント内容
  • Post content:記事本文
  • Post excerpt:記事抜粋
  • Post meta value:記事カスタムフィールド
  • Post title :記事タイトル
  • Post URL:記事パーマリンク(URL)

「Limit to」

  • 処理する上限を選べます:10、25、50、100

「Order By」

  • Ascending:昇順
  • Descending:降順

書き方はコチラ

h3タグをh2タグに変える方法です。

Search Regex置換
  1. Search patternに入力 → |<h3>(.+)</h3>|
  2. チェックボックスの「Regex:」にチェック
  3. Searchボタンで検索(h3タグがズラーッと出てくるはずです)
  4. 続けてReplace patternに入力 → <h2>$1</h2>
  5. Replaceボタンで検索(下の画像のように置換後の文字が出てくるはずです)
  6. これでOKであればReplace&Saveボタンをクリック。
  7. 完了
Search Regex置換

最後の「Replace&Save」ボタンを押したら元に戻せないので慎重に作業してみてね。

私はこの作業で1回失敗しました。何度か書き換えたらタグがごちゃごちゃになったので記事を消してインポートし直したよ。

失敗したら記事を全部消してもう一度インポートしなおすのが一番いいですよ。ゴミ箱に記事が入っていたら上書きされてややこしくなるのでゴミ箱からも完全に削除してもう1度トライしましょう。

インポートした時の記事はこちら

タグの変更順はこの通り!h2に変更するのが最初です。

  1. <h3> → <h2>
  2. <h4> → <h3>
  3. <h5> → <h4>

一括変換で修正する内容はこの1つだけです。

後は1つずつ手動で作業します。プラグインを使って一括変換出来る方法をテストしましたがどれも不完全だった為、私は手作業で1つ1つ修正をしました。

記事数が多いと気の遠くなるような作業ですが、、、頑張りましょう。

手作業の内容は3つ項目がありますので全部読んでからまとめて作業しましょう。

[2]アイキャッチ画像変更

手作業で行う修正の1つ目は、ページの最初に出てくるアイキャッチ画像。はてなブログからWordpressへ移行した時は記事内の写真は表示されていますが、アイキャッチ画像は選択されていないんです。(一覧で出てくる画像の事です)

Wordpressアイキャッチ画像

アイキャッチ画像は画面の右側に設定できる場所がありますよ。

Wordpressアイキャッチ画像

プラグインを使って一括変換する「Auto Post Thumbnail」もありましたが、最新のバージョンだと表示が出来なくなりました。以前のバージョンのまま利用するのであればアイキャッチ画像を一括で登録が出来ます。

ただ今後使えなくなりそうな予感がしたので私は手作業で行いましたが。。。

[3]パーマリンク修正

次はパーマリンクの修正を行います。前回はてなブログから記事データをインストールした時に少し書いていますが、2種類のURLを使っていたので未設定のURL(カスタムURLのページ)を1つ1つ変更作業を行います。

前回の記事はコチラ

※はてなブログのURL設定が1つだけの方はこの作業は飛ばして下さい

私の場合はインポートする時に「標準フォーマット」を採用しました。インポートした時に全てのページが標準フォーマットのURL(数字のURL)に変わっているので、「カスタムURL」を利用していたページを変更します。

修正方法は下記画像のエリアにカスタムURLを貼り付けて更新ボタンを押します。

Wordpressパーマリンク変更

カスタムURL→ ドメイン名/entry/◯◯◯◯

これの繰り返し!私はこれで約60記事を1時間くらいかけて修正しました。

はてなブログのURLと照らし合わせて作業するので手間だけど、これが合ってないとSEOに影響が出るので手を抜かずに頑張りましょう!

標準フォーマットを変更する作業を行う時はEnhanced Custom Permalinksをインストールして下さい。Wordpressでは「/」が入力出来ないのでEnhanced Custom Permalinksをインストールすれば入力が出来ますよ。

[4]目次修正

次は目次の修正です。はてなブログで利用していた目次タグ[:contents]はWordpressへ移管すると全てのリンクが表示されます。この修正も1記事ずつ修正していきます。

はてなブログで目次を作ると[:contents]だけが表示されますよね。

Wordpress移管目次削除

このままWordpressへ移行するとhtmlでは全てのタグが反映されてしまいます。

Wordpress移管目次削除

cssで対応も出来るのですがWordpressの場合プラグインで目次を作った方が今後楽なのではてなブログの目次は全て消していきます。

プラグインの「Search Regex」で一括変換出来るタグでチャレンジしましたが、どれも中途半端な変換しか出来なかったんです。目次の途中まで消えるんだけど全部は消えないんだよね。下の画像の赤枠の場所もまだ目次のタグなんだけど消えない。誰か消し方を知っている人が教えて欲しいです。。。

Wordpress目次

なので諦めてこちらも1記事ずつ削除していきました。

私の場合は360記事。。。パーマリンク修正と合わせて修正をしていきました。

 

以上が私が行ったWordpress移行後の修正です。手作業で行った修正は本当に辛かったんだけど、過去の記事を見直す事が出来てリライトすれば伸びる記事も見つけたのは収穫でした。悪いことだけではなかったね。

修正と同時にいらない記事を100記事くらい削除したので残ったのは260記事。削除してもアクセス数はあまり変わらなかったので古くて今までアクセスが少ない記事はこれを機会に削除しましょう。

次はついに本番環境へ切り替える為のサーバー手順を紹介します。

デザインの修正等を行う場合はサーバー切り替え前に作業して下さい。

色味などの調整やヘッダー画像などテーマによって違うのでWordpressで設定しましょう。

サーバー切り替え

修正が完了したら新サーバーへ切り替え作業を行います。

[1]ネームサーバー切り替え

ドメインをお名前.comで管理しているのでお名前.comへログインしてネームサーバーを切り替えます。ドメインの向き先を新しいサーバー(エックスサーバー)にする作業です。

作業は簡単。お名前.comの管理画面で設定しますのでお名前.comへログイン!

DNS切り替えお名前.com

ドメインのメニューの中の「ネームサーバー変更」をクリックして進んでください。

お名前.comネームサーバー切り替え
  1. ドメイン名にチェックを入れてください。
  2. ネームサーバの選択は「その他」をクリック
  3. ネームサーバの入力欄が出るので5つ入力します
  4. 「+」ボタンを押すと数が追加出来ます
  5. 確認ボタンを押す

[エックスサーバーのネームサーバー]

サーバー契約した時にメールが届いていると思うのでそのメールに記載があります。ちなみにコレです!メールに届いているものと一緒だと思います。

ネームサーバー1: ns1.xserver.jp
ネームサーバー2: ns2.xserver.jp
ネームサーバー3: ns3.xserver.jp
ネームサーバー4: ns4.xserver.jp
ネームサーバー5: ns5.xserver.jp

これでネームサーバーの切り替えは完了です。

[2]DNSレコード設定

次はDNSの設定です。

ドメイン設定の「DNS関連機能の設定」へ

お名前.comDNS設定

ドメインを選択して次へ進みます。

お名前.comDNSサーバー切り替え

真ん中の方にある「DNSレコード設定を利用する」の青い設定するボタンをクリックしてください。

お名前.comDNS設定

登録済みの場所に「hatenablog.com」の欄があると思います。これを削除するので右側の削除ボックスにチェックを入れて削除して下さい。

お名前.comDNS設定

確認して完了すればDNS設定の完了です。

世界中のサーバーの向き先を新サーバーへ変更していく作業なので全て反映されるまで最大72時間かかります。でも大体1日で反映されていました。後は待つのみです!

サーバーの反映を待つ間細かい設定をしっかり対策しておきましょう。

切り替え後に行う作業

切り替え後に行う作業をまとめます。タグの設定とかあるので忘れないで行いましょう。

[1]Google Analyticsタグの設定

はてなブログでも設置していたので再度Wordpressの管理画面でGoogle Analyticsのタグを設置しました。

Google Analyticsの管理画面から「管理」→「プロパティ」の中のトラッキングコードを選択。

Googleアナリティクス設定

トラッキングコードの中にタグがあるのでコピーしてWordpressの管理画面で貼り付けます。

Googleアナリティクス設定

貼り付ける場所は「HTMLタグ設定」のメニュー内にある<head内>です。

※Wordpressテーマ「JIN」以外を利用している方は設置方法が異なります。

Googleアナリティクス設定

これで保存すればGoogle Analyticsの設定完了。

[2]Google AdSenseタグの設定

次はGoogle AdSenseのタグです。アナリティクスと同様にタグをコピーしてWordpress側に貼り付けます。

メニューの「広告」をクリック。

Google AdSense設置

「広告ユニットごと」の中に作ってあるタグが入っています。

Google AdSense設置

右側にある「<>」を押せばタグが出てくるので自分の指定の場所に貼り付けて下さい。

Google AdSense設置

このタグをWordpressに設置すれば完了です。

※アドセンスもテーマによって設置場所が異なります。

JINお場合は「広告管理」というメニューがあるのでその中で自分が必要だと思う場所に設置しましょう。

[3]SSLの設定

サイトをSSLに対応させる作業です。DNS設定が終わって少し時間が経たないとSSLの登録が出来ないので数時間空いたら作業をしましょう。

[SSLとは]

SSLとはサーバ証明書の事でインターネット上のデータを暗号化してセキュリティを強化する仕組みの事です。Google推奨しており、SSLが無いサイトは評価を下げていると聞きます。エックスサーバーであれば簡単に設置出来たので対応しましょう。

(SSL未対応のURL)http://

(SSL対応のURL)https://

まずはエックスサーバーの管理画面から設定をします。「SSL設定」をクリックして進んでください。

WordpressSSL設定

次にSSLを設定したいドメインを選択して下さい。

WordpressSSL設定

「独自SSL設定追加」をクリックしてサイト欄に設定したいドメインが選択されているか確認してください。

WordpressSSL設定

CSR情報を入力するにチェックを入れますが下の項目は何もいじらなくていいです。

確認画面へ進んで登録しましょう。

SSLの登録までは最大1時間かかります。実際にhttps://www.ドメイン名で検索してサイトが表示されたら次の作業に移ります。

SSLが反映されたら次はWordpress側の設定です。

WordPressの設定画面の中にURLが書かれている場所があります。ここのURLをhttpsに変更します。

WordpressSSL

WordPressアドレスとサイトアドレスの両方ね。

そして最後に.htaccessを使ってリダイレクト設定を行います。

このコードを.htaccessの中に書き込みます。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

私はFTPソフトを使って修正していますが、エックスサーバー側で設定する方が誰でも出来るやり方なので紹介します。

htaccess編集

エックスサーバーのインフォパネルのTOP画面から「ファイル管理」をクリック。

これはサーバーの中になるので変にいじると設定が変わるので注意してね。

Wordpresshtaccess編集

自分のドメイン名が表示されていると思うのでドメイン名をクリック

次が「public_html」

public_htmlファイルの中にhtaccessが入っていると思います。

Wordpresshtaccess編集

チェックボックスがあるのでチェックして「編集」へ進みます。

※htaccessのファイルをクリックするとデータがダウンロードされるので一度ダウンロードしてバックアップとして保存しておきましょう。

htaccess編集

htaccessの画面にコードを入力します。

書く場所はココです。

SetEnvIf Request_URI “.*” Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI “.*” Ngx_Cache_StaticMode

ココに書く

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

最終的なコードはこれです。

SetEnvIf Request_URI “.*” Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI “.*” Ngx_Cache_StaticMode

RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

これで保存すればhtaccessの編集は完了です。

httpsにリダイレクトされているはずですので確認してみてください。

時間があればサイトの内部リンクもhttpからhttpsへ変換しておくと今後楽だと思いますよ。Search Regexで一括変換出来るので。

[4]hostsファイルの変更

次の修正は前回行ったhostsファイルを元に戻す作業です。作業は簡単。

追加した文字を消すだけです。作業内容は前回と同じなので消したら上書きしましょう。

前回の作業内容はこちら

hostsファイル書き換え

hostsファイルを書き換えた後、ネームサーバーが切り替わっていなければWordpressの管理画面は表示されなくなります。ページが見つかりませんってなるはず。切り替わってから修正作業が出来るので気をつけましょう。

[5]はてなのリダイレクト

最後の作業です。ネームサーバーが切り替わり新サイトが表示されたらはてなブログからのリダイレクト(転送)作業を行います。

同じ記事が2つあるとSEOに影響があるのでリダイレクトするタグの設置をします。

設置するタグはこちら(新URLの場所は自分のURLに変更して下さい)

<script>
<!–
var newDomain = “https://www.chichibu-life.com”; // 新URL
var path = location.pathname;
var url = newDomain + path;
var link = document.getElementsByTagName(“link”)[0];
link.href = url;
// 0秒後にジャンプ
setTimeout(“redirect()”, 0);
function redirect(){
location.href = url;
}
–>
</script>

このタグをはてなブログにコピーします。

設置場所は「デザイン」→「ヘッダ」→「タイトル下」です。スマホの設定も忘れずにね。

はてなブログリダイレクト
はてなブログリダイレクト

リダイレクトされているか確認してみてね。

リダイレクト設定が終わったら管理画面の「設定」→「詳細設定」の中にある検索エンジンに登録させない(noindex, nofollow)をチェクして保存しましょう。

これではてなブログへのアクセスはなくなるはずです。

はてなブログ検索させない

 

これで引越しの修正が完了です。長い時間お疲れ様でした。

今回私が行った作業を1つずつ画像付きで紹介しました。この通り進めば移管は出来るはずです。手動の部分もあるので時間はかかりましたがリスクは少ないと思います。

ぜひチェレンジしてみてね。

はてなブログからWordpressへ移行完全マニュアル!画像付で全て公開はてなブログからWordpress(ワードプレス)へ引っ越しました。 設定自体は難しくないんだけど細かい作業が多かったのでこれからサー...