驚くほど簡単!Local(ローカル)を使ってwordpressのテスト環境を手に入れる

  • | 公開 2021年04月06日
驚くほど簡単!Local(ローカル)を使ってwordpressのテスト環境を手に入れる

「wordpressのテスト環境って、なんでこんなに作るの面倒なの?」

何度こう思ったことか…。

今まではXampp(またはMANP)を使っていましたが、Flywheelさんが提供してくれているLocal(ローカル)を利用すると、初めて使ったとしても10分かからず簡単にwordpress用のテスト環境が作れてしまいます。

  • 無料で使える(PRO版は有料)
  • サーバー知識ゼロでもテスト環境が構築できる
  • WordPressの開発が簡単にできる機能満載

一度使えば手放せないくらい、wordpressユーザーには必需品と言えるため、インストールから各画面の説明をまとめました。

この情報が、あなたのお役に少しでも立てられれば嬉しいです。

Local(ローカル)でwordpressのテスト環境を作る方法

Local(ローカル)の設定方法として下記の条件で説明しています。

  • OS   :Windows
  • ブラウザ:Google Chrome

MACでも、FireFox・safari・Microsoft Edgeでも基本は変わらないので、同じような流れとして使えるのでご安心ください。

インストールの流れ

何か特殊な設定や、サーバー構築の経験がそもそもなくても、知識ゼロでwordpressのテスト環境が手に入ります。

基本はサイト名を入れたり、ポチポチとクリックするだけで基本構築が完了するため、私の説明がなくても本来であれば大丈夫なくらい簡単です。

1 サイトにアクセスして[OR DOWNLOAD FOR FREE] もしくは [DOWNLOAD] のボタンをクリック

まずはサイト元であるLocalへアクセスしましょう。

URLにも「wp」が入っているので、wordpressのためのサービスだと示されており、運営者さんの心遣いを感じられます。

[OR DOWNLOAD FOR FREE] もしくは [DOWNLOAD] をクリックすると、何のOS用のLocalを無料ダウンロードするか選択肢が出てきます。

2 無料でダウンロードするためOSの種類を選ぶ

[Please choose your platform]のセレクトボックスをクリックすると、下記の選択肢が出てきます。

  • Mac(マック)
  • Windows(ウインドウズ)
  • Linux – Debian based (Ubuntu, etc)
  • Linux – RPM based (Red Hat, Fedora, CentOS, etc)

あなたのパソコン環境に応じて選択しましょう。

3 メールアドレスを入力して[GET IT NOW!]をクリック

[Work Email]にメールアドレスを入力し、[GET IT NOW!]をクリックすれば、wordpressをパソコンで構築するためのLoacalプログラムの無料ダウンロードが始まります。

注意事項
・メールアドレスのみ入力必須
・メールアドレスを入力するとLocalから機能の概要がメールで送られてきます。※ もし、普段使っているアドレスを入力するのが怖い場合、新しくLocal用のフリーアドレスを取得頂くのもオススメです。(例:Gmail、MSNなど)

名前や電話番号を入れる枠もありますが、ここは入力しなくて大丈夫です。

4 自動の無料ダウンロードが始まらない場合は[click here.]をクリックして手動ダウンロードする

[GET IT NOW!]をクリックすれば、本来は自動で無料ダウンロードが始まるのですが、いつまで経っても進まない場合は[click here.]をクリックして、手動で無料ダウンロードを行います。

手動でも無料ダウンロードできるため、万が一自動ダウンロードが始まらなくても安心してくださいね。

5 exeファイルが無料ダウンロードされる

無料ダウンロードが完了した場合、開いているブラウザの下の方に、ダウンロードファイルが表示されていると思います。

ファイル名:local-5.10.3-windows.exe(2021/4/6時点)※ exeファイルとは、Windowsプログラムのこと

開発元であるFlywheelさんが常に最新バージョンへ上げてくれているため、無料ダウンロードできるファイル名はタイミングによって違うものになります。

6 exeファイルをダブルクリックして[現在のユーザーのみにインストールする]を選択し[次へ(N)>]をクリック

落とせたLocalのファイルをダブルクリックすると、設定画面が出てきますので[現在のユーザーのみにインストールする]を選択し[次へ(N)>]をクリックして進めていきます。

例え[キャンセル]をクリックしても、改めてexeファイルをダブルクリックすれば始められるので、安心してください。

7 インストール先を選択し[インストール]をクリック

すでにインストール先は選択されている状態ですが、基本はそのまま変更しないで大丈夫です。

パソコンの状況によってインストール先が多少違ってきます。
例:C:\Users\〇〇〇〇〇\AppData\Local\Programs\Local

もし、デフォルト以外の場所へインストールしたい場合は[参照]を押して、あなたがLocalのデータを入れたい場所を選んで[インストール]をクリックします。

8 インストール中

