Programming

【神】5分で完了!Local by FlywheelでWordPressのローカル環境を構築

Local by Flywheel WordPress ローカル環境
WordPressのローカル開発環境を構築したい人
WordPressのローカル開発環境を構築したい人
WordPressのローカル開発環境を構築したいな…。

最近、Local by Flywheelって聞くけど、いったいなんだろう…。

この記事では、上記のような悩みを解決していきます。

 

この記事の想定読者

  • WordPressのローカル開発環境を構築したい人
  • Local by Flywheelが気になる人
  • MAMPの環境構築で挫折した人

想定している読者は、上記のとおりです。

 

この記事では、「Local by FlywheelでWordPressのローカル環境を構築する方法」について書いていきます。

 

環境構築と聞くと、少し身構えてしまいますよね。

でも、この記事を読み終えれば、あっという間にWordpressのローカル環境を構築できるようになり、すぐに開発を始められます。

 

環境構築は、あくまでも準備ですからね。

Local by Flywheelを使って、サクッと済ませてしましましょう!

 

Local by Flywheelとは?【神すぎる】

 

Local by Flywheelは、Windows/Mac問わずにWordPressのローカル開発環境を、カンタンに構築できるツールです。

 

Local by Flywheelが神な理由

  • 数クリックで環境を構築できる
  • 複数のサイトを作成できる
  • 無料

主に上記の理由で、Local by Flywheelは神だと感じております…。

 

このあと、Local by Flywheelの導入手順を紹介しますが、想像以上にカンタンです。

 

WordPressの練習をしたくて、MAMPで環境構築するも挫折した…。

 

上記のような方には、ぴったりのツールです。無料で使えるし、文句なしと言った感じ。

 

Local by FlywheelでWordPressのローカル環境を構築【手順を紹介】

 

Local by Flywheelを導入からWordPressの環境構築は、下記の手順でおこないます。

  1. Local by Flywheelのインストーラーをダウンロード
  2. Local by Flywheelをインストール
  3. WordPressの設定

たった3つの手順で、さらに5分くらいで完了できるので、マジで神です。

 

STEP1 : Local by Flywheelのインストーラーをダウンロード

 

まずは、Local by Flywheelの公式ページから、インストーラーをダウンロードしてきます。

外部ページ >> Local by Flywheel | Local WordPress development made simple

 

すると、下の画像のようなページにアクセスするので、「FREE DOWNLOAD」からインストーラーをダウンロードしましょう。

local by flywheel 1

 

次に、自身で使っているOSを選択します。僕の場合は、Mac OSなので、Macを選択です。

local by flywheel 2

 

さらに、必要な情報を入力していくのですが、メールアドレスだけあればOKです。

名前と電話番号はスキップして、メールアドレスだけ入力しましょう。

 

完了したら、「GET IT NOW」です。

local by flywheel 3

 

おそらく、インストーラーのダウンロードが始まるかと思います。

僕は使っているブラウザがGoogle Chromeなので、下のようにダウンロード中と表示されています。

local by flywheel 4

 

ダウンロードが完了すると、インストーラーがデスクトップにいるかと思います。

local by flywheel 6

 

ここまでで、インストーラーのダウンロードが完了しました!

 

STEP2 : Local by Flywheelのインストール

 

続いて、Local by Flywheelのインストールに移っていきます。

先ほどデスクトップにあったインストーラーを起動しましょう。

 

Macの場合だと、下の画像のような画面が立ち上がるので、アプリケーションに移動すればOKです。

local by flywheel 7

さらに、Macだと下のように許可を求められます。

「開く」で先に進みましょう。

local by flywheel 8

 

開くと、下の画像のようにポップアップが表示されます。

local by flywheel 9

意味としては、「エラーが出たときのレポートを送ってもらえませんか?」という、いわば協力願いですね。

僕は「Turn on error report」にしましたが、Noでも問題ないです。

 

ポップアップが閉じると、「LET’S GO!」が押せるようになります。

local by flywheel 10

僕の場合は、VirtualBoxがもともと入っているので、Host Machineのみのインストールになります。

おそらく、VirtualBoxもインストールとなると、数分かかるかと思いますので、「LET’S GO!」した後には少し待機です。

 

インストール中は、下の画像のようになりますね。

local by flywheel 11

 

インストールが完了すると、下のような画面になります。

Pro版はどうですか?みたいな案内ですが、必要ないので閉じましょう。

local by flywheel 12

 

