WordPressのローカル開発環境の作り方（Localアプリ＋ロリポップ編）

  • 投稿日
  • 更新日
  • 著者 Takeo Tamura
  • カテゴリー WordPress

ロリポップ！サーバーに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が設定されたターミナルを立ち上げることができるのも便利。

Local
Local WordPress development made simple on Local…
localwp.com

前提条件

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

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

サブドメインの設定

  1. ロリポップにログイン
  2. サブドメイン設定 ＞ 新規作成
  1. 各項目を入力（公開フォルダは、サブドメイン名）
  2. アクセラレーターは、無効にする（アクセス制限を使うため）
ロリポップでアクセス制限をする場合は、アクセラレータをOFFにする | WEBKEI.dev
公開前のサイトなど、アクセス制限（ベーシック認証）した場合、アクセラレータをOFFにしないと、アクセス制限が有効にならない。
webkei.dev
  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のサイトを開く
Local
Local WordPress development made simple on Local…
localwp.com
  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は最初１回だけ使って、移行したあとは、別の方法でロリポップサーバー <-> ローカル環境を同期しています。

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

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

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の本番サーバーとローカル開発サーバーの同期方法の記事を書いた！

WordPressの本番サーバーとローカル開発サーバーの同期方法（WP-CLI＋Localアプリ＋ロリポップ編） | WEBKEI.dev
開発中、公開後のロリポップサーバー ローカル環境の同期方法を紹介する。僕は、開発中のテーマやプラグイン、アップロードしたファイルの同期は、FTPで、データベースの…
webkei.dev
LOCAL ロリポップ！

この記事を書いた人

Takeo Tamura

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

記事一覧