WordPressのローカル開発環境の作り方(Localアプリ+ロリポップ編)

ロリポップ!サーバーにWordPressをインストールし、Localアプリを使用して、テーマ開発、プラグイン開発、Wordpressアップデートの事前確認用のローカル開発環境の作り方を説明する。

Localアプリ(旧local by flywheel)について

MAMP、Vagrant、Dockerなどを使って、ローカルにWebサーバー、PHP, MySQLをインストールしてWordpressのローカル環境を構築している人も多いと思う。

Localアプリを使用することで、超簡単にWordpressのローカル環境を立ち上げることができる。

Localアプリのいいところは、Webサーバー、PHP, MySQLがデフォルトで含まれていること。また、複数のWordPressサイトの開発環境を同時に起動することができ、それぞれのWordPressサイトのWebサーバー、PHP, MySQLの種類、バージョンを個々に設定できること。ローカルサイトのhttpsの設定もできる。

Live Link機能を使用することで、ローカル環境をグローバルに公開し、iPhoneなどの外部デバイスから確認できる。

Xdebugを使用したデバック環境をVS Code, PhpStormなどのIDEで簡単に構築ところがいい。(ブレイクポイントを張って、ステップ実行できるので開発中重宝する)

macOSだけでなく、Windowsでも利用可能。

個々のサイトで、WP-CLIが設定されたターミナルを立ち上げることができるのも便利。

前提条件

  • サーバーは、ロリポップ!
  • 開発環境は、macOS
  • ドメインは、サブドメイン(test2.webkei.dev)
  • ドメインの管理は、ムームードメイン
  • WordPressは非公開設定で作成する
  • ロリポップ!のWordPress簡単インストールを使用する(自分で設定するよりセキュリティがしっかりしてそうだから)
  • ロリポップ!にWordpressをインストール直後にロリポップ同等のローカル環境を作成
  • ローカル環境はLocalアプリを使用
  • Duplicatorプラグインを使用してデータを移行する(Duplicatorプラグインを選んだのは、色々試してみで簡単だったから)

ロリポップ!サーバーにWordPressをインストールする

サブドメインの設定

  1. ロリポップにログイン
  2. サブドメイン設定 > 新規作成
  1. 各項目を入力(公開フォルダは、サブドメイン名)
  2. アクセラレーターは、無効にする(アクセス制限を使うため)
  1. 作成をクリック
  1. ネームサーバー認証で、ムームードメインにログイン
  2. ネームサーバー認証をクリック
  3. 設定をクリック

ロリポップへのWordpressのインストール

  1. ロリポップにログイン
  2. サイト作成ツール > WordPress簡単インストール
  1. 各項目を入力
  2. 利用データベースは新規自動作成
  3. 検索エンジンによるサイトのインデックスを無効にする(公開前なので)
  4. 入力内容確認をクリック
  5. 承諾するにチェック
  6. インストールをクリック

