人生を豊かにする+ONE

「人生を豊かにする+ONE」アウトドア系インドア派のTAKAが、調べたことや実際役に立ったことをお知らせしているブログ。

はてなブログからワードプレスに引っ越す日記 ~2.テストブログにデータを移動する~

スポンサーリンク

f:id:takapiece:20200422173723p:plain

この度、はてなブログProからワードプレスに引っ越ことにしました。

前回の記事 ↓

www.takapiece.com

 

今回は

「ワードプレスのテストブログを作って、そこにはてなブログのデータを移動」します。

いきなり本番のドメインで引っ越しをすると、見た目を整える間しばらくサイトが見られなくなるので、ある程度整えてから完全に引っ越します。

※面倒な人はテストサイト作らなくていいです。先にドメインの移動をしましょう。参考記事→

www.takapiece.com

 

 

まずは準備として、サーバーにワードプレスをインストールします。

レンタルサーバーはさくらサーバーです。 

※色々とPCにダウンロードするので、ダウンロードがどこにされているのか確認しながら進みましょう。

サーバーにワードプレスを入れてテストブログを作る

1.サーバーにワードプレスをインストールする

・さくらサーバーでの作業

・コントロールパネルの「WordPressのインストール」を選択

f:id:takapiece:20200422155859p:plain

 

・ドメインを契約したらもらえるドメイン(~.sakura.ne.jp)にして

(テストしない場合、独自ドメインを入れる)

 

f:id:takapiece:20200422160548p:plain

「ドキュメントルートを変更せずにサブディレクトリにインストールする」

を選んでに名前を「wp」にしました。

 

・ワードプレスをインストールするには「データベース」が必要なので、作ります。

 

f:id:takapiece:20200422160939p:plain

  • 名前
  • パスワード

を決めて(※パスワードは控えておく!)

ライセンスに同意するにチェック。

作成するボタンを押す。

 

 

・ようこそ画面で必要事項を入力

f:id:takapiece:20200422162855p:plain

  • サイトのタイトル
  • ユーザー名
  • パスワード

※ユーザー名とパスワードは控えておく

  • メールアドレス
  • テストブログなので、インデックスしないようにチェックする

(テストしない場合、「検索エンジンでの表示」はそのままで)

最後に「WordPressをインストール」を押す

 

・「ログイン」を押す 

f:id:takapiece:20200422163633p:plain

 

 

ログイン画面をブックマークしておくと便利です。

f:id:takapiece:20200422163824p:plain

※ログイン画面を見失った時

・コントロールパネル>>WEBサイト/データ>>インストール済み一覧

f:id:takapiece:20200422162326p:plain

>>「WordPress」の設置先URLをクリック

f:id:takapiece:20200422162448p:plain

 表示されたアドレスの最後に「/wp-login」をつけましょう。

 https://~/wp/wp-login

2.ワードプレスにテーマをインストールする

次にワードプレスにテーマを設定します。

今回はCocoonを使います。

https://wp-cocoon.com/

無料のテーマですが、使い勝手がいいです。

ぼくは会社のサイトをCocoonで作りました。

upnest.co.jp

1.テーマをダウンロードする

https://wp-cocoon.com/downloads/

上記のアドレスで、親テーマと子テーマをPCにダウンロードします。

子テーマをカスタマイズして使うと、親テーマを更新してもカスタマイズが消えたりしません。

2.テーマをインストールする

・ワードプレスの管理画面での作業

https://wp-cocoon.com/theme-install/

※上記の推奨環境にあるサーバーのPHPバージョンの確認は

コントロールパネル>>スクリプト設定>>言語のバージョン設定から確認できます。

ぼくのおすすめしているサーバーならどれもそのままでOK

・ダウンロードしたテーマをインストールします。

外観>>テーマ

f:id:takapiece:20200422164732p:plain

>>新規追加

f:id:takapiece:20200422164821p:plain

f:id:takapiece:20200422165209p:plain

 

「ファイルを選択」で先に親テーマを選択。

(ファイルの場所はデフォルトならPCの「ダウンロード」の中)

  • cocoon-master
  • cocoon-child-master

をインストールして

Cocoon Childを有効化します。

f:id:takapiece:20200422172537p:plain

※「辿ったリンクは期限が切れています」と表示された時の対処法

www.takapiece.com

 

3.ワードプレスにはてなブログのデータを入れる

データを入れる前に、さっそくサイトを表示しました

 

f:id:takapiece:20200422173305p:plain

なんとも味気ないですね~。

1.はてなブログからデータをダウンロードする

はてなブログ管理画面から

・設定>>エクスポート

f:id:takapiece:20200422174559p:plain

「記事のバックアップと製本サービス」をクリック

f:id:takapiece:20200422174633p:plain

記事数が少ないとあっという間に準備が整います。

f:id:takapiece:20200422174738p:plain

ダウンロードします。

2.ワードプレスにデータを移行

パーマリンクの設定

データを移行する前に、パーマリンクの設定だけはしておきます。

ワードプレス管理画面から

設定>>パーマリンク設定


f:id:takapiece:20200422175132p:plain

はてなブログで使っていた設定にします。

はてなの標準は「年・月・日・時・分・秒」

f:id:takapiece:20200422180200p:plain

なので

f:id:takapiece:20200422175821p:plain

「利用可能なタグ」を左から6個順番に押します。

ぼくは毎回ブログのURLに名前を付けているので「カスタム構造」の「%postname%」にしました。

f:id:takapiece:20200422180817p:plain

ブログデータのインポート

ワードプレス管理画面から

ツール>>インポート

f:id:takapiece:20200422181225p:plain

「Movable Type と TypePad」を「今すぐインストール」します。

f:id:takapiece:20200422181242p:plain

次に「インポーターを実行」

f:id:takapiece:20200422181625p:plain

「ファイルを選択」してインポートします。

f:id:takapiece:20200422181616p:plain

ユーザー名は「はてな」で使っていたものではなく、ワードプレスのものにします。

f:id:takapiece:20200422181929p:plain

f:id:takapiece:20200422181948p:plain

 

はいはい、見てみますよ~~。

f:id:takapiece:20200422182130p:plain

おお!

なんだかこのまま行けそうな感じですね。

あとがき

次はワードプレステーマのCocoonのカスタマイズを行います。

テストブログの子テーマを書き換えて、

本番ブログの子テーマにコピペすればOK。

なので、必要最低限のカスタマイズにします。

 

補足:画像の入れ替え

はてなの記事のエクスポート画面にあるように

f:id:takapiece:20200422190339p:plain

エクスポートしたデータは「テキストデータ」のみです。

画像が表示されているのは「はてなフォトライフ」に入っている画像を表示しています。

この問題の解決方法は

  • そのまま「はてなフォトライフ」を使う
  • 元画像が残っていれば、ワードプレスにアップロードして入れ替える
  • 元画像がなければ、はてなブログからダウンロードして貼り付けます。

です。

ぼくの場合、画像は「Googleフォトの貼り付け」を使用していたので、画像の移動は必要ありません。

このブログはゆくゆくワードプレスに移行しようと思っていたので、「Googleフォトの貼り付け」を使っていました。

 

※kawaharaさんが、一括で画像を移動する方法を解説されています。(慣れている人向け)

はてなブログからWordPressに画像を移行させる最も簡単な方法|ブログ荘