Local by Flywheel導入

以前WordPressテーマの開発環境整備の一環でAtom導入とパッケージのご紹介をしました。

今回はWordPressのローカル環境をとても簡単に導入できるLocal by Flywheelについてご紹介いたします。

 

Local by Flywheelとは

Local by FlywheelはWordPressをローカルにインストールして、仮想的に動かすことができるツールです。サーバーに作成したテーマをアップする前に、ローカル環境でテーマをテストする目的で使用します。ローカルのWordPress環境なので、安心してWordPressの設定とテーマをいじくりまわすことが出来るというわけです。しかもかなりインストールが簡単ということで、ローカルのWordPress環境構築ツールの中では人気の高いツールの一つです。

 

Local by Flywheelのインストール

まずはホーページからダウンロードです。少し大きめの500MB程度です。

Local by Flywheelホームページ

 

「FREE DOWNLOAD!」を押して必要な項目を入力してダウンロードします。最低限必要なのはOSの選択、Emailと持っているWebサイト数です。

 

ダウンロードしたらアプリケーションフォルダに移動して開きます。開いたら「LET’S GO!」一択の画面が表示されるのでクリックします。インストール開始です。

 

変更の許可を求められたらパスワードを入れて許可します。

 

インストールが終わると下のような画面が表示されます。「CREATE A NEW SITE」でサイトを追加します。

 

アルファベットでサイト名を入力しましょう。入力したら「CONTINUE」をクリックします。

 

Preferredで問題ないですが、PHPとMySQLのバージョンを変更したい場合は変更しましょう。設定し終えたら「CONTINUE」です。

 

WordPressにログインするときのユーザー名とパスワードを入力します。コンタクトフォームなどメールを使うテストを行いたいというときは使用可能なメールアドレスも入力してください。マルチサイトの設定も出来るようです。「ADD SITE」で次です。

 

下のような画面が表示されたらインストール完了です。Local by Flywheelが起動していて、サイトが有効なときはサイトにアクセスできます。

 

Local by Flywheelの使い方

よく操作するところは赤枠で示したところだと思います。

  1. WordPressが格納されているローカルのフォルダを開きます。
  2. WordPressにログインする画面をブラウザで開きます。
  3. WordPressサイトをブラウザで開きます。
  4. 一時的に外部から確認できるサイトのプレビューができるURLを生成。ローカルサイトを外部から確認できる機能は有難いですね。

 

エディタとの連携

連携というほど大げさなことでもありませんが、ローカルのWordPress上のテーマフォルダを例えば以前紹介したAtomにドラッグ&ドロップで直接開きます。するとツリービューで開いてくれるのでそのままAtomで開発を行うとコード変更から実際の表示の確認がスムーズです。テーマファイルは次の位置に配置されています。themes以下にデフォルトのテーマがあるのを確認できます。

ここに置かれたテーマをAtomで開いてコードを反映した後ブラウザ、または前の記事でご紹介したAtomパッケージbrowser-plusでページの表示を確認しつつ効率的に開発を行うことができます。下はデフォルトで入っているテーマの一つをAtomで開いたところです。

テーマを開発していてデザインを変更したのにcssファイルがキャッシュに残っていて、変更が反映されない場合があるので、その時はキャッシュを削除するかスーパーリロードを行うようにしましょう。またバックアップは定期的にとりましょう、本当に・・・。

 

本番環境への移行

テーマを作成したら公開するサーバーに移行します。自分の方ではテーマのみ移行したので、WordPressを丸ごと移動は行いませんでした。WordPressからMySQLデータベース(記事データ)から何から丸ごと移行したい時は次のページなどが参考になるかもしれません。

 

まとめ

今回はLocal by Flywheelのインストール方法等、簡単な使い方を示しました。是非これでテスト環境を構築してWordPressをいじりまわしてみてください。

次はテーマ作成の説明に入る前にモックアップ作成について記事を書こうと思います。

return-top