【WordPress】Local by Flywheelの使い方とWordPressサイトをローカルに再現する方法

Local Lightning (by Flywheel)はローカルにWordPress環境を簡単に構築できるツールです。

こちらではLocal Lightning (by Flywheel)の使い方と、サーバー上のWordPressサイトをローカルに再現する方法を解説します。

※「Local」と表記したときはLocal Lightning (by Flywheel)のアプリを表し、カタカナで「ローカル」と表記したときはローカル環境を表します。

Local by FlywheelがLightningにバージョンアップ

WordPressのローカル開発環境として人気のLocal by Flywheelが3.xから5.xにバージョンアップしました。

それに伴い名前も「Local Lightning」に変わっています。

Lightningという名前の通り以前よりも動作がかなり早くなっています。

設定項目も変わっているので、使い方も説明します。

Local Lightning (by Flywheel)を使うメリット

Localの他にも「XAMPP」や「Vagrant」などを使ってローカルにWordPress環境を作る方法があります。

しかしそれらと比べてLocalの方が圧倒的に簡単にWordPressのローカル環境を構築できます。

Localを使うメリットは以下のようなものがあります。

XAMPPやVagrantを使ってWordPressのローカル環境を構築しようとすると、多少はサーバーやPHPの知識が必要になります。

深いことをやろうとしたらサーバーやPHPの知識が必要になりますが、とりあえず動かしたいなら項目を選択するだけで環境が構築できてしまいます。

Localのダウンロードとインストール

まずこちらのLocal公式サイトへ行きます。

「DOWNLOAD」や「FREE DOWNLOAD!」などのボタンを押します。

プラットフォームの選択画面ができるので、お使いの環境を選びます。

今回はWindows版をダウンロードします。

個人情報の入力画面がでます。

「Work Email」という箇所にメールアドレスを入力します。他の項目は入力しなくてもダウンロード可能です。

入力したら「GET IT NOW!」というボタンを押すとダウンロードが始まります。

ダウンロードしたファイルを実行するとインストールが始まります。

今回はWindows版なので「local-5-2-7-windows.exe」というファイルです。

VirtualBoxがインストールされていないときは、VirtualBoxも一緒にインストールされるので完了するまで少し時間がかかります。

すでにVirtualBoxがインストールされている環境ではすぐにインストールが完了します。

Localの使い方。新しくWordPressのサイトを追加する

Localを起動すると下のような画面になります。

「TEST」というサイトがありますが、私が試しに作ってみたものです。

起動したら左下にあるプラスボタンを押すと新しいサイトを追加できます。

新しく作成するWordPressサイトの名前を入力します。

ここでは「test2」としておきます。

右下の「CONTINUE」ボタンを押します。

環境選択画面になります。

「Preferred」を選ぶと推奨環境で追加されます。

「Custom」を選ぶと、好みの環境を選択できます。選択できるのは「PHP Version」と「Database」です。

特に必要がなければPreferredで問題ないでしょう。

ユーザーネームとパスワードの設定を設定します。

ユーザーネームとパスワードを入力し、「ADD SITE」ボタンを押すとWordPressサイトが追加されます。

上記のように「test2」というWordPressサイトが追加されました。

「ADMIN」ボタンを押すとWordPressサイトのダッシュボードが開きます。

「VIEW SITE」ボタンを押すとWordPressサイトが開きます。

サーバー上のサイトをローカルに再現する方法

テンプレートをカスタマイズするなどの大きな変更を加えるときは、ローカルで作業するのがおすすめです。

ローカルで作業した方が素早くできますし、もし失敗してもサーバー上のサイトには影響しません。

サーバー上のWordPressサイトをローカルに再現する手順は以下のようになります。

順番に説明します。

サーバーからwp-contentをダウンロードする

サーバー上でWordPressをインストールしているフォルダの直下に「wp-content」というフォルダがあります。

そのフォルダをまるごとローカルにダウンロードします。

サーバーからデータベースをエクスポート

