第10回目の講座は「ローカル環境の構築」です。
公開サイトと同じ環境のものをPC内に作成することです。
※この記事内に出てくる「本番環境」とは、公開しているサイトを指します。
ローカル環境を作成しておくと
- 「やべー画面が真っ白だ、どうしよう？？」
- 「あれ？CSSがバグった？急いで直さねば」
- 「おーい、◯◯の配置めっちゃズレとるやんけ」
- 「◯◯を▲▲にしたいけど、ミスったらどうしようガクブル×2」
といった悩みはなくなり、自由にいじくり回すことができます。
なぜならローカル環境で試行錯誤し、うまくいったものだけを公開サイトで使えば良いからです。
しかも今回使う「LOCAL by Flywheel」は無料で特別な知識もいらず、誰でも構築できるスグレものです。
では早速いきましょう。
目次・読みたい所へタップできます
LOCAL by Flywheelをダウンロード
STEP1
「無料ダウンロード!」をクリック
STEP2
- 「Mac」か「Windows」を選択
- ｜
- 「メールアドレス」を入力
- ｜
- 「所有しているサイト数」を選択
- ｜
- 「今それを入手!」をクリック
「500MB以上」あるので、ダウンロードまで結構時間かかります。
STEP3
ダウンロード完了後、zipファイルを解凍→アプリをインストールしてください。
STEP4
確認が表示されたら「開く」をクリック
STEP5
こちらは任意です。LOCALでトラブルが起きた時に、サポートチームに自動でエラー報告を送るか？の設定です。
当サイトは「NO」にしています。
STEP6
「UPGRADE VIRTUALBOX」をクリック
パスワード入力が表示されたら「PCのパスワードを入力」
必要なアプリがインストールされるので少し待ちます。
LOCAL by Flywheelの設定
STEP1
「＋ CREATE A NEW SITE」をクリック
STEP2
「ローカル環境のサイト名を入力」→「CONTINUE」をクリック
後で変更できるので適当でOK
ここで入力できるのは「半角英数字」のみ
STEP3
サーバーの設定ですが、デフォルトのままでOK。
「CONTINUE」をクリック
STEP4
ローカル環境のWordPressログインする時に使う「ID」と「パスワード」を入力
「ADD SITE」をクリック
ローカル環境用なので適当に決めていいですが、「ユーザーID」はWordPressの条件(制限)通りに入力しないと、後でログインできなくなります。
LOCAL by Flywheelでは制限なく入力できてしまうので注意。
パスワード入力が表示されたら「PCのパスワードを入力」
STEP5
右側にある「ADMIN」をクリック
この時、右上の「STOP SITE」をクリックして「START SITE」にすると、ログイン画面に移れませんので注意。
クリックで切り替えできます。
WordPressのローカル環境設定
STEP1
先ほど決めたローカル環境用の
- 「ユーザーID」
- 「パスワード」
を入力してログイン
STEP2
ログイン後は英語表記になっているので、日本語に変更します。
- 「Setting」の中の「General」をクリック
- 「Site Language(言語)」を「日本語」に変更(下にスクロール)
- 「Timezone(時間)」を「Tokyo」に変更(上にスクロール)
- 「Save Changes」をクリック
これでローカル環境の完成です。しかし、このままでは空っぽのWordPress環境ができただけなので、公開サイトと同じにするにはテーマやプラグインをインストールしたり、設定する必要があります。
これを手動でやるのは面倒なので、プラグインを使います。(ローカル環境のページは開いたままにしてください。)
本番環境でAll-in-One WP Migrationをインストール
- プラグインの「新規追加」をクリック
- 「All-in-One WP Migration」で検索
- 「今すぐインストール」をクリック
- 「有効化」をクリック
All-in-One WP Migrationから本番環境をエクスポート
- All-in-One WP Migrationの「エクスポート」をクリック
- 「高度なオプションをクリック」「スパムコメントをエクスポートしない」にチェック「投稿リビジョンをエクスポートしない」にチェック
- 「エクスポート先」をクリック「ファイル」をクリック
上記の表示が出たら「ダウンロード」をクリック
この時ファイルサイズが「512MB」を超えてしまった場合は、エクスポートを2回に分けてください。(その方があとあと楽です。)
先ほどの「高度なオプション」で「メディアライブラリをエクスポートしない」にもチェックをつけて1回目のエクスポートをします。
続いて「メディアライブラリをエクスポートしない」だけチェックを外して2回目のエクスポートをします。
これで重いメディアファイルだけを別にしてエクスポートできます。
ちなみに、メディアファイルが重い原因は「メディア設定」が最適化されていない場合がほとんどです。
ローカル環境に本番環境をインポート
先ほど同様にローカル環境にも「All-in-One WP Migration」をインストールして、有効化します。
- All-in-One WP Migrationの「インポート」をクリック
- 「インポート元」に先ほどのエクスポートファイルを貼り付ける
エクスポートファイルをインポートします。
「開始」をクリック
インポートしたデータの復元が開始します。この時ブラウザを閉じないでください。
インポート完了です。
続いて「パーマリンク設定」をクリック
ログイン画面が表示されるので、本番環境の「ユーザーID」と「パスワード」を入力してください。
パーマリンク設定が「投稿名」になっているのを確認したら「変更を保存」をクリック
サイトを表示して再現できていれば完了です。
All-in-One WP Migrationのアップロードサイズを512MBにする
エクスポート時に「512MB」を超えるようなら……といったのは、無料版では512MBまでしかアップロードできないためです。
ローカル環境のデフォルトだと「300MB」なのでファイルサイズが「301〜512MB以下」の場合は、専用プラグインをインストールすることで「512MB」まであげることができます。
All-in-One WP Migration専用プラグインページへ
「ダウンロード」をクリック
- プラグインの「新規追加」をクリック
- 「プラグインのアップロード」をクリック
- 「ファイルを選択」から、ダウンロードしたプラグインを選択
- 「今すぐインストール」をクリック
- 「プラグインを有効化」をクリック
アップロードサイズが「512MB」になっていれば完了です。
エクスポートを分割しても512MBを超えてしまう場合
個人でイジる分には本番環境と全く同じにする必要はありませんが、どうしてもサイトを完全再現したいというのであれば、有料プラグインで楽に行うか、面倒ですが手動で行うしかありません。
LOCAL by flywheelで構築したローカル環境に本番サイトをインポートする方法
All-in-One WP Migration専用プラグインページへ
69ドル支払うことでサイズ無制限に変更できます。
LOCAL by Flywheelで覚えておきたい操作
ローカル環境が完成したら、いくつかコピーしておくと便利です。
例えば、コードをイジってバグった時に慣れないうちは原因を探すのにも一苦労です。そういった場合は、そのローカル環境は消して、あらかじめコピーしておいた方で再チャレンジみたいに使った方が楽かなと。
- 「サイト名の上で右クリック」
- 「clone」をクリック
複数のサイトを管理している方はオリジナルのコピーだとわかるようにしましょう。
サイト名を入力して「CLONE SITE」をクリック
3つくらい作っておけば安心ですね。
ローカル環境の消し方
サイト名の上で右クリック→「Delete」をクリック
※複数選択できます。
「DELETE SITE」をクリック
個人サイトであればとりあえずこの2つを覚えておけばいいかと思います。
WordPress講座終了【まとめ】
こんな感じで、小規模サイトのローカル環境なら簡単に作れてしまいます。
特に初心者さんこそ、ローカル環境で失敗を重ねることがスキルアップにつながると思うので、ぜひいろいろチャレンジしてみてください。
全10回に及ぶWordPress講座はこれで終了です。全部みてくれた方は本当にお疲れさまでした。
とりあえずこれくらい覚えておけば、個人がWordPressの設定で困ることはないはずです。
次回は、WordPressのテクニック講座を予定しているのでお楽しみに〜。ではでは
※日本語が含まれていないコメントは投稿できません。（スパム対策）