前回の記事『WP Migrationインポートできない問題をサクッと解決♪『WPvivid Backup Plugin』のAuto-MigrationでWordPressを転送してみよう。』で無料プラグイン『Transfer&Backup WordPress Site – WPvivid Backup Plugin(以降「WPvivid Backup Plugin」とします。)』の「Auto-Migration」機能(サイトのエクスポートファイルをダウンロード&アップロード(インポート)をしないで、WordPressを転送できる機能)を説明しましたが、非常に便利なもののLocal by Flywheelでは手動(manual)で利用するよう注意書き(英語)があったりして、正直モヤモヤした感が否めなかったりします。

そうなると『自分のパソコンにサーバーを立ててWordPressを作り込んでから、本番環境にデザインとデータを移行する』という作業フローに慣れているユーザーにとっては、少なからず不安が残る転送方法だと思います。
そのため、今回はトラブルを避けたい方にとっては無難な選択しとなる「手動(manual)」によるエクスポート&インポート作業(サイトの引っ越し作業)を解説いたします。

WPvivid Backup Plugin実行前のデザインを確認

まずはエクスポート&インポート作業を行う前のそれぞれの画面を確認しましょう。

ここでは仮に、WordPressのエクスポート&インポート作業を行う前の本番環境のサイト名を『リニューアル前』開発環境のサイト名を『リニューアル後』とします。

こちらが作業前の開発環境のWordPress『リニューアル後』。本番環境のWordPressをこのデザイン&データに変更します。
( こちらはエクスポート元になり、デザインは変わりません。)WPvivid Backup & Restore後のサイトデザイン

こちらが作業前の本番環境のWordPress『リニューアル前』。
( こちらがインポート先になり、デザインが変わります。)WPvivid Backup & Restore前のサイトデザイン

「本番環境のWordPressも『リニューアル後』と同じ見た目に変更する」という作業を、WPvivid Backup Pluginを使って簡単操作で行っていきます。

それではエクスポート&インポート作業の手順を説明いたします。
(インストールから説明しますので、最初の方は前回の記事と重複します。
既に開発環境と本番環境にWPvivid Backup Pluginのインストール&有効化を済ませている場合は『開発環境のバックアップを生成する。』から読み進めてください。)

インストールのその前に、、事前準備と注意点。

  • 開発環境で「301リダイレクト系プラグイン」「ファイアウォール&セキュリティ系プラグイン」「キャッシュ系プラグイン」を利用している場合は、一旦それらのプラグインを停止してください。

※自動(Auto-Migration)の転送方法は、前回の記事『WP Migrationインポートできない問題をサクッと解決♪『WPvivid Backup Plugin』のAuto-MigrationでWordPressを転送してみよう。』をご覧ください。

開発環境にWPvivid Backup Pluginをインストールし、有効化する。

※ここでは開発環境と本番環境の管理画面をわかりやすく見分けるため、開発環境の管理画面の配色を「ブルー」に、本番環境の管理画面の配色を「デフォルト」に設定しています。

開発環境の管理画面、左カラムのメニュー内『プラグイン』にカーソルを合わせ、「新規追加」をクリックします。開発環境の管理画面『プラグイン』の「新規追加」をクリック。

『プラグインを追加』ページの入力欄に「wpvivid」と入力します。『プラグインを追加』ページの入力欄に「wpvivid」と入力。

検索結果に「Transfer&Backup WordPress Site – WPvivid Backup Plugin」が表示されたら、「今すぐインストール」ボタンをクリックします。検索結果に「Transfer&Backup WordPress Site – WPvivid Backup Plugin」が表示されたら、「今すぐインストール」ボタンをクリック。

ボタンが「インストール中…」になります。
ボタンが「有効化」に変わるまで待ちます。ボタンが「インストール中...」になります。「有効化」に変わるまで待ちます。

ボタンが「有効化」に変わったら、「有効化」ボタンをクリックします。「有効化」ボタンをクリック。

本番環境にWPvivid Backup Pluginをインストールし、有効化する。

※後で開発環境の管理画面に戻ります。開発環境の管理画面は開いたままにしておき、別タブで本番環境の管理画面を開いてください。

本番環境の管理画面、左カラムのメニュー内『プラグイン』にカーソルを合わせ、「新規追加」をクリックします。本番環境の管理画面『プラグイン』の「新規追加」をクリック。

『プラグインを追加』ページの入力欄に「wpvivid」と入力します。『プラグインを追加』ページの入力欄に「wpvivid」と入力。

検索結果に「Transfer&Backup WordPress Site – WPvivid Backup Plugin」が表示されたら、「今すぐインストール」ボタンをクリックします。検索結果に「Transfer&Backup WordPress Site – WPvivid Backup Plugin」が表示されたら、「今すぐインストール」ボタンをクリック。

ボタンが「インストール中…」になります。
ボタンが「有効化」に変わるまで待ちます。ボタンが「インストール中...」になります。ボタンが「有効化」に変わるまで待ちます。

ボタンが「有効化」に変わったら、「有効化」ボタンをクリックします。ボタンが「有効化」に変わったら、「有効化」ボタンをクリック。

