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

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

目的

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

概要

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

XAMPPのインストール

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

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

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

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

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

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

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

インストールを始める。

圧縮解凍を始める。

途中です。

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

ApacheとMySQLとProFTPDの起動

ウェルカム画面出る。旧XAMPPと比べシンプルすぎる。。。これは何かある。。。

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

プロセス３つとも動かす

イベントログを確認する

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

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

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

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

電源再投入時にXAMPPを起動する

HOW-TO-Guidesを見る

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

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

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

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

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

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

phpMyAdminを使ってDB設定

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

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

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

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

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

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

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

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

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

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

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

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

Check privilegesを押します。

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

WordPressインストール

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

wp-config.phpを開きます。

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

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

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

Log in ボタンを押します。

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

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

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

追記

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

この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/