Local by flywhleel PC・ローカル環境にWordPressをインストールする方法

本記事は広告が含まれる場合があります WordPress その他・ツール類

local by flywheelインストールと使い方・WordPress環境構築

WordPressは自分のパソコン(ローカル環境上)にWordPressをインストールしてテスト環境や開発環境として動作させることが可能です。

今回は、「local by flywheelローカル・バイ・フライホイール(現在はLocalという名称に変更)」というソフトウェアをインストールして、WordPressのローカル環境を構築する方法・使い方を解説します(Mac・Windows両方対応)

 local by flywheelのトップページ

 

■local by flywheel(現Local)でWordPressローカル環境を構築する方法

 

 

Local by flywheel(Local)でのローカル環境とは?

ローカル環境の説明図

 

ローカル環境とは、自分のPC・ローカルネットワーク上の環境のことです。

インターネット上で公開されている本番環境とは異なり、エラー等が出ても他の人に見られることはありません。そのため、開発環境やテスト環境として利用するのに向いています。

例えば、新たなプラグインを試用したり、テンプレート(functions.phpや各種phpファイル)の変更、CSSやJavascriptのカスタマイズをする場合などは、先にローカル環境で試してから本番環境に適用するといった手順が一般的です。

環境 意味
本番環境(インターネット上) レンタルサーバーなどインターネット上に公開されており、誰でも閲覧できる環境のこと。
※イントラ(社内)環境も本番環境ですが、ここでは一般的な説明としています。
ローカル環境(自分のPC・ローカルネットワーク) 自分のPC・ローカルネットワーク上の環境。他の人は閲覧できない閉ざされた環境で、開発・テストなどに向いている。
他にもローカル環境提供ソフトでMAMPやXAMPPなどもありますが、local by flywheelが一番シンプルで簡単にWordPressをインストールできます。
(関連記事)MAMPでWordPressをインストールする方法

 

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

まずは、Local by Flywheel(Local)をインストールしていきます。

 

Local by Flywheel」にアクセスして、「OR DOWNLOAD FOR FREE」をクリックします。
「OR DOWNLOAD FOR FREE」をクリック
※GET START ボタンを押下するとPRO版(有償版)の方に進みますので今回は無償版を選択しています。

 

ご自身のPCのOS(Mac/Windows)を選択します。姓名やメールアドレス電話番号などを入力して「GET IT NOW」ボタンを押下します。※本解説ではMacを選択してダウンロードしています。
姓名やメールアドレス電話番号などを入力して「GET IT NOW」ボタンを押下

 

以下の画面が表示されると、ダウンロードがスタートするので完了するまで待ちます。
ダウンロードがスタート

 

ダウンロードが完了したら、ファイルをダブルクリックして起動します。(通常はダウンロードフォルダにダウンロードされます)
ダウンロードフォルダ。ファイルをダブルクリックして起動

 

Localをアプリケーションフォルダへ移動します。
アプリケーションフォルダへの移動

 

Macのアプリケーションフォルダを開いて、Local.appをダブルクリックして起動します。
Local.appをダブルクリックして起動

 

Macの場合、最初に起動する際に下記のような警告が表示される場合があります。「開く」を選択します。
警告画面。開く

 

サービスを利用する上での規約が表示されます。規約を確認後チェックを入れて「I AGREE」(同意する)をクリックします。
規約を確認後チェックを入れて「I AGREE」(同意する)をクリック

 

Localの無料アカウントを作成するかどうかの画面が表示されますが、ここでは右上の×印から画面を閉じてしまいましょう。

なお、無料アカウントを作成することでいくつか便利な機能が使えるようになります。

右上の×印から無料アカウントの登録画面を閉じる

 

最後に、「Help us・・・」と書かれたポップアップメッセージが表示されますが本例ではNoを選択しておきます。
エラー報告を有効化するかどうかのモーダル

 

※上記はエラーバグ報告を有効にするか否かの設定です。報告する場合は「Turn on Error Reporting」を、しないならば「No, thanks」でOKです。

▼原文
Help us make Local better by enabling error reporting

This let us find and fix bugs faster, helping you stay focused on building with WordPress!

You can change this in Preferences (under Advanced) at any time
Learn more

▼日本語訳
エラー報告を有効にしてLocalの改善にご協力ください

これにより、バグをより迅速に発見して修正できるようになり、WordPressでの構築に集中し続けることができます

これは、「設定」(詳細設定の下)でいつでも変更できます。
詳しくはこちら

 

また、使用状況レポートを有効化するかどうかのモーダルも続いて表示されますが、同様に「No, thanks」としておきます。

使用状況レポートを許可するかどうかのレポート

 

▼原文
Make Local better by enabling usage reporting