そうすると、下のような画面になります。

local by flywheel 13

これで、Local by Flywheelのインストールまで完了し、あとはWordPressの設定をおこなうだけになりました。

めちゃくちゃ簡単ですね!

 

STEP3 : WordPressの設定

 

WordPressの設定をおこなっていきます。

本来であれば、MAMPを導入して、WordPress.orgからWordPressを取る必要のあった部分ですね。

 

まずは、先ほどの画面で、「+ CREATE NEW SITE」をクリックします。

local by flywheel 14

 

WordPressで使うサイト名を入力しましょう。

local by flywheel 15

ただ1つ注意があって、サイト名には「英語」しか使えません。

とはいえ、後から変更可能なので、仮置き程度に名前を決めておきましょう。

僕は「test-wordpress」にしました。

 

次の画面では、ADVANCED OPTIONSが選べますが、デフォルトのままでOKです。

local by flywheel 16

もしかすると、ディレクトリを作る場所にこだわりのある方がいるかもしれませんが、その場合は「Local site path」で選んであげてください。

 

ここまで出来ると、Wordpressの環境に必要な各種設定をおこなえます。

local by flywheel 17

デフォルトのままだと、下記のようになっていますね。

  • PHP : 7.2.9
  • Web Server : Nginx + Varnish
  • MySQL : 5.7

 

このままで十分なので、CONTINUEしましょう。

 

設定を変えたい場合には、Customも出来ます。

local by flywheel 18

 

PHPのバージョンを選んだり、Web ServerをApacheにしたり、、、と若干の変更が可能です。

 

そうすると、下の画面のように、「Username」と「Password」を入力します。

local by flywheel 19

のちにWordPressにログインするときに必要になるので、忘れないようにしましょう。

 

入力が完了したら、「ADD SITE」で次に進みましょう。

選んだ設定に基づいたダウンロードが始まります。

local by flywheel 20

 

そして、WordPressのダウンロードまで完了!と言いたいところですが、最後にパソコンにログインするときのパスワードを求められます。

local by flywheel 21

 

ここまで出来たら、すでにWordPressが使える状態になっています。お疲れさまでした!

 

Local by Flywheelを使うと、かなり簡単にローカル環境の構築ができましたね…。

 

Local by Flywheelの使い方【WordPressを操作しよう】

 

さらに、WordPressの操作画面について、少し解説をしていきたいと思います。

Local by Flywheelが初めてであれば、ぜひご覧ください!

 

WordPressの管理者画面に移動する

 

まずは、WordPressの管理者画面にいきましょう。

 

「ADMIN」から管理者サイトへ行けます。

local by flywheel 22

 

先ほど自分で決めた、「Username」と「Password」を入力してログインします。

local by flywheel 24

 

すると、下の画面のようにWordPressの管理者画面にログインできます。

local by flywheel 25

 

かなりカンタン…!

あとは、自分のやりたいようにイジっていくだけですね。

 

WordPressを日本語設定する

 

WordPressの管理者画面に移ったあと、日本語設定に変更すると良いですね。

「Settings→General→Site Languages」で言語を選択できます。

local by flywheel 26

 

Englishから、日本語に設定してあげましょう。

local by flywheel 27

 

日本語を選んだあとは、下の方にスクロールして、「Save Changes」で設定の変更を保存します。

local by flywheel 28

 

これで、WordPressを日本語で使えるようになりました。

local by flywheel 29

I am Japanese!!

 

サイトを他の画面で確認する

 

Local by Flywheelのチート的な機能が、ローカル環境で作成しているサイトを他の端末で確認できることです。

 

トップページの下に「Live Link」があり、「enable」にすると他の端末でもサイトが確認できるようになります。

local by flywheel 31

 

使い方は、下の画像のようにリンクが出てくるので、他の端末で打ち込むだけ!

local by flywheel 32

上記の場合だと、「http://f0d93a8d.ngrok.io」を携帯に打ち込みます。

なお、発行されるリンクは毎回変わるので、アクセスしても僕のサイトは見れません!

 

実際に携帯でアクセスしてみると、下の画面のように確認できました。

local by flywheel 33

携帯でアクセスできるので、LPをWordPress化したときカンタンに確認できますね。

 

以上、Local by FlywheelによるWordPressのローカル環境を構築する手順を紹介しました。

おそらく想像以上にカンタンだったはずです…。

あくまでも環境構築は準備なので、どんどん開発に進みましょう!

おしまいです。

 

おすすめの記事