法人・個人事業主向けの新サービスAmazonビジネス→【詳細はこちら】

WordPressのローカル環境なら【LOCAL by Flywheel】一択

第10回目の講座は「ローカル環境の構築」です。

ローカル環境とは?

公開サイトと同じ環境のものをPC内に作成することです。

※この記事内に出てくる「本番環境」とは、公開しているサイトを指します。

ローカル環境を作成しておくと

  • 「やべー画面が真っ白だ、どうしよう??」
  • 「あれ?CSSがバグった?急いで直さねば」
  • 「おーい、◯◯の配置めっちゃズレとるやんけ」
  • 「◯◯を▲▲にしたいけど、ミスったらどうしようガクブル×2」

といった悩みはなくなり、自由にいじくり回すことができます。

なぜならローカル環境で試行錯誤し、うまくいったものだけを公開サイトで使えば良いからです。

しかも今回使う「LOCAL by Flywheel」は無料で特別な知識もいらず、誰でも構築できるスグレものです。

では早速いきましょう。

LOCAL by Flywheelをダウンロード

LOCALダウンロードページへ

STEP1

LOCALトップページ

無料ダウンロード!」をクリック


STEP2

LOCALプラットフォーム選択
  • Mac」か「Windows」を選択
  • メールアドレス」を入力
  • 所有しているサイト数」を選択
  • 今それを入手!」をクリック

LOCALダウンロード中

500MB以上」あるので、ダウンロードまで結構時間かかります。


STEP3

LOCAL解凍

ダウンロード完了後、zipファイルを解凍→アプリをインストールしてください。


STEP4

MACダウンロード許可

確認が表示されたら「開く」をクリック


STEP5

LOCALヘルプ

こちらは任意です。LOCALでトラブルが起きた時に、サポートチームに自動でエラー報告を送るか?の設定です。

当サイトは「NO」にしています。


STEP6

LOCALアップロード

UPGRADE VIRTUALBOX」をクリック

MACパスワード入力

パスワード入力が表示されたら「PCのパスワードを入力

必要なアプリがインストールされるので少し待ちます。


LOCAL by Flywheelの設定

STEP1

LOCALサイト追加

+ CREATE A NEW SITE」をクリック


STEP2

LOCALサイト名入力

ローカル環境のサイト名を入力」→「CONTINUE」をクリック

補足

後で変更できるので適当でOK

ここで入力できるのは「半角英数字」のみ


STEP3

LOCALサーバーの設定

サーバーの設定ですが、デフォルトのままでOK。

CONTINUE」をクリック


STEP4

LOCALのIDとパスワード

ローカル環境のWordPressログインする時に使う「ID」と「パスワード」を入力

ADD SITE」をクリック

補足

ローカル環境用なので適当に決めていいですが、「ユーザーID」はWordPressの条件(制限)通りに入力しないと、後でログインできなくなります。

LOCAL by Flywheelでは制限なく入力できてしまうので注意

MACパスワード入力

パスワード入力が表示されたら「PCのパスワードを入力


STEP5

LOCAL by Flywheel設定

右側にある「ADMIN」をクリック

補足

この時、右上の「STOP SITE」をクリックして「START SITE」にすると、ログイン画面に移れませんので注意。

LOCAL by Flywheeスタートサイト

クリックで切り替えできます。


WordPressのローカル環境設定

STEP1

LOCALのWordPressログイン画面

先ほど決めたローカル環境用の

  • 「ユーザーID」
  • 「パスワード」

を入力してログイン


STEP2

ログイン後は英語表記になっているので、日本語に変更します。

WordPress日本語設定
手順
  1. Setting」の中の「General」をクリック
  2. Site Language(言語)」を「日本語」に変更(下にスクロール)
  3. Timezone(時間)」を「Tokyo」に変更(上にスクロール)
  4. Save Changes」をクリック

これでローカル環境の完成です。しかし、このままでは空っぽのWordPress環境ができただけなので、公開サイトと同じにするにはテーマやプラグインをインストールしたり、設定する必要があります。

これを手動でやるのは面倒なので、プラグインを使います。(ローカル環境のページは開いたままにしてください。)

本番環境でAll-in-One WP Migrationをインストール

All-in-One WP Migrationプラグイン
手順
  1. プラグインの「新規追加」をクリック
  2. All-in-One WP Migration」で検索
  3. 今すぐインストール」をクリック
  4. 有効化」をクリック

All-in-One WP Migrationから本番環境をエクスポート

All-in-One WP Migrationエクスポート
手順
  1. All-in-One WP Migrationの「エクスポート」をクリック
  2. 高度なオプションをクリックスパムコメントをエクスポートしない」にチェック投稿リビジョンをエクスポートしない」にチェック
  3. エクスポート先」をクリックファイル」をクリック
All-in-One WP Migrationダウンロードファイル

上記の表示が出たら「ダウンロード」をクリック

