MAMPを使用して、wordpressの環境構築を行う

### はじめに

wordpressがPHPで動いていることから、MAMPを使用してwordpressの環境構築を行なってみたので備忘録として残します。

### 今回使用するプロジェクトディレクトリを作成する

任意の場所に、あらかじめプロジェクトディレクトリを作成しておきます。

### MAMPのインストール

公式からダウンロードする。
※M１チップのAppleを使用しています。
https://www.mamp.info/en/mamp/mac/

![スクリーンショット 2024-01-27 13.00.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/44fffd5f-eb95-7928-5125-3584515dd677.png)

ダウンロード→ダウンロードしたファイルをクリック→上記のようなインストーラーが立ち上がります。
同意やインストール先を聞かれるので「続ける」をクリックし、インストールは完了です。

あらかじめ作成しておいた、プロジェクトディレクトリにMAMPを移動します。


### MAMPを起動する

![スクリーンショット 2024-01-27 13.05.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/bd797916-5671-0cd9-c456-876f7562c295.png)

インストールしたMAMPを起動すると上記のような画面が開かれます。

:::note info
・Document root
・web server
・PHP version
この3つを設定することができます
:::

左上の歯車マークをクリックすると、設定画面が開かれます。

![スクリーンショット 2024-01-27 13.10.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/c20b2dfe-ed2f-6d07-8ff8-6d1ebd87ef40.png)

ここでそれぞれの設定を行なえます。

### wordpressの入手

wordpressの公式からダウンロードします。
※右上に「wordpressを入手」とあるのでクリックします。
https://ja.wordpress.org/

ダウンロードが完了すると、.zipファイルがフォルダにあるので開きます。
開くとwordpressのソースや設定ファイル一式が入ったディレクトリが表示されます。

:::note info
wordpressディレクトリをデスクトップに移動し、使用する度に複製すると便利です。
:::

入手したwordpressディレクトリの名前を任意のものに変更し、**MAMP/htdocs**配下に配置します。

### httpd-vhosts.confファイルの編集

```
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/environment/mamp-wordpress/MAMP/htdocs/local_sample_wordpress"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<Directory "/environment/mamp-wordpress/MAMP/htdocs/local_sample_wordpress">
  order deny,allow
  allow from ALL
</Directory>
```

### MAMPのデフォルトのドキュメントルートを試しに変更してみた（結果としてエラーになりました）

:::note info
デフォルトの設定だと、
Mac → Application/MAMP/htdocs
Windows → C:\MAMP\htdocs
:::

このデフォルトの設定を変更するには、MAMPの歯車マークの設定からでは変更できなかったので、以下の設定ファイルを変更してみます。

```MAMP/conf/apache/httpd.conf
#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
# MAMP DOCUMENT_ROOT !! Don't remove this line !!
DocumentRoot

// 以下のデフォルトパスを任意のパスに変更します
"/environment/mamp-wordpress/MAMP/htdocs/local_sample_wordpress"

#
# This should be changed to whatever you set DocumentRoot to.
#

// 以下の行も、上記のドキュメントルートと同様変更します。
<Directory "/environment/mamp-wordpress/MAMP/htdocs/local_sample_wordpress">
    Options Indexes FollowSymLinks
    AllowOverride All　→ ここはデフォルトだとNoneになっていたのでAllに変更してみました
</Directory>
```

このように変更すると、MAMPのドキュメントルートが変更されて反映されているのが確認できました。

![スクリーンショット 2024-01-27 15.58.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/a2faedcf-1b36-96e6-e527-46003f630bd8.png)

:::note alert
変更は反映されましたが、apacheの再起動を行ったら、
Apache couldn't be started. Please check your MAMP installation and configurati
apacheが起動できずlocalhostも404エラーになっていました。
:::

ここは別記事にて、解消できるか検証してみます。

### Webサーバーの起動

:::note warn
あらかじめWebサーバーを立ち上げている状態で、先ほどのhttpd.confファイルを変更した場合、Webサーバーを再起動させてください。
:::


MAMPの右上の「start」をクリックすると、Webサーバーが立ち上がり、ブラウザ上に画面が表示されます。
開いた画面の下に進むと以下の画面が表示されます。

![スクリーンショット 2024-01-27 13.26.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/2456dcdb-c4a9-e73d-a5de-ab23bd711820.png)

MySQLの項目をクリックすると、phpMyAdminへ遷移できるリンクが表示されるので遷移します。

### DBを作成する

:::note info
wordpressはDBを使用して動作するようになっているため、DBを作成するのは必須です。
:::

Webサーバーを起動したら、phpMyAdminへアクセスします。
http://localhost:8888/phpMyAdmin/
※必ずしもphpMyAdminを使用してDBを作成しなくてはいけないわけではないです。ここはお好みで。

![スクリーンショット 2024-01-27 14.41.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/38ea9e2e-177f-a45f-c50a-0dc00128adae.png)

「新規作成」をクリックすると、

![スクリーンショット 2024-01-27 14.44.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/80a2cea2-8f12-65ab-367f-2d4e6bfc9783.png)

このような画面が表示されるので、任意のDBの名前と照合照準を設定します。「作成」をクリックして作成します。
左のメニューバーに作成したDBが表示されます。

:::note warn
今回は、環境構築→初期のページ表示のみなのでDBへインポートは行いません。
:::

### wordpressの設定

wordpress内にある、**wp-config-sample.php**ファイルを**wp-config.php**にリネームし、以下のように編集します。

```wp-config.php
// ** Database settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'local_sample_wordpress' ); // phpMyAdminで作成したDB名に変更

/** Database username */
define( 'DB_USER', 'root' ); // 変更

/** Database password */
define( 'DB_PASSWORD', 'root' ); // 変更

/** Database hostname */
define( 'DB_HOST', 'localhost' ); // デフォルトのまま
```

変更後、MAMP Webサーバーを再起動し、「My Website」へ遷移するとwordpressの言語選択画面へ遷移します。

![スクリーンショット 2024-01-28 14.53.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/26069824-a443-4a58-9bac-46fe08653d5c.png)

言語を選択したら、「次へ」をクリックします。

![スクリーンショット 2024-01-28 14.55.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/84012441-490f-4f83-d09a-545446aa5cf3.png)

wordpressの設定画面へ遷移するので情報を入力します。
情報入力が終わったら、インストール→完了ページが表示されるので「ログイン」へ進みます。

![スクリーンショット 2024-01-28 14.59.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/145705af-ab35-c506-7e39-bd19fdfc0284.png)

![スクリーンショット 2024-01-28 15.05.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/50cf13a8-4d15-b31b-885e-15c6048452e8.png)

この設定画面へ遷移できたら、wordpressの設定は完了です！

### phpMyAdminにsqlファイルをインポートする

任意の場所で、hello_world.sqlファイルを作成します。

```hello_world.sql
CREATE TABLE hello_world (
    text VARCHAR(255)
);

INSERT INTO hello_world (text) VALUES ('Hello, World!');
```

作成したsqlファイルをwordpressディレクトリ内に移動します。
※ここは移動しなくても大丈夫ですが、まとめたかったので移動しました。

phpMyAdminを使用して、sqlファイルをインポートします。

![スクリーンショット 2024-01-28 20.18.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3513569/7e6ddd01-e69a-f486-65f9-57549096b3db.png)

インポートが成功すると上記のように表示されます。

### カスタムテーマを作成する

また実施したら更新します。