WordPressのローカル環境を簡単に構築する方法

Server

Local by Flywheelを使って、WordPressのローカル環境を簡単に構築する方法



ぺんです。

WordPressサイトのカスタマイズをするは、細心の注意を払わないと、エラーでサイトが非表示になってしまう場合があります。このサイト「あふぃぶ」でも、WordPressテーマ「MAG」をカスタマイズしているのですが、PHPのエラーが発生して、何度も画面が真っ白!になってしまった経験があります!

今回は、WordPressのカスタマイズや、自作プラグインの開発・テストを行うための、ローカルWordPress環境の導入手順をご紹介します。

なぜWordPressの動作環境がローカルにあると便利なのか?

ローカル環境とは?

ローカル環境とは、皆さんがお使いのPCにWordPressのサーバーが動作する環境ということです。これに対して、WordPressのサイトをホストしているのがサーバー環境です。

ちなみにこのサイト「あふぃぶ」は、下記の記事でもご紹介したとおり、エックスサーバーを利用しています。

ローカル環境のメリットとは?

サイトテーマのカスタマイズや、プラグインの開発中は、何度もソースコードやデータベースの情報を更新する必要があります。その際に、いちいちFTPクライアントでファイルをサーバーに転送するのではなく、気軽にソースコードやデータベースの情報を更新できることがメリットです。

また、いざというときのバックアップという意味でも、別環境に大切な自分のサイトのデータを保持しておくというメリットもありますね。

FTPクライアントとは

FTPクライアントとは、ローカル環境(お使いのPC)と、サイトをホストしているサーバー間で、ファイル転送を行うツールのことです。ちなみに、FTPとはFile Transfer Protocol(ファイル転送プロトコル)の略で、ファイルを送受信する際の通信プロトコルです。ちなみに私がオススメするFTPクライアントはFFFTPです。

FFFTPダウンロード

Localを使えば誰でも簡単にWordPress環境がつくれる

今回は、自宅のPC上で動作するローカルWordPress環境を作りたいので、どのようなツールが提供されているのか調べてみました。

その結果、いくつかのサイトで紹介されていた、「Local by Flywheel」というツールが使いやすいことが判りました。LOCALの特徴は以下の通りです。

  • インストールが簡単
  • 動作が軽く、サクサク動く
  • ローカルのテスト環境を簡単にインターネット上で共有できる

Local by Flywheelのインストール手順

では早速LOCALをインストールしてみましょう。

Local by Flywheelをダウンロードする

下記サイトにアクセスして、”Free Download”をクリックします。

LOCALダウンロード

MacとWindowsのいずれかを選択して、Work Emailを入力します。(これを書いている時点 2017年12月では、他の項目は入力しなくてもダウンロードできました)

Download Local by Flywheel!

すぐにダウンロードが開始されます。

your download is starting!

ファイルサイズは470MBと、それなりのサイズです。

localのファイルサイズは470MB

LOCALを実行する

ダウンロードしたファイル(local-by-flywheel-X-X-X-windows.exe)をダブルクリックしてインストーラーを実行します。
(X-X-Xの部分には、バージョン番号が入ります)

日本語と、日本のタイムゾーン(UTC+9)を選択します。

ロケール指定画面

 

 

サイト名を入力する

次にサイト名を入力します。

このサイトのドメイン名”affiliate-biz.jp”を入力すると、ローカルドメインとして、 “affiliatebizjp.local” が自動的に指定されます。

What`s your site`s name?

ローカルドメインとは

ローカルドメインとは実際にLOCALをインストールしたPC上でホストされるローカル環境のWordPressサイトの接続先です。つまり、ローカルPC上のブラウザで、”affiliatebizjp.local”にアクセスすることでローカル環境のWordPressサイトにアクセスできるわけです。

 

ドメイン設定画面

WordPressのパスワードを入力

次にローカルWordPress環境のID/PASSWORDを入力します。

Set WordPress Admin credentials as default?

 

エラーが発生した際に、開発元にそのデータを送信するか否かを選択します。

