ロリポップ!サーバーに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をインストールする
サブドメインの設定
- ロリポップにログイン
- サブドメイン設定 > 新規作成

- 各項目を入力(公開フォルダは、サブドメイン名)
- アクセラレーターは、無効にする(アクセス制限を使うため)
- 作成をクリック

- ネームサーバー認証で、ムームードメインにログイン
- ネームサーバー認証をクリック
- 設定をクリック


ロリポップへのWordpressのインストール
- ロリポップにログイン
- サイト作成ツール > WordPress簡単インストール

- 各項目を入力
- 利用データベースは新規自動作成
- 検索エンジンによるサイトのインデックスを無効にする(公開前なので)
- 入力内容確認をクリック
- 承諾するにチェック
- インストールをクリック


独自SSLの設定
- セキュリティ > 独自SSL証明書導入
- ドメインを選択
- 独自SSL(無料)を設定する

- WordPressの管理画面にログイン(https://test2.webkei.dev/wp-admin/)
- 設定 > 一般
- URLをhttp -> httpsに変更
- 変更を保存

- インストール完了

アクセス制限の設定
- セキュリティ > アクセス制限
- 新規作成


- インストールしたディレクトリ名を入力
- ベージック認証用のID, PWを入力
- 作成ボタンをクリック

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

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

ローカル開発環境にWordPressをインストールする
Local(local by flywheel)のインストール
- Localのサイトを開く
- 画面右上の「DOWNLOAD」をクリック
- platformを選択
- 各項目を入力する
- GET IT NOW!!をクリック
- ダウンロードした、ファイルをクリックして、画面の説明にしたがってインストールする。


Local(local by flywheel)へWordPressをインストールする
- 画面左下の「+」ボタンをクリック
- ドメイン名を入力
- CONTINUEボタンをクリックする


- Customを選択、ロリポップ!の環境に合わせて、環境を設定する。
- PHP Versionは、7.4系を選択
- Web ServerはApacheを選択(ロリポップ!のハイスピード、エンタープライズプランは、Apache互換のLiteSpeedサーバーなので、Apacheを選択)
- MySQLは5系を選択
- CONTINUEをクリックする

- WordPressのログインユーザーを作成
- ADD SITEをクリックする

- インストール完了(
http://test2webkei.local/
でアクセスできるようになる) - ~Local Sites/test2webkei > をクリックすると、インストールディレクトリが開く、web rootは、
app/public
ディレクトリ - OPEN SITEで、WordPressの画面が開く
- ADMINクリックでWordPressの管理画面が開く

WordPressの日本語設定
- Settings > General をクリック
- Site languageで日本語を選択
- TimezoneでTokyoを選択
- Save Changesをクリック

- プラグイン > 新規追加
- WP Multibyte Patchで検索
- WP Multibyte Patchを今すぐインストール
- 有効化

SSLの設定
- Localを開く
- SSLの左のTRUSTをクリック

- WordPressを開く
- http -> httpsに変更
- 変更を保存
- httpsでサイトが表示できるようになる。(
https://test2webkei.local/
)

ロリポップサーバーから、ローカル環境へ移行する
文字コードについて
Duplicatorを使って、ロリポップサーバーから、ローカル環境へ移行すると文字化けが発生します。データベースの文字コードの違いロリポップ(utf8)ローカル環境(utf8mb4)があると思います。Duplicatorを使った移行の解決方法はわかりません。Duplicatorは最初1回だけ使って、移行したあとは、別の方法でロリポップサーバー <-> ローカル環境を同期しています。
もっと調べると解決方法があるかもしれません。
以下、データベースの文字コードを調べた結果です。
show variables like "chara%"
ロリポップ!サーバー
Variable_name | Value |
---|---|
character_set_client | utf8 |
character_set_connection | utf8 |
character_set_database | utf8 |
character_set_filesystem | binary |
character_set_results | utf8 |
character_set_server | utf8 |
character_set_system | utf8 |
Local
Variable_name | Value |
---|---|
character_set_client | utf8mb4 |
character_set_connection | utf8mb4 |
character_set_database | latin1 |
character_set_filesystem | binary |
character_set_results | utf8mb4 |
character_set_server | latin1 |
character_set_system | utf8 |
Duplicatorプラグインを使った移行
準備
- ロリポップのWordPressとローカル環境のWordpressにDuplicatorプラグインをインストールする
- Duplicatorを有効にする
- ロリポップのWordPressのWP Multibyte Patchプラグインを有効にする

ロリポップサーバーからデータをエクスポート
- ロリポップのWordPressで、Duplicator > パッケージを開く
- 新規作成ボタンをクリック

- ステップに従って進める
- 次へボタンをクリック

- 「はい。ビルドプロセスを続行します。」にチェック
- ビルドをクリック

- ダウンロード画面が表示される
- インストーラとアーカイブをダウンロード

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

ロリポップサーバーからローカル環境にデータをインポート
- ダウンロードした、インストーラーとアーカイブデータをローカル環境の
app/public
の直下に移動


- ブラウザを開き、https://{ローカルサーバーのドメイン}
/installer.php
にアクセスする - ステップに従って進める
- Continue with site overwrite mode、I have read and accept all team & noticesをチェック
- Nextをクリック

- Applyをクリック
- Test Databaseをクリック
- Nextをクリック


- Nextをクリック

- Admin Loginをクリック
- ロリポップサーバーのID, PWでログインする(データベースがロリポップサーバーのものと入れ替わったので)

- ログインするとインストールに使用したファイルが削除される。
- ロリポップのWordPressとローカル環境のWordpressにDuplicatorプラグインを無効にする

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


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