WordPressのテーマ作成や修正作業をするなら、テスト環境が必要になる場合が多いですよね。
テスト用のサーバーを契約すればいいのですが費用がかかってしまいます。
毎月の費用を抑えたいならローカル環境が有効です。
この記事では、そもそもローカル環境はなぜ必要なのか、Local（Local by Flywhee 以下Localアプリ）のインストール方法から使い方、本番環境にデータを移行する方法まで解説しています。
また、この記事の気になる箇所だけ読みたい場合は、目次から読みたい項目を選択してください。
この記事を読んでほしい人
- なぜテスト環境が必要なのかを知りたい人
- Localアプリの使い方や機能を知りたい人
- Localアプリから本番環境にWordPressを移行する方法を知りたい人
ローカル環境が必要になる理由は？メリットは？
WordPressのテーマを作成する時や、WordPressテーマの修正をする場合で、もしすでにサイトが運営されている場合があると思います。
そのサーバーに実装や修正をしてしまうと、もしデータに不具合があった場合に運営中のサイトの表示が崩れてしまったり、運営中のサイトに影響が出てしまう可能性があります。
このような場合はローカル環境が必要になってきます。
また、ローカル環境を構築するメリットは以下になります。
- ssh接続をしなくても直接エディタでファイルの編集ができる
- 本番環境に影響が出ないように実装 / 検証ができる
- 自分のパソコンで環境構築するので、サーバー代がかからない
LocalはWordPress専用のローカル環境構築アプリ
LocalアプリはインストールするだけでWordPressのローカル環境を構築できるアプリになります。
以下ではLocalアプリの特徴を紹介しています。
また、紹介している機能は、この記事内で使用方法も解説していますので、ぜひ試してみてくだささい。
WordPressデータのバックアップを取り、共有できる
Localアプリには「Cloud Backups」という拡張機能があります。
この拡張機能では、Google DriveかDropboxにWordPressデータをバックアップすることができます。
このバックアップデータを使用すれば、違うPCで同じWordPressを編集する事ができます。
スマホでWordPressサイトの確認 / デバッグができる
Localアプリの「Live Links」機能を使えば、スマホなどの、Localアプリをインストールしていない、別の端末でWordPressサイトの表示を確認できます。
この機能ではインターネット上で確認でき、確認用のドメインはLocalアプリが所有しているもののようです。
LocalアプリはWordPress専用
Localアプリは使い勝手がとても良い代わりに、WordPress専用になっています。
WordPressではない物を使用する予定のある方は違う方法でローカル環境を構築しましょう。
LocalではWordPressしか利用できないので注意しましょう。
Localアプリのインストール方法
まずはLocalアプリをダウンロードします。以下のサイトにアクセスしてください。
「DOWNLOAD」ボタンをクリックします。
ご自分のPC環境を選択します。
今回は「Mac Apple Silicon」を選択しました。
各種情報を入力したら「GET IT NOW!」ボタンをクリックします。
また、入力フォームはメールアドレスのみ必須入力です。
ダウンロードしたファイルを起動してください。
「Local」と書かれたアプリアイコンをアプリケーションフォルダの中にドラックアンドドロップしたら、インストールは完了です。
また、今回はMac環境で解説していますので、それ以外の方はご自分の環境に置き換えて試してみてください。
Localアプリを起動してください。
Macの場合は画像のような警告が表示されましたが、こちらは「開く」をクリックして大丈夫です。
利用規約が表示されました。
確認したら、チェックボックスにチェックを入れ、「I AGREE」をクリックします。
エラーレポートを送信するかを尋ねられますので、お好きな方をクリックします。今回は「No, Thanks」をクリックしました。
ここまでをインストール方法としたいと思います。
次はLocalアプリの使い方を解説していきます。
Localアプリの基本的な使い方
Localアプリのトップ画面のナビゲーションを確認してみましょう。
- クリックするとログインするか、設定を開くかを選択できます。
- トップ画面へ遷移するボタンです。
- Cennect画面へ遷移するボタンです。Connect画面は「WP engine」と「FLYWHEEL」へ接続する画面です。
- BluePtints画面へ遷移するボタンです。
- addｰons画面へ遷移するボタンです。拡張機能のインストールができる画面です。
- Help画面へ遷移するボタンです。docsなどへのリンクが記載されています。
- 新しくWordPressサイトを作りたい時にクリックします。
それでは新しくWordPressサイトを作ってみたいと思います。
画像内の7番、プラスボタンをクリックして、「Create a site」画面を表示します。
左側（デフォルトでチェックが入っています）の「Create a new site」をクリックし、「Continue」をクリックします。
サイト名を入力し、「Continue」ボタンをクリックします。
Advanced optionsを入力することもできます。
- Local site domain: ローカルサイトのドメイン名を指定出来ます。
- Local site path: LocalアプリのWordPressデータを保管するフォルダを選択できます。
作成するローカル環境の各種バージョンを設定できます。
「Preferred」を選択するとデフォルトのバージョンが、「Custom」を選択すると各種バージョンが設定できます。
- PHP version: PHPのバージョンを設定できます。
- Web server: 任意のWebサーバーを設定できます。
- Database: データベースバージョンを設定できます。
最終的に実装する本番環境のバージョンに合わせるのもアリ！
バージョンの設定が完了したら「Continue」をクリックします。
WordPressの「ユーザー名」「パスワード」「メールアドレス」を入力します。
マルチサイトを構築したい場合はAdvanced optionsを設定します。「Add Site」ボタンをクリックします。
途中でパスワードの入力を求められた場合はPCロック解除のパスワードを入力し、続行します。
上が作成したローカルサイトです。
主に使用したり確認したりする箇所は画像の通りです。
各種バージョン情報やサイトへのリンクが設置されています。
新たにWordPressサイトを追加した際は左側の一覧に追加されます。
「Open site」をクリックしてみましょう。
ローカル環境にインストールしたWordPressサイトが表示されました。
ドメインは、サイト作成の際にサイト名に記述した内容か、Advanced optionsで設定したドメイン名になります。
次はLocalアプリから「WP Admin」をクリックしてみましょう。
WordPressの管理画面のログイン画面が表示されました。
ログインにはサイト作成の時に設定した「ユーザー名」「パスワード」「メールアドレス」を使用します。
ログインしてみました。LocalアプリでWordPressデフォルトでは英語表示になっています。日本語に変更してみましょう。
「Settings」->「General」をクリックします。
設定画面へ遷移しました。
「Site Language」を日本語に設定し、設定を保存します。
言語が日本語へ変更されました。
これで管理画面は普段通りに使用できます。
Localアプリに戻りましょう。
「Go to site folder」をクリックしてみましょう。
ローカル環境のWordPressがインストールされたルートディレクトリが表示されました。
フォルダの階層が深いのでショートカットなどを作成するとフォルダへの移動が楽になります。
Localアプリの基本的な使い方を解説してきました。
Localアプリはシンプルで使いやすいので、直感的に操作できる思います。
これからはLocalアプリがより便利になる機能を紹介していきます。
Localアプリの便利な機能
Localアプリには先ほど解説したような基本的な使い方ので他にも便利な機能がいくつかあります。
ここからはLocalにある機能の中で、より便利な機能を厳選して紹介していきます。
「Cloud Backups」機能でWordPressデータをバックアップしてみる
Cloud Backups機能はLocalアプリの拡張機能で、WordPressのデータをGoogle DriveかDropboxにバックアップできる機能です。
ここではGoogle Drive を使用したバックアップを紹介していきます。
拡張機能をインストールするには、Localアプリへのログインが必要です。
まずはLocalアプリにログインしましょう。
Localアプリトップ 左上の人型アイコンから「Log in to Local」をクリックします。
ブラウザでログイン画面が表示されました。
お好きな方法で会員登録 / ログインしてください。
会員登録 / ログインが完了し、会員画面へ遷移しました。
会員画面右上にある「Open Local」ボタンをクリックし、Localアプリへ戻ります。
Localアプリの「拡張機能」画面へ遷移します。
拡張機能の一覧が表示されました。
一覧から「Cloud Backups」をクリックします。
左側にある「Install Add-on」をクリックします。
拡張機能のインストールボタンが「Enable & relaunch」に変わっています。
「Enable & relaunch」をクリックし、有効化 / アプリの再起動します。
有効化が完了したらアプリトップページへ遷移します。
アプリトップページの「Tools」->「Cloud Backups」をクリックし、「Connect provider」をクリックします。
ブラウザでLocalアプリとクラウドサービスの接続画面へ遷移しました。
今回はGoogle Driveでの解説を行うので、Google Driveのボタンをクリックします。
お好きなアカウントでログインします。
「Local が Googleアカウントへの追加アクセスを求めています」と表示されるので、スクロールし、「続行」をクリックします。
Google Driveボタンが赤色になれば接続完了です。
Localアプリへ戻りましょう。
「Tools」->「Cloud Backups」の中にある更新ボタンをクリックすると、「Back up to Google Drive」と表示されます。
また、ローカルサイトが起動しているかを確認し、「Back up site」をクリックしましょう。
表示された画面でバックアップの説明文を記入したら、「Start Cloud Backup」ボタンをクリックします。
画像のように日付が表示されたらバックアップ完了です。
GoogleDriveを確認してみましょう。
Google Driveに「LocalBackups」というフォルダが追加されています。
中を見てみましょう。
バックアップされたデータが並んでいます。
次はバックアップからデータを復元する方法を解説します。
Localアプリトップからプラスボタンをクリックし新規サイトを生成します。
右側に「Create from a Cloud Backup」ボタンが追加されています。
「Create from a Cloud Backup」ボタンをクリックし、「Coutinue」ボタンをクリックします。
バックアップするサイトを選択し、元のサイト名と被らない様に名前をつけたら「Continue」をクリックします。
バックアップされているバージョンの中から復元に使うバージョンを選択し、「Continue」をクリックします。
あとはお好きなように設定します。
バックアップから復元できました。
違うPCでも復元できます！
Localアプリが入っていて同じアカウントでログインしていたら、違うPCでもバックアップから復元できます。
「Live Links」機能でスマホでローカル環境のサイトを見る
Localアプリには、スマホなど、違う端末でも閲覧 / 検証できるようにLive Linksという機能が備わっています。
ここではLive Linksの使い方を解説します。
任意のローカルサイトを起動しておきます。
「Tools」->「Line Links」を選択し、「on / off」スイッチをオンにします。
「Username」「Password」メモしておき、URLをクリックしてサイトへ遷移します。
先ほどメモしておいた「Username」「Password」を入力し、ログインボタンをクリックします。
Localアプリで作成したサイトが表示されました。
もちろんスマホでもタブレットでも閲覧できます。
LocalアプリのWordPressを本番環境（移行先）に実装する
ここではLocalアプリで作成したWordPressを本番環境（移行先）に実装する方法を解説します。
LocalアプリのWordPressに遷移します。
Localアプリから任意のサイトを起動し、「WP Admin」をクリックしWordPressにログインします。
WordPress管理画面から、「プラグイン」->「新規追加」をクリックします。
All-in-One WP Migration「プラグインを追加」画面から「All-in-One WP Migration」と検索し、「今すぐインストール」ボタンをクリックします。
「有効化」ボタンをクリックします。
管理画面のメニューから、「All-in-One WP Migration」->「エクスポート」をクリックします。
表示された画面の「エクスポート先」をクリックし「ファイル」を選択します。
しばらくするとダウンロードボタンが表示されるのでダウンロードボタンをクリックします。
これでLocalアプリで作成したWordPressでの作業は完了です。
次はダウンロードしたデータを使って本番環境（移行先）で復元します。
移行先にWordPressをインストールしておき、ログインしましょう。
また、移行先でも「All-in-One WP Migration」プラグインをダウンロードしておきます。
移行先WordPressの管理画面から「All-in-One WP Migration」->「インポート」をクリックします。
遷移した「サイトのインポート」から「インポート先」をクリックし、「ファイル」を選択します。
アップロードファイル選択画面から先ほどダウンロードしたファイルを選択し「アップロード」をクリックします。
注意書きが表示されるので、内容をよく読み「開始」ボタンをクリックします。
開始ボタンをクリックすると後戻りできないので注意してください
移行先への移行が完了しました。
パーマリンク設定を更新したら作業は完了です。
「パーマリンク構造を保存する」リンクをクリックします。
遷移した「パーマリンク設定」画面でそのまま「変更を保存」ボタンをクリックしたら移行作業は全て完了です。
まとめ
ローカル環境とLocalアプリについて解説してきました。
Localアプリは使い方が分かりやすいため広く利用されており、WordPressのローカル環境には最適だと思います。
Localアプリを利用して快適にWordPressサイトを開発しましょう。