インストール中の画面で、時間も数分待てば終わるので、少しだけ待ってみましょう。

9 インストール完了画面が表示されたら[完了(F)]をクリック

「Localセットアップウィザードは完了しました。」の文章が出ればインストールが完了です。どうでしょう、とても簡単でしたよね?

完了後にそのままLocalを立ち上げるなら[Localを実行(R)]にチェックを入れたまま[完了(F)]をクリックしましょう。

10 規約同意についてチェックを入れて[I AGREE]をクリック

使いだす前に、FlywheelさんがLocalを使うための規約同意に関する確認画面を出してきます。

「I have read and agree to Local’s Teams of service.」と書かれたチェックボックスは、簡単に言えば「あなたはLocalの規約に同意しますか?」と聞かれています。

チェックを入れるとボタンが緑に変わりクリックが可能に。

11 [×]ボタンを押してLocalの設定画面を見る

この画面は特に必要情報はないので、読み飛ばしてOKです。

[×]を押してLocalを使っていきましょう。

12 [+ CREATE A NEW SITE]をクリックして設定へ進む

Local上にwordpressサイトを構築するためには、少しだけ情報入力が必要となります。

それでは早速、新しいwordpressサイトを追加するために[+ CREATE A NEW SITE]をクリックして設定していきます。

13 サイト名を入力して[CONTINUE]をクリック

まずはwordpressのサイト名を入力します。※ アルファベットのみが入力可能で、日本語は入れられません。
※ すでに追加済のサイト名と同じ名前では作れません

[ADVANCED OPTIONS]で詳細設定もできますが、初めて作る場合は特に設定の必要はありません。

Local site domainドメイン名をサイト名とは違う名前にしたい場合に使用
Local site pathサイトのパスを変更する
Create site from Blueprintブループリント機能(保存した設定・プラグインなど保存した構成でwordpressを構築する機能)

サイト名を入れれば[CONTINUE]ボタンが緑になってクリックできるようになります。

頻繁に作るようになったら?
毎回同じ設定を作るのも手間なので、ブループリント機能を活用すると、セットしておいた構成をそのまま反映することができるだめ、wordpressを量産する場合は非常に役立つ機能となります。

14 環境を選択する画面で[Preferred]を選択して[CONTINUE]をクリック

環境構築を選択するための画面ですが基本的に[Preferred]を選べば、その時で最適な環境を選択してくれるため、特に独自の設定は必要ないと思います。

PreferredPHP7.5.5
Web Server nginx
MySQL version 8.0.16
2021/4/6時点
CustomPHP Version5.6.39/7.3.5/7.4.1/8.0.0
Web Servernginx 1.16.0/Apache 2.4.43
DatabaseMariaDB 10.4.10/MySQL 5.7.28/MySQL 8.0.16

必要に応じて環境を選択しますが、問題なければ[CONTINUE]をクリックしてそのまま先に進めます。

15 ID・パスワードを入力して[ADD SITE]をクリック

WordPressの管理画面にアクセスするための情報を設定します。

WordPress Usernamewordpressにログインするためのユーザー名を入力。
WordPress Passwordwordpressにログインするためのパスワードを入力。ローカル環境だとしても大事な情報なのでパスワード生成(パスワード作成)を使うのがオススメです。
WordPress Emailメールアドレスは初期値として「dev-email@flywheel.local」が入っていますが、そのまま変えないで大丈夫です。(別のアドレスに変更しても大丈夫)

ここで入れた情報をあとで使うため、入力したユーザー名・パスワードは控えておきましょう。

「Is this a WordPress multisite?」と選択項目があり、これはマルチサイト化の設定についての項目です。
Yes – Subdirectory(サブディレクト)
Yes – Subdomain(サブドメイン)

それぞれ必要な場合は選択しておきますが、一般的なWordPressを構築するなら不要なので、選択しなくても大丈夫です。

万が一、ログイン情報を忘れてしまった場合は?
忘れてしまったとしてもOne-click Adminの機能を使って、ログイン情報なしで管理画面にアクセスできる方法もあるので安心してくださいね。

16 サイト作成後に[ADMIN]で管理ページ・[OPEN SITE]でページを開く

[ADD SITE]をクリックするとサイト構築が行われて、しばらく待てば上記の画面のように詳細情報が表示されます。

早速WordPressの管理画面と、実際のプレビューを見たい場合は、それぞれ下記のボタンをクリックしましょう。

ADMIN管理画面を立ち上げるためのリンクボタン
OPEN SITEWordPressのプレビューページを表示させるためのリンクボタン(トップページが開きます)
管理画面が英語になっている、どうしたらいい?

初めてLocalでWordPressを追加して管理画面を立ち上げると、言語が英語になっているのでビックリするかもしれませんね。

英語は簡単に日本語化できるので安心してください。

