Home
WordPress
【基本】Local by FlywheelでWordPressをローカルに構築する

【基本】Local by FlywheelでWordPressをローカルに構築する

公開日
2021.06.13
更新日
2021.11.14
【基本】Local by FlywheelでWordPressをローカルに構築する

どうも!かけちまるです!

みなさんは、ローカル環境でWordPressを開発するとき開発環境はどのようにしていますか?
MAMPやXAMPPなど色々ありますが僕がオススメするのは、「Local by Flywheel(ローカル・バイ・フライホイール)」です。
現在は「Local」にサービス名が変わったようです。※21.06.12現在

無料でありながらMAMPやXAMPPよりもLocal by Flywheelの方が便利機能がいくつかあります。
WordPressの構築が簡単だったり、開発中のWordPressを外部に共有できたりととても便利です。

この記事を読むと、

  • ・Local by Flywheelはどういうものか?
  • ・Local by Flywheelを使うメリット、デメリット
  • ・Local by Flywheelのダウンロード方法
  • ・Local by FlywheelでWordPressを構築する手順
  • ・Local by Flywheelで構築したWordPressをSSL化する方法

がわかります。

Local by Flywheelとは?

Local by Flywheel(ローカル・バイ・フライホイール)とは、簡単にWordPressをローカル環境で構築できるソフトウェアです。
Local by Flywheelを使うと数クリックでWordPressの開発環境が構築できるのでとても便利なのです。
ちなみに現在は名前がLocalに変わっているみたいですね。※21.06.12現在

WordPressを自身で構築しようとするとWordPress公式サイトからWordPressをダウンロードしてきて、データベースを作成して、WordPressとデータベースを紐付けてなど知識と時間がいるんです。
それをLocal by Flywheelが解決してくれます。

Local by Flywheelを使うメリットとデメリット

Local by FlywheelはWordPressの開発環境の構築が簡単なだけでなく使うメリットは他にもあります。

メリット
  • ・数クリックでWordPressの開発環境が構築できる
  • ・HTTPS通信ができる
  • ・ローカル環境を他の人へ共有できる
  • ・PHPのバージョンなど環境設定を容易にできる
デメリット
  • ・ローカル環境を共有できるURLには有効期限がある
  • ・ローカル環境を共有できるURLに短時間でアクセスが集中すると一定時間アクセスできなくなる。

※デメリットについては有料版にすれば解決できます。

Local by Flywheelのダウンロード

まずはLocal by Flywheelをダウンロードする手順を解説します。
Local by FlywheelをダウンロードしてWordPress開発を始められる状態にしていきます。

大きな流れとしてはこんな感じです。

  • ・Local by Flywheel公式サイトからソフトウェアをダウンロード
  • ・Local by Flywheelをインストールする
  • ・Local by Flywheelの初期設定をする

Local by Flywheelのダウンロード手順

1

Local by Flywheelの公式サイトにアクセスします。
Local by Flywheel公式サイト:https://localwp.com/

Local by Flywheelの公式サイトにアクセス
2

ダウンロードボタンをクリックし、プラットフォームを選択します。
※ここではMacを選択します。

プラットフォームを選択
3

必要な情報を入力し、「Get it now!」をクリックでダウンロードできます。
最低でもメールアドレスを入れる必要があります。

「Get it now!」をクリックでダウンロード
4

ダウンロードしたdmgファイルをダブルクリックします。
そのあと、表示に従ってアプリケーションフォルダにドラッグ&ドロップしてください。

dmgファイルをダブルクリック
5

アプリケーションフォルダを開くとダウンロードできていることが確認できます。
Local by Flywheelをよく使う場合はDockに追加しておくと開きやすいかもです。

ダウンロードできていることが確認
6

インストールされたLocal by Flywheelを開くと利用規約への同意を求められるのでチェックを入れてI AGREEをクリックします。

I AGREEをクリック
7

Local by Flywheelでエラーや警告が出たときに自動で送信していいか聞かれるのでいい時は「Turn on Error Reporting」で嫌な時は「No」を選択してください。
僕は「Turn on Error Reporting」にしました。

次にモーダルで有料版の紹介をされてるので興味なかったら右上の×をクリックしてください。

エラーや警告が出たときの設定
8

これでLocal by FlywheelのダウンロードとWordPress開発を始める準備ができました。

WordPress開発を始める準備完了

WordPressを構築する

Local by Flywheelのダウンロード、WordPress開発を始める準備が完了したところで、WordPressを構築していきましょう。

大きな流れとしてはこんな感じです。

  • ・サイト名を決める
  • ・PHP、サーバ、MySQLのバージョンを決める
  • ・WordPress管理画面にログインするときのユーザー名とパスワードを決める
  • ・サイトをSSL化する
  • ・WordPress管理画面にログインし、言語設定を変更する

WordPressを構築する手順

1

Local by Flywheel管理画面で「+CREATE A NEW SITE」をクリック。

「+CREATE A NEW SITE」をクリック
2

WordPressのサイト名を決める。
わかりやすい好きな名前を入力してください。

WordPressのサイト名を決める
3

PHP、サーバ、MySQLのバージョンを決める。
特にこだわりがなければ、「Preferred」で良いと思います。

「+CREATE A NEW SITE」をクリック
4

WordPress管理画面にログインするときのユーザー名、パスワードを決める。
WordPress管理画面にログインするときに使うのでユーザー名、パスワードはどこかにメモって置きましょう。

ユーザー名、パスワードを決める
5

サイトをSSL化する。
WordPressの構築が完了すると、下画像のような画面になります。
ここで、SSL項目の「TRUST」をクリックします。
これでOK!!

⑥でWordPress管理画面にアクセスするので、「ADMIN」からアクセスして、ログインしてください。

サイトをSSL化する
6

WordPressの言語設定を変更する。
WordPress管理画面の左メニューのSettingでSite Languageを日本語に選択してください。
日本語に選択した状態で「Save Changes」をクリックするとWordPress管理画面の言語が日本語に変わります。

おそらくデフォルトでは、英語になっていると思うので言語を日本語に変更すると後々作業しやすいと思います。

WordPressの言語設定を変更

ローカルサイトを共有する方法

Local by Flywheelで開発したWordPressサイトを外部に共有する方法を解説します。

やり方は簡単で、Local by Flywheelの管理画面の「Live Link」の横にある「Enable」をクリックします。
そうすると、URLが発行されるのでそのURLを共有すればローカル環境のサイトを外部に共有することができます。

WordPressの言語設定を変更

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法

Visual Studio Codeの検索と置換

Visual Studio Codeの検索と置換

フォントサイズを可変にする方法【CSSのclamp関数で実現】

フォントサイズを可変にする方法【CSSのclamp関数で実現】

Local by Flywheelで本番環境のWordPressをローカルに複製する

Local by Flywheelで本番環境のWordPressをローカルに複製する

【CSS】mix-blend-modeで乗算などを表現する方法

【CSS】mix-blend-modeで乗算などを表現する方法