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

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

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

スポンサーリンク

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

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

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

ドメイン管理先:バリュードメイン
ドメイン総合サービス【VALUE-DOMAIN】

契約サーバー:コアサーバー
月額198円から利用できる次世代レンタルサーバー

ドメイン設定

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

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

までを行います。

次に、バリュードメインのドメイン管理画面にアクセスし、「DNS設定画面」を開きます。
参考: DNS情報・URL転送の設定 | VALUE-DOMAIN ユーザーガイド

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

setting-dns.jpg

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

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

サイトの設定

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

1. 「ドメイン設定」でドメインを設定する
参考: ドメイン設定の新規作成 | マニュアル | レンタルサーバー CORESERVER

2. 「サイト設定」で、設定したドメインをサイトに割り当てる。SSL設定もここで。
参考: サイト設定の新規作成 | マニュアル | レンタルサーバー CORESERVER

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

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

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

リダイレクトといえば.htaccessで設定するのが一般的ですが、はてなブログはそれができないので他の方法(JavaScript)を使います。

リダイレクト用のコードに関しては、以下の記事を参考にさせていただきました。

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

redirect-page.jpg

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

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

これは新サーバー側で、.htaccessを使って設定します。

コードは以上の記事を参考に設定しました。

スポンサーリンク



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

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

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

  1. AdSense Integration WP QUADS
    Advanced Ads
  2. Google XML Sitemaps
  3. Table of Contents Plus
  4. JP Markdown
  5. Featured Image From URL
  6. Photo Express for Google
  7. Like Button Rating ♥ LikeBtn
    WP ULike
  8. Enhanced Text Widget
  9. Search Regex
  10. Simple Tags
  11. Q2W3 Fixed Widget
  12. Instagram Feed
  13. wp-flickr-press
  14. Pz-LinkCard
  15. footnotes
  16. WP-Optimize
  17. WordPress Ping Optimizer
  18. TinyMCE テンプレート

よかったのは、「Like Button Rating ♥ LikeBtn」プラグインで、はてなスターのようなお気軽評価ボタンをつけられたことです。(使ってもらえるかどうかはともかく)
こういうプラグイン、意外とたくさんあるんだな、とびっくり。

よかったら押したってくださいw

トライアル期間が過ぎてFreeプランになったら、SSL化サイトで使うなら有料プランにしてね!(意訳)と言われてしまいました……。
これだ、と言えそうな代替プラグインを探してみています。

追記:2018年3月6日
WP ULikeというプラグインを使ってみることにしました。
上のボタンよりもシンプルで使いやすいです。

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

追記:2018年3月6日
プラグインのアップデートで、以下の「null」問題は解消しました。

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

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

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

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

wp-flickr-press-setting.jpg

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

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

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

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

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

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

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

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

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

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

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

ユーザーIDが記載されたリンクが生成されるが、右クリック→画像を保存ができてしまう。「All rights reserved」にしている身としては不安。

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

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

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

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

ですが、以下の画像のように気になる空行が二箇所できていました。*1
※リンクカード設定の「かんたん書式設定」は「なし」にしています。

blogcard-space1.jpg

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

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

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

blogcard-space2.jpg
無事、削除されました!

追記:2018年2月25日
CSSでdisplay:noneを設定すればいいことを知ったので、それで設定しました。

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

Vol.2の記事できました

脚注   [ + ]

1. 使用しているテーマとの相性の問題なのかもしれません
スポンサーリンク