WordPressのテーマを、Affinger5に変更しました。
その時、ローカル環境（PC）にテスト用として作ったWordPressにかなり助けられました。
必要なのは、「Local」というアプリだけ。
WindowsでもMacでも利用できるのが魅力。
かなり昔に、ローカル環境の構築をやったことのある身としては
「こんなに簡単に、ローカルでもWordPress使えるようになるんだ……」
とびっくりしました。
備忘録として、本番環境のWordPressをローカル環境にそのままコピーする方法をまとめたいと思います。
アドレスバーを見ないとわからないくらい、本番環境と変わらないブログの姿を拝めますｗ
Localインストール・WordPressセットアップ
まずは、LocalをPCにインストールして、WordPressを使えるようにします。
やり方としては、以下のサイトに詳しくまとめられています。
- 「Local」のインストール手順
- ローカル環境の構築手順
こちらの2項目を見つつ作業すればOKです。
本番環境のWordPressを復元
手順としては以下の通りです。
- 本番環境のデータベースやプラグイン、テーマなどのファイルを、プラグインを使ってバックアップ
- データベースの中身を、エディタで一部書き換え
- ローカル環境に、同じバックアッププラグインをインストール
- プラグインを使って、バックアップファイルをアップロードして復元
本番環境のデータベースやファイルのバックアップ
プラグインのUpdraftPlusを使って説明します。
管理画面に行き、「今すぐバックアップ」ボタンをクリックします。
- バックアップにデータベースを含める
- バックアップ内のすべてのファイルを含める
以上2点は必ずチェックを入れます。
それ以外の項目についてはお好みでOKです。
「このバックアップをリモートストレージに送信」は、PCにバックアップファイルをダウンロードする手間が省けるのであらかじめ設定しておくと楽かもしれません。
Googleドライブの他に、Dropboxなども選べます。
準備ができたら、「今すぐバックアップ」ボタンをクリックします。
進捗バーが消えるまでしばらく待ちましょう。
完了したら、「データベース」「プラグイン」「テーマ」「アップロード」「その他」それぞれのボタンをクリックして、PCにファイルをダウンロードします。
「このバックアップをリモートストレージに送信」にチェックを入れていた場合は、すでに保存されていると思うので次の手順にすすんでOKです。
データベースの中身を一部書き換え
バックアップしたファイルは全部で5つあります。
※「xxxxxx」の部分は環境によって名前が変わります。
- xxxxxx-others.zip
- xxxxxx-plugins.zip
- xxxxxx-themes.zip
- xxxxxx-uploads.zip
- xxxxxx-db.gz
このうち、「xxxxxx-db.gz」の中身を少し書き換えます。
gz形式の圧縮ファイルなので、アプリなどを使って解凍します。
「xxxxxx-db」という名前のファイルになるので、テキストエディタを使って開きます。
Windowsなら、例えばメモ帳でも開くことはできますが「応答なし」の状態になる（フリーズする）可能性が高いので、サクラエディタのようなアプリを使うことをおすすめします。
こちらの記事の「2. バックアップファイルの編集」項目を参考に、
- 「siteurl」で検索して見つかるコードに書かれたURL
- 「home」で検索して見つかるコードに書かれたURL
以上のURLを、ローカル環境のURLに書き換えます。
「siteurl」の例
変更前：(1, 'siteurl', 'http://本番環境のドメイン', 'yes')
→変更後：(1, 'siteurl', 'http://ローカル環境のドメイン', 'yes')
ちょっとした注意
本番環境で、WordPressをサブディレクトリにインストールしている場合は少し注意が必要です。
おそらく、上のコードは以下のような表記になっているかと思います。
(1, 'siteurl', 'http://本番環境のドメイン/wp', 'yes')
ローカル環境で、トップディレクトリにWordPressをインストールした場合は「/wp」を削除してください。
「home」の例
変更前：(2, 'home', 'http://本番環境のドメイン', 'yes')
→変更後： (2, 'home', 'http://ローカル環境のドメイン', 'yes')
書き換えたら上書き保存をして、gz形式で再び圧縮します。
使用するアプリによっては、「xxxxxx.tar.gz」という拡張子になるかと思います。
その場合は、「.tar」部分を削除してください。
ローカル環境にバックアッププラグインをインストールして復元
UpdraftPlusプラグインをインストールしたら、「設定」→「UpdraftPlusバックアップ」とすすみます。
「バックアップファイルをアップロード」をクリックして、バックアップを取ったzipファイル4つ・編集して圧縮し直したgzファイル1つをアップロードします。
- xxxxxx-others.zip
- xxxxxx-plugins.zip
- xxxxxx-themes.zip
- xxxxxx-uploads.zip
- xxxxxx-db.gz
アップロードしたファイルがすべて「完了」になったら、「復元」ボタンを押します。
「復元するコンポーネントを選択」の5項目すべてにチェックを入れて、「次へ」ボタンをクリックします。
「すべてのテーブルを復元したくない場合は〜」の項目は基本的にそのままで大丈夫です。
一応「…」をクリックするとテーブルのリストが出てきますが、今回はまるまる復元なのでチェックは外さないようにします。
確認したら「復元」ボタンをクリックします。
作業が終わるまでしばらく待ちます。
「✔ Restore successful！」の文字が出たら無事に完了です。
「UpdraftPlus設定に戻る」をクリックします。
今後管理画面にログインするときは、本番環境と同じID・パスワードを使用します。
おまけ：インストールしたPC以外の環境で閲覧・作業したい場合
2台目のPCや、スマホ、タブレットで見たい！ という場合です。
Windows、Macの場合は「hosts」というファイルを編集します。
詳しい話を抜きにすると、インストールPCのIPアドレスとローカル環境のドメインを結びつけて、アクセスできるようにする設定用のファイルです。
PCのIPアドレス確認方法
Windowsで確認する方法
bingの検索結果のトップに出てくる「IP アドレスを確認する」の項目を参考にしてみてください。
Windows以外の環境でアクセスすると見れないみたいです。。
「Wi-Fi設定を開く」ボタンをクリックすると設定画面が起動するので、「ハードウェアのプロパティ」をクリックします。
説明文の通り、「IPv4アドレス」の欄を確認します。
なお、「イーサネット接続」というのは有線接続のことです。
Macで確認する方法
システム環境設定→「ネットワーク」とすすみます。
無線の場合は「Wi-Fi」、有線の場合は「Ethernet」をクリックし、状況の下にある「IPアドレス〜」の数値を確認します。
Windowsの設定方法
作業は、メモ帳でできます。
メモ帳アイコンを右クリック→その他→管理者として実行 を選びます。
※「管理者として実行」を選ばないと、ファイルの上書き保存ができません。
メニューのファイル→開くを選び、以下の場所にあるhostファイルを開きます。
※「すべてのファイル」に変更してから開いてください。
ファイルの場所
C:\Windows\System32\drivers\etc\hosts
一番下の行に、
「[WordPressを構築したPCのIPアドレス][半角スペース][ローカル環境のドメイン]」
を追記します。
例）123.456.7.89 testblog.local
Macの設定方法
「テキストエディット」などの、テキストエディタアプリを使う方法をご紹介します。
Finderのメニューから移動→フォルダへ移動をクリックし、以下のパスをコピペして「移動」をクリックします。
ファイルの場所
/private/etc/hosts
hostファイルを見つけたら、デスクトップなどわかりやすい場所にコピーします。
直接ファイルを開いて編集は、この方法ではできません。
そのため、一旦別の場所にコピーする必要があります。
ファイルを右クリックして、「このアプリケーションで開く」→好きなテキストエディタアプリを選択して開きます。
一番下の行に、
「[WordPressを構築したPCのIPアドレス][半角スペース][ローカル環境のドメイン]」
を追記します。
例）123.456.7.89 testblog.local
上書き保存したら、コピー元のhostファイルに置き換えます。
スマホ・タブレットの場合
hostファイルがあるらしいのですが、編集しなくてもできます。
現時点では、Windowsを使う方法しか確認できていません。
参考リンク：iPad、Android端末でhosts（ホスツ）の書き換えが必要になったら – コールセンター.biz（Webアーカイブ）
こちらの記事の「Windowsマシンからインターネット回線を分けてもらって解決」項目をそのまま実行します。
スタートメニューなどから設定画面を開き、「ネットワークとインターネット」にすすみます。
左のメニューの「モバイルホットスポット」をクリックしたら、「インターネット接続を他のデバイスと共有します」をオンにします。
下に表示されている「ネットワーク名」「ネットワークパスワード」を確認しながら、スマホやタブレットで接続しましょう。
まとめ
ちょっとドキドキするのはデータベースの中身を書き換えるくらいで、難しい作業は基本的にないと思います。
ただ、インストールしているプラグインによっては、本番環境のファイルパスをそのまま引き継いでしまったりなどのトラブルがあるかもしれません。
私の場合は、Pz-LinkCardプラグインのCSSパスやキャッシュ保存ディレクトリのパスがその状態だったので、プラグインを削除→改めてインストールで直りました。
新しいテーマを試したい・WordPress本体の更新があったり、使用しているテーマのアップグレードがあったので本番に反映する前に試したいなど、いろんな状況の時に役立つので、ぜひ構築してみてください。