開発環境のバックアップを生成する。

開発環境の管理画面に戻ると『WPvivid Backup Plugin』ページに遷移していると思います。
(WPvivid Backup Pluginのインストールと有効化を事前に済ませていた場合は、開発環境の左カラムにあるメニュー『WPvivid Backup』をクリックしてください。)
このページにある「Backup Now」ボタンをクリックします。WPvivid Backup & Restoreの「Backup Now」ボタンをクリック

バックアップの処理が開始されると以下のようなステータスバーが現れます。
処理の完了を待ちます。WPvivid、Backup処理のステータス表示

バックアップの処理が完了すると画面上部に以下のようにメッセージ「1 backup tasks have been completed, Please switch to Log page to check the details.」が表示されます。WPvivid、Backup処理完了時のメッセージ表示

ページ下部「Backups」タブ内に、実行日時のバックアップデータが表示されます。WPvivid、Backupデータの表示

バックアップデータ内の「Download」をクリックします。WPvivid、Backupデータの「Download」をクリック

「Part01」の「Download」をクリックします。WPvivid、Backup内「Part01」の「Download」をクリック。

zipファイルを自分のパソコンに保存します。WPvivid、エクスポートファイルをダウンロード

本番環境にバックアップファイルをアップロードする。

本番環境の管理画面に戻ると、『WPvivid Backup Plugin』ページになっていると思います。
(WPvivid Backup Pluginのインストールと有効化を事前に済ませていた場合は、本番環境の左カラムにあるメニュー『WPvivid Backup』をクリックしてください。)
このページの「Upload」タブをクリックします。WPvivid「Upload」タブをクリック。

「ここにファイルをドロップまたはファイルを選択」という枠が表示されます。
ここに先ほど開発環境でダウンロードしたバックアップファイルをドラッグ&ドロップします。
(もちろん「ファイルを選択」を利用しても大丈夫です。)WPvivid、「Upload」タブ内にバックアップファイルをドラッグ&ドロップ

ファイルが読み込まれると「Upload」ボタンが表示されます。
「Upload」ボタンをクリックします。WPvivid、「Upload」タブ内の「Upload」ボタンをクリック。

アップロードが完了すると「Backups」タブに遷移され、「Backups」タブ内に「Uploaded Backup」としてアップロードしたデータが表示されます。WPvivid、「Backups」タブ内、「Uploadded Backup」のリスト表示

本番環境でリストア(復元)処理を行う。

「Backups」タブ内、「Uploaded Backup」の「Restore」をクリックします。WPvivid、「Backups」タブ内、「Restore」をクリック。

「Restore」タブが表示されます。
2つあるラジオボタン、上のラジオボタンにチェックを入れ、「Restore」ボタンをクリックします。
(上のラジオボタンにチェックを入れると、アップロードしたバックアップデータ内のドメイン&URLをインポート先のドメイン&URLに差し替えてくれます。)WPvivid、「Restore」タブ内、「Restore and replace original domain(URL) with ~」をクリック。

「Are you sure to continue?」というアラートが表示されます。
焦らず「OK」ボタンをクリックします。WPvivid、「Are you sure to continue?」というアラートが表示されたら「OK」ボタンをクリック。

リストア(復元)の処理がはじまると、以下のようにテキストエリア内で処理のステータスが表示されます。
処理の完了を待ちます。WPvivid、リストア(復元)の処理がはじまると、テキストエリア内で処理のステータスが表示されます。

リストア処理が終わるとログイン画面にリダイレクトされます。
この時のログイン情報は開発環境のアカウントに変わっています。
開発環境のログイン情報でログインしてください。
※もしリダイレクト処理が失敗したら、ゾッとする気持ちを隠して、ブラウザのURL「wp-login.php」以降を「wp-admin」に変えてみてください。WPvivid、リストア処理が終わるとログイン画面にリダイレクトされます。開発環境のログイン情報でログインしてください。

本番環境のフロントエンドの表示を確認する。

本番環境のフロントエンドを表示してリニューアル後のデザインに変わっていたら、エクスポート&インポート作業は成功です。
(デザインが変わっていなかったブラウザを更新してみてください。)
こちらがリストア(復元)作業完了後の本番環境のWordPress。WPvivid Backup & Restore後のサイトデザイン

まとめ

Auto-Migration機能(自動転送機能)と比べると、手動の方が無難なWordPressの引っ越し作業になるので、安心して使えるかと思います。
WPvivid Backup Pluginはまだ日本語化されていないため、一回で操作を覚えられないかも知れません。
覚えるのが面倒な場合は、取り急ぎ今回まとめた「手動」だけ覚えれば良いかと思います。

手動による転送方法、「Backup」と「Restore」という機能を使っていることから察した方もいるかと思いますが、「手動による転送ができるようになる」というのは「バックアップと復元ができるようになる」とニアリーイコールになります。
手動による転送方法をマスターすれば、WPvivid Backup Pluginの必要最低限の機能はマスターしたと言えるかも知れません。