Let local compile anonymous feature usage to help us prioritize and improve the tools you use most!

You can change this in Preferences (under Advanced) at any time
Learn more

▼日本語訳
使用状況レポートを有効にしてLocalをより良くしましょう

Localが匿名でユーザーの使用状況を収集するのを許可し、最もよく使用されているツールの優先順位付けや機能改善をするのを助けましょう

これは、「設定 (詳細設定の下)でいつでも変更できます。
詳しくはこちら

 

以上で、Localのインストールが完了です。

Localの管理画面

 

Local by Flywheel(Local)で環境設定を行う

つぎに、Local by Flywheel(Local)でサイトを作成して、WordPressをインストールしていきます。

 

新規サイトを作成する

Local By Flywheel(Local)の環境設定画面で「CREATE A NEW SITE」をクリックします。
「CREATE A NEW SITE」をクリック

 

「Create a new site」を選択して「Continue」をクリックします。

「Create a new site」を選択して「Continue」をクリック

 

名称は簡単なもので構いません。ここでは「webst8」という名称で入力して「CONTINUE」ボタンを押下します。
「webst8」という名称で入力して「CONTINUE」ボタンを押下
※最終的にサイト名.local(ここではwebst8.local)でローカル環境に接続できるようになります。

 

特にこだわりがない場合は、初期状態の「Preferred」を選択します。※PHPのバージョン、Webサーバーの種類等に指定があれば「Custom」を選択します。
初期状態の「Preferred」を選択

 

