・WordPressのローカル環境構築はどうやって行うの？
・他に「MAMP、XAMPP」なども聞くけど、どれが使いやすいの？
こんな疑問や悩みに答えます。
WordPressの環境構築方法は、いくつかありますが、今回は初心者でも使いやすい「Local」というツールでの構築方法を紹介していきます。
自分は元々「MAMP」を使用していましたが、現在は「Local」で環境構築をしています。
便利な機能の紹介もあるので、ぜひ「Local」でのローカル環境開発にトライしてみてください。
- WordPressのローカル環境構築方法
- WordPressのローカル環境構築に使われる主なツール
- 便利なプラグイン機能紹介
- ローカル環境構築の比較
このブログ「とらまるブログ」の運営者。2019年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログ情報発信を行っている。これまでのWeb制作実績は60件以上。
WordPressローカル環境構築とは
ローカル環境とは、自分のパソコン上に構築する仮想環境のことです。
WordPressでサイトを構築する際に、本番環境で直接構築作業することはあまりなく、ローカル環境で作業します。
サイト構築手順としては以下になります。
ローカル環境構築 → テスト環境反映 → 本番環境反映
ローカル環境では、自分のパソコンでしか見れないのに対して、テスト環境、本番環境は、自分以外の全世界の人がパソコンやスマホを通して確認することができます。
WordPressをローカル環境で構築するには、色々準備する必要があり、1から構築するのにはとても時間がかかります。
その準備を省いて、すぐにWordPressを構築するためのツールがいくつかあります。
WordPressローカル環境構築に使用する主なツール
WordPressのローカル環境を構築できるツールとしてLocal、XAMPP、MAMPなどがあります。
それぞれ簡単に紹介していきます。
Local
ローカルは、初心者でも簡単にWordPress環境を構築できるツールです。
Windows、Macどちらでも使用できます。
自分も使用していますが、UIがわかりやすく操作しやすいです。
また、WordPressのテンプレートを用意できて「ワンクリック」で、WordPressの環境構築ができます。他にもいろんな便利な機能があります。
MAMP
MAMPは、以下のWordPress構築に必要な開発環境が用意されており、簡単に環境構築ができるツールです。
- Apache：Webサーバソフトウェア
- MySQL：データベース管理システム
- PHP：Webプログラミング言語
MAMPは、Windowsでも使用できますが、主に「Mac」に特化して作成されています。
自分は、Macを使用しているので、最初はMAMPを使用して開発環境構築をしていました。
MAMPは、「無料版」「有料版」とあるそうですが、自分は無料版で問題なく制作できていたので、無料版で十分だと思います。
XAMPP
XAMPPは、Windows向けにWebサーバー環境を構築できるツールです。
Webサーバーの知識が必要なため初心者には扱いづらいそうです。
また、WordPress構築ように作られたものではないため、最近はXAMPPよりもLocalで開発環境構築をする人が多いそうです。
Local(local by Flywheel)の使い方
今回の記事では、「Local」を使ったローカル環境の構築方法を紹介します。
インストール・ダウンロード
上記のサイトにアクセスして、「無料でダウンロード」をクリックします。
以下が表示され、PC環境について聞かれます。
今回は、「Mac」をベースに進めていきます。
選択すると、「名前」、「組織の種類」、「メールアドレス」の情報を聞かれます。
記入後「今すぐ手に入れましょう！」をクリックします。
クリック後、以下が表示されファイルのダウンロードが始まります。
そして、ダウンロードしたファイル「local-xx-mac.dmg」をダブルクリックで開きます。
すると「Install Local」が表示されるのでダブルクリックします。
そしてこちらが開かれるので、ドラグアンドドロップで、LocalアプリをApplicationsフォルダに移動させます。
ApplicationsフォルダのLocalを開くと、こちらが表示されるので、開くをクリックします。
その後は、手順にそって行います。
するとこちらの管理画面が表示されます。
これで、WordPressサイトを作成する準備が整いました。
新規サイトWordPressサイト作成
次に新規サイトまでの手順を紹介します。
左下の＋をクリックします。
初期状態であれば、画面中央に「＋Create a new site」ボタンが表示されていると思いますので、そちらからでも作成可能です。
次に、「Create a new site」と「Create from a Blueprint」の二つが選択できますが、今回は「Create a new site」を選択して、右下の「Continue」ボタンをクリックします。
サイト名を記入します。今回は、「demo_site」と名前をつけました。
左下は、サイトのドメイン名になります。基本は、サイト名でつけた文字列に「.lcoal」が加わります。
例）http://demosite.local/
アンダーバー「_」は含まれないので、きおつけてください。
記入したら、右下の「Continue」ボタンをクリックします。
ここでは、「Preferred」と「Custom」がありますが、特に指定がなければ、Preferredを選択してください。
Customを使用するパターンは、おそらく既存のサイトをローカルに落とし込む時があると思います。
既存の環境に合わせて、「PHPのバージョン」、「Web Server（Apache or nginx）」、「Databaseのバージョン」を設定します。
設定後、右下の「Continue」ボタンをクリックします。
次は、WordPressの「ユーザー名」」「パスワード」「メールアドレス」を設定します。
ユーザー名とパスワードはログイン時に必要になるので、どこかにメモして残しておいてください。
最後に、右下の「Add Siete」をクリックで、WordPressサイトの作成が完了になります。
完了後は以下の画面が表示されます。
「Open site」でサイトが開けます。設定を何もしていないのでデフォルトのテーマが表示されます。
「WP admin」からは、WordPressの管理画面にアクセスできます。
テンプレート(雛形)作成
「Create from a Blueprint」を使用して、テンプレートを作成します。
Create from a Blueprintは、あらかじめテンプレートを保存しておくことで、上記の「新規サイトWordPressサイト作成」の手順を省いて簡単に構築をすることができます。
個人的にとても重宝しているので、ぜひ覚えておくことをオススメします！
それでは、解説していきます。
まず、WordPressの簡単な設定をして、テンプレートを作成していきます。
ワードプレスログインは、「WP admin」ボタンからアクセスできます。
アクセス後、以下のログイン画面が表示されます。
先ほど設定した、「ユーザー名」「パスワード」を入力後、右下の「Log In」をクリックします。
ログイン後、WordPressの管理画面が表示されます。
今回は、「日本語設定」と「時間設定」を行なっていきたいと思います。
「Settings」→「General」を選択します。
そして、「Site Language」と「Timezone」の欄をそれぞれ設定します。
Site Languageは、デフォルトが「English」になっているので、「日本語」に設定します。
Timezoneは、「UTC+0」から「UTC+9」に変更します。
設定後、一番下にある「Save Changes」をクリックして、保存します。
するとサイトが日本語設定になると思います。
他によく使うプラグインなどがあれば追加しても良いと思います。
設定後、Localに戻り、サイト名の上で右クリックをします。
「Save as Blueprint」があるのでクリックします。
クリック後、こちらが表示されます。
「Name your new Blueprint」でテンプレート名が決めれるので、自由に設定後、右下の「Save Blueprint」をクリックしてください。これで保存が完了しました。
管理画面メニューバーの上から4つ目をクリックすると先ほど保存したテンプレートが保存されていると思います。
では、作成したテンプレートを使用して、サイトを構築したいと思います。
新規作成の時と同様に、管理画面左下の「+」をクリックします。
新規作成の際は、「Create a new site」をクリックしたましたが、今回は「Create from a Blueprint」をクリックして、「Continue」ボタンをクリックします。
すると、テンプレートの一覧が表示されるので、使用したいテンプレートを選択します。
その後、右下の「Continue」ボタンをクリックします。
この後は、サイト名をを決めるだけでWordPressを構築できます。
これは、MAMPではできないので、知った時は本当に感動しました。
削除
サイトを追加した後に、不要なサイトも出てくると思います。
そのために、削除方法をご紹介していきます。
削除は簡単で、削除したいサイト名の上で右クリックします。
一番下に「Delete」があるので、そちらをクリックすれば削除できます。
便利なプラグイン機能
Localにはプラグインがあり、便利な機能を追加することができます。
ここでは、自分が今使用しているプラグインを紹介したいと思います。
まず、プラグインの追加は以下「Add-ons」から行えます。
Instans Reload
「Instans Reload」というプラグインを紹介したいと思います。
Instans Reloadは、CSSファイルを変更すると自動更新してくれる機能です。
正直めちゃめちゃ便利なので、ぜひ追加しておくことをオススメします！
では追加方法と使用方法を説明していきます。
先ほどのプラグイン一覧画面から「Instant Reload」を選択します。
「Install Add-on」をクリックする必要がありますが、クリックできない状態になっているかもしれません。
これは、一度自分のアカウントでログインする必要があります。
ログイン方法を解説します。クリックできる方は、飛ばしていただいて大丈夫です。
メニューバーの左上のアイコンをクリックして、「Login to Local」をクリックします。
ログイン画面が表示されるので、「メールアドレス」、「パスワード」を入力して、「Log in」ボタンをクリックします。
すると、ボタンがクリックできるようになっていると思います。
もう一度クリックします。
すると再起動して、インストールが完了した状態になっていると思います。これでプラグインの追加が完了しました。
次にプラグインの使用方法です。
使用したいサイトを開きます。
「Tools」→ 「Instant Reload」を選択します。「off」になっている箇所を「on」状態にします。
「on」の状態になれば、設定完了です。
あとは、CSSを修正して、自動リロードすることを確認してみてください。
MAMPとLocalの比較
自分は最初、MAMPを使用して、その後Localに変更しました。
使用した経験から比較すると、一目瞭然で「Local」の方が使いやすいです！
個人的に「MAMP」よりいいなと感じたのは以下の点です。
迷っている方は、「Local」使用をオススメします！
まとめ
以上、Localでのローカル環境構築について紹介してきました。
もし、今回の記事でLocalを使ってみようと思った方は、テンプレ作成とCSSのホットリロードは絶対に使ってみて欲しいです。
今後もコーディングなどに関する役立つ情報をどんどん発信していこうと思いますので、ぜひ参考にしてください。
コメント