macOS XAMPPを用いてWordPressのローカル開発環境をつくる（英語環境版）

日本語環境版を作るにはこちら https://qiita.com/imaicom/items/f4b2a6e1b6a636b56542

#目的
- レンタルサーバでよく使われている PHP7.4 のローカル開発環境をつくる
- M1マックで爆速でWordPressを使いたい（これだよ！）
- 遅いレンタルサーバを使ってネット経由でサイトのデバッグしたくない（切実）
- 環境構築を優先し、セキュリティは緩く設定する（使い勝手を最優先）
- XAMPPの最新版を使ってみる（インストールが簡単そう）
- WordPressの最新版を使う（なんでも最新）

#概要
 1. XAMPPのインストール
 1. ApacheとMySQLとProFTPDの起動
 1. 電源再投入時にXAMPPを起動する
 1. phpMyAdminを使ってDB設定
 1. WordPressインストール

#XAMPPのインストール

https://www.apachefriends.org/download.html にて PHP7.4 の最新版をダウンロードする。7.4の最新版の7.4.19 / PHP 7.4.19 Download (64 bit) 161 Mbをクリック。

![Screen Shot 2021-06-05 at 10.41.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/308eb55b-e3c0-05c7-ae9f-bc4f2bc59876.jpeg)

Downloadフォルダを開き、ダウンロードしたインストーラ「xampp-osx-7.4.19-0-installer.dmg」を開く。

![Screen Shot 2021-06-05 at 10.39.29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/70bf6e8c-df7c-f14c-9041-b87c7fa20263.jpeg)

ウインドウが開いたらXAMPPのアイコンをドラックしてアプリケーションフォルダにコピーする。 

![Screen Shot 2021-06-05 at 10.34.23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/9b9cf3ee-5784-2516-059a-d22b49f0e8f3.jpeg)

アプリケーションフォルダを開き、XAMPPのアイコンをクリックして起動

![Screen Shot 2021-06-05 at 10.36.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/014c9676-e0b7-62f0-4f3f-e053673e95ed.jpeg)

なぜかXAMPP Core Filesがチェックされていないので、チェックする。

![Screen Shot 2021-06-05 at 10.38.16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/77eb0cfe-9e70-091e-53d3-ea795bd292a4.jpeg)

アプリケーションフォルダにXAMPPフォルダを別に作りインストールする。

![Screen Shot 2021-06-05 at 10.42.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/0b2dfff8-c30a-fea8-0fa7-675935f9a09a.jpeg)

ウェブに誘導される Learn more abort Bitnami for XAMPPのチェックボックスを外す

![Screen Shot 2021-06-05 at 10.43.48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/16ccaa17-ef78-2910-84bd-3e803ab323a9.jpeg)

インストールを始める。

![Screen Shot 2021-06-05 at 10.45.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/bcfb3715-0369-8c96-a65d-f5725784cb12.jpeg)

圧縮解凍を始める。

![Screen Shot 2021-06-05 at 10.46.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/e1904cd7-e369-9283-b119-52b3faa1300e.jpeg)

途中です。

![Screen Shot 2021-06-05 at 10.47.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/a5bcc21b-e6b5-828a-aa59-eac4d2734f8e.jpeg)

終わったのでFinishボタンを押す。

![Screen Shot 2021-06-05 at 10.48.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/eacc653a-38fd-8a67-1695-0e7d69db4eba.jpeg)

#ApacheとMySQLとProFTPDの起動
  
ウェルカム画面出る。旧XAMPPと比べシンプルすぎる。。。これは何かある。。。

![Screen Shot 2021-06-05 at 10.49.40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/9a9957e7-61d9-a4c2-97eb-03e5d9d0422c.jpeg)

Apacheだけ動いていることを確認

![Screen Shot 2021-06-05 at 10.50.25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/fa040181-7a7c-fb0e-b3b2-082bdaa2b083.jpeg)

プロセス３つとも動かす

![Screen Shot 2021-06-05 at 10.51.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/dc03e6dc-3bad-0dfd-589b-4c5c4bddf6e1.jpeg)

イベントログを確認する

![Screen Shot 2021-06-05 at 10.52.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/d1507ae4-abc5-db51-b42c-08f4d5635fe4.jpeg)

ブラウザを確認する。アクセス先は「localhost」「127.0.0.1」でも大丈夫。

