LOCALを使って本番環境のWordpressから検証環境を作る手順

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

直近でWordpress環境を編集する必要が出てきました。しかもコードレベルでの修正が必要になりそうで、本番環境しかない状態です。流石にいきなり本番環境を弄るのは怖すぎるので弄り倒せる検証環境を用意したいと思い模索していたところLOCALという存在を知りました。

今回は本番環境をそっくりそのままLOCAL環境にコピーする手順を備忘録的な感じで記載していきたいと思います。

# 本番WordpressやLOCALのバージョン
## Wordpress
ツールタブのサイトヘルスからWordpress、PHP、Webアプリケーション（ApacheとかNginxとか）、DBを確認することが出来ます。LOCALで検証環境を立ち上げるときに使用するので事前に確認しておきましょう。

![2024052203.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/8fe649ac-5960-5ffa-13e3-23309e0e896e.png)
![2024052204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/d9be29d1-e951-5203-9e3e-49a022a50009.png)
![2024052205.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/36897346-389d-3272-a9f0-725a8b41f136.png)

## LOCAL
今回はVersion 9.0.2+6676です。
バージョンによって微妙にレイアウトが違うように見えるので、ご認識おきください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/b8a1857b-7114-1fa1-c82f-be23370b7f58.png)


# 構築
## BackWPupからデータを取得
Wordpressの管理画面にログインしてBackWPupのバックアップを選択します。
※今回移行したいWordpressではこのプラグインを使用してバックアップを取得していましたが、取得したいファイルはどのプラグインだろうが、手動だろうが変わりないと思います。
最新版をダウンロードします。
![2024052201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/05d8958c-fa17-64e6-5419-b970f1c2e12d.png)

ダウンロードしたzipを解凍します。
以下のファイルは不要なようなので、別のディレクトリに退避するか削除します。

>backwpup_readme.txt
manifest.json
◯◯◯.pluginlist.◯◯◯.txt

退避した結果が以下となります。
![2024052202.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/9811523e-daed-98b1-ed29-d98c0b8e2769.png)

## LOCALのダウンロードと開発環境のデプロイ

LOCAL公式サイトは以下となります。ダウンロードします。

https://localwp.com/

環境を用意してLOCALを起動すると以下のような画面が表示されます。
右下の「+」を押下して環境を用意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/efce0179-33cf-f7a2-ffbe-20fb1e7789a1.png)
Create a new siteを選択してContinueを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/85baf471-7022-00d9-81ce-5c6dde8b1f35.png)
サイトの名前を設定します。今回はdemoとしました。Continueを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/b9060dbe-d455-1b6b-4f2a-4cd6cd99f51e.png)
PHPやDBのバージョンを設定します。Wordpressの管理画面で確認したバージョンに近いものか少し低いものを選択すれば大丈夫そうな気がします。この辺りは後から変更できますので、様子を見つつ対応していっても良いかと思います。今回は以下の設定としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/4dd36d14-bfb8-cb3f-cec0-be5195926084.png)
検証環境のユーザとパスワードを設定します。本番にあるユーザと同じ設定を入力したほうがいいという記載をどっかで見たので併せたほうが無難かもです。
![2024052206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/49d80acb-0a9d-46d6-7d27-aeea6a4e5fdf.png)
デプロイしていきます。ところどころでポップアップし、許可を求められるので許可していきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/f3f858f6-d750-3a25-a864-2c34f8dcc353.png)


