LocalでWordPressローカル開発環境を作る方法

Localの使い方はMAMPやMAMP PROと比べて非常に簡単です。

Localを公式サイトからダウンロード

LocalアプリはLocal公式サイト（WP engine）の複数の箇所からダウンロードできます。

私はLocal Release Notesという最新および過去バージョンのLocalアプリを選択・ダウンロードできる公式ページからLocalインストラーをダウンロードしました。

なお、Local Release Notesページでは、Localのバージョンの他に、OSの種類やMacの場合はIntel MacかApple Silicon Macかを選べます。

Local Release Notesからダウンロードした理由について

Localが正常にインストールされると、初回起動時にLocalアカウントを作る画面が表示され、そこでアカウント登録を行います。

しかし、私の場合は、Local公式トップページからダウンロードしたLocalアプリでは、初回起動時にLocalアカウント作成画面が現れず、その後WordPressサイトは作れるがサイトに接続できないトラブルが発生してしまいました。

私が遭遇したトラブルの症状は下記とおりです。

これらのトラブル症状から原因を推測すると、おそらく「アプリからアカウントにログインできない」のが問題の核心に思えました。そこから正常にインストールされた場合に表示される「アカウント作成画面」が現れないことから、インストール自体が失敗していると仮説を立てた次第です。

その仮説のもと、数回アンインストールと再インストールを繰り返しましたが症状は改善されず、最後にダメ元で試してみたのが、Local Release Notesページからダウンロードした方法というわけです。結果、インストールに成功しました。

その他のトラブルシューティング

Localの一連のトラブルに関しては、インストーラーのダウンロード元を変更した他にもいくつか施策を行いました。

• MacOSファイアウォールでLocalアプリを許可
  • システム環境設定＞ネットワーク＞ファイアウォール＞オプション＞「＋」でLocalアプリを追加
• ウィルス対策ソフト「ESET」のWEBアクセス保護でLocal関連を許可
  • WEBアクセス保護＞「許可されたアドレス」に下記３つを追加
    • *.local
    • localhost
    • 127.0.0.1

なお、これらがどの程度影響しているかは不明です。

Localのインストール

Localのインストールは簡単で、ダンロードしたインストーラーをダブルクリックで解凍・開き、LocalアイコンをApplicationsアイコンにドラッグ＆ドロップするだけです。

Local Release Notesページからダウンロードしたインストーラーを使うと、Local初回起動時にアカウント作成画面(下記)が表示され、インストールが成功したことが確認できました。

WordPressローカルサイトを作る

STEP

画面中央の「+ Create a new site」ボタンまたは左下の「＋」ボタンを押す

STEP

「Create a new site」を選択後に「Continue」ボタンを押す

STEP

サイト名を入力し、Continueボタンを押す

Advanced optionsで「Local site domain」と「Local site path」を変更できますが、デフォルトのままで良い。

STEP

Preferredを選択して、Continueボタンを押す

Customを選択すると、PHP、Web server、MySQLのバージョンを変更できるが、デフォルトのままでよい。

STEP

WordPress username、WordPress password、WordPress e-mailを入力し、「Add Siteボタン」を押す

これらの操作でWordPressサイトが作られる。

STEP

「WP Admin」ボタンをクリックしてWordPressサイトにログインする

Open siteボタンをクリックすると単にサイトに接続する。

All-in-One WP MigrationでWordPressサイトを復元

All-in-One WP Migrationを使ったWordPressサイトの復元は特に問題なくできます。

gulp環境の復元

WordPressローカル開発環境でgulpを使っている人は多いと思いますが、gulp環境も「上記All-in-One WP Migrationからの取り込み」、または「関連ファイルのコピペ」後にgulpのproxyをLocalで作ったWordPressサイトURLに変更するだけで復元できます。

// ブラウザの立ち上げ
function browserInit(done) {
  browserSync.init({
    proxy: "http://de-01.local"
  });
  done();
}