WordPressをローカル環境で構築する。「Local by Flywheel」の利用方法。

こんにちは、長野県松本市でWeb制作をやっています賀川といいます。

WordPressをやることになった

CMSといえば私は普段Drupalを利用することが多いのですが、今回WordPressの案件をやることになりました。

なんとなくWordPress案件は避けていたのですが、せっかくお声がけいただいたので『それならやってみようじゃないか！』と。頂いたからにはまずはWordPressについて知らないとな、と思い、ローカルでWordPress開発環境の構築から初めてみることに。

で、WordPressをローカルで構築するにあたり、調査していたところ下記３パターンが有効かな、ということがわかりました。

1. Dockerを利用する
2. Local by Flywheelを利用する
3. MAMPを利用する

普段はDockerを利用しているので、「1. Dockerを利用する」が良いかなと思ったのですが、調べているうちに『Local by Flywheelが簡単そうだゾ』となったので、今回はLocal by Flywheelを利用してみようと思います。

結論から言いますが、Local by Flywheelめちゃくちゃ便利で楽でした。これからWordPressを利用する人は、Local by Flywheelを使ってローカル環境を作ることを強くオススメします。

Local by Flywheelの特徴

簡単に特徴をまとめると以下３つですね。

・簡単
・早い
・ほぼ無料で色々できる

もうこれにつきます。文章で説明するより、とりあえずローカル環境構築してみましょう。

Local by Flywheel構築方法

Local by Flywheelのサイトより「download」をクリックしダウンロードします。

すると、ポップアップで画面が表示されるので、OSを選択し名前やメールアドレス等を記入し、「GET IT NOW!」をクリックします。
（今回はMac版をダウンロードします）

ダウンロード開始されました。

ダウンロードされたらファイルを解凍し、「Local by Flywheel」アイコンをApplicationsにドラックアンドドロップします。

Applicationsより「Local by Flywheel」をダブルクリックし起動させます。

警告が表示されるので、「開く」をクリック。

すると「Local by Flywheel」が起動されます。「LET'S GO!」をクリック。

設定が完了するまで数分かかりますので、しばし待ちます☕️

※途中で『機能拡張がブロックされました』という警告が表示されたのですが、下記記事を参考に対応しました。
https://applech2.com/archives/high-sierra-new-features-kext-pop-up.html

しばらくすると、introducingが表示されます。詳しく知りたい場合は「LEARN MORE」をクリックするとサイトへ飛びます。とりあえず今は右上の「×」をクリックします。

すると下記画面が表示されます。これでWordPressが構築できるようになりました。「CREATE A NEW SITE」をクリックします。

まずはサイト名を記入し、「CONTINUE」をクリックします。

次にPHPやMySQLのバージョン等の選択です。特にこだわりがなければ「Preferred」を選択して「CONTINUE」をクリックします。

※ちなみに「Custom」をクリックするとPHPバージョンやWebサーバーが選択できるようになります。

今回は「Preferred」を選択でCONTINUEをしました。

次にWordpressの「Username」「Password」「Email」を記入します。それぞれ記入し「ADD SITE」をクリックします。

ダウンロード開始されるのでしばらく待ちます。

これで構築が完了です。下記のような画面が表示されます。

右上の「VIEW SITE」をクリックするとWordPressのサイトに遷移し、

「ADMIN」をクリックするとWordPressの管理画面に遷移します。

先ほど設定したUsernameとPasswordでログインできます。

デフォルトは英語表示なので、日本語化対応したい場合は左のメニューの「Settings」→「Site Language」より「日本語」を選択し、「Save Change」をクリックしてください。

日本語化されました。

以上で対応完了です。

ということで、ものの１０分ほどでWordpressの環境が構築できました。Local by Flywheel本当に便利です。次からもWordPressの開発はこれでいきたいと思います。

データベースの利用について

Local by FlywheelにはデフォルトでAdminerというデータベース管理ツールが利用できます。

「DATABASE」→「ADMINER」の順にクリックします。

するとブラウザが立ち上がり、Adminerの画面が開きます。

これでDBバックアップやインポート等の操作が可能になります。ちなみにデフォルトのDBは「local」という名前です。

ファイルが置かれている場所

Local by Flywheelで構築したWordpressのファイルが置かれている場所は下記になります。

/Users/ユーザー名/Local Sites

WordPressがインストールされている場所は下記です。

/Users/ユーザー名/Local Sites/サイト名/app/public

WordPressテーマの場所は下記

/Users/ユーザー名/Local Sites/サイト名/app/public/wp-content\themes

プラグインの場所は下記

/Users/ユーザー名/Local Sites/サイト名/app/public/wp-content/plugins

共有URLを作成する

ローカル環境で構築しているWordPressをチームメンバーやお客さんにみてもらいたい時があると思います。そういう時にはスクリーンショットを撮ったり、共有の開発サーバーにアップしたりというやり方もあると思いますが、Local by Flywheelは「Live Link」という機能があります。

画面下のLive Link横の「ENABLE」をクリックすると

URLが発行されます。

こちらのURLを共有すれば、誰でもローカル環境の開発状況を確認することができます。

こちらのURLは、「DISABLE」をクリックするかLocal by Flywheelをシャットダウンすると見れなくなります。

Local by Flywheelをストップする

Local by Flywheelをストップする場合は、右上の赤字の「STOP SITE」をクリックします。

ストップすると、右上の文字は緑色で「START SITE」に変わります。再度スタートする場合はこちらをクリックしてください。

---

といったところで簡単ですが説明以上にします。まだまだ他にも機能がありそうですが、とりあえず押さえとけば良いポイントはこのくらいかなと思います。

ひとまず開発環境が整ったので、これからゴリゴリ開発に移っていきたいと思います。開発で得た知見もnoteにまとめていこうと思いますので、引き続きよろしくおねがいします。