サーバーからWordPressサイトのデータベースをエクスポートします。

エクスポートの仕方はお使いのレンタルサーバーによって違います。

各レンタルサーバーのヘルプなどを参照してエクスポートしてください。

関連記事
こちらでエックスサーバーでデータベースをバックアップする方法について詳しく解説しています。
WordPressのデータベースをバックアップする方法【エックスサーバー編】

BackWPupを使うと簡単

実は、WordPressのプラグイン「BackWPup」を使うと上の2つの手順が簡単にできます。

BackWPupはWordPressのバックアップを取るプラグインです。

プラグインのジョブを実行すると、サーバー上にある「WordPressの全ファイル」と「データベースのエクスポート」をバックアップしてくれます。

そのバックアップされたファイルをそのまま使って、ローカルにサイトを再現することができるのです。

Localに新しいサイトを追加する

Local上に新しいWordPressサイトを追加します。

ローカルに新しく作ったWordPressサイトのファイルやデータベースを、サーバー上のサイトのものに入れ替えることで再現できます。

ここでは先程追加した「test2」のサイトを利用します。

ローカルにwp-contentを配置する

図の赤枠で囲っている部分をクリックすると、test2のプロジェクトのフォルダが開きます。

開いたフォルダからたどっていき、wp-contentフォルダを開きます。

C:\Users\○○○\Local Sites\test2\app\public\wp-content

○○○はユーザー名です。ご自身の環境のものに置き換えてください。

ここにダウンロード(もしくはバックアップ)したwp-contentを配置(上書き)します。

ローカルにデータベースをインポート

エクスポート(もしくはバックアップ)したデータベースをローカルにインポートしていきます。

test2サイトの「DATABASE」タブを開きます。

「OPEN ADMINER」というボタンをクリックします。

するとデータベースツールが開きます。

テーブルを全て削除します。

次にエクスポート(もしくはバックアップ)したデータベースのファイルをインポートします。

バックアップした場合は、一番上のフォルダに「○○.sql.gz」というファイルがあるので、それをインポートします。

○○はそれぞれの環境で違う名前になります。ご自身のファイル名に置き換えてください。

左側にある「インポート」というリンクをクリックします。

ファイルをアップロードの「参照」というボタンの上に「○○.sql.gz」をドラッグ＆ドロップします。

「実行」ボタンを押します。

これでインポートは完了です。

URLの修正

データベースをインポートした直後は、サーバー上のURLになっています。

これをローカルのURLに修正しなければいけません。

Localの右上の方にある「STOP SITE」というボタンを押してサイトを停止します。

サイトが止まると「START SITE」というボタンに変わるので、それを押してサイトを再起動します。

起動してから少し待っていると、URLがマッチしないといった警告メッセージが出てきます。

警告メッセージの横にある「FIX IT」というボタンを押します。

データベース内のURLがローカルのものに修正されます。

Localの「VIEW SITE」ボタンを押すと、再現したWordPressサイトが表示されます。

これでサーバー上のWordPressサイトをローカルに再現することができました。

ユーザーネームとパスワードが変わっている

最初に「test2」サイトを追加したときにユーザーネームとパスワードを決めました。

しかし、データベースをインポートしたので、それらの情報はサーバー上のサイトのものに変更されています。

再現したサイトのユーザーネームとパスワードは、サーバー上のものと同じになっているので注意しましょう。

LocalでWordPressのデバッグ環境を作る

WordPressのテンプレートやプラグインなどの開発のために、WordPressのローカル環境を準備することも多いでしょう。

そのようなときにはデバッグ環境があると便利です。

PHPのデバッグ環境と言えば、Xdebug＋PhpStormというのが定番ですね。

LocalならXdebug＋PhpStormを導入するための機能拡張が用意されているので、デバッグ環境も簡単に構築できます。

LocalにXdebug＋PhpStormを導入する方法についてはこちらで紹介しています。

【WordPress】Local by FlywheelでXdebug＋PhpStormのデバッグ環境を準備する方法