![Screen Shot 2021-06-05 at 10.53.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/8fabdbeb-a863-4895-b827-ee6560e11168.jpeg)

ブラウザ上部のPHPInfoタブを押してみる。

![Screen Shot 2021-06-05 at 10.54.03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/cc59cec3-58db-db06-adef-66f02a7fdcaf.jpeg)

ブラウザ上部のphpMyAdminタブを押してみる。

この位は。。。できて当然だ。。。ここから先が大問題。。。

#電源再投入時にXAMPPを起動する
![Screen Shot 2021-06-05 at 11.07.01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/160d3cce-1777-0866-43fb-b53241bcd181.jpeg)

HOW-TO-Guidesを見る

![Screen Shot 2021-06-05 at 11.09.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/80d91e82-f516-b7c9-01b6-33bdb1291214.jpeg)

ページごとグーグル翻訳をかける。一番下の「XAMPPの自動起動」が大事です。

「XAMPPの自動起動　デフォルトでは、システムを再起動するたびに XAMPP またはそのコンポーネントを手動で起動する必要があります。ただし、システムの起動時に XAMPP コンポーネントが自動的に起動するように構成することもできます。」こりゃ面倒なことが書かれている。でも、しょうがない。

![Screen Shot 2021-06-05 at 11.15.49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/9690b3c5-07d7-efe2-a1ba-b97a39215fa9.jpeg)

ターミナルを起動します。ここからターミナル慣れしてない人は。。。諦めて。。。ください。。。残念。。。

```
cd /Library/LaunchDaemons
sudo vi org.apachefriends.xampp.plist
```
iを入力した後。。。以下をペーストします。

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Label</key>
    <string>org.apachefriends.xampp</string>
    <key>ProgramArguments</key>
    <array>
      <string>/Applications/XAMPP/xamppfiles/xampp</string>
      <string>start</string>
    </array>
    <key>UserName</key>
    <string>root</string>
    <key>RunAtLoad</key>
    <true/>
    <key>OnDemand</key>
    <false/>
  </dict>
</plist>