WordPressを日本語化する流れ
① WordPressの左ナビの[Settings]の[general]をクリック
② Site Languageのセレクトボックスで[日本語]を選ぶ
② タイムゾーンで[東京]を選ぶ※東京はアフリカの二つ上にあります(見つけずらいです!)

日本語化だけでなく、時間帯も変わっているので、ここも忘れず変更しておきましょう。

画面の使い方

一度設定したからといって変更できないわけではなく、柔軟に変更することができます。

例えばセレクトボックスで簡単に変更できてしまうので、サーバー知識がなくともスムーズな調整が可能です。

1 画面の説明

① メニュー各種設定
② サイドナビサイト構築に関わるメインの設定項目
③ サイトリスト追加したサイトのリスト
④ サイトの詳細選択したサイトの構成状況

2 メニュー

Add New Site(Ctrl + N)新しいサイトを追加する
Import Site(Ctrl + I)データをインポートする(zipなど)
Preferences環境設定
・テーマの色(ライトモード、ダークモード)
・ページを開く際のブラウザ(デフォルトはEdge)
・設定メールアドレス
・ドメインのスラッグ
・除外ファイル
など
About LocalLocalのバージョン
Check for Updates最新バージョンのアップデート
Helpヘルプコミュニティへのリンク
Reveal Local Router’s LogsLocalのルーターのログ
Reveal Local’s LogLocalのログ
ExitLocalを終了する

3 サイドナビ

アカウントUPGRADE TO PRO:アップグレードページへ移動
Local Hub   :LocalProサブスクリプションへのアクセス
Local Sitesローカルで作っているサイトリスト
Connectネット上のサイトにアクセスしてローカル環境で更新できる
Add-onsアドオンの追加
Suppportヘルプコミュニティへのリンク
Add Local Sites新しいサイトを追加
     

4 サイトリスト

時計マーク追加したサイトの時間表示ボタン
<<マークサイトリストの閉会ボタン
サイトラベル作成したサイト名。★マークをクリックすると上部に固定されます。緑の〇が稼働中、グレーの〇が停止中。
sites running稼働しているサイトの数
STOP ALLリスト上の全てのサイトを停止するボタン

5 サイト詳細

ヘッダー
サイト名サイト名。クリックするとページがブラウザで立ち上がる
~\Local Sites\〇〇〇ローカルに保存されているパス。クリックするとデータが格納されているフォルダ先が立ち上がる
INSTANT RELOADリロードボタン(通常は何もおせない状態)
STOP SITE■サイトの公開を止めるボタン(停止している時はSTART SITE▶)※停止していると細かい詳細は変更できない
                    
サイト
ADMINwordpressの管理ページのアクセスボタン
OPEN SITEworpressのページのアクセスボタン
タブ
OVERVIEW
Site Domainサイトのドメイン名
SSLSSLが有効か無効か
Web Server使用しているWebサーバーの種類
PHP VersionPHPのバージョン
Database使用しているデータベースの種類
One-click Adminワードプレスの管理画面を開く際に、通常ならIDとパスワードを入力しないと進めませんが[Disable]ではなく[ADMINISTRATORS]を選択すると、ID・パスワードの入力必要なく、そのまま管理画面に入れます。
WordPress Versionワードプレスのバージョン
Multisiteマルチサイト化の情報。
・No
・Subdirectories
・Subdomains
                            
DATABASE
Connect[OPEN ADMINER]へのログインリンク
データベース内を確認できるアドミナーへすぐ繋がります。
Hostデータベースのホスト
Portデータベースのポート
Database Nameデータベースの名前
Usernameデータベースのユーザー名
Passwordデータベースのパスワード
UTILITIES
 
MailHog[OPEN MAILHOG]をクリックするとメールのテスト画面へ移動する
       
TOOLS
Live Links [Pro]Live LinksのPro版を使うためのページボタン
Instant Reload [Pro]Instant ReloadのPro版を使うためのページボタン
Link Checker [Pro]Link CheckerのPro版を使うためのページボタン
Image Optimizer画像圧縮のアドオン
フッター
Live Linkローカル以外でもサイトが確認できる機能
EnableLiveLinkを有効にするボタン。クリックすると外部でも見れるURLが発行されます。共有を停止する場合は[Disable Link]を押して無効化します。
CONNECT HOSTFLYWHEELやWPengineへのログインするためのリンクボタンです。

最後に。

WordPressを使うあなたなら、自分のパソコン上で環境を用意する手間、今まで感じていたと思います。

私も一度入れたXAMPPをそのまま使い続けていましたが、Localに出会って今までの不満が解消されました。

これから増えていくWordPressユーザーにとっても、必須と言えるツールだと思います。

WordPressを作ることが、Localのおかげでもっと楽しくなりますね。
著者:sugiyama

運営会社
株式会社ファングリーは「コンテンツプロデュースカンパニー」です。記事制作からオウンドメディアの戦略策定~サイト制作まで、一気通貫でご対応ができます。