## LOCAL環境の作りこみ
### DBの修正
Site domainを控えておきます。今回はhttp\://demo.local/となりますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/2507a7e4-6769-7b1e-4928-79397c3cb693.png)
Databaseタブを選択してConnectのOpen AdminerEvoを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/43d3bb14-68ff-51d1-d7a6-b4f29ca0f15b.png)
Webブラウザが起動し、以下のような画面が表示されます。
左上にあるインポートを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/c0945c00-1978-0f2c-481d-6a64c30ff2d9.png)
ファイルをアップロード欄のファイル選択を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/251da32f-9475-79cc-09e9-b2014c5f7bea.png)
Wordpressからダウンロードし、解凍したフォルダの中にsqlファイルがあるので、選択します。実行を押下します。
![2024052207.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/a9a67a65-94ab-e434-880c-8415b56b079e.png)
クエリーを実行しました。という文言が出力されることを確認します。
画面左にあるwp_optionsを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/55db601e-9cc7-54b4-79cc-5b696cb1c1df.png)
siteurlとhomeをSite domainで控えたURLに置き換えます。
![2024052208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/11c96630-38c0-4d4c-01ef-c1a5391fe045.png)

### configの修正
LOCALのGo to site folderを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/abcb7811-4148-2d4a-ef8b-a9ef49554cea.png)
explorerが開きます。appフォルダを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/a1a9da2e-7949-9ed3-ca5e-c5ffaa961469.png)
publicフォルダがあると思いますので、これを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/263972da-caca-e03a-a968-95e6415f736f.png)
中に色々入っていますが、削除するか別のフォルダに退避してください。私はappフォルダがあるところにtempを作成してそこに退避させました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/949ecd84-9b2e-ee8c-7539-c96922afbf58.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/d5e7f95f-16ed-947d-9df8-0492d3f286f2.png)
空になったpublicフォルダにWordpressからダウンロードし、解凍したファイルを全て移動します。
移動した後、wp-config.phpを開きます。
![2024052209.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/bd414162-98f6-63f2-409d-0b9de04090fd.png)

以下のように設定を変更します。
この辺りの情報がいまいちピンと来ていないのですが、移行元のWordpressがDBと一体型であればdatabase名とかhostnameとかはLOCALのDatabaseに記載のある通りで良いかもしれません。
また私のLOCAL環境ではユーザ・パスをroot/rootにすることでうまくいきました。移行元のままではだめでした。これはLocal側に移行する際に発生したものなのでしょうか・・・
debug trueはデバックしやすいようにしているだけです。
```wp-config.php
// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'local');

/** MySQL database username */
define( 'DB_USER', 'root');

/** MySQL database password */
define( 'DB_PASSWORD', 'root');

/** MySQL hostname */
define( 'DB_HOST', 'demo.local');

/** Database Charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '');

～中略～

define( 'WP_DEBUG', true );
```

## LOCAL環境へのテストアクセス
LOCALの右上にあるWP AdminやOpen Siteを押下します。
構築後初アクセスだと少々時間がかかるかもしれませんがWebブラウザが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/cc054922-02be-3191-4ad7-7aee08751b2e.png)
おおむね問題ないように見えるのですが、debug trueを有効化していることでエラーの内容が出力されます。
![2024052211.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/88f8a196-ac61-b3d5-7346-0eae598f9017.png)
![2024052210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/45e3af31-6bba-c3e7-d60f-d9ebcbae8a4b.png)

ChatGPTに適当にエラー内容をぶん投げてみます。どうもPHPのバージョンが問題の様です。
これはLOCAL環境が問題というよりは、私が今現在移行しているWordpress上で解決しなければならない問題なので、何も出ない人は何も出ないと思います。
いったん無視することも問題ないと思いますので、debug falseにして表示させないようにするか、LOCALでPHPバージョンを下げてもいいでしょう。

---

ChatGPT
この警告は、関数宣言内でオプションのパラメータが必須のパラメータの前に定義されているために発生しています。これは、PHP 8.0以降では非推奨となっているため、パラメータの順序を修正する必要があります。

具体的には、オプションのパラメータ`$avatar`が必須パラメータ`$id_or_email`の前にあることが問題です。この順序を修正するには、オプションのパラメータを必須パラメータの後に移動します。

---

今回は一旦debug falseにして無視することにします。
管理画面に移動して適当に更新が出来るか、リンクが正常に動いているかを確認し、問題なさそうであればLOCALでの開発にいそしんでいきましょう！