ユーザー名やパスワードを入力して「ADD SITE」をクリックします。(※WordPressログイン時に必要なのでメモしておきましょう。
ユーザー名やパスワードを入力して「ADD SITE」をクリック

 

WEBST8のインストールが完了しました。「ADMIN」をクリックしてみましょう。
「ADMIN」をクリック

 

WordPressのログイン画面が表示されます。先ほどインストール時に入力したユーザー名とパスワードを入力してログインしましょう。
WordPressのログイン画面

 

下記のような管理画面に入れればOKです。
管理画面に入れればOK

 

WordPressを日本語表記設定にする

初期状態では管理画面の言語は英語に設定されているため、日本語表記に変更していきましょう。
WordPressの初期状態(英語表記)

 

Settings>Generalを選択します。
Setting>Generalを選択

 

Site LanguageをEnglish→「日本語」に変更します。
Site LanguageをEnglish→「日本語」に変更

 

「Save Changes」ボタンを押下します。
「Save Changes」ボタンを押下

 

日本語表記に変更されました。この後は自由にWordPress環境を構築していってください。
日本語表記に変更されました。

 

WordPressをSSL設定する

Local by flywheelでは、SSLの設定が可能です。

ローカル環境ですので、必ずしもSSL設定をする必要はありませんが、SSL設定をすることでより本番環境に近い環境でテストできます。

ローカル環境で作成したサイトを後ほど本番環境にあげる場合、なるべく本番環境に近い環境でテストをしておいた方が良いので以下の方法でSSL化を行いましょう。

 

◾️動画解説版

 

Localのアプリ側の「SSL」と書かれた項目の右側にある「Trust」をクリックします。

「SSL」と書かれた項目の右側にある「Trust」をクリック

 

Macユーザーの場合、以下のようにPCユーザーのパスワードを入力する画面が出てくるので、こちらを入力してから「OK」をクリックします。

PCユーザーのパスワードを入力しOKをクリック

 

これで文言が「Trusted」に変わっていればhttpsでの通信が可能になります。

SSL右側に表示される文言が「Trusted」に変わっている

 

補足:エラーが表示されて「Trusted」に変わらない場合の対処法

「Trust」をクリックしてもエラーが表示されて、「Trusted」に変わらない場合は、以下の方法でLocalが生成したSSL証明書への信頼設定をしてあげる必要があります。

SSL化設定の最中にエラーが表示される場合がある

 

Macユーザーの場合は、「キーチェーンアクセス」アプリを開きます。

キーチェーンアプリを開く

 

右上の検索窓から「サイト名.local」で検索し、種類「証明書」となっているこちらのファイルをダブルクリックします。

Localが生成している証明書をダブルクリック

 

「信頼」と書かれた文字をクリックすると下に隠しメニューが表示されるので、中にある「この証明書を使用するとき」という項目の値を「常に信頼」に変更します。

「この証明書を使用するとき」の値を「常に信頼」に変更する

 

以上で1度Localを閉じてから再度開くと、「Trusted」に変わっているはずです。

 

次に、WordPressのサイトアドレス・WordPressアドレスを「http」から「https」に変更しましょう。WordPressのダッシュボードで「設定>一般」をクリックします。

「設定>一般」をクリック

 

WordPressアドレス、サイトアドレスに記載の「http://・・・」から始まるURLを「https://・・・」に変更します。

「http」を「https」に変更する

 

以上で、SSL設定は完了です。

 

インストールディレクトリ(フォルダ)の場所を確認する

ローカル環境インストール後は、WordPressのテーマ自作やカスタマイズなど自由に扱うことができます。

Local by flywheelではサイトをインストールした際に「ユーザー/ユーザー名/Local Sites」にサイトが生成されます。

 

インストール先フォルダを開くには、「Go to site folder」をクリックします。
「Go to site folder」をクリック

 

「Local Sites>サイト名」フォルダが開きます。appをクリックします。
appをクリックします

 

public(公開フォルダ)をクリックします。
public(公開フォルダ)をクリック

 

この中(publicフォルダ内)にWordPressインストールファイル・フォルダ類が格納されています。
WordPressインストールファイル・フォルダ類が格納されています。

 

WordPressのテーマはwp-content/themesの中に格納されています。

 

publicフォルダ内のwp-contentフォルダをクリックします。

 

themesフォルダをクリックします。

 

各テーマフォルダが格納されています。

 

ローカル環境でテーマを自作する場合はこの「themes」フォルダの中にテーマを格納していきましょう。

テーマの自作については「【テーマ自作】WordPress オリジナルテーマの作り方と基本」をご参照ください。

 

なお、既成テーマをカスタマイズする際は、テーマファイルを直接編集するよりも子テーマを作成した方が保守性が上がります。

子テーマの詳細な作成方法については、「WordPressで子テーマを作成してカスタマイズする方法」をご覧ください。

 

MailHogを使ってローカル環境でメール受信を確認する方法

Localは、開発者用のメールテストツール「MailHog」と連携しているため、ローカル環境でもお問い合わせフォームが問題なく機能しているかどうかの確認ができます。

MailHogの受信ボックスはLocalの管理画面の「Tools」タブを開き、「Open MailHog」ボタンをクリックすることでブラウザ上に立ち上がります。

Open MailHogをクリック

MailHogの画面

 

メールアドレスはLocalを使ってサイトを開設する際に入力したWordPress Email(管理者メールアドレス)になります。

デフォルトではdev-email@wpengine.localとなっているため、何も設定を変更して居ない場合はこちらにメールが送信されるとMailHog上で確認できます。

 

以下では、実際にContact Form 7を使ってフォーム送信が行われた際に、管理者・フォーム送信者に自動返信メールが届いているかどうかを確認してみましょう。

今回は管理者メールアドレスをdev-email@wpengine.localとしておき、メール送信が行われた管理者とメール送信を行なった相手にメールが届くように、あらかじめContact Form 7のメール設定を行なっておきました。

Contact form 7の自動返信メール設定は「メール」タブから行う

 

あわせて読みたい関連記事

Contact Form 7の詳しい使い方は以下の記事にて解説しています。

【Contact Form 7の使い方】問い合わせフォーム作成方法

 

Contact Form 7のメール入力欄には以下のように入力して「送信」をクリックします。

Contact Form 7の入力欄を埋めてから送信をクリック

 

これで再度MailHogの画面を開いてみると、管理者とフォーム送信者への自動返信メールが届いていることが確認できるはずです。

管理者宛、フォーム送信者の両方に自動返信メールが問題なく届いている

 

本番環境のデータをローカル環境に移行する

本番環境のWordPressデータをローカル環境に移行してテストしたい場合は、All in one WP Migrationが便利です。

詳しいやり方については、下記のブログ記事あるいは動画をご参照ください。

【All in one WP Migrationの使い方】WordPress移行・引越し方法

 

◾️動画解説版

 

まとめ

まとめです。

今回は、「local by flywheel(現Local)」というソフトウェアを利用して、WordPressのローカル環境を構築する方法を解説しました。(Mac・Windows両方対応)

 local by flywheelのトップページ

「ローカル環境」は慣れないと構築が難しいイメージがありますが、local by flywheelを利用すると簡単にWordPressをインストールできます。

WordPressのテーマ開発やカスタマイズなどを行う場合、ローカル開発環境を構築することで、本番環境のトラブルを減らし効率の良い作業を行うことができますので、ぜひ活用してみてください。

なお、実際にインターネット上でWordPressを動かす場合は、レンタルサーバーなどを契約してそこでインストールする必要があります。

おすすめのレンタルサーバーについては「人気レンタルサーバーおすすめ比較12選【選び方徹底ガイド】」をご参照ください。

今回は以上になります。最後までご覧いただきありがとうございました。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

-WordPress, その他・ツール類
-,