移転ネタは続くよどこまでも。
先日、当ブログは「はてなブログPro」から「WordPress」に移行しました。移行作業に掛かった時間は約3日。さまざまなサイトを参考にして、いろいろと試行錯誤しながら、自分の環境に合わせて作業を行いました。
このエントリーでは、その「移行作業」の際に参考にしたサイトをまとめておきたいと思います。ほぼ自分用のまとめです。でも誰かの役に立つといいなー！
当ブログの環境について
一口に「WordPress」といっても、インストールしているサーバーや契約しているドメイン管理会社は人それぞれ。まずは前提条件として、当ブログを管理している環境を記しておきます。
サーバー・ドメインどちらも「さくら」です
当ブログでは、サーバーもドメインも「さくらインターネット」で契約しています。契約内容は以下。
- サーバー：「さくらのレンタルサーバー（スタンダード）」月額515円
- ドメイン：取得・管理とも「さくら」年額1,852円
当ブログでは、「はてなブログPro」でブログを書いていた時代から、今と同じ「starrrrr.com」という独自ドメインを使っていました。ブログの開設と同時に、さくらでドメインを取っています。
実は、サーバーは「はてな」でブログを開設する前から契約しています。というのも、当初はWordPressでブログを作ろうかと思っていたのですが、あまりにも初心者すぎて分からないことだらけで挫折してしまい、仕方なく「はてなブログPro」で開設したのです。
このような経緯があり、サーバーは契約したままになっていました。ほぼメール専用サーバーと化していたところに、今回新たにWordPressをインストールした、というわけです。
移行作業を追いながら参考サイトをピックアップ
移行にかかった時間はほぼ3日です。はてなブログ時代から、いつかはWordPressに移行することを前提としたブログ作りをしていたにも関わらず、結構時間がかかってしまいました。
ちなみに「いつかはWordPressに移行することを前提としたブログ作り」とは、具体的には
- 独自ドメインでブログを開設
- 写真のアップロード先は「はてなフォトライフ」ではなく「Flickr」
- 記事のパーマリンクを個別の記事ごとに設定していた
というようなことです。これらをやっていたおかげで、移行作業の負担がずいぶん軽減されました。
ではでは、順を追って作業内容を見ていきましょう。
さくらのレンタルサーバーにWordPressをインストール
これはサーバー設定画面から簡単にインストールできますので、省略しますね。詳細はこちらです。
ただ、今回の移行は、独自ドメインを「はてなブログPro」に割り当てたままで、先にWordPressでブログを作り込んでいます。つまり、さくらの初期ドメインにWordPressをインストールしてブログを作り、その後ドメインの設定を「はてな」から「さくら」に移行しました。ですので上記ページのやり方とは一部異なります。
移行するまで作りかけのブログを公開しない
はてなブログと違って、WordPressには「ブログ全体を非公開にする」という設定がありません。そのため、こちらのツールを使って非ログインユーザーをログインページに飛ばすことで、擬似的にブログ全体を非公開にしていました。
公開前のWordPressサイトをパブリックに晒したくないときは「wp-nologin-redirect」プラグインがよさそう
寝ログAMPもちろん、ダッシュボードの表示設定内「検索エンジンがサイトをインデックスしないようにする」にもチェックを入れていますよ。
テーマを選択してサイトを作り込む
今回は有料の海外テーマ「SmartBlog」を使ってみました。デザインを作り込む作業については、先日のエントリーをご参照ください。
ブログのデザインについて。今回のこだわりポイント。 – starnote*
starrrrr.com記事の移行
はてなブログのエクスポート機能を使って記事をローカルにダウンロード。その後WordPressにアップしました。
以下の記事は「はてなブログPro」から「さくらのレンタルサーバーにインストールしたWordPress」という、僕と全く同じ環境の方が書かれたもの。もう参考にしまくりました。本当にありがとうございました。
はてなブログからWordPressに移行しよう。やり方の流れと設定の注意点を徹底解説。 | なわとび1本で何でもできるのだ
www.shoichikasuo.com記事をWordPressにインポートした後は、1記事ずつ「アイキャッチ」と「パーマリンク」の設定をチェックしていきます。
アイキャッチ画像を新たに設定
まず、アイキャッチ画像についてですが、はてなブログの場合は「記事本文内に表示された最初の画像」をアイキャッチとしていることが多いと思います。しかし、WordPressでは、記事本文とアイキャッチ画像は別の要素として完全に分けられています。
そのため、移行に際して本文内から元のアイキャッチ画像を削除し、新たなアイキャッチ画像を設定する作業が必要になりました。
この作業に一番時間を取られました。移行時点で100記事ほどでしたが、後述のパーマリンクの確認作業と合わせて丸一日やっていたと記憶しています。地味な作業の繰り返しなのでとてもツラかったです。
また、WordPressのアイキャッチ画像にはもう1つ問題がありました。それは、アイキャッチの解像度が低くなるという問題。
解決してくれたのは、こちらの記事。
WordPressでアイキャッチ画像を好きなサイズで設定・使う方法
WordPressブログ作ってみる?詳しく書かれていて本当に勉強になったので、お困りの方はご一読されることをオススメします。
パーマリンクの確認
記事のパーマリンクは、移転前から「/entry/20170815_ulysses-subscription」のように、任意のタイトルを個別に設定していました。WordPressでも、「/entry/」を入れるような設定にしておけば、移行後も同じURLを使うことができます。
しかし、初期に書いた一部の記事では、はてなブログのデフォルト設定である「/entry/2016/05/09/234333」というようなフォーマットになっていました。
残念ながら、WordPressのパーマリンク設定では数字の間にスラッシュを入れられません。そのため、上のような個別のタイトルに変更し、元のURLから301リダイレクトを設定することにしました。
参考にしたのはこちらの記事。
WordPressでURLを別のURLにリダイレクト（301リダイレクト・自動転送）する方法
まろろぐ記事内で紹介されている「Simple 301 Redirects」というプラグインを使っています。設定画面がこんな感じ。
今確認してみたら、Googleが新しいURLを拾ってくれているので、問題なく動いているようです。
記事内の画像をRetina対応に
2010年のiPhone 4から採用された「Retinaディスプレイ」。最近では、Apple製品のみならず、多くのAndroidスマートフォンやWindows PCでも高解像度化が進んでいます。
そこで、記事内の画像をRetina対応にするためにプラグインを導入しました。参考にしたのはこちらの記事。
Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグイン「WP Retina 2x」 | TechMemo
techmemo.bizもくじを表示
もくじの表示には「Table of Contents Plus」というプラグインを使用しています。設定について参考にしたのはこちらの記事。
App Storeリンクの表示
当ブログでは、よくMacアプリやiOSアプリを紹介します。これまでは、はてなブログの機能を使ってApp Storeへのリンクを表示していたのですが、WordPressへの移行に伴い、それができなくなってしまいました。
そこで「WP-Appbox」というプラグインを使うことにしました。詳しくはこちらの記事を参照してください。
http://tanocolle.com/app-link-creating-plug-ins-wp-appbox/
こんな感じのリンクが表示されます。
ブログカードを表示
この記事内でも使いまくっていますが、記事へのリンクを格好良く入れるためには「ブログカード」を使うのが手っ取り早いです。つまりこういうの。
グッバイはてな、ハローWordPress。 – starnote*
starrrrr.comはてなブログ時代には、はてな専用のものを使えていたのですが、WordPressではそのまま使うことができません。何かしら自分で用意する必要があります。
そこで参考にしたのがこちら。URLを貼り付けるだけでブログカードを自動生成してくれるプラグインです。
WordPressで外部リンクを自動でブログカード表示するプラグインがめっちゃ便利なので紹介する | YUTOLOG（ユトログ）
yutolog.comしかし、自分のブログの記事へのリンクを作ってみると、アイキャッチの部分に違う画像（本文の最初に出て来る画像）が表示されました。
調べてみると、どうやらFacebookでの記事の共有に使われる「OGPイメージ」というのを設定しないといけないようで、「All in One SEO Pack」というプラグインをインストールして対応させました。
参考にしたのはこちら。
【2018年最新】アイキャッチ画像がFacebookに表示されない時の対処法を激分かりやすく解説 | デジタルマーケティング専門家/デジタルマーケッター松原潤一のブログ
junichi-manga.comブログの左側と記事下にシェアボタンを表示
シェアボタンのプラグインはいろいろとありますが、シンプルなものを使いたかったので「AddToAny Share Buttons」というプラグインを使うことに。参考にしたのはこちらの記事です。
WordPress/SNSシェアプラグインどれがいい?上位5件を徹底比較
記事中にアドセンスを配置
当ブログでは「Googleアドセンス」を使って収益化しています。記事内のアドセンス広告は自動で配置することが基本になるわけですが、WordPressではプラグイン1つで解決してしまいます。
まとめ
同じ作業をもう一度やりたいかというと、できればやりたくないかな。特に1記事ずつアイキャッチとパーマリンクを確認していく作業が大変でした。
はてなブログからWordPressへの移行を考えている人のお役に立てれば幸いです。では！
