【やった作業まとめ】はてなブログProからWordPressへの引っ越し完了：その1

作業開始から2週間ほどかかりましたが、とりあえず落ち着きました。
サーバー引っ越し・ドメイン切り替え・WordPressインストール・過去記事の移動……本当に最低限の作業はあまり手こずることなく終えられたのですが、蓋を開けてまじまじと見てみると……。

細かな作業が予想以上に多かった、という感じでした。
忘備録として、ざっとまとめておこうと思います。

基本的な流れ＋ドメイン設定・サイトの設定

基本的な流れは、以前引っ越しお試し記事を書いた通りです。

: 【お試し】コアサーバーにWordPressインストール＆はてなブログの記事を移してみた

続きを見る

この時はイメトレで終わっていた、ドメインの設定とサイトの設定についてまとめます。
ドメインの管理先とレンタルサーバーはそれぞれ以下の通り。

ドメイン管理先：バリュードメイン

ドメイン取得&レンタルサーバー VALUE-DOMAIN(バリュードメイン)

契約サーバー：コアサーバー

＜初期費用無料＞超高速・高安定レンタルサーバーコアサーバー（CORESERVER）- 30日間無料お試し

ドメイン設定

まず、はてなブログのダッシュボードにアクセスして、

「設定」をクリック
「詳細設定」をクリック
「独自ドメイン」に設定済みのドメインを削除する

までを行います。

次に、バリュードメインのドメイン管理画面にアクセスし、「DNS設定画面」を開きます。

私は、①アウトドア系のブログ（一週間後くらいに）②このブログという流れで作業したため、以下のように設定しました。

黒塗りのところは、借りたサーバーのIPアドレスを指定します。
正しいかどうか今でも不安なのですが、特に問題なく動いているので大丈夫なのだと思います^^;

一応コードも置いておきます。

サイトの設定

大体15分くらい経過したら、ドメインでサイトの設定ができるようになりました。
コアサーバーのコントロールパネルにアクセスして、

1. 「ドメイン設定」でドメインを設定する

2. 「サイト設定」で、設定したドメインをサイトに割り当てる。SSL設定もここで。

以上の作業を行えば、とりあえずサーバーの引っ越しは完了となります。

WordPressのインストールと初期設定、はてなブログの記事のインポートは、上で紹介しているお試しした記事にまとめています。

旧ブログ（はてなブログ）から新ブログにリダイレクトさせる（固定ページ・記事単位）

リダイレクトといえば.htaccessで設定するのが一般的ですが、はてなブログはできないので他の方法（JavaScript）を使います。
リダイレクト用のコードに関しては、以下の記事を参考にさせていただきました。

はてなブログから引越し後のはてなブログのリダイレクト設定方法

https://www.haneda-airport-server.com/entry/hatena-redirect

はてなブログからWordPressへの引越しを完了したこのサイトですが、最後にはてなブログからWordPres…

羽田空港サーバー

無料はてなブログからWordPressに移行する

~~https://superspeed-fall.com/entry/2017/04/25/109699~~

■ なぜ、はてなブログから出ていくのか柔軟性が皆無だから。突然何かがバズって2万PV/dayを食らっても何...

超高速落下

固定ページでリダイレクトさせたい場合は、ページ単位でコードを直接記載します。

なお、「超高速落下」さんの記事内でも言及されているとおり、トップページからリダイレクトはされません。
カテゴリーページやアーカイブページなども同様です。あくまで記事・固定ページのみ。

http→httpsにリダイレクトさせる

これは新サーバー側で、.htaccessを使って設定します。
コードは以下の記事を参考に設定しました。

必要なプラグインのインストール

当初予定していたよりも多くなってしまいました……。入れすぎるとWordPress全体が重くなるのは知っているのですが、目安の数がわからないのでドキドキしています。
お試しで入れているものもあるので、増減する可能性は十分あります。

※デフォルトでインストールされているプラグインは省いています。

使用時につまずいたプラグインその1：wp-flickr-press

追記：2018年3月6日

プラグインのアップデートで、以下の「null」問題は解消しました。

インストールしてから使えるようになるまでの初期設定は、以下のページを参考にしながら問題なく終えられました。

つまずいたのは、いざ使おうとしたときです。

デフォルトの設定のまま写真を挿入すると、こんなレイアウトになります。

写真の上下にある情報はいらないので、設定画面の「埋め込みオプション」のHeader、Footerのチェックを外します。

再度挿入してみた写真がこちらなのですが……試しに写真をクリックしてみてください。
404エラーページに飛んでしまうのです。

原因自体はわかっていて、両方とも写真へのリンクタグのアドレスを見ると、

http://www.flickr.com/photos/null/27527950559

こんな表記になっています。
正しくは

http://www.flickr.com/photos/ユーザーID/27527950559

この表記でないといけません。

でも不思議なのが、ヘッダー・フッターをつけた方はリンクをクリックするとちゃんと飛べるんですよね……。
タグは間違いなくnullになっているのに。

どうにか解決できんかな？　と思ったのですが……結論からするとダメでした。

設定を見直す
うまくいかず（見落としあったら申し訳ない）

Google先生に訊いてみる
それらしい情報が引っかからず

以下の、古い方のボタンを使う

※このボタンを押すと、「この検索UIはメンテナンスされていません。現在、新しい検索UIが「メディアを挿入」から利用可能なのでそちらをご利用ください。」というメッセージが表示される。

ヘッダーかフッターをつけていれば問題ないみたいなので、とりあえずヘッダーだけつけて使っていこうかなと思っています。

まあ、公式で共有メニューからコードをコピペすればいいんですけどね。。
以前はそれでやっていましたが、とっても手間だったので、このプラグインは本当にありがたいんです……使っていきたいんです。

使用時に少しつまずいたプラグインその2：Pz-LinkCard

ブログカードプラグインの鉄板ともいうべきもので、とっても便利に使わせていただいています。

ですが、以下の画像のように気になる空行が二箇所できていました。^*1使用しているテーマとの相性の問題なのかもしれません
※リンクカード設定の「かんたん書式設定」は「なし」にしています。

リンクカード部分のタグをコピペしてみると……

空行の部分にpタグが挿入されていることがわかりました。

Pz-LinkCardの設定をいじるだけでは解決しそうになかったので、JavaScriptを使って削除するようにしてみました。

無事、削除されました！

追記：2018年2月25日

CSSでdisplay:noneを設定すればいいことを知ったので、それで設定しました。

予想外に長くなってしまったので、次回に続きます。
使用テーマとCSSあたりをまとめる予定です。

Vol.2の記事できました

脚注[+]