非エンジニアのためのWordPress環境構築

## はじめに

テスト環境を構築するタスクを依頼され、「WordPressでテスト環境構築っていったい何をどうしたらいいの〜😱」という状態でしたが、当社のエンジニアの方にも相談しながら無事テスト環境構築から本番反映まで完了できました。

今後、WordPressでテスト環境を作るというタスクが発生した場合、スムーズにタスクを進められるよう記事に残すこととします。

## 目次
[1.テスト環境構築](#1テスト環境構築) <br>
[2.本番移行](#2本番移行)

## 1.テスト環境構築
### <font color="#FF623E">`テスト環境を構築する場所（ドメイン）を決める`</font>
テスト環境を構築できるドメインは主に下記の3パターン。AとCは新規か既存かの違いで、本番とは別のドメインという意味では同じ。
![アートボード 4-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/1b3c058e-3059-481a-84c1-1721427be74a.jpeg)

WordPressを実際に更新したことある方は、フォルダ構成を見た方がイメージ付きやすいかと思う。FTP接続したときに、フォルダの中は下記のようになる。
![アートボード 5-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/98d01323-8813-4c3a-a295-d8700e36e5d3.jpeg)

では、どの方法を選べばいいの？というところで、各方法のメリット、デメリットを見ていく。
![アートボード 6-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/bf1bb792-3c0a-4bf3-94d6-f44edac27c8e.jpeg)

**`A.既存ドメイン`**
ドメインを新しく買わなくてよいため、新たにコストが発生しない。申請や取得などしなくてよいため時間もかからない。

**→デメリットはアクセス制限をかけることでカバーできるため、実質でこれというデメリットはなく、メリットが大きい。もし、こちらで対応できるのであれば、既存ドメインで対応するのがおすすめ。**

**`B.サブドメイン`**
既存ドメインの一部として作成できるため、新たにドメインを購入する必要がない。また、複数テスト環境を作りたいときにサブドメインを使用すれば費用がかからず対応できる。

**→セキュリティリスクがあるので、本番直下ではなくAまたはCのように本番とは別のドメインでサブドメインを作成することを推奨する。複数テスト環境を作りたい場合など、AまたはCのドメインにサブドメインを複数作る合せ技ができる。**

**`C.新規ドメイン`**
既存で使用できるドメインがない場合は、新規ドメインを取得することになる。メリットは、既存ドメインにも当てはまるが本番環境とテスト環境のドメインを異なるものにすることで、環境の独立が図れる。

**→新規ドメインでテスト環境を作成することは、環境の分離や安全性を確保する上で有益だが、運用面での負担やコストが増えることも考慮する必要がある。時間もかかるためスケジュールを確認して、取得するまでの時間も考慮するのが良い。**

### <font color="#FF623E">`WordPressのインストール`</font>
どのドメインにテスト環境を構築するか決めたら、そのドメインにWordPressをインストールしていく。

WordPressをインストールは、ドメイン直下・ドメインの下層・サブドメインのいずれでもインストール可能。用途によって判断する。
![アートボード 8-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/7af616fd-a6f1-4ce3-abd1-d65d1d26d2a2.jpeg)
ドメインの下層や、サブドメインにWordPressをインストールすると、管理画面を分けることができる。なので、テーマやプラグインなど異なる機能をもたせることが可能となる。

インストールする先を決めたら、実際にWordPressをインストールする手順を説明していく。

![アートボード 9-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/f9af85c0-61f0-4516-8ccb-fb984dc88db3.jpeg)

![アートボード 10-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/3b2caf5c-4550-4ea3-9ab4-a8a088714fe6.jpeg)

![アートボード 11-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/f79911ec-38cd-4839-9a48-8ae0d164a98a.jpeg)

![アートボード 12-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/37422427-6920-4136-a94e-08930a7b135f.jpeg)

![アートボード 13-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/551e022f-1443-4075-a631-00e329afb76b.jpeg)

![アートボード 14-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/029778e8-73fc-4a80-b759-9f60fbaa6c2a.jpeg)

![アートボード 15-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/2814969e-f8c6-47ff-9841-d18af89d6fbe.jpeg)

ここまででWordPressのインストールは完了！下記からはセキュリティのためにアクセス制限をかける手順について説明する。

![アートボード 16-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/d67830b4-af46-4929-a585-3164aba7a521.jpeg)

![アートボード 17-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/1a10659a-e940-4100-9067-e53671665021.jpeg)

![アートボード 18-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/b149d315-bf10-4a2d-a637-2bed84f5685b.jpeg)
これでアクセス制限までかけることができた。

### <font color="#FF623E">`テーマのインストール`</font>
テーマをインストールする場合は、下記作業が必要。ここまでは、エックスサーバー内の作業だが、ここからはWordPressの管理画面からの作業となる。
![アートボード 20-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/5f7b47da-0de6-40e7-99a0-44383e777712.jpeg)

![アートボード 21-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/a3fc797d-9e2a-4aa1-9d06-96af850f6e5a.jpeg)
**親テーマのアップデートに対応**: 親テーマがアップデートされると、その変更が子テーマには影響を与えない。もし親テーマを直接編集してしまうと、アップデート時にその編集内容が上書きされてしまう可能性がある。子テーマを使うことで、親テーマのアップデートを安全に行いながら、カスタマイズした部分はそのまま残すことができる。

**安全性**: 子テーマで変更を加えることで、親テーマのファイルに直接手を加えずに済む。これにより、親テーマの動作や構造が壊れるリスクを避けることができる。万が一、子テーマで何か問題が発生しても、親テーマには影響を与えない。

**カスタマイズの柔軟性**: 子テーマでは、親テーマのスタイルや機能を引き継ぎつつ、必要な部分だけを上書きしたり追加したりできる。これにより、テーマの機能を無駄なくカスタマイズすることが可能。

**簡単に変更を元に戻せる**: 子テーマで行った変更は、親テーマを更新しても失われない。また、子テーマを無効にすれば、簡単にカスタマイズ前の状態に戻すことができる。

**管理がしやすい**: 子テーマを使うことで、テーマのカスタマイズ部分を一元管理できる。特に複数人でサイトを運営している場合、子テーマを使っておけば、カスタマイズ内容が明確に分かりやすくなり、後からの変更やメンテナンスが楽になる。

## 2.本番移行

### <font color="#FF623E">`WordPressのインストール`</font>
![アートボード 1-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/17164dac-cbf7-4bb1-b694-73564cc2b81e.jpeg)

<font color="#FF623E">**DB情報をメモしておくことが、本当に重要！！**</font>

### <font color="#FF623E">`データの移行`</font>
![アートボード 25-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/25f53507-97b2-4fe0-895d-8ac3c2aa19e6.jpeg)

![アートボード 26-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/a621ede3-de5f-426e-a75b-72ef949a7d55.jpeg)
▲ここの作業で本番に移行する用のテスト環境のデータをダウンロードできる！

![アートボード 28_1-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/56b4cc36-da77-4724-acf2-6cb4498c9e7b.jpeg)

![アートボード 28-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/c48d6041-2643-4462-a52a-030d20441ca4.jpeg)

![アートボード 29-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/1b7852b7-84b6-4712-82f6-813664878b80.jpeg)

![アートボード 30-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/6e97d202-f5c6-4492-9c89-f90c2061d353.jpeg)

![アートボード 31-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/ea111813-9d58-4316-8a8f-cff8065a6b81.jpeg)
▲ここの作業で本番がテストデータで上書きされる！データベースも上書きされるので、2-aでデータベース情報メモし忘れた場合は、インポートする前に確認しておこう！

![アートボード 32-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/23e4ea13-8a23-40e9-9a14-03162bd887c6.jpeg)

![アートボード 33-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/7a7b0831-950b-44b2-a060-6fa16f790d1a.jpeg)

![アートボード 34-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/b76fa8d7-c4fa-4177-9e78-c03567867b84.jpeg)

![アートボード 35-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/a3d862dd-0390-4746-b866-fb8908c4d1d2.jpeg)
ここまでで、テスト環境を本番に移行する作業は完了！

### <font color="#FF623E">`本番の設定`</font>
テスト環境のデータで上書きされたので、セキュリティも上書きされテスト環境と同じものになっている。それぞれ本番用に設定し直すのが良いだろう。
![アートボード 37_1-100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625260/eface436-f21a-4e4a-8593-b4ce580c6dcb.jpeg)

## 最後に
不安なことがあれば、システムの専門家に相談するのが一番ですが、この記事を通して何をするのか知っている状態を作ることができたならば嬉しいです！