私は、どのようなデータが送信されるのかわからないのが気持ち悪いので、今回は「いいえ」を選択しました。Error Reporting

これで完了!

お疲れさまでした。これでローカルWordPress環境(Local by Flywheel)の完成です!

Local by Flywheelがすごい点

今回Local by Flywheelを導入してみて、3つの点がすごいと感じました。

1.動作が軽い

ローカル環境なのに、サクサクと軽快に動作してくれます。今回は、3年前のCore i7、メモリ8GBを搭載したノートPCで動作させてみましたが、1サーバーをホストしている状態では、ストレスはありませんでした。これならば十分にバックアップ兼、開発環境として利用できます。

注意点

Local by Flywheelは、HyperVの動作環境にはインストール出来ません

HyperV環境では動かない

私のメインPC(Windows 10)では、HyperVで検証用のWindows 7環境をHyperVでホストしていたので、Local by Flywheelをインストールすることが出来ませんでした。

2.簡単にローカル環境をインターネットに共有できる

この機能にはびっくりしました!こちらの画面をごらんください。Local管理画面

これは、このサイト「あふぃぶ」のバックアップ環境ですが、一番下に”Live Link”とあるところがありますが、”Enable”というボタンをクリックすると、ngrok.ioのサブドメインが一時的にアサインされ、ngrok.ioサイトがインターネットからのアクセスを、LocalをホストしているノートPCまで中継してくれます。具体的には、HTTP/TCP tunnels on random URLs/ports という機能です。

イントラネット上のサービスをインターネットから利用可能

https://ngrok.com/

ngrok.comのサイトを観てみると、無料では以下の機能制限が付くようです。(https://ngrok.com/pricing

開発注のWordPressテスト環境をクライアントに共有するだけなら、無料版で十分ですね。

  • HTTP/TCP tunnels on random URLs/ports
  • 1 online ngrok process
  • 4 tunnels/ngrok process
  • 40 connections / minute

3.DB管理ツールもワンクリックで起動

Local by Flywheelでは、WordPressの管理画面はもとより、MY SQLの管理画面にもワンクリックでアクセス可能です。これがオールインワンという感じでとても便利です。

DB Admin画面

便利過ぎるLocal by Flywheel

いかがでしたでしょうか?

Local by Flywheelは、ワンクリックで簡単にインストールでき、軽快に動作する便利なツールです。Local by Flywheelで作成したテスト環境を使うことで、WordPressテーマのカスタマイズや、プラグインの開発がより安全に、より確実になりますね。

追記(2017.12.31)

Local by Flywheelで作成したテスト環境に、WordPressサイトのデータをインポートする手順を検証した記事を公開しました。併せてご覧ください。



関連記事

  1. 読み込みが遅いWebサイト

    Server

    mod_pagespeed設定で、ウェブのパフォーマンスを大幅に向上する方法

    ぺんです。あなたのウェブサイトの描画速度が2秒遅くなると、直帰…

  2. Server

    アフィリエイト環境に無料ブログサイトは使えるのか?

    ぺんです。アフィリエイトを行うにあたって、どこでサイトを公開す…

  3. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」を選んだ3つの理由

    ぺんです。前回のエントリーからずいぶんと間が空いてしまいました…

  4. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法

    ぺんです。本サイト「あふぃぶ」で使っているワードプレステーマは…

  5. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ver.4.7.0)のW…

    ぺんです。立ち上げ途中のサイトで、Font Awesomeのアイコ…

  6. Server

    アフィリエイト収益ブログの始め方(2)- 利用サービスの選定における3つのポイント

    ぺんです。アフィリエイト収益を目指すブログを運用する環境につい…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。




最近の記事

  1. マイクロソフトアカウントの登録方法
  2. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  3. WordPressのローカル環境を簡単に構築する方法
  4. ウイジェットエリア
  5. 日付の書式がNG
  1. あふぃぶ 運営情報

    ようこそ、「あふぃぶ」へ
  2. 日付の書式がNG

    WordPress

    WordPressの親テーマのウイジットを子テーマで書き換える方法
  3. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡…
  4. WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、Wo…
  5. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法
PAGE TOP