WordPress

WordPressのLocal(Local By Flywheel)でローカル環境のつくりかた

WordPressのLocal(Local By Flywheel)でローカル環境のつくりかた
designchips

WordPressでWebサイトやブログをつくり始めるときに、本番環境でいきなり作業をするよりも、まずはローカル環境で作業をすることをおすすめします。

ローカル環境とは、自分のPC内(ローカルネットワーク)のことを言います。

通常の本番環境は、アップロードされたファイルは常にインターネットに接続された状態であり、外部の誰でも見ることができるURLで公開されています。それに対しローカル環境は、自分のPCの中だけで更新・表示されている状態で作業中のページが誰にも見られることなく、もしエラーが出ていても自分にしかわからないのでテスト環境として安心して作業を進めることができます。

今回は、自分のPC内にテスト環境となる「ローカル環境」を作る方法を解説していきます。

WordPressをローカル環境でつくるメリット

WordPressをローカル環境で構築するメリットはいくつかありますが、大きく3つです。

ローカル環境を用意するメリット
  • エラーが出ても誰にも迷惑がかからない
  • わざわざファイルをFTPでアップロードしてチェックする必要がない
  • 新規プラグインやテーマ更新の検証ができる

エラーが出ても誰にも迷惑がかからない

ローカル環境で作業をする一番のメリットは、本番環境に影響なく気兼ねなく作業ができることです。WordPressでサイトを作っている最中に発生する、エラーや記述ミスがあっても、誰でも見られることなく自分だけで確認しながら作業を進めることができます。

ありがちな、プラグインのバージョンアップで起きる表示不具合や、CSSやPHPの書き間違いで起こる表示崩れなど、ローカル環境であれば心配することなく安心して作業をすることができます。

わざわざファイルをFTPでアップロードしてチェックする必要がない

本番環境では、FTPツールを使って更新したファイルをアップロードしブラウザを更新しながら表示を確認する作業が発生しますが、ローカル環境であれば自分のPC内にあるファイルを書き換え保存しブラウザを更新して表示を確認することができるので、わざわざ毎回ファイルをアップロードする必要がありません。

新規プラグインやテーマ更新の検証ができる

本番環境で、新しくダウンロードして有効化するプラグインによりエラーが出たり、テーマの更新によって表示崩れなどを起こす可能性がありますが、ローカル環境であれば慌てることなく修正作業をすることが可能です。

今回は、Local(Local By Flywheel)ローカル・バイ・フライホイールというソフトをインストールして、WordPressのローカル環境を構築していきます。

Local

ローカル環境がつくれるソフト

Local以外のローカル環境をつくることができるソフトに以下のような有名なソフトがあります。

  • XAMPP(ザンプ)
  • MAMP(マンプ)

XAMPP(ザンプ)

XAMPP

XAMPP(ザンプ)は、Localと同じく、開発環境をローカルにつくることができる無料のソフトです。特徴としては、サーバー知識が必要なためLocalよりも中級者向けのソフトと言えます。XAMPPの名は「Apache, MariaDB, PHP, Perl」の頭文字から来ているそうです。

MAMP(マンプ)

MAMP

MAMP(マンプ)は、主にPHPを利用できるローカル環境をつくることができ「Apache, MySQL, PHP」の環境をインストールできることからその頭文字をとってMAMPという名前になったそうです。

では、ここからは実際に「Local」をインストールして、ローカル環境内にWordPressのサイトをつくるまでの流れを見ていきたいと思います。

Localをダウンロードする

まずは、Local公式サイトから「Local」をダウンロードします。

Local

公式サイトのトップ画面の「DOWNLOAD FOR FREE」ボタンをクリックするとポップアップ画面が表示されます。

Download

Please choose your platform」からお使いのOSを選択します。こちらは「Windows」の場合を想定したキャプチャです。

GET IT NOW!」をクリックすると「Your download is starting!」というポップアップ画面に切り替わり、インストール先のフォルダ指定画面が表示されます。特に変更する必要はないので「インストール」をクリック。

Your download is starting!
インストール

インストールが完了すると、「Local セットアップ ウィザード」が表示されます。

Local セットアップ ウィザード

「完了」を押すと自動的にLocalを実行します。

Localを実行してWordPressサイトを作成する

Localを実行するとLocalのトップ画面が表示されるので、「+ Create a new site」ボタンをクリックして新規でWordPressサイトを作成します。

新しいWordPressサイトをつくる

Localトップ画面

