申し訳ございません。
このサイトはお使いのブラウザに対応しておりません。
別のブラウザをご利用ください。

blog

home blog WordPressのローカル環境をLocal by Flywheelで構築する

WordPressのローカル環境をLocal by Flywheelで構築する

Local by Flywheelを利用すればWordPressのローカル環境を簡単に構築することができます。

本記事ではインストール、サイト作成、ブラウザ変更、外部共有について、備忘録として書き留めておきたいと思います。

目次

  1. Local by Flywheelのインストール
  2. WordPressサイトの作成
    1. サイトの追加
    2. テーマフォルダの追加
    3. サイトへログイン
  3. 使用するブラウザの変更
  4. サイトをスマホ等で確認する
    1. パソコン側の作業
    2. スマホ側の作業
  5. まとめ

Local by Flywheelのインストール

1、まずLocal by Flywheelのサイトにアクセスします。

2、「DOWNLOAD」をクリックすると、MacかWindowsかLinuxを選択できるので、自分の環境を選んでインストールします。

WordPressサイトの作成

サイトの追加

1、「Local」を立ち上げる

2、左下の⊕(Add Local Site)をクリック

3、サイト名を決めcontinue

4、「preferred」選択しcontinue

5、ユーザーネームとパスワードを決め、add site

テーマフォルダの追加

作成したテーマフォルダを、~ > Local Sites > サイト名 > app > public > wp-content > themesフォルダに追加する。

サイトへログイン

1、右上の「START SITE」をクリックしてサイトに接続

2、「ADMIN」でWordPressにログイン。

使用するブラウザの変更

1、Local by Flywheelを開く。

2、左上の三本線からPreferencesへ。

3、APPEARANCE & BEHAVIORで

「Browser」を「System Default」から「Chrome」へ変更。

4、APPLYをクリック。

5、右上の×で閉じ、トップ画面へ。

サイトをスマホ等で確認する

パソコン側の作業

1、Local by Flywheelを開き、スマホで見たいサイトを選択します。

2、一番下「Live Link」の横の「Enable」をクリック。

※ログイン状態でないと利用できないので、左上のアイコンからログインしておきます。アカウントを持っていない方は無料で作成可能です。

3、「Live Link」→URL・Username・Passwordをコピーし、メールか何かに貼り付けてスマホ側に送ります。(スマホ側で手入力でも可)

※「Live Link」→「Disable Link」をクリック、またはサイトをストップさせるとスマホでは見られなくなります。

スマホ側の作業

1、送られてきたリンクをクリックしてサイトに接続。

2、ユーザーネームとパスワードを入力。

ちなみに、「Live Link」をONにした状態でサイトを編集した場合、スマホ側でリロードすると変更が反映されます。

まとめ

いかがでしたか?

WordPress制作にはかかせないLocal by Flywheel。

本番環境にアップロードする前にスマホなどで確認できるシステムは本当にありがたいです。

仕上がりをクライアントに確認してもらうのにも使えるのではないでしょうか?

ぜひ活用してください。

最後までご覧いただきありがとうございました。