WordPressサイトを自分のパソコン内(ローカル環境)で再現する方法 〜UpdraftPlus WordPress Backup Plugin 編〜

 

サイトを運営していて、WordPressサイトを直接編集するのではなく、自分のパソコン内で編集を行うことのメリットをご存知ですか?

自分のパソコン内(ローカル環境)で行うことのメリット
  • 自分のパソコン内での操作のため、本番サイトに影響がない
  • 自分のパソコン内だけで完結するため、他者の目を気にせず好きなようにカスタマイズできる
  • 自分のパソコン内でテスト作成した後に、本番サイトを編集することができ、サイトが壊れてしまうなどのリスクを回避することができる

自分のパソコン内(ローカル環境)で作業をすることにより、今まで以上にWordPressのカスタマイズを楽しんでいただければと思います。

 

ということで、今回ご紹介するのは、WordPressサイトをローカル環境(自分のパソコン内)に再現する方法です。

 

▼自分のパソコン内に当サイトを再現したものが下記になります▼
01w.devサイト

作業が多く少し大変ですが、挑戦してみましょう!!!

バックアップ作成

まずはサイトのバックアップを作成します。
色々なバックアップの手法がありますが、この記事では「UpdraftPlus WordPress Backup Plugin」プラグインを使用した方法で説明しています。

「UpdraftPlus WordPress Backup Plugin」をインストール・有効化

  1. WordPress管理画面」より「プラグイン」を開き「新規追加」を選択します
  2. プラグインの検索より「UpdraftPlus WordPress Backup Plugin」を検索します。
    写真:プラグインを追加画面でプラグインを検索
  3. プラグインをインストールし、「有効化」します。
    写真:「UpdraftPlus Backup」プラグインのインストール・有効化
  4. UpdraftPlus settings」の画面が表示されますが「×」で閉じて問題ありません。
    写真:「UpdraftPlus settings」の画面

「UpdraftPlus WordPress Backup Plugin」にてバックアップ作成

  1. 「設定」UpdraftPlus Backups」を開きます。
    写真:WordPress管理画面→UpdraftPlus Backupsを選択
  2. 画面を表示したらすぐ目に入る「今すぐバックアップ」ボタンを押します。
    写真:「UpdraftPlus Backup」の「今すぐバックアップ」を選択
  3. UpdraftPlus – Perform a backup」画面が表示されますが何も変更を加えずに「今すぐバックアップ」を選択します。
    写真:「UpdraftPlus - Perform a backup」画面
  4. バックアップが成功すると「バックアップの実行が終了しました」と表示されます。
    写真:バックアップの実行が終了しました

バックアップデータを自分のパソコンにダウンロード

      1. 「バックアップ済み」項目の「[データベース][プラグイン][テーマ][アップロード][その他]」を全て選択します。
        写真:バックアプ済みデータの[データベース][プラグイン][テーマ][アップロード][その他]]を選択
    1. 各々「お使いのコンピュータにダウンロード」を選択し、ダウンロードします。
      写真:「お使いのコンピュータにダウンロード」を選択する画面
    2. 通常であれば、「ダウンロードフォルダ」に保存されます。
      写真:ダウンロードされた圧縮ファイル

後ほど使用するため、一旦そのままにしておきます。

WordPress ダウンロード

    1. 下記よりWordPressサイトへアクセスします。
      WordPress ダウンロード
    2. サイト内にある「WordPress X.X.X をダウンロード」よりダウンロード行います。
      WordPressダウンロード画面
    3. ダウンロード後、解凍したフォルダを「ダウンロードフォルダ」から「デスクトップ」へ移動させておきます。
      ダウンロードフォルダからデスクトップへフォルダ移動

MAMPを利用してローカルにて環境構築

MAMPのダウンロード

  1. 下記よりMAMPのサイトへアクセスします。
    MAMP ダウンロード
  2. サイト内にある「Free Download」よりダウンロードを行います。
    MAMPのトップページ
  3. 該当のOSを選択します。今回はMac環境を選択しています。
    MAMPダウンロードページ MAC用(左)・Windows用(右)
  4. 「NAMO DNS App」が表示されますが、無視して構いません。
    NAMO DNS Appのポップアップ

