【ワードプレス×Local】10分でローカル環境を構築する方法

こんにちは! るーしーです。

今回は「WordPress(ワードプレス)のローカル環境構築」についてです。

 

「Local by Flywheel」を使用して本番環境(公開している)サーバーでは無くローカルでWordPress(ワードプレス)を利用できる環境を構築します。

 

「とりあえず記事が出来たから本番サーバーで公開してどう表示されるか見てみよう」

というあなた！！

 

まだアクセスがほとんどない個人ブログであってもできるだけローカル環境で表示、動作確認をしてから本番サーバーに公開するようにしましょう。

とは言ってもそのローカル環境を作るのが難しかったら

「やっぱいいや……」

となってしまう気持ちとてもわかります。

わたしもずっと敬遠してました。

でもいざやってみると非常に簡単にローカル環境の構築が出来ましたので紹介します。

 

勿論今回も【初心者向け】ですので安心してください。

 

「ローカル環境」とは

ザックリですが、WordPress(ワードプレス)で作成されたページの表示をローカル(自分の作業PC)で出来るようにしたものです。

WordPress(ワードプレス)で作成されたページの表示にはphp、webサーバー、MySQLが必要ですがインストールや設定は難しいです。

これを非常に簡単に実現したのが「Local by Flywheel」です。

「Local by Flywheel」をインストールし、簡単な設定さえすればWordPress(ワードプレス)で作成されたページの表示をローカル(自分の作業PC)で簡単にできます。

 

「Local by Flywheel」を使ってみる

 

「Local by Flywheel」のインストール

 

１：「Local by Flywheel」のダウンロードサイトへ接続

⇒ダウンロードはこちら

２：「FREE DOWNLOAD!」をクリック

３：必要情報を入力し「GET IT NOW!」をクリック

「Download Local by Flywheel!」という表示と共に必要情報を入力する画面が表示されますので入力しましょう。

全て入力したら「GET IT NOW!」をクリック。

するとダウンロードが開始されます。

下記の画面が表示されますので少し待ちましょう。
※重いのでダウンロードに時間がかかります

４：ダウンロードした「local-by-flywheel-2-2-3-windows.exe」を実行

ダブルクリックでOKです。

するとこのような画面が表示されます。

５：「LET'S GO!!」ボタンをクリック

クリックすると設定が始まります。

この間何度か下記項目が表示されますが、

「このアプリがデバイスに変更を加える事を許可しますか？」
→「はい」でOK

「新しいネットワークが検出されました」
→自身の環境に合わせて

というようにしてください。

インストールと設定が完了すると以下のような画面が表示されます。

この画面が表示されれば「Local by Flywheel」のインストールは完了です。

次からはローカル環境にサイトの構築をしていきます。

「Local by Flywheel」のローカル環境へサイトの構築をする

インストールの完了から作業を続ける流れで説明して行きます。

１：「+ CREATE A NEW SITE」ボタンをクリック

２：サイト名を入力し「CONTINUE」をクリック

日本語は入力できないのでアルファベットで入力しましょう。

「ADVANCED OPTIONS」は触れないでOKです。

３：環境選択し「CONTINUE」をクリック

・Preferred
おすすめで設定してくれる
※後からPHPバージョンとwebサーバーの変更はできないので非推奨

・Custom
自分でPHPやwebサーバー、MySQLのバージョンを指定する。

実際に本番環境で使用しているバージョンに合わせる事を考えると「Custom」とする事を推奨。
「PHP」「webサーバー」は「Custom」にすれば後から自由にバージョンは変えられます。
MySQLは変更できないので事前に本番サーバーのバージョンを調べて合わせましょう。

Customで選択できる内容

私はXサーバーのX10プランなので、

php：7.0.3
webサーバー：Apache
MySQL：5.6

と設定しました。

４：必要情報を入力し「ADD SITE」をクリック

3項目入力が必要ですので全て設定しましょう。

・WordPress Username
・WordPress Password
・WordPress Email

「ADD SITE」をクリック後に表示される「このアプリがデバイスに変更を加える事を許可しますか？」は全てはいでOKです。

５：「SAVE AS DEFAULT 」をクリック

以上でローカル環境のサイト構築は完了です。

サイトを増やしたい場合は手順１~４を繰り返し実行してください。

続いてローカルサイトが表示できるかとWordPress(ワードプレス)の管理画面が操作出来るかを確認します。

ローカルサイトの確認

「Local by Flywheel」の管理画面

ローカル環境の構築が完了するとこのような「Local by Flywheel」の管理画面が表示されます。

画面の説明を少しします。

・サイト名
大きく表示されています

・ADMIN
WordPress(ワードプレス)の管理画面へ

・VIEW SITE
ローカルサイトをブラウザで表示する。

１：WordPress(ワードプレス)の管理画面表示確認

ローカルサイトの管理画面から「ADMIN」をクリックし、WordPress(ワードプレス)の管理画面が表示されるか確認します。

ブラウザにWordPress(ワードプレス)の管理画面のログイン画面が表示されるので登録時の情報を入力してください。

ログイン後WordPress(ワードプレス)の管理画面が表示されればOKです。

２：ローカルサイトの表示確認

実際にローカルサイトの表示が出来ているか見てみましょう。

「Local by Flywheel」の管理画面にある「VIEW SITE」をクリックしてみてください。

するとブラウザでローカルサイトが表示されます。

しっかり表示されていますね。

URLもローカルである事が確認出来ました。

以上でローカル環境の構築作業は完了です。

お疲れ様でした！！

まとめ

いかがでしたか？

「表示されるか、動くか分からないけどとりあえず公開してみよう」

は流石に危険なので、まずはローカル環境を整備してから公開する。

基本的な事だとは思いますが

「個人ブログでそこまで……」

という気持ちがあり面倒なのもわかります。

この「Local by Flywheel」はとても簡単にWordPress(ワードプレス)のローカル環境が作れますのでそんな方は是非試してみてください。

スポンサーリンク