独自SSLの設定

  1. セキュリティ > 独自SSL証明書導入
  2. ドメインを選択
  3. 独自SSL(無料)を設定する
  1. WordPressの管理画面にログイン(https://test2.webkei.dev/wp-admin/)
  2. 設定 > 一般
  3. URLをhttp -> httpsに変更
  4. 変更を保存
  1. インストール完了

アクセス制限の設定

  1. セキュリティ > アクセス制限
  2. 新規作成
  1. インストールしたディレクトリ名を入力
  2. ベージック認証用のID, PWを入力
  3. 作成ボタンをクリック

サイトにアクセスすると、ID, PWが求められるようになる。

ロリポップからアクセス制限をした場合「.htaccess」が上書きされるので、WordPressにログインして、再設定する。

  1. 設定 > パーマリンク
  2. 変更を保存

ローカル開発環境にWordPressをインストールする

Local(local by flywheel)のインストール

  1. Localのサイトを開く
  1. 画面右上の「DOWNLOAD」をクリック
  2. platformを選択
  3. 各項目を入力する
  4. GET IT NOW!!をクリック
  5. ダウンロードした、ファイルをクリックして、画面の説明にしたがってインストールする。

Local(local by flywheel)へWordPressをインストールする

  1. 画面左下の「+」ボタンをクリック
  2. ドメイン名を入力
  3. CONTINUEボタンをクリックする
  1. Customを選択、ロリポップ!の環境に合わせて、環境を設定する。
  2. PHP Versionは、7.4系を選択
  3. Web ServerはApacheを選択(ロリポップ!のハイスピード、エンタープライズプランは、Apache互換のLiteSpeedサーバーなので、Apacheを選択)
  4. MySQLは5系を選択
  5. CONTINUEをクリックする
  1. WordPressのログインユーザーを作成
  2. ADD SITEをクリックする
  1. インストール完了(http://test2webkei.local/でアクセスできるようになる)
  2. ~Local Sites/test2webkei > をクリックすると、インストールディレクトリが開く、web rootは、app/publicディレクトリ
  3. OPEN SITEで、WordPressの画面が開く
  4. ADMINクリックでWordPressの管理画面が開く

WordPressの日本語設定

  1. Settings > General をクリック
  2. Site languageで日本語を選択
  3. TimezoneでTokyoを選択
  4. Save Changesをクリック
  1. プラグイン > 新規追加
  2. WP Multibyte Patchで検索
  3. WP Multibyte Patchを今すぐインストール
  4. 有効化

SSLの設定

  1. Localを開く
  2. SSLの左のTRUSTをクリック
  1. WordPressを開く
  2. http -> httpsに変更
  3. 変更を保存
  4. httpsでサイトが表示できるようになる。(https://test2webkei.local/

ロリポップサーバーから、ローカル環境へ移行する

文字コードについて

絵文字の文字化け

Duplicatorを使って、ロリポップサーバーから、ローカル環境へ移行すると文字化けが発生します。データベースの文字コードの違いロリポップ(utf8)ローカル環境(utf8mb4)があると思います。Duplicatorを使った移行の解決方法はわかりません。Duplicatorは最初1回だけ使って、移行したあとは、別の方法でロリポップサーバー <-> ローカル環境を同期しています。

もっと調べると解決方法があるかもしれません。

以下、データベースの文字コードを調べた結果です。

show variables like "chara%"

ロリポップ!サーバー

Variable_nameValue
character_set_clientutf8
character_set_connectionutf8
character_set_databaseutf8
character_set_filesystembinary
character_set_resultsutf8
character_set_serverutf8
character_set_systemutf8

Local

Variable_nameValue
character_set_clientutf8mb4
character_set_connectionutf8mb4
character_set_databaselatin1
character_set_filesystembinary
character_set_resultsutf8mb4
character_set_serverlatin1
character_set_systemutf8

Duplicatorプラグインを使った移行

準備

  1. ロリポップのWordPressとローカル環境のWordpressにDuplicatorプラグインをインストールする
  2. Duplicatorを有効にする
  3. ロリポップのWordPressのWP Multibyte Patchプラグインを有効にする

ロリポップサーバーからデータをエクスポート

  1. ロリポップのWordPressで、Duplicator > パッケージを開く
  2. 新規作成ボタンをクリック
  1. ステップに従って進める
  2. 次へボタンをクリック
  1. 「はい。ビルドプロセスを続行します。」にチェック
  2. ビルドをクリック
  1. ダウンロード画面が表示される
  2. インストーラとアーカイブをダウンロード

エクスポートしたデータの削除

  1. ロリポップのWordPressで、Duplicator > パッケージを開く
  2. エクスポートしたパッケージを選択
  3. 一括処理で削除を選択して、適用をクリック

ロリポップサーバーからローカル環境にデータをインポート

  1. ダウンロードした、インストーラーとアーカイブデータをローカル環境のapp/publicの直下に移動
  1. ブラウザを開き、https://{ローカルサーバーのドメイン}/installer.phpにアクセスする
  2. ステップに従って進める
  3. Continue with site overwrite mode、I have read and accept all team & noticesをチェック
  4. Nextをクリック
  1. Applyをクリック
  2. Test Databaseをクリック
  3. Nextをクリック
  1. Nextをクリック
  1. Admin Loginをクリック
  2. ロリポップサーバーのID, PWでログインする(データベースがロリポップサーバーのものと入れ替わったので)
  1. ログインするとインストールに使用したファイルが削除される。
  2. ロリポップのWordPressとローカル環境のWordpressにDuplicatorプラグインを無効にする

不要なファイルを削除

  1. ローカルのapp/publicディレクトリを開く
  2. Finderで不可視ファイルを表示(shift + ⌘ + .
  3. .htpasswdは不要なので削除
  4. htaccess-{ランダムな文字列}-duplicator.bakは不要なので削除
  5. Finderで不可視ファイルを非表示(shift + ⌘ + .
  6. 移行完了!

まとめ

今回は、ロリポップのWordPress簡単インストールを使用し、同等の環境をLocalアプリを使用してローカルに作成する流れを紹介した。次回は、ロリポップサーバー <-> ローカル環境の同期方法を説明する。黒い画面になるが、文字化けを回避しデータベースを同期できる方法も説明する。

【更新】WordPressの本番サーバーとローカル開発サーバーの同期方法の記事を書いた!

この記事を書いた人

Takeo Tamura

療養中。フリーランス。Engineer 🇯🇵 Designer,Full-stack Developer. ❤️🧘‍♂️❤️🍶 ❤️ fashion