```
ESCキー2回、シフトキー＋ZZで保存します。

```
ls
more org.apachefriends.xampp.plist
```

にてちゃんとファイルが作成されていることを確認しましょう。パソコンを再起動します。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3134393338372f64313530376165342d616263352d646235312d623432632d3038663464353633356665342e6a706567.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/1cd6a43f-e114-e3ac-cf07-fd10507f8e12.jpeg)

ブラウザに「localhost」と入力して動作を確認しましょう。ここで一旦コーヒーブレークしましょうね。疲れたと思います。

#phpMyAdminを使ってDB設定

だんだんと難しくなってきました。。。でも、がんばるしかないです。

![Screen Shot 2021-06-05 at 11.48.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/4d0a13ea-b1b0-7592-525a-fd7ca73e1907.jpeg)

まずは、ブラウザから「localhost」を入力して、見慣れた画面を出します。右上のphpMyAdminタブを押してみましょう。

![Screen Shot 2021-06-05 at 11.49.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/1db54e2b-f74a-e758-a85b-c8476f71eff0.jpeg)

この画面は、重要な情報が示されています。データベースとして既に５つ作られていること。文字情報は、UTF-8 Unicode (utf8mb4)が選択されていること。そして、一番大事なこと、データベースの所有者が「root@localhost」であることです。ユーザ名がrootであり、データベースのホストマシンがlocalhostであることを示します。いいですか。これは重要なことです。理解してない人は、ここから先にはすすめません。ブラウザを閉じましょう。

![Screen Shot 2021-06-05 at 11.57.20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/c27713a5-6026-17f3-296c-258deab1f39e.jpeg)

いじくっていると重要な情報をみたくなることがあります。その時は、左上のここを押しましょう。また見られます。ふー。

![Screen Shot 2021-06-05 at 12.00.55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/e46f85f9-bf6c-4fdb-7d95-596033dbaf42.jpeg)

先に進めます。ユーザアカウントタブを押します。データベースを使えるユーザが並んでいます。今回の場合は、rootという全知全能のユーザを見てみましょう。

![Screen Shot 2021-06-05 at 12.04.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/54f874d1-eeea-f4c7-bde4-1c9e10f7c3fe.jpeg)

ここでも先ほど重要だと言った内容が繰り返されています。データベースを使えるユーザ名はrootであり、ホストマシンが127.0.0.1(localhost)であることを示しています。

![Screen Shot 2021-06-05 at 12.06.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/78f9ecf5-6fea-f39e-5bab-355c3d60c66a.jpeg)

Change passwordボタンを押します。パスワードを設定したいときには、設定しましょう。つまり。。。データベースの全知全能のユーザのパスワードは空っぽであることを示しています。パソコンの中にあるデータベースなので、パスワード設定は不要でしょう。セキュリティを上げると使いにくくなるんだよ。空でいいんですよ。今回は。

次に備えて、WordPressで使うデータベースを作っておきましょう。

![Screen Shot 2021-06-05 at 12.13.06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/7dae88a8-23ca-872f-4735-f2bf986bec6c.jpeg)

Databasesタブを押します。WPと入力して、Createボタンを押します。

![Screen Shot 2021-06-05 at 12.15.12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/343f0b87-9f60-890c-4a6f-dc5450ab5593.jpeg)

WPというデータベースが作成されました。テーブルを作ろうという雰囲気になってます。後でWordPressのインストーラが勝手に作るため、空っぽのテーブルのままでよいです。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3134393338372f63323737313361352d363032362d313766332d323936632d3235386465616231663339652e6a706567.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/3db4571c-0acf-c64a-1056-9be3ccadc36f.jpeg)

左上のphpMyAdminを押します。Databasesタブを押します。

![Screen Shot 2021-06-05 at 12.19.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/e34c725b-2c4d-e51f-8b3a-2b3cfd7c1f2f.jpeg)

WPというデータベースが作成されていることがわかります。

![Screen Shot 2021-06-05 at 12.21.01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/69b7cd78-e3c8-42fe-cd2a-2af72971703f.jpeg)

Check privilegesを押します。

![Screen Shot 2021-06-05 at 12.22.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/093ee975-27c6-d558-dd1d-de7243292aa5.jpeg)

ここでも重要な情報が表示されています。確認します。サーバは localhost であること。データベース名は WP であること。データベースのユーザ名は root であることです。これらの情報があとのインストールで必要になってきます。

#WordPressインストール

XAMPPには、特別に作られたWordPressのインストーラがあるような雰囲気で書かれています。でも、特別なインストーラが見つからないので、ダウンロードしましょう。https://wordpress.org/download/ 現在のバージョンは 5.7.2 でした。
今のmacOSだと、ZIPファイルなので自動的に解凍されています。

![Screen Shot 2021-06-05 at 12.58.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/a6bebae7-5c76-6f11-ef76-8b4b78e8c74c.jpeg)

wordpressフォルダを確認してます。この後、apacheのデフォルトフォルダに転送します。ProFTPDというFTPサーバが動いています。ただ、FTPを使って転送する苦労はしたくないので、ドラッグアンドドロップで移動します。

![Screen Shot 2021-06-05 at 13.01.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/54a86e82-dd52-909d-c20f-84598e3bedbf.jpeg)

アプリケーションフォルダにXAMPPというフォルダがありますので開きます。

![Screen Shot 2021-06-05 at 13.03.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/ac7492d5-3f8b-c357-7aa6-d3e1a219b6ce.jpeg)

apacheのデフォルトフォルダである htdocs フォルダが見えています。htdocsフォルダのアクセス権がキツイので外していきます。xamppfiles フォルダを開きます。

![Screen Shot 2021-06-05 at 13.05.23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/90fade53-3fee-cd70-9475-0fee7ed1d80a.jpeg)

htdocsフォルダを指定したあと、コマンドキーとIを押します。

![Screen Shot 2021-06-05 at 13.07.26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/f1288217-0067-c80a-f429-57d7dd56f0a1.jpeg)

これだと読めても書き込みすることができないので、書き込む権利を追加します。

![Screen Shot 2021-06-05 at 13.09.00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/974e8bc2-2acd-9a98-62eb-144ce46c49c1.jpeg)

鍵マークを押して、パスワード入力します。それから、Writeオプションを入れます。

![Screen Shot 2021-06-05 at 13.10.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/1c179577-a416-532c-aeb6-ab387d8026c7.jpeg)

wordpress フォルダを htdocs フォルダに入れます。

![Screen Shot 2021-06-05 at 13.13.12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/e59d6c0f-bd1e-6900-9282-1ac40db60579.jpeg)

ブラウザから、http://localhost/wordpress/ にアクセスします。Let's go!ボタンを押します。

![Screen Shot 2021-06-05 at 13.14.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/20eeb1ed-0c99-bae6-964a-4fb8fc086144.jpeg)

さて、あともう少しです。データベース設定で、細かく伝えてきた内容の最終試験ですね。

![Screen Shot 2021-06-05 at 13.16.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/2003a219-8611-1367-f644-f8cb3ee4dedb.jpeg)

データベースは既につくりましたので、その名前を入れます。WP です。データベースのユーザ名は root です。パスワードは空っぽ。ホストは localhost 。テーブル作成の頭につく接頭語は wp_ としました。

![Screen Shot 2021-06-05 at 13.19.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/295defc2-78a1-be17-1ec9-e4b60f365846.jpeg)

うまく行ったと思ったでしょ。世の中甘くない。。。またまたエラーです。でも大したことない。読めばわかる。wp-config.php ファイルが作成できないよというエラーです。

![Screen Shot 2021-06-05 at 13.21.36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/44512165-8e37-4b9b-7555-f4d5261b0858.jpeg)

htdocsフォルダの中の、WordPressフォルダを開きます。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3134393338372f39346138666239312d646639352d383037302d626436652d3561343533666538396261362e6a706567.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/93baeac9-c8d0-f98d-393b-5a23bdccf8e8.jpeg)

index.phpを選んで、コマンド＋Ｄキーを押します。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3134393338372f31376635353464632d366261332d626166332d353064382d6364643238313932636664612e6a706567.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/3a9aa138-04ae-3e5c-0a49-c985ae67d4a6.jpeg)

ファイル名を wp-config.php と修正します。

![Screen Shot 2021-06-05 at 13.25.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/f343805a-ae1c-e1ff-5adf-987b1b37c441.jpeg)

wp-config.phpを開きます。

![Screen Shot 2021-06-05 at 13.27.49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/8964982b-68a9-e087-65b5-7654b4bdb05b.jpeg)

wp-config.phpの中身を、このように入れ替え保存します。

![Screen Shot 2021-06-05 at 13.27.49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/8964982b-68a9-e087-65b5-7654b4bdb05b.jpeg)

Run the installationボタンを押します。

![Screen Shot 2021-06-05 at 13.28.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/e5abe95e-ad5e-1fdc-132f-b8a65c100c05.jpeg)

サイトのタイトル、WordPressユーザ名、WordPressパスワード（複雑なパスワードを入れないと先に進めません）、WordPressユーザの電子メールアドレスを入れます。非常に重要な情報なので、画面コピーを取っておきましょう。Install WordPress ボタンを押します。

![Screen Shot 2021-06-05 at 13.35.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/eef9d520-e867-1c8c-a568-d7a6c24f7ae3.jpeg)

Log in ボタンを押します。

![Screen Shot 2021-06-05 at 13.36.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/8dd1eda4-a227-b426-c2e7-15ad463b1643.jpeg)

先ほど入力したWordPressユーザ名、WordPressパスワードを入力します。Remember Meチェックボックスを入れておくと便利です。

![Screen Shot 2021-06-05 at 13.38.48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/ad7d99a5-d894-e5c4-8e07-e55f80522136.jpeg)

ようやく使い慣れたWordPressがローカル環境で動き始めました。コーヒーブレークしましょうね。とてもじゃないが。。。大変でしょう。このドキュメントなしで作れますか？　サーバのことが完全に理解できていないと作れません。

今回作ったローカル環境のWordPressへのアクセス先は、次のとおりです。ブラウザ閉じてもご安心ください。
http://localhost/wordpress/wp-admin/

#追記

![Screen Shot 2021-06-05 at 14.42.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/1ab79136-b458-9080-f98a-e1acaee0f40d.jpeg)

これをダブルクリックすると、

![Screen Shot 2021-06-05 at 14.42.23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149387/6fa45e4c-2536-3592-7e86-a891fc522261.jpeg)

このXAMPPの設定画面が出ます。今でもよくわからないことの１つ。データベースの停止ができません。この状態でデータベースは実は止まってません。原因は今のところ不明です。

#追記
https://www.apachefriends.org/download.html の 7.4の最新版の7.4.20 / PHP 7.4.20 Download (64 bit)を使うと、phpMyAdmin 5.1.1の最新版が含まれているため、手間がかかりません。 https://www.phpmyadmin.net/news/2021/6/4/phpmyadmin-511-released/