MAMPのインストール

  1. ダウンロードした「MAMP_MAMP_PRO_X.X.pkg」を開きます。
    ブラウザの左下に表示されるダウンロード画面
  2. 「ようこそMAMP & MAMP PRO X.Xインストーラへ」画面が表示されますので、「続ける」を選択します。
    MAMPの「はじめに」画面の「続ける」を選択
  3. 「大切な情報」が表示されますので、「続ける」を選択します。
    MAMPの「大切な情報」画面の「続ける」を選択
  4. 「使用許諾契約」が表示されますので、「続ける」を選択します。MAMPの「使用許諾契約」画面の「続ける」を選択
  5. 「このソフトウェアのインストールを続けるには、ソフトウェア使用許諾契約の条件に同意するk必要があります。」と聞かれるので「同意する」を選択します。
    MAMPの「使用許諾契約」確認画面「同意する」を選択
  6. 「”Macintosh HD”に標準インストール」が表示されますので、「インストール」を選択します。
    MAMPの「インストールの種類」画面の「インストール」を選択
  7. 「インストーラーが新しいソフトウェアをインストールしようとしています。」と表示が出ますので、「ユーザ名」は自動で入りますので、「パスワード」にはMacへのログインパスワードを入力し、「ソフトウェアをインストール」を選択します。
    MAMPの「インストールの許可」画面にて「ユーザー名」「パスワード」を入力後、「ソフトウェアをインストール」を選択
  8. インストールがはじまります。
    MAMPの「インストール」画面
  9. 「インストールが完了しました。」と表示されたら「閉じる」を選択します。
    MAMPの「概要」画面に「インストールが完了しました。」と表示されるので「閉じる」を選択
  10. 「”MAMP & MAMP PRO X.X”のインストーラをゴミ箱に入れますか?」と聞かれますので「ゴミ箱に入れる」を選択して問題ありません。
    「"MAMP & MAMP PRO X.X"のインストーラをゴミ箱に入れますか?」画面にて「ゴミ箱に入れる」を選択
  11. アプリ一覧に追加されたことが確認できます。
    ※「MAMP」を使用するため「MAMP PRO」は削除いただいても構いません。
    「MAMP」と「MAMP PRO」のアイコン

MAMPの設定

  1. MAMPを開きます。
    ※開くと下記の画面が表示されますが「×」で閉じて問題ありません。
    MAMPを開いた際の画面
  2. メニューバーより「MAMPpreferences」を開きます。
    MAMPより「preferences」を開く
  3. Web Server」タブを開き、「Select」ボタンより、デスクトップに置いている「wordpress」フォルダを選択。最後に「OK」ボタンを押します。
    「Web Server」の「Select」よりフォルダを選択
  4. Start Servers」を押します。
    一番右側にある「Start Servers」を押します。
  5. パソコンによっては「ユーザ名」と「パスワード」の入力が求められますので、お使いのパソコンで設定している「ユーザー名」「パスワード」を入力してください。
    「ユーザー名」「パスワード」を入力します。

MAMPにてデータベースの作成

  1. MAMPの操作画面が開きます。
    MAMPの操作画面
  2. TOOLS」より「PHPMYADMIN」を開きます。
    MAMPの「TOOLS」より「PHPMYADMIN」を開く
  3. 左のメニューより「New」を選択します。
    左側にある一覧の「New」を選択
  4. Database  name」に作成するデータベースの名前を入力します。(半角英数字で入力)
    今回は「wordpress」という名前で作成していきます。
    データベース名を入力
  5. utf8_general_ci」を選択し、「Create」ボタンを押します。
    「utf8_general_ci」を選択し、「Create」を選択
  6. データベースが作成されましたので、「PHPMYADMIN」ページは閉じて構いません。