ボタンをクリックすると「Create a site」画面が表示されるので「Create a new site」を選択し「Continue」ボタンを押します。

Create a site

新サイト名を設定する

「What’s your site’s name?」画面が表示されたら、お好きなサイト名を入力します。こちらではlocalsite」という名前のWordPressサイトを制作します。

What's your site's name?

「Continue」ボタンで次の「Choose your environment」画面が表示されたら「Preferred」を選択し「Continue」を押します。基本的はこの「Preferred」で問題ありませんが、どうしても特定のPHPバージョンやデータベースを指定したい場合は「Custom」を選択して希望のPHPバージョンなどを指定してください。

Preferred

新サイトにログインするための「ユーザー名」と「パスワード」を設定します。

Set up WordPress」画面が表示されたら3つの項目を設定します。

  • WordPress username ・・・ ユーザー名
  • WordPress password ・・・ パスワード
  • WordPress e-mail ・・・ E-mailアドレス

こちらの情報は、WordPressにログインする際に必要になる情報なので、きちんとメモしておきましょう。

Setup wordpress

Add Site」ボタンを押して次に進みます。

Local画面で作成したサイトを起動する

サイトの作成が完了すると、Localのトップ画面左側に「Local sites」という項目があり、その中に「localsite(自分で付けたサイト名)」という名前のWordPressサイトが追加されています。次に「localsite」というサイトを選択し、右上にある「Start site」をクリックします。

この「Start site」をクリックすることで表示が「Stop site」に変われば、localsiteが起動していることになります。編集作業などすべての作業が終了した際は「Stop site■」を再びクリックしてlocalsiteを停止するようにしましょう。そのまま起動しっぱなしだとPCのリソースを常に消費するため、他の作業に影響が出る可能性がありますで忘れずに「ON/OFF」するようにしましょう。

start site

WordPress管理画面を開く

localsiteを起動した状態で、上図のピンク枠「WP Admin」ボタンをクリックすると、WordPressの管理画面が開きます。

管理画面を開く

先程設定した「ユーザー名」と「パスワード」を入力し「Log In」すると管理画面のトップページが開きます。

管理画面トップ(英語)

ちなみに先程の画像の青枠「Open site」ボタンを押すと、WordPressサイトのトップ画面が表示されます。

WordPressトップ画面

さらに「Stop site■」の状態で「WP Admin」または「Open site」ボタンを押すと、localsiteが起動していないため「 502 Request Error 」画面が表示され、サイトが見れず管理画面にも入れません。

502 Request Error

WordPressを日本語表記に変更する

デフォルトではWordPressが英語表記に設定されていますので、日本語表記に変更しておきましょう。

セッティング

「Settings」→「General」から「General Settings」画面を開き「Site Language」の部分を「日本語」に変更し「Save Changes」ボタンを押します。

General Settings

これでWordPressが日本語表記に変更できました。

日本語表記

WordPressサイトをSSL設定する

LocalではWordPressサイトの「SSL設定」をすることができます。もちろんサイト自体はローカル環境なのでSSL設定する必要は特にありませんが、より本番環境に近い条件でテストができるので特に理由がなければ「SSL設定」をしておきます。

SSL設定

localsite画面のSSL項目の箇所に「Trust」というボタンがあるのでクリックします。

trusted

すると「Trusted」というグレー文字に切り替わっていればSSL設定済で「https」での通信が可能になります。

WordPressアドレス・サイトアドレスをhttpsに書き換える

WordPressのダッシュボードで「設定」→「一般」から「一般設定」画面を開き、「WordPressアドレス(URL)」と「サイトアドレス(URL)」の部分を「http」から「https」に書き換えます。

https

ローカルにインストールしたファイルの場所を確認す

ローカル環境に「Local」でWordPressをインストールしましたが、実際のWordPressファイルはどこにあるのか確認しておきます。Localでインストールしたファイルは「ユーザー/ユーザー/Local Sites」の中に「localsite(自分で付けたサイト名)」というフォルダができる仕組みになっています。

Site folder

「Site folder」ボタンをクリックすると、「ユーザー/ユーザー/Local Sites/localsite(自分で付けたサイト名)」が開きます。

local folder

この中にある「app」→「public」の中にWordPressファイルが一式格納されています。

public

まとめ

以上で「Local」のダウンロードから起動、設定が完了です。新たにローカル環境に作成したWordPressサイトを使ってサイトをつくりあげていきましょう。

記事URLをコピーしました