1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。

Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。
今回はこれを使って、ローカルに開発環境を作る方法を紹介します。

目次
  1. Local by Flywheelのダウンロード
  2. Local by Flywheelのインストール
  3. サイトを作成する
  4. サイトの管理
  5. Local by Flywheelの基本的な使い方
  6. ブループリントについて
  7. まとめ

Local by Flywheelのダウンロード

では、Local by Flywheelをインストールしていきましょう。

Local by Flywheel

サイトにアクセスして FREE DOWNLOAD をクリックします。
すると、次の様な画面になりますので、 Mac か Windows のどちらで使用するか選択し、 Work Email(Eメール) を入力します。
最後に「GET IT NOW!」をクリックします。

Local by Flywheelのインストール

ダウンロードしたファイルを開くと、このようなアラートが表示されます。

To help make Local as great as can be, we’d love if you turned on error reporting.
With this enabled, Local will automatically send errors and warnings back to the team so we can patch things up!

Localをより良いものにするために、エラー報告をぜひ有効にしていただけると嬉しいです。
これを有効にすると、Localは自動的にエラーと警告をチームに送り、私たちはパッチを適用することができます。

もしもチームにエラーや警告を送るのであれば「Turn on Error Reporting」を、送らないのならば「No」をクリックします。

LET’S GO!と書かれたボタンをクリックします。

パスワードを訊かれたら入力します。

インストールが始まります。

もしも途中で「System Extension Blocked」といった警告が表示されたら、セキュリティとプライバシーから「ダウンロードしたアプリケーションの実行許可」を許可してあげてください。

このような画面になったら、無事インストールが完了です。

サイトを作成する

CREAT A NEW SITE のボタンをクリックします。

What’s your site’s name?(サイト名は何ですか?)

What’s your site’s name? と表示されました。
サイト名を入力します。

また、ADVANCED OPTIONをクリックすると、ローカルサイトのドメイン(Local site domain)、パス(Local site path)、ブループリントを選択(Create site from Blueprint?)できます。
ブループリントは、開発環境のテンプレートみたいなものです。前にブループリントを保存しておかないと使えないので、初めてインストールする場合、この機能は使えません。

CONTINUEボタンをクリックします。

Choose your environment(環境を選んでください)

Choose your environment と表示されました。

PreferredかCustomかを選びます。
特に設定が必要ない場合はPreferredを、カスタムしたい場合はCustomを選択します。

もしCustomを選択した場合、PHPのバージョン、Webサーバー、MySQLのバージョンを選択できます。

CONTINUEボタンをクリックします。

Setup WordPress

ここで、WordPressのセットアップをします。
WordPress Usernameにはユーザー名、WordPress Passwordにはパスワードを設定します。

もし、マルチサイトの環境を作りたいのであれば、ADVANCED OPTIONの部分をクリックし、サブディレクトリ、サブドメインのどちらかを選択することで、作ることができます。

ADD SITEボタンをクリックすると、ローカルサイトが作られます。

サイトの管理

では、Local by Flywheelでローカルサイトを管理してみましょう。
ADMINボタンで管理画面を表示、VIEW SITEでサイトを見ることができます。

また、「+」ボタンをクリックすると、サイトを追加することができます。

Local by Flywheelの基本的な使い方

ではLocal by Flywheelの基本的な使い方を見ていきましょう。

Local by Flywheelをいったん終了して、再び起動すると、ローカルサイトはストップした状態になっています。
起動にはしばらく時間がかかります。

サイトをスタート、ストップする

ではローカルサイトをスタートしてみましょう。
まず、起動したばかりのLocal by Flywheelは次のようになっていますので、先ほど作成したローカルサイトを選択します。

まだサイトはストップ状態となっています。
「START SITE」をクリックすると、サイトをスタートすることができます。

また、サイトをストップするときは、右上の「STOP SITE」をクリックします。

複数のローカルサイトがあり、それらを全てストップしたい場合は、左下の「STOP ALL」をクリックします。
全てのローカルサイトをストップ

ブループリントについて

ここまでで紹介したやりかたでは、一つのローカルサイトを作成するのに手間がかかります。
普段使うサイトの設定が決まっている場合、ブループリントを使うと便利です。

サイトの設定が完了したら、そのサイトを右クリックし、「Save as Blueprint」をクリックします。

SAVE BLUEPRINTをクリックします。

こうすることで、ローカルサイトを作成する画面でブループリントを選ぶことができるようになります。

まとめ

Local by Flywheelを使えば、GUIで簡単にローカルWordPress開発環境を作ることができます。
難しい操作もないので、ぜひ使ってみてください。

スポンサードリンク

関連コンテンツ

オススメ記事

マップ上をキャラが移動できるようにしよう!

小学生からのJavaScript。マップでキャラを動かせるようにしよう!

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクタ

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

コメントをどうぞ!

メールアドレスが公開されることはありません。