補足

この時ファイルサイズが「512MB」を超えてしまった場合は、エクスポートを2回に分けてください。(その方があとあと楽です。)

All-in-One WP Migrationエクスポート2

先ほどの「高度なオプション」で「メディアライブラリをエクスポートしない」にもチェックをつけて1回目のエクスポートをします。

続いて「メディアライブラリをエクスポートしない」だけチェックを外して2回目のエクスポートをします。

All-in-One WP Migrationエクスポート3

これで重いメディアファイルだけを別にしてエクスポートできます。

ちなみに、メディアファイルが重い原因は「メディア設定」が最適化されていない場合がほとんどです。

参考:WordPressのメディア設定は最適化しよう

ローカル環境に本番環境をインポート

先ほど同様にローカル環境にも「All-in-One WP Migration」をインストールして、有効化します。

All-in-One WP Migrationインポート
手順
  1. All-in-One WP Migrationの「インポート」をクリック
  2. インポート元」に先ほどのエクスポートファイルを貼り付ける
All-in-One WP Migrationインポート中

エクスポートファイルをインポートします。

All-in-One WP Migrationインポート開始

開始」をクリック

All-in-One WP Migrationインポート復元中

インポートしたデータの復元が開始します。この時ブラウザを閉じないでください。

All-in-One WP Migrationインポート完了

インポート完了です。

続いて「パーマリンク設定」をクリック

WordPress管理者ログイン画面

ログイン画面が表示されるので、本番環境の「ユーザーID」と「パスワード」を入力してください。

WordPressパーマリンク設定確認

パーマリンク設定が「投稿名」になっているのを確認したら「変更を保存」をクリック

サイトを表示して再現できていれば完了です。

ローカル環境完成

All-in-One WP Migrationのアップロードサイズを512MBにする

エクスポート時に「512MB」を超えるようなら……といったのは、無料版では512MBまでしかアップロードできないためです。

All-in-One WP Migrationアップロードサイズ

ローカル環境のデフォルトだと「300MB」なのでファイルサイズが「301〜512MB以下」の場合は、専用プラグインをインストールすることで「512MB」まであげることができます。

All-in-One WP Migration専用プラグインページへ

All-in-One WP Migration専用プラグイン

ダウンロード」をクリック

WordPressプラグインをアップロード WordPressプラグイン有効化
手順
  1. プラグインの「新規追加」をクリック
  2. プラグインのアップロード」をクリック
  3. ファイルを選択」から、ダウンロードしたプラグインを選択
  4. 今すぐインストール」をクリック
  5. プラグインを有効化」をクリック
All-in-One WP Migrationアップロードサイズアップ

アップロードサイズが「512MB」になっていれば完了です。

エクスポートを分割しても512MBを超えてしまう場合

個人でイジる分には本番環境と全く同じにする必要はありませんが、どうしてもサイトを完全再現したいというのであれば、有料プラグインで楽に行うか、面倒ですが手動で行うしかありません。

手動で行うならこちらのサイトが参考になります

LOCAL by flywheelで構築したローカル環境に本番サイトをインポートする方法

有料プラグインはこちら

All-in-One WP Migration専用プラグインページへ

69ドル支払うことでサイズ無制限に変更できます。

All-in-One WP Migrationプレミアムプラン

LOCAL by Flywheelで覚えておきたい操作

ローカル環境が完成したら、いくつかコピーしておくと便利です。

例えば、コードをイジってバグった時に慣れないうちは原因を探すのにも一苦労です。そういった場合は、そのローカル環境は消して、あらかじめコピーしておいた方で再チャレンジみたいに使った方が楽かなと。

LOCAL by Flywheelクローン
  • 「サイト名の上で右クリック」
  • 「clone」をクリック
LOCAL by Flywheelクローンサイト名

複数のサイトを管理している方はオリジナルのコピーだとわかるようにしましょう。

サイト名を入力して「CLONE SITE」をクリック

3つくらい作っておけば安心ですね。


ローカル環境の消し方

LOCAL by Flywheelデリート

サイト名の上で右クリック→「Delete」をクリック

※複数選択できます。

LOCAL by Flywheelデリート確認

DELETE SITE」をクリック

個人サイトであればとりあえずこの2つを覚えておけばいいかと思います。

WordPress講座終了【まとめ】

こんな感じで、小規模サイトのローカル環境なら簡単に作れてしまいます。

特に初心者さんこそ、ローカル環境で失敗を重ねることがスキルアップにつながると思うので、ぜひいろいろチャレンジしてみてください。

カゲサイーカゲオカゲオ

全10回に及ぶWordPress講座はこれで終了です。全部みてくれた方は本当にお疲れさまでした。

とりあえずこれくらい覚えておけば、個人がWordPressの設定で困ることはないはずです。

次回は、WordPressのテクニック講座を予定しているのでお楽しみに〜。ではでは

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です