WordPressの初期設定

  1. MAMPの操作画面を開きます。
  2. MY WEBSITE」を選択します。
    MAMPの「MY WEBSITE」を開く
  3. WordPressの初期設定画面が開きますので、「さぁ、始めましょう!」を選択します。
    WordPressの「さぁ、始めましょう!」ボタンを選択します。
  4. 「データベース名」には、先ほど作成したデータベースの名前を入力します。(今回であれば「wordpress」と入力します。)
    「ユーザー名」「パスワード」については、「root」「root」と入力し、最後に「送信」ボタンを押します。
    ※「データベースのホスト名」と「テーブル接頭辞」については、そのままで問題ありません。データベース情報の入力:上から順にデータベース名「先ほど登録したデータベース名」、ユーザー名「root」、パスワード「root」、データベースのホスト名「そのまま(localhost)」、データ接頭辞「そのまま(wp_)」最後に「送信」を選択
  5. 「インストール実行」ボタンを押します。
    WordPressの「インストール実行」ボタン
  6. WordPressの基本情報を適宜入力します。(後から編集も可能です)
    最後に「WordPressをインストール」ボタンを押します。
    ※検索エンジンでの表示については、自分のパソコン内(ローカル環境)なので、チェックを入れても入れなくても問題ありません。
    WordPressの基本情報を入力。上から順に「サイトのタイトル」、「ユーザー名」、「パスワード」、「パスワード」「メールアドレス」、「検索エンジンでの表示」、最後に「WordPressをインストール」を選択
  7. 「ログイン」ボタンを押します。
    WordPressの登録が「成功しました!」の画面。「ログイン」を選択
  8. WordPressにログインできるようになりました!

「UpdraftPlus WordPress Backup Plugin」にてアップロード

続いては、バックアップデータを「UpdraftPlus WordPress Backup Plugin」を利用してローカルへアップロードします。
手順としては、UpdraftPlus WordPress Backup Plugin」をインストール・有効化」と同様になります。

「UpdraftPlus WordPress Backup Plugin」をインストール・有効化

  1. WordPress管理画面」「プラグイン」を開き「新規追加」を選択します
  2. プラグインの検索より「UpdraftPlus WordPress Backup Plugin」を検索します。
    写真:プラグインを追加画面でプラグインを検索
  3. プラグインをインストールし、「有効化」します。
    写真:「UpdraftPlus Backup」プラグインのインストール・有効化
  4. UpdraftPlus settings」の画面が表示されますが「×」で閉じて問題ありません。
    写真:「UpdraftPlus settings」の画面

「UpdraftPlus WordPress Backup Plugin」にてアップロード

  1. 「設定」UpdraftPlus Backups」を開きます。
    写真:WordPress管理画面→UpdraftPlus Backupsを選択
  2. UpdraftPlus Backups」画面の下にある「バックアップ済み」項目のバックアップファイルをアップロード」を選択します。
  3. 「バックアップファイルをドロップ」or「ファイルを選択」がありますので、今回は「ファイルを選択」ボタンを押します。
  4. バックアップのファイルを全て選択します。(ファイル形式は「zip」のままで行います。)
  5. 全てのアップロードが完了したら、「復元」を押します。
  6. UpdraftPlus – バックアップを復元」が表示されますので、全ての項目にチェックを入れたのちに「復元」ボタンを押します。
  7. また「UpdraftPlus – バックアップを復元」が表示されますので、「復元」ボタンを押します。

データベースの調整

  1. MAMPの設定画面を開きます。
  2. TOOLS」より「PHPMYADMIN」を開きます。
  3. 先ほど作成したデータベースを開きます。
  4. wp_options」を選択します。
  5. option_name」の「siteurl」と「home」を変更していきます。
  6. Edit」を選択し編集画面を開きます。
  7. option_value」の項目に本番サイトのURLが表示されていますので、「http://localhost」へ変更します。
  8. 右下にある「Go」ボタンを押します。
  9. option_name」の「home」にも同様の処理を行います。

完成

全ての作業を終えたら、ブラウザで「http://localhost」と入力すると、サイトが表示されます!!!

 

\  お疲れ様でした!!!/

 

なお、MAMPが起動していることにより、サイトが表示されていますので、MAMPを起動していない場合や下記の「Start Servers」を押していない状態ではサイトが表示されませんので、ご注意ください。