今回はWordPressのローカル環境を簡単に構築できる「Local(Local by Flywheel)」について解説していきます。
そもそもローカル環境を構築する理由
リモート環境とローカル環境の違い
本来、WordPressサイトはサーバーを経由して、インターネット上に公開される環境の構築を行うことで誰でもWebサイトを見ることが可能になります。この環境のことを「リモート環境」といいます。
反対にローカル環境とは、パソコン上などに仮想環境を構築し、インターネットに接続せずともサイトを制作することが可能です。
また、最終的なお客さん(エンドクライアント)のリモート環境を「本番環境」といい、
検証用のリモート環境を「テスト環境」と呼ぶことが多いです。
実案件での流れ
実案件でも、直接本番環境でサイトを編集していくことはほとんどなく、「ローカル環境→テスト環境→本番環境」の順でデータを移していきます。
テスト環境はあくまで検証用で、サイトがインターネット上でも正しく動作するかを確認するためのものなので、
Basic認証とnoindex処理を行い外部にデータが漏れないようにしましょう。
例えば、A社(エンドクライアント)が制作会社Bにコーポレートサイト制作を依頼し、制作会社Bからサイト制作業務を請け負った場合を仮定すると、制作から納品までの基本的な流れは以下の通りになります。
- ローカル環境でWordPressサイトの制作を完了
- テスト環境にデータを移す
- 制作会社に提出してOKが出る
- エンドクライアントに提出してOKが出る
- 本番環境にデータを移して納品完了
また、テスト環境は制作会社が準備していることもありますが、そうでない場合は自分のサーバーを経由してテスト環境を準備しましょう。
ローカル環境を「Local」で構築する理由
ローカル環境を構築するためにはLocalだけでなく、「XAMPP(ザンプ)」や「MAMP(マンプ)」というものがありますが、個人的にLocalのほうが手軽にさくっと環境を構築しやすいので利用しています。
【たった4ステップ】Localでローカル環境を構築する流れ
まずは、Localをダウンロードしましょう!
公式サイトからアプリをダウンロードします。下記の画像のボタンのどちらかをクリックしましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/29024388aabdc5e6fb90ed0e5582c1b5-1024x555.png)
次に使用環境を選択します。こちらは各々の環境を選択しましょう。今回はMacで進めていきます。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-8.png)
次の画面のメールアドレスは入力必須なので、そちらを入力したら「GET IT NOW!」のボタンをクリックすることでダウンロードが始まります。
![](https://masata-blog.com/wp-content/uploads/2022/08/3583bb980d9f04a4b85d03a200231961.png)
ダウンロードしたらインストールし、アプリを開きましょう。
初期画面に「Looks like you haven’t created any sites yet!」という文章と「CREATE A NEW SITE」というボタンが表示されていればOKです!
ローカル環境にWordPressサイトを作成するには、初期画面にある「CREATE A NEW SITE」というボタンもしくは下の画像の「+」ボタンをクリックしましょう。
「CREATE A NEW SITE」というボタンは1サイトでも生成すると表示されなくなるので、基本的には「+」ボタンを利用することになります。
![](https://masata-blog.com/wp-content/uploads/2022/08/57051252f083e7a381990ee9580ed466-1024x883.png)
次に「Create a new site」と「Create from a Blueprint」という選択肢が出ますが、今回は「Create a new site」を選択します。
- 「Create a new site」:初期状態のWordPressサイトを構築する。
- 「Create from a Blueprint」:よく使うプラグインのインストールや最初に行う設定などが終わっているサイトをテンプレートのような形で保存できる機能があります。その保存したデータを活用してサイトを立ち上げるときに選択します。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-9-1024x887.png)
次にサイト名を入力します。今回は仮に「test」としておきます。こちらは案件によって任意のものを設定しましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-10-1024x884.png)
次に開発環境の選択を行います。今回は「Preferred」を選択しましょう。
「Custom」の方では、PHPのバージョン、Webサーバー、データベースを指定できます。特に理由がなければこちらは選択しなくていいです。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-11-1024x891.png)
次に、管理画面にアクセスするためのユーザー名とパスワードを設定します。メールアドレスは初期設定のままでも、あとから変更できるのでここでは操作しなくていいです。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-12-1024x888.png)
こちらのような画面が表示されたらOKです!それでは「WP Admin」をクリックして管理画面を開いていきます。
ちなみに「Open site」のほうは管理画面にアクセスせずにサイトを見ることができます。
![](https://masata-blog.com/wp-content/uploads/2022/08/5c112f94a2bc2adf8515dc01d64d811d-1024x765.png)
管理画面にアクセスできたら、先ほど設定したユーザー名とパスワードを入力しましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-15-844x1024.png)
次に管理画面の表記を英語から日本語に変更します。
管理画面左のサイドバーにある「Settings」のうち「General」をクリックしましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-16-648x1024.png)
そうしましたら、「Site Language」を「日本語」に、「Timezone」を「Tokyo」に変更します。
![](https://masata-blog.com/wp-content/uploads/2022/08/905101b43e2d5e2710660b8fb216d0c7-892x1024.png)
WordPressに始めからいくつかの投稿、固定ページが入っています。
実際には使わないデータも含まれているので、そちらを削除していきます。
まずは投稿を削除します。
管理画面左のサイドバーにある「投稿」のうち「投稿一覧」をクリックしましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-17.png)
「Hello world!」というタイトルの記事をゴミ箱へ移動します。
記事にカーソルを合わせると「ゴミ箱へ移動」と表示されますので、そちらをクリックしましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/c3d46e02c275c8523bbeeac7d85d7c3e.png)
まだ記事はゴミ箱へ移動しただけなので、ゴミ箱から記事を完全に削除します。
「ゴミ箱」をクリックしましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/756b0c700138921c43ab5a59a3be0216.png)
記事にカーソルを合わせると「完全に削除する」と表示されますので、そちらをクリックします。
![](https://masata-blog.com/wp-content/uploads/2022/08/5aabcc2a9b3187b1426772df6a95ffd7.png)
続いて、固定ページを削除しましょう。
管理画面左のサイドバーにある「固定ページ」のうち「固定ページ一覧」をクリックします。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-19.png)
投稿のときと同じように「Privacy Policy」と「Sample Page」の2ページを「ゴミ箱へ移動」させます。
![](https://masata-blog.com/wp-content/uploads/2022/08/image-20.png)
こちらもまだゴミ箱へ移動しただけなので、ゴミ箱から記事を完全に削除します。
「ゴミ箱」をクリックしましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/0ba350e76df6e4c063db01df8812fba9-1.png)
ページにカーソルを合わせると「完全に削除する」と表示されますので、そちらをクリックします。
![](https://masata-blog.com/wp-content/uploads/2022/08/531095bfda60f253a5d6f879df08050d.png)
以上がLocalで初めてサイトを立ち上げるときの一連の流れになります!
その他の「Local」の機能
WordPressのPHPファイルの編集
Localに入っているWordPressのフォルダを開きたい場合は、下の画像の「Go to folder」をクリックしましょう。
![](https://masata-blog.com/wp-content/uploads/2022/08/af83a64d65b5fd4ef7a97275fa0c569b-1024x763.png)
基本的に編集するフォルダは「app」→「public」の中に入っています。
この中には、WordPressを構成する「コアファイル」が入っています。ちなみにWordPressのプラグインやテーマなどのデータは「wp-content」の中に入っています。
![](https://masata-blog.com/wp-content/uploads/2022/08/5d71784ce62ff40fa55758d11f9d263c.png)
![](https://masata-blog.com/wp-content/uploads/2022/08/image-22.png)
![](https://masata-blog.com/wp-content/uploads/2022/08/d8d57241020cddc0308dfa9055d16b4c.png)
サイトを停止・再開させる
Localで常にサイトを稼働させておくと、PCに負荷がかかり続け動作が重くなっていくので稼働させておく必要がないサイトは利用を停止しておきましょう。
停止させるにはLocalで停止させたいサイトを開き、右上の「Stop site」をクリックします。
![](https://masata-blog.com/wp-content/uploads/2022/08/af83a64d65b5fd4ef7a97275fa0c569b-1-1024x763.png)
反対に、稼働を再開させる場合は同じく右上の「Start site」をクリックします。
![](https://masata-blog.com/wp-content/uploads/2022/08/ca6ab207b991dd1509d62d38e7feb898-1024x727.png)
サイトの削除
サイトの追加方法は前述しましたが、サイトの削除も行うことができます。
削除したいサイトを右クリックして「Delete」をクリックすると実行できます。
![](https://masata-blog.com/wp-content/uploads/2022/08/ff8b0e1c7874042edfdb005ed4e093ca-1024x1005.png)
終わりに
以上が「Local(Local by Flywheel)」の基本的な使い方の解説になります!
ローカル環境はどの案件でも構築することになるので、また構築する際にこちらの記事の内容を実践してみましょう!