【WordPress】MacにLocal by Flywheelをインストール

 WordPressでブログを運営していると、必然やることになるのが、サイトのカスタマイズ。中にはテーマのデフォルトデザインのままで、何も手を加えないという人もいるだろうが、そんな人だってせめて色合いくらいは変えていると思う。

 僕は最近になってWebデザインを少しかじり出した程度のど素人だから、頭に描いたデザインを一発で再現させるなんてことはまずあり得ない。色々なカラーリングを試し、見出しタグのデザインを試しと、試行錯誤・トライ&エラーの塊の末、サイトカスタマイズを行っているのだ。

 そんな時、もしサイトに訪れている人がいる中であれこれカスタマイズしていたらどうだろうか。実際の家の模様替えに例えるならば、客人がきている中、壁紙を替えて、カーテンを替えて、照明を替えて……、みたいな。多分、そのお客さんは困惑するだろう。

 そんなわけで、そんなカスタマイズ時なんかのために、是非とも僕がオススメしたいのがローカル環境でのサイトを持つことだ。早い話、ローカル環境でやっている限り、どれだけ試行錯誤しようが、誰にも見られることがないので、どんなヘンテコなカスタマイズだって、安心して試すことができる。

新規サイト準備のため、新しいローカル環境を

 僕は、「MAMP」というアプリに、バックアッププラグイン「BackWPUp」のバックアップ機能を組み合わせて、このサイトの完全コピーをローカル環境に構築してある。

 そのため、いつもサイトのカスタマイズをする際は、ローカル環境であれこれいじって、デザインが決まったら、StylesheetのCSSを丸ごとコピーして、本番サイトのStylesheetに貼り付けている。こうすることで、本番環境での、デザイン変更にかけている時間は、ほんの一瞬で済む。

ローカル環境での当サイトの完全コピー

ローカル環境での当サイトの完全コピー。今は試しにテーマをLION MEDIAに変更している。


 今まではこの、MAMPでの完全コピー環境一つで十分ことが足りていたのだけど、この度、別のローカル環境構築のため、最近話題になっていた「Local by Flywheel」をインストールしてみた。

 というのも、新しく別サイトを立ち上げようと思っていて、そのためにまずはローカル環境であらかたのデザインを決め、数記事を用意してから本番環境を整えようと思っているからだ。

 というわけで、今回はそのLocalのダウンロードからインストール、ローカル環境構築手順のご紹介。もちろん、すでに僕よりも詳しい方々が、たくさん記事にしているのだけど、自分自身の備忘録を兼ねて文章に残しておく。

 なお、僕自身が基本Macユーザーのため、今回はMacでのインストール手順となっている。多分、Windowsでも大して変わらないと思うけども、Windowsユーザーの方はご了承を。

Local by Flywheelをインストールする

 なによりもまず、Localのダウンロード。ダウンロードは以下の公式HPから無料でダウンロードできる。
Local by Flywheelをダウンロードする

Local by Flywheel is a free local development environment designed to simplify the workflow of WordPress developers and designers. Download it for free today!
 「FREE DOWNLOAD!」をクリックすると、MacかWindowsか訪ねてくるので、(僕は)Macを選択。名前やメールアドレスを入力する画面になるので、入力。全て入力せずとも、名前とEmailだけで大丈夫だった。(2017年2月5日現在)
Macを選択して氏名とメールアドレス、インストールサイト数を入力
 最後にいくつのWebサイトを構築するか聞いてくるので、適当なものを選ぶ。「GOT IT NOW!」をクリックすると、すぐにダウンロードが開始される。500MBほどあるので、ネット環境によっては少し時間がかかるかも。
Local by Flywheel ダウンロードが開始される
 ZIPファイルでダウンロードされるので、それを展開させ、出てきたアプリをアプリケーションフォルダに移動してから、起動する。エラー時に、自動送信で報告するかどうか聞いてくるので、お好きな方を。
Local by Flywheel インストール画面

  • VirtualBox
  • Host Machine
  • Local Image

と3つ並んでいるが、何もせず「LET’S GO!」をクリックする。インストールが開始される。Host Machineのインストール時には、数分間の間進まなかったりするが、気長に待ちましょう。けっしてエラーではない。

Host Machineインストール時、少し時間がかかる

Host Machineインストール中、少し時間がかかった。

※場合によっては、Macの環境設定の「セキュリティとプライバシー」の項目で、実行許可をする必要があるかも。

ローカル環境にWordPressサイトを準備する

 インストールが完了すると、サイトを構築するように勧めてくるので、「CREAT A NEW SITE」をクリック。
インストールが完了すると、サイト作成画面になる
 「What’s your site’s name?」と出てくるが、ここで入力するのはサイトのドメインにそのままなる。(標準設定時で、nantoka.local)

 英語名のサイトならそのまま入力しても大丈夫だろうが日本語を入力するとエラーになるので、ここではアルファベットで入力しよう。入力し終えたら、「Continue」をクリック。
サイト名がそのままドメイン名になるため、英語で入力する
 「Choose your environment」と、構築環境を選ぶように聞いてくるが、デフォルト(Preferred)のままで問題なし。PHPやMySQLのバージョンのことがわかる人はお好みでどうぞ。僕はノータッチ。入力し終えたら、「Continue」をクリック。
環境設定画面。デフォルトのままで問題ない
 最後に「Setup WordPress」と、ユーザーネームやパスワードなどを聞いてくるので、適当なものを入力。もちろん、自分だけのローカル環境なので、どちらも超簡単なもので問題ない。上級設定では、マルチサイトかどうかを設定できるが、多くはNoだろう。
ユーザー名、パスワードを設定する。
 入力し終えたら、「ADD SITE」をクリック。これでWordPressがインストールされる。本当に、超簡単!

 インストールが完了したら、「VIEW SITE」をクリックし、サイトを開いてみよう。はい、無事サイトは立ち上がってました!
View siteをクリックし、作成したWordPressサイトを確認する

無事インストールが完了している。デフォルトテーマのTwenty Seventeen

ただいま作成された新サイト。テーマはおなじみ、デフォルトのTwenty Seventeen。


 Localの画面に戻り、次は「Admin」をクリックし、さっそく管理画面へ。まずは先ほど設定したユーザーネームとパスワードを入力。
ユーザー名とパスワードを入力する
 管理画面に入ってみると、さあ困った! 英語表記なので、「Settings(設定)」→「General(一般設定)」にいき、「Site Language」を日本語に変更。
管理画面が英語表記になっている

WordPress管理画面が英語表記。


 ついでに、「Site Title(サイトタイトル)」と「Tagline(キャッチコピー)」、「Time zone(タイムゾーン)などもお好みで変更して、保存。無事日本語へと更新される。ついでにWordPressのバージョンや翻訳が、最新のものに更新できるはずなので、更新しておくといい。
一般設定画面で言語を日本語に変更

言語設定を日本語へ。また、先ほどとりあえずローマ字表記にしたサイト名なども、日本語表記「バンド部ねっと」に変更。


無事日本語表記に切り替わった

無事日本語環境へと切り替わった。


日本語に更新すると、WordPressの更新があるはず

最後にWordPressを更新する。


 あとは、何をやっても誰にも知られることのないローカル環境である。煮て食うなり焼いて食うなり好きにするがいい!

 僕はさっそく今度のサイトで採用しようと考えていたテーマ「LION MEDIA」に変更してみた。と言っても、まだコンテンツが何にも揃っていないので、まったく格好がつかない。

テーマをLION MEDIAに変更してみた

テーマをLION MEDIAに変更してみた。コンテンツが揃っていないので、まるで格好つかない。

終わりに——初心者にこそ、勧めたいローカル環境

 WordPressのためのローカル環境というと、設定などが難しそうで、WordPress初心者にとってはどうも敷居が高く感じてしまいがちだ。

 確かに、XAMPPなど、インストール手順が少し複雑なアプリも多いし、僕がやっているバックアップ機能を組み合わせての完全コピーサイトを構築する手順なんかは、正直言ってかなり難しい。僕自身、何度も失敗した。

 しかし、今回紹介したLocal by Flywheelは、インストール自体も簡単だし、サイトを新しく追加する手順もとても楽にできる。Instant WordPressなど、他にもローカル環境を簡単に構築できるアプリはあるが、おそらくLocalは現時点で一番簡単なものだと思う。

 前述したように、僕のようなWebデザイン初心者・WordPress初心者は、カスタマイズに何度も試行錯誤を繰り返しているのが大概だろうし、場合によっては、下手にPHPをいじったりなんかしてサイトが真っ白! なんてこともあるかもしれない。(僕は未経験)

 そうならないためにも、ローカル環境でサイトを持っておくと、安心して失敗しまくれるので、初心者にこそローカル環境はオススメしたいのだ。

 また、なにもすでにWordPressを扱っている人だけでなくとも、新しくWordPressでブログを始めてみたい、もしくはホームページをWordPressで立ち上げたい、といった人たちにも、ローカル環境はオススメだ。

 お金を払ってドメインやサーバーを借りなくとも、WordPressでサイトを運営するということが、どういうものであるか実際に試すことができるので、まずはローカル環境で練習、というのもいいと思う。


 さて、せっかくわざわざ新しくローカル環境をこしらえてまでして準備中の新規サイト。早く仕上げて公開したいと思っている。ジャンルは音楽マガジンサイト! お楽しみに!