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

LINEで送る
Pocket

タイトル

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

今回は「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」のインストール

 

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

ダウンロードはこちら

2:「FREE DOWNLOAD!」をクリック

ダウンロード画面

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

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

入力項目

・platform(どちらか選択)
∟Mac
∟Windows
・First Name
・Last Name
・Work Email
・Company Name
・Phone Number
・Number of websites

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

入力画面

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

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

ダウンロード画面

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

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

実行ファイル

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

実行結果

5:「LET’S GO!!」ボタンをクリック

LET'S GO

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

設定中画面

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

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

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

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

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

設定画面

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

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

スポンサーリンク

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

サイト構築

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

1:「+ CREATE A NEW SITE」ボタンをクリック

サイト追加

2:サイト名を入力し「CONTINUE」をクリック

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

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

サイト名入力

3:環境選択し「CONTINUE」をクリック

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

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

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

Customで選択できる内容
phpバージョン

5.2.4
5.2.17
5.3.29
5.4.45
5.5.38
5.6.20
7.0.3
7.1.4
7.2.0

webサーバー

nginX
Apache

MySQL

5.5
5.6
※MySQLは一度選択すると変更不可

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

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

と設定しました。

バージョンあれこれ設定画面

4:必要情報を入力し「ADD SITE」をクリック

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

・WordPress Username
・WordPress Password
・WordPress Email

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

ADD画面

5:「SAVE AS DEFAULT 」をクリック

SAVE画面

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

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

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

ローカルサイトの確認

設定確認

「Local by Flywheel」の管理画面

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

サイト設定画面

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

管理画面

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

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

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

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

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

クリック

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

ログイン画面

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

画面表示

2:ローカルサイトの表示確認

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

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

クリック

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

ローカルサイト表示

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

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

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

お疲れ様でした!!

まとめ

いかがでしたか?

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

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

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

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

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

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

るーしー

ではまた!

